Map

You have to go through a three-step form wizard to enable this Control, i.e., Design, API & Advance. Let’s explain these steps below:

1st Step – Design

1. Database Field Name (mandatory): These are the attributes of the form
2. Label Name (mandatory)
3. Column Width
4. Map Height (mandatory)
5. Marker Clickable: Yes or No
6. Marker Draggable: Yes or No
7. Open Info Window: Yes or No
8. Marker Visible: Yes or No

2nd Step – API

1. Data
1. Choose Data Source: Select data source from the following AI, HTTP, Workflow, No SQL or RDBMS
   1. HTTP
      1. Data Connection
      2. Method (mandatory): Select method from the following GET, PUT, POST, PATCH, DELETE or POCO
      3. API URL (mandatory)
      4. Query Parameters
         1. Key
         2. Value
         3. Query Variable
         4. Select Type
      5. Headers
         1. Name
         2. Value
      6. Others
         1. Enable raw query
2. Enable Encryption
3. Response Attribute
4. Latitude Field
5. Longitude Field
6. Data Field for Marker Info
7. Static Data Source
   1. Lat
   2. Lng
   3. Label
   4. Title
   5. Clickable
   6. Draggable
   7. Open Info Window
   8. Visible
8. Paging Type: Server Side or Client Side
   1. Server Side
      1. Page From Param
      2. Page Size Param
9. Page Size
10. Map With Data Model Property

2. Mapping
1. Load Card by Form UI: This is used to configure card grid using a Custom Card design
   1. Form Id: Select option from the dropdown menu
   2. Hide Default Border
   3. Horizontal Alignment: Choose alignment from the following Left, Right, Center, Between or Around

2. Card Type: There are certain cards designs to choose from like List, Photo, Backdrop, Large, Profile, Contact, Product, Dynamic, etc.
3. Field Mapping: Click on “Add New” button depending on how many fields you want to map in the grid based on requirement. And click the refresh button to reload the API response. After that start mapping following fields:
   1. Binding
      1. Label
      2. Data Field: From API
      3. Data Type: Choose data type from the following None, Email, Date, Title, SubTitle, Image, Header Image, etc.
      4. Text Color: Select option from the dropdown menu
   
   2. Web View
      1. Label Option: Select label option from the following Name Only, Name & Icon, Icon Only or None
      2. Disable Word Wrap
   
   3. Mobile View
      1. Label Option: Select label option from the following Name Only, Name & Icon, Icon Only or None
      2. Number of Line
      3. Mobile Color
      4. Hide in Mobile
      5. Font Size
      6. Is Font Bold
      7. Is Font Italic
   
3. Action
1. Action Button View at: Popover Or Footer
   1. Footer
      1. Action Button Position: Select option from the dropdown menu
2. Actions: Click on “Add New” button depending on how many actions you want to configure on the card based on requirement. Then configure the following details:
   1. Action
      1. Button Text
      2. Button Type: Select option from the dropdown menu
      3. Action Type: Choose action type from the following Sidebar, New Tab, Same Tab, Popup Window, Submit, Submit & Redirect, etc.
      4. Primary Key Field Name
      5. Redirect URL
   
   2. Web View
      1. Label Option: Choose label option from the following Name Only, Name & Icon or Icon Only
      2. Web Icon: Select option from the dropdown menu
   
   3. Mobile View
      1. Label Option: Choose label option from the following Name Only, Name & Icon or Icon Only
      2. Mobile Icon: Select option from dropdown menu
   
   4. Advance
      1. Action: Choose action from the following Hide, Show, Enable or Disable
      2. Add Rule
         1. API Field
         2. Operator
         3. Value
         4. Action
         5. Is Value From DataModel
            1. Model Value From Another Form
   

3rd Step – Advance

1. Design
1. Marker Title (mandatory)
2. Marker Label (mandatory)
3. Marker Icon URL (mandatory)

2. Others
1. Show Sidebar Card
2. Show Search Bar
3. Show List
4. Enable Polygon
   1. Polygon Mapping Field
5. Default Values
   1. Default Zoom For Map
   2. Default Zoom for Search Location
   3. Latitude
   4. Longitude

Click “Confirm” and “Map” control is configured.