Google Places Control Settings

Add a control from which the Request participant can auto-complete an entered address, location, or business.

Control Description

Use the Google Places package to allow Request participants to do the following in Form-type Screens:

  • Start entering an address, location, or business name into a Screen control, then allow the Google API to auto-complete that address or location. The Google Place control stores the selected address in the Request data as well as all the returned data from the Google API.

  • View and/or select from one or more geographical locations in a Google map.

This control is only available for Form-type Screens. See Screen Types.

Below are a few ways to use the Google Places control:

Package Required

To add a Google Places control to a Screen, the Google Places package must be installed.

Permissions Required

Your user account or group membership must have the following permissions to design a Screen unless your user account has the Make this user a Super Admin setting selected:

  • Screens: Edit Screens

  • Screens: View Screens

See the Screens permissions or ask your Administrator for assistance.

Add the Control to a Screen

Follow these steps to add this control to the Screen:

  1. View the Screen page to which to add the control.

  2. Drag the Google Places icon into the Screen Builder canvas. Existing controls on the Screen Builder canvas adjust positioning based on where you drag the control.

  3. Configure the Google Places control. See Settings.

  4. Validate that the control is configured correctly. See Validate Your Screen.

Below is a Google Places control in Preview mode.

Move the Control on the Page

After adding a control to a Screen page, you may move it to another location on that page such that it is above or below other controls placed on that page. A control cannot be moved to another Screen page.

Follow these steps to move a control to another location on that Screen page:

  1. Place the control at the location on the page you want it. The other control(s) on the page automatically adjust position.

Copy the Control with its Settings

Copying a control also copies the current settings of that control. The copied control displays below other controls placed on that Screen page.

Follow these steps to copy a control:

  1. Select the control to be copied.

As a best practice, after copying a control, change the Variable Name setting value for the copied control to its own unique variable value. Otherwise, in-progress Requests that use this Screen read from and send data to both controls.

Delete the Control from a Screen

Deleting a control also deletes configuration for that control. If you add another control, it will have default settings.

Follow these steps to delete a control from a Screen page:

  1. Select the control to be deleted.

Settings

The Google Places control has the following panels that contain settings:

Variable Panel Settings

Click the control while in Design mode, and then click the Variable panel that is on the right-side of the Screen Builder canvas.

Below are settings for the Line Input control in the Variable panel:

Variable Name

Use the Variable Name setting value in the following ways:

See best practices when editing a Request variable name.

Label

Validation Rules

Follow these steps to add a validation rule to this control:

  1. Access the Variable panel for this control while in Design mode, and then locate the Validation Rules setting.

  2. Select the rule that this control validates against.

  3. Click Save. Parameters for the selected rule display. Parameter settings display which ones are required to properly configure the rule.

  4. Enter the parameter settings that this control uses to validate against. See Validation Rule Settings, and then locate the validation rule for its parameters.

Follow these steps to edit a validation rule for this control:

  1. Access the Variable panel for this control while in Design mode, and then locate the Validation Rules setting.

  2. Edit the parameter settings that this control uses to validate against. See Validation Rule Settings, and then locate the validation rule for its parameters.

Follow these steps to delete a validation rule for this control:

  1. Access the Variable panel for this control while in Design mode, and then locate the Validation Rules setting.

  2. Click Delete.

Configuration Panel Settings

Click the control while in Design mode, and then click the Configuration panel that is on the right-side of the Screen Builder canvas.

Below are the settings for the Google Places control in the Configuration panel:

Placeholder Text

Helper Text

Enable Maps

The following settings are available below the Enable Maps setting to configure the Google Map settings and the map's geographical location when the map displays:

Hide Address Input

Enable Geolocate

Enable Zoom Control

Enable Map Type Control

Enable Fullscreen Mode

Enable Street View Control

Center Map

Default Zoom

Design Panel Settings

