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): Defines the name of the database field to which the component's data will be mapped and stored.
  2. Label Name (mandatory): Specifies the display name or title for a field or control in the user interface.
  3. Column Width: Specifies the width of a column in a layout or grid system, allowing control over how much space the column occupies relative to others.
  4. Map Height (mandatory): Specifies the height of the map display, ensuring that the map appears with a defined vertical size.
  5. Marker Clickable: Indicates whether the map marker is clickable (Yes or No), allowing user interaction with the marker.
  6. Marker Draggable: Indicates whether the map marker can be dragged to a new location (Yes or No).
  7. Open Info Window: Defines whether the info window associated with the marker is automatically opened (Yes or No).
  8. Marker Visible: Determines whether the marker is visible on the map (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: A data source type for retrieving data through HTTP requests.
        1. Data Connection: The configuration used to establish a connection to the data source.
        2. Method (mandatory): Select method from the following GET, PUT, POST, PATCH, DELETE, or POCO. This determines the type of HTTP request to send.
        3. API URL (mandatory): The URL endpoint for the API being called.
        4. Query Parameters: Optional parameters included in the API request to filter or modify the response.
          1. Key: The name of the query parameter.
          2. Value: The value assigned to the query parameter.
          3. Query Variable: A variable used in the query parameter.
          4. Select Type: The type of query parameter (e.g., string, number, etc.).
        5. Headers: Additional metadata sent with the request.
          1. Name: The name of the header.
          2. Value: The value assigned to the header.
        6. Others: Additional settings for the HTTP request.
          1. Enable raw query: Option to send a raw query without formatting.
    2. Enable Encryption: A setting to enable encryption for secure data transfer.
    3. Response Attribute: The data or property returned in the response from the API or data source.
    4. Latitude Field: The field in the data that represents the latitude coordinate for the location.
    5. Longitude Field: The field in the data that represents the longitude coordinate for the location.
    6. Data Field for Marker Info: The field that provides additional information to display in the marker's info window.
    7. Static Data Source: A static set of data used to display on the map.
      1. Lat: The latitude value for the data point on the map.
      2. Lng: The longitude value for the data point on the map.
      3. Label: The label to display for the data point on the map.
      4. Title: The title for the data point, usually displayed in the info window.
      5. Clickable: Indicates whether the data point is clickable (Yes or No).
      6. Draggable: Indicates whether the marker can be dragged (Yes or No).
      7. Open Info Window: Indicates whether the info window should automatically open when the marker is clicked (Yes or No).
      8. Visible: Indicates whether the data point is visible on the map (Yes or No).
    8. Paging Type: Defines the type of paging to be used: Server Side or Client Side.
      1. Server Side: Paging is handled by the server, allowing for larger data sets to be managed.
        1. Page From Param: The parameter to specify the starting page number.
        2. Page Size Param: The parameter to specify the number of items per page.
    9. Page Size: Specifies the number of items to be displayed per page.
    10. Map With Data Model Property: A map configuration option that links the map with a specific data model for dynamic content.
  2. Mapping
    1. Load Card by Form UI: This is used to configure a card grid using a custom card design.
      1. Form Id: Select option from the dropdown menu to define the specific form ID for the card layout.
      2. Hide Default Border: Option to hide the default border around the card for a cleaner design.
      3. Horizontal Alignment: Choose alignment from the following: Left, Right, Center, Between, or Around. This controls how the cards are aligned within the grid.
    2. Card Type: There are certain card designs to choose from, such as List, Photo, Backdrop, Large, Profile, Contact, Product, Dynamic, etc. This defines the visual style of the card.
    3. Field Mapping: Click on the "Add New" button to map the required fields in the grid. Then click the refresh button to reload the API response. After that, start mapping the following fields:
      1. Binding: This defines how data from the API is mapped to the card fields.
        1. Label: The label to display for the field.
        2. Data Field: The data field from the API that will populate the card (e.g., name, title, etc.).
        3. Data Type: Choose data type from the following: None, Email, Date, Title, SubTitle, Image, Header Image, etc. This defines the type of data to be displayed.
        4. Text Color: Select the text color from the dropdown menu for the displayed text.
      2. Web View: Settings specific to how the card is displayed in web view.
        1. Label Option: Select label option from the following: Name Only, Name & Icon, Icon Only, or None. This determines how the label appears.
        2. Disable Word Wrap: Option to disable text wrapping in the web view.
      3. Mobile View: Settings specific to how the card is displayed in mobile view.
        1. Label Option: Select label option from the following: Name Only, Name & Icon, Icon Only, or None. This defines the label format for mobile.
        2. Number of Lines: Defines the number of lines for text display on the card in mobile view.
        3. Mobile Color: The color used for the card in mobile view.
        4. Hide in Mobile: Option to hide the card in mobile view (Yes or No).
        5. Font Size: Defines the font size for text in mobile view.
        6. Is Font Bold: Indicates whether the font should be bold in mobile view (Yes or No).
        7. Is Font Italic: Indicates whether the font should be italicized in mobile view (Yes or No).
  3. Action
    1. Action Button View at: Choose where the action button will appear, either in a popover or in the footer.
      1. Footer: If the action button is positioned in the footer, configure the position.
        1. Action Button Position: Select option from the dropdown menu to define the button's position in the footer.
    2. Actions: Click on the "Add New" button depending on how many actions you want to configure on the card. Then configure the following details:
      1. Action: This defines the properties for the action button on the card.
        1. Button Text: The text displayed on the action button.
        2. Button Type: Select the button type from the dropdown menu to define its visual style.
        3. Action Type: Choose the action type from the following: Sidebar, New Tab, Same Tab, Popup Window, Submit, Submit & Redirect, etc.
        4. Primary Key Field Name: The primary key field name used for the action.
        5. Redirect URL: The URL to redirect to when the action is triggered.
      2. Web View: Settings specific to how the action button is displayed in web view.
        1. Label Option: Choose label option from the following: Name Only, Name & Icon, or Icon Only.
        2. Web Icon: Select an icon from the dropdown menu to display on the web view button.
      3. Mobile View: Settings specific to how the action button is displayed in mobile view.
        1. Label Option: Choose label option from the following: Name Only, Name & Icon, or Icon Only.
        2. Mobile Icon: Select an icon from the dropdown menu to display on the mobile view button.
      4. Advance: Advanced configurations for the action button.
        1. Action: Choose the action from the following: Hide, Show, Enable, or Disable.
        2. Add Rule: Add a rule to trigger the action based on specific conditions.
          1. API Field: The API field used for the rule.
          2. Operator: The operator used for comparison in the rule.
          3. Value: The value to compare against in the rule.
          4. Action: The action that occurs when the rule condition is met.
          5. Is Value From DataModel: Option to use a model value from another form for the rule condition.
            1. Model Value From Another Form: Select the model value from another form to use in the rule.

3rd Step – Advance

  1. Design
    1. Marker Title: The title for the marker, typically used to identify the marker.
    2. Marker Label: The label text that appears with the marker.
    3. Marker Icon URL: The URL to the icon that represents the marker on the map.
  2. Others
    1. Show Sidebar Card: Option to display the sidebar card containing details or additional information.
    2. Show Search Bar: Option to display the search bar for users to search locations.
    3. Show List: Option to display a list of items or locations.
    4. Enable Polygon: Option to enable polygons on the map for area visualization.
      1. Polygon Mapping Field: The field used to map the polygon boundaries or areas on the map.
    5. Default Values: Default values that initialize the map or other settings.
      1. Default Zoom For Map: The initial zoom level for the map.
      2. Default Zoom for Search Location: The initial zoom level when a search location is selected.
      3. Latitude: The default latitude to center the map.
      4. Longitude: The default longitude to center the map.

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