Google Places

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

1st Step – Design

This is the first step of the “Google Places” control form wizard. Here you are required to fill in the following details:

  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: 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. Placeholder Text: Defines the hint text displayed inside a form field or input box when it is empty, providing guidance on the expected input.
  5. Enable Tooltip?: This button is set as “Yes” if you need to enable Tooltip Text in this Control
    1. Tooltip Text: Defines the text to be displayed in the tooltip when the user hovers over the icon.
    2. Select Tooltip Position: Select tooltip position from the following Top, Right, Bottom or Left

2nd Step – Validation

  1. Store Json Node: A property used to specify the key or node in a JSON object where data from this field will be stored. It ensures proper mapping and organization of data within a JSON structure.
  2. Is Mandatory?: This button is set as “Yes” if you need to apply this Control as mandatory
    1. Error Message: Here, you can define the error message that will be displayed if this control is left blank.
  3. Default Value: As the name suggests, it defines a default value for a field. This default value can be changed by user input.

3rd Step – Advance

  1. Bootstrap Column Class: Specifies a predefined Bootstrap CSS class to style and format the component, enabling quick customization and responsive design.
  2. Description: Enter extra suggestions for user experience on this field
  3. Country Restriction: Limits access or functionality based on selected countries.

Click “Confirm” and “Google Places” control is configured.

How to use Google Places control

  1. Begin by creating a blank transaction form.
  2. Add Google Places control.
  3. Configure all the attributes in design page based on the specified requirements of the form.
  4. Configure all the attributes in validation page based on the specified requirements of the form.
    1. Store Json Node when enabled, this stores the complete Google Places response (like full address, coordinates, etc.) as a JSON object, giving you access to detailed location data for future use.
    2. You can view this value by checking the model.

    3. Default Value lets you set a pre-filled location (e.g., "New York, NY, USA") that appears automatically in the input field when the form loads — helpful for guiding users or speeding up data entry.
  5. Configure all the attributes in advance page based on the specified requirements of the form.
    1. Use Country Restriction to limit address suggestions to specific countries (like only the US). This keeps results relevant and helps users find valid locations faster.

On this page