Click the control while in Design mode, and then click the Design panel that is on the right-side of the Screen Builder canvas.

Below are settings for the Google Places control in the Design panel:

Text Color

Background Color

Advanced Panel Settings

Click the control while in Design mode, and then click the Advanced panel that is on the right-side of the Screen Builder canvas.

Below are settings for the Google Places control in the Advanced panel:

Visibility Rule

Note the following regarding how to use visibility rules:

CSS Selector Name

See the following best practices regarding custom CSS in Screens:

Reference Request Data from the Google Places Control in Other Controls

The Google Places control receives its source data from the Google API response after the Request participant selects an address or location. The Google Places control stores the entire JSON data object that the Google API returns in the Request data. See the Google JSON API response key name descriptions to determine how to use JSON key name values in the response for Request data.

Review the Google's JSON API response often as Google revises it often and without notice.

Follow these guidelines to reference JSON object key names and/or arrays from Google's returned data object in other Screen controls.

Reference the Entire Selected Address or Location

Reference the following JSON key name for the entire selected address or location that includes the entire value in the Google Places control as indicated in JSON dot notation:

variable_name.0.result.0.address_components

variable_name represents the Variable Name setting value for the Google Places control being referenced.

Example of the Entire Selected Address or Location

Below is the Google Places control selection for this example. The Google Places control's Variable Name setting value is the default google_places_1.

If a Rich Text control references this Google Places control's entire selected address, use the following syntax in the Rich Text control's content using mustache syntax:

{{ google_places_1.0.result.0.address_components }}

Reference the Main Text for the Selected Address or Location

Reference the following JSON key name for the main text for the selected address or location as indicated in JSON dot notation:

variable_name.0.result.0.address_components.0.long_name

variable_name represents the Variable Name setting value for the Google Places control being referenced.

The Rich Text control displays the following during a Request:

"ProcessMaker"

Example of the Main Text for the Selected Address or Location

Below is the Google Places control selection for this example. The Google Places control's Variable Name setting value is the default google_places_1.

If a Rich Text control references this Google Places control's main text for the selected address, use the following syntax in the Rich Text control's content using mustache syntax:

{{ google_places_1.0.result.0.address_components.0.long_name }}

The Rich Text control displays the following during a Request:

"ProcessMaker"

Reference the Secondary Text for the Selected Address or Location

Reference the following JSON key name for the secondary text for the selected address or location as indicated in JSON dot notation:

variable_name.0.result.0.address_components.0.formatted_address

variable_name represents the Variable Name setting value for the Google Places control being referenced.

The Rich Text control displays the following during a Request:

"West Main Street, Durham, NC, USA"

Example of the Secondary Text for the Selected Address or Location

Below is the Google Places control selection for this example. The Google Places control's Variable Name setting value is the default google_places_1.

If a Rich Text control references this Google Places control's secondary text for the selected address, use the following syntax in the Rich Text control's content using mustache syntax:

{{ google_places_1.0.result.0.address_components.0.formatted_address }}

The Rich Text control displays the following during a Request:

"West Main Street, Durham, NC, USA"

Reference the Place Type(s) for the Selected Address or Location

Reference the following JSON array for the place type(s) for the selected address or location as indicated in JSON dot notation:

variable_name.0.result.0.address_components.0.types

variable_name represents the Variable Name setting value for the Google Places control being referenced.

The Rich Text control displays the following during a Request:

"point_of_interest", "establishment"

Example of the Secondary Text for the Selected Address or Location

Below is the Google Places control selection for this example. The Google Places control's Variable Name setting value is the default google_places_1.

If a Rich Text control references this Google Places control's secondary text for the selected address, use the following syntax in the Rich Text control's content using mustache syntax:

{{ google_places_1.0.result.0.address_components.0.types }}

The Rich Text control displays the following during a Request:

"point_of_interest", "establishment"

Last updated

© Copyright 2000-2024 ProcessMaker Inc. All rights reserved.