Address Search Component
Estimated Reading Time: 10 minutes
Overview
The Address Search component offers your end-user End-Users are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product. a Google Maps-style address lookup by using an external address service setup in Services Administration. In Express View Express View is how your end-user views you application. Express View also lets you preview your applications to test your configuration and view the styling. After configuring a module, click Preview in the Module Editor to interact with the module in Express View, end-users use the Address Search component to search for addresses by entering partial or related search terms. As end-users type a portion of an address, a list of the closest matches displays. Selecting the closest match auto-populates the address fields.
TIP To learn more about implementing address service into the Address Search component, visit our Enabling Address Search Using Address Services article.
This Address Search component offers the following flexibility with collecting and using address information:
-
Fuzzy Logic: Search for addresses using impartial or imprecise information.
-
Auto-Populate Address Data: End-users don't have to manually enter address information in each field. The Address Search component does it for them.
-
Address Services Store and Execute Server-Side: Doesn't expose sensitive API APIs (application programming interfaces) are a set of protocols and definitions developers use to build and integrate application software. APIs act as the connective tissue between products and services. (application programming interface) keys to end-users and executes server-side with increased performance.
-
Supports Multiple Address Service Types: Creators Also known as Unqork users; anyone who is inside the Unqork platform. can use their choice of API type (Google Places or Canada Post) depending on their data requirements.
-
Region and Country Bias: Creators can limit or prevent address selection for specific countries and regions.
NOTE It is the customer/creator's responsibility to obtain an API key for the Google Places or Canada Post services. API Keys are owned by the customer and should not be exposed to end-users.
You'll find the Address Search component in the Secondary Fields group to the left of the Module Editor.
What You’ll Learn
After completing this article, you’ll know when to use an Address Search component, how to configure its settings, and how to use it in an Unqork application.
About the Configuration Window
General
|
Setting |
Description |
|---|---|
|
Property ID |
A Property ID is the unique field ID used by Unqork to track and link components in your module. The Property ID is how the software identifies your component. Using Property IDs lets you link components, creating logic-based configurations and API APIs (application programming interfaces) are a set of protocols and definitions developers use to build and integrate application software. APIs act as the connective tissue between products and services. calls. Property IDs must use camel case A naming convention for computer programming. Use camelCase for Property IDs, for example: newUser, lastName, & rdoButton. (stylized as camelCase) without spaces or punctuation. |
|
Notes |
Select this tab to display the component's Notes area. You can use notes to keep your teammates informed. The Notes editor offers a semi-WYSIWYG (What You See is What You Get) content editor. Built to look like a word processor, this editor lets you create, edit, and format your notes. Notes save when saving the component. |
|
|
Select this tab to manage your component's display settings. |
|
|
Select this tab to manage your component's data settings. |
 Actions
|
Select this tab to manage your component's actions settings. |
|
|
Select this tab to manage your component's validation settings. |
|
|
Select this tab to manage your component's advanced settings. |
|
|
Select this tab to see the RBAC RBAC (Role-Based Access Control) is a method to control system access for authorized users. The role in RBAC refers to the levels of access employees have to a network. (role-based access control) settings of the component. |
|
|
Assign components one-word labels to help organize, identify, and group the components in your application. Consider an example from the API Specification Snippet: Field Tags are applied to Hidden components in the panelRequest and panelResponse Panels. The Field Tags identify the data type of parameters included in the API APIs (application programming interfaces) are a set of protocols and definitions developers use to build and integrate application software. APIs act as the connective tissue between products and services. request and response. The API Docs Dashboard tool populates with information about each parameter’s data type, identified by the Field Tag. Field Tags act as a type of Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. group and let you group components for configuration purposes. Field Tags let you target two or more components using a simple logic component. For example, add the Field Tag tagForDecision to multiple components in your module. Open the Inputs table of a Decisions component and reference the tagForDecision Field Tag as the input of the Decisions component. The output of the Decisions component then affects all components with the tagForDecision Field Tag. Save your Field Tags by pressing Enter (Return) or adding a comma after each entry. |
|
|
Select this tab to open the list of supported keyboard shortcuts you can use in the component settings modal. Keyboard shortcuts include:
Additional keyboard shortcuts:
|
|
|
Select this tab to access the component documentation in Unqork's In-Product Help. |
|
Cancel |
Click this button to undo any unsaved configuration changes and return to the canvas. |
|
Save & Close |
Click this button to save all settings as configured and return to the canvas. |
Display
Validation
Advanced
Permissions
Field Tags
Shortcuts
(tooltip), press Enter (Return) to display the field or setting tooltip. Press Enter (Return) again to hide the tooltip.
(up)/ 
(down) arrows to make a selection. Then, press Enter (Return) to confirm the selection.
DocumentationDisplay Panel
(click image to expand)
Field Text
| Settings | Description |
|---|---|
|
Label Text |
The Label Text field conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. Use user-friendly labels to make your module accessible. It's best practice to use brief and descriptive labels (one or two words). Use title case for short entries and sentence case for long entries. |
|
Placeholder Text |
A short prompt telling end-users the expected value of an input field. For example: Enter your Social Security Number. Placeholder Text displays inside the input field until the end-user begins an entry. |
Default State Options
| Settings | Description |
|---|---|
|
Hide Field |
Hides the component from displaying in Express View. |
|
Disable User Input |
When set to ON, end-users can’t interact with or edit the Express View's input field or element. When end-users hover over the field, their cursor changes to alert them to the status change. By default, the Disable User Input toggle is set to |
|
Read Only View |
When set to ON, the component is display-only. If another component pushes content to the field, the end-user sees that content. Otherwise, end-users see the word None. NOTE If the service type is set to Canada Post, Read Only View hides or suppresses the Country Option drop-down. This action occurs even if the Show Country Option setting is By default, the Use Read-Only View/Read Only View toggle is set to |
(OFF).Contextual Help
| Settings | Description |
|---|---|
|
Tooltip |
A short hint that displays when an end-user positions their cursor over the |
(Formatting
| Settings | Description |
|---|---|
|
Address Display Options |
These settings enable end-users to see or enter their address information. If your end-user uses the search field and selects a suggested address, this field auto-fills from the address data returned by the address service API. Any end-user edits made to this field are only saved in this field's submission data and do not affect data returned by the address service API. By default, end-users can edit checked fields. Enable Disable User Input to require users to use the search field to populate the Address Display fields. To prevent users from using the Search field, enable Hide Search in Advanced Settings. By default, the following options are set to |
|
Show Street |
Set to |
|
Show Street 2 |
Set to |
|
Show City |
Set to |
|
Show State |
Set to |
|
Show Zip |
Set to |
|
Show Country |
Set to |
|
No Matching Results Text |
Enter a custom message to display when an address service API has no matching search results based on the end-user's search. |
|
Loading Results Text |
The value in this field displays to the end-user when the Address Search component retreives results from an address service. |
|
Hide Search |
Set to |
Data Panel
(click image to expand)
Data Source
| Settings | Description |
|---|---|
|
Place Service |
Select an address API service to search the end-user's input. NOTE Changing the Service Type removes all service-specific settings that do not apply to the new service. For example, if your Address Search component is set up for Google Places, changing it to Canada Post clears all Google Places-specific settings. |
|
Google Places |
The default selection. Displays the configuration settings for the Google Places API. To use this service, set up access in Services Administration. For more information on configuring the Address Search component for Google Places, see the Google Places Address Service section of this article. |
|
Canada Post |
Select Canada Post to enable the configuration settings for the Canada Post API. To use this service, set up access in Services Administration. For more information on configuring the Address Search component for Canada Post, see the Canada Post Address Service section of this article. |
Google Places Address Service
By default, the Address Search component displays the Google Places service.
(click image to expand)
| Settings | Description |
|---|---|
|
Select API |
Displays the list of Google Places services implemented in Services Administration. By default, the first available Address Service is selected. If no services are available, a warning displays in the component's configuration window. In Express View, if no address service is selected, the console returns the status code error: 404 (Not Found). The console log also warns you to select a valid service. NOTE Address Services must have the same name in Services Administration when promoting Address Search configurations between environments. TIP To learn how to implement the Google Places API service, visit our Enabling Address Search Using Address Services article. |
|
Multi Country Filter |
Enable to influence or restrict the values the Google Places API will return. To restrict suggested results based on country, use the following format: country:[2-letter ISO 3166 country code]. For example, entering country:US|country:CA would restrict results to the United States and Canada. To see a complete list of ISO 3166 country codes, visit the following link: en.wikipedia.org/wiki/List_of_ISO_3166_country_codes. |
|
Region Bias Location |
Enter the coordinates of a region. The coordinates tell the Google Places API what regional results to suggest first. For example, entering 37.76999, -122.44696 tells the API to suggest addresses near San Francisco, CA, before suggesting any others. |
|
Region Bias Radius (meters) |
Enter the maximum radius Google Places API can search based on the Region Bias Location. |
|
Store Address in Short Format |
Set to NOTE This setting only affects the address element fields (street, street2, city, state, zip, and country). |
TIP Address Search includes the following Google Places API response data: geometry, types, and place_id. This data is available to view in the Express View console or with the Record Collections Viewer. Additional record data is also available in the address_components array.
Canada Post Address Service
The Canada Post API service is similar to Google Places, but its primary focus is on locating addresses in Canadian provinces.
(click image to expand)
| Settings | Description |
|---|---|
|
Select API |
Displays the list of Canada Post services implemented in Services Administration. By default, the first available Address Service is selected. If no services are available, a warning appears in the component's configuration window. TIP To learn how to implement the Canada Post API service, visit our Enabling Address Search Using Address Services article. |
|
Default Country |
Select the default country where you want the Canada Post API to return addresses. The default selection is Canada. |
|
Show Country Option |
Enables the country selection field for end-users. A drop-down menu with a list of countries supported by the Canada Post API displays in Express View. This drop-down menu defaults to the Default Country setting value. |
Data Storage
| Settings | Description |
|---|---|
|
Store Data in Database |
The Store Data in Database setting affects how data persists through your application. When set to
NOTE By default, workflows persist data from all fields in the client-side submission when navigating between screens. However, only values from fields with Store Data in Database enabled store in the server-side submission. Set the toggle to NOTE When using a Plug-In to remote execute a module, ensure data moving between modules is persistent. You can optionally enable Store Data in Database for components in the source module. But any components in the API module whose values are included in an API response must have Store Data in Database enabled. When a component’s data is not persistent, the data isn't included in an API call's response. So, Plug-Ins or external services requesting data from the API module can't receive non-persistent data in the response. To learn more about Store Data in Database in the context of API modules, see the panelResponse Panel section of the API Specification Snippet article in our In-Product Help. TIP Store Data in Database also affects what data is tracked using Unqork’s built-in tracker. When the Enable Tracker and Track Value toggles are set to |
Actions Panel
(click image to expand)
Triggers
| Settings | Description |
|---|---|
|
Trigger |
Enter a Property ID of a component to trigger. When an end-user performs an action on this component, the trigger fires. For example, assign a Decisions component to trigger a Button component's visibility when an end-user selects an address using the Search field. The trigger setting fires in the following cases:
|
|
On Keypress |
When an end-user performs a keystroke in this component, the triggered component fires. For example, assign a Decisions component to trigger a Button component's visibility when an end-user presses the Enter key on their keyboard. The On Keypress setting fires in the following cases:
|
Validation Panel
(click to expand image)
| Settings | Description |
|---|---|
|
Required |
When set to By default, the Required toggle is set to |
|
Required Error Message |
A custom error message displays below each visible and required address field. The error message displays when the end-user tries to save or submit the module without completing the required field. |
NOTE Required Error Messages display for each visible and required address field. Error Messages also display underneath the component.
Advanced Panel
(click image to expand)
| Settings | Description |
|---|---|
|
Custom CSS Class |
Enter a Custom CSS Cascading Style Sheets (CSS) is a style sheet language used for presenting how a HTML or XML document looks to end-users. Class to apply to your component. Use custom CSS to maintain a consistent look and feel if the field or element is part of a template or more than one module. Updated CSS styling applies to all components that reference this custom class name. |
Adding an Address Search Component
In this example, add an Address Search component using the Google Places API to collect your end-user's address data. Let's assume the end-user lives in the United States. That way, you don't need to include the Country field. Also, add Placeholder text so your end-user knows to use the search field. These instructions assume that you have an open module saved with a title.
| 1. | Drag and drop an  Address Search component onto your canvas. |
| 2. | In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter address. |
| 3. | In the Label Text field, enter Address. |
| 4. | In the Placeholder Text field, enter Search for your address. |
| 5. | Set the Show Street, Show Street 2, Show City, and Show State to  (ON). |
| 6. | From the component's configuration menu, select  Data. |
| 7. | From the Select API drop-down, select Test Google Places API. |
TIP Test Google Places API is a preconfigured address service for the Training environment. To learn how to implement address service into the Address Search component, visit our Enabling Address Search Using Address Services article.
(click image to expand)
| 8. | Click Save & Close. |
| 9. | Save your module. |
Now you're ready to test your Address Search component. Preview your module and search for an address. Your module should work as shown below:
Structure of an Address Search Component's Data
Address Search component data is stored as an object. In the address object, location data is stored in key/value pairs. Address Search returns the full, unaltered address from the Address Service in the formatted key. All other address response data is specific to the Google Places or Canada Post API. Address Service APIs return all location data regardless of the Address Display Field (Street, Street2, Zip, Country) selections.
NOTE In Express View, if no address service is selected, the console returns the status code error: 404 (Not Found). The console log also warns you to select a valid service.
Google Places Response Data
Google Places also returns data that includes: geometry, place_id, and location types. The Google Places API returns the following response when searching for the Unqork address:
Short Format Data
Enable the Short Format Data (Google Places) setting to store record data in an abbreviated format. This setting only affects the address element fields (street, street2, city, state, zip, and country). The Google Places API returns the following response when searching for the Unqork address:
address_component Data
For detailed location data, refer to the address_component array. The address_component array is useful when viewing international locations that don't follow the strict US-centric format:
City, State
Zip Code, Country
The address_component location data includes the long_name key, short_name key, and types array for each address field.
Canada Post Response Data
The Canada Post API returns the following response when searching for the address 85 5th Ave Frnt 1, New York, NY:
Resources
