Address Search Component
Overview
The Address Search component offers your end-user End-users, also known as Express 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 your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder 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.
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 do not have to manually enter address information in each field. The Address Search component does it for them.
-
Address Services Store and Execute Server-Side: Does not 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. keys to end-users and executes server-side with increased performance.
-
Supports Multiple Address Service Types: Creators Also known as Unqork Users, or Designer Users; is 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.
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 Builder.
About the Configuration Window
To learn more about general component settings and those that display when a component is associated with Data Models, view our General Component Settings article.
Display Panel
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. |
Contextual Help
| Settings | Description |
|---|---|
|
Tooltip |
A short hint that displays when an end-user positions their cursor over the |
(Default State Options
| Settings | Description |
|---|---|
|
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 (OFF). |
|
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. 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 (ON). The Country Option drop-down does not contain submission data to display. By default, the Use Read-Only View/Read Only View toggle is set to (OFF). |
|
Hide Field |
Hides the component from displaying in Express View.By default, this setting is (OFF). |
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 (OFF). |
|
Show Street |
Set to (ON) to display the address field in Express View. Street Address includes building number and street address values. After your end-user selects a suggested address, this field auto-fills from the address data returned by the map service API. |
|
Show Street 2 |
Set to (ON) to display the secondary street address field in Express View. Secondary street address information might include building floor and office space values.After your end-user selects a suggested address, this field auto-fills from the address data returned by the map service API. |
|
Show City |
Set to (ON) to display the City field in Express View. After your end-user selects a suggested address, this field auto-fills from the address data returned by the map service API. |
|
Show State |
Set to (ON) to display the State field in Express View. State information might include individual U.S. state locations, territories, or sub-regions of a country. |
|
Show Zip |
Set to (ON) to display the Zip code field in Express View.. After your end-user selects a suggested address, this field auto-fills from the address data returned by the map service API. |
|
Show Country |
Set to (ON) to display the Country field in Express View. After your end-user selects a suggested address, this field auto-fills from the address data returned by the map service API. |
|
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 retrieves results from an address service. |
|
Hide Search |
Set to (ON) to hide the address search function. The Address Search component will not communicate with the Address Service API and perform an address lookup. Instead, the address fields you select display in Express View. Your end-user can then manually type in their address details. By default, this setting is (OFF). |
Data Panel
Data Storage
| Settings | Description |
|---|---|
|
Store Data in Database |
The Store Data in Database setting affects how data persists through your application. When set to (ON), Unqork stores values entered into the field to the database (server-side submission). This occurs in three scenarios:
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 (OFF) when you don’t want to store the values from this field in the database. 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. 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 (ON) in Module Settings, only values from fields with Store Data in Database enabled are tracked. |
Data Source
| Settings | Description |
|---|---|
|
Place Service |
Select an address API service to search the end-user's input. 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. |
|
|
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. |
|
|
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 PlacesGoogle Places Address Service
By default, the Address Search component displays the Google Places service.
| 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. Address Services must have the same name in Services Administration when promoting Address Search configurations between environments. 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 (ON) to abbreviate response data to a shorter format. For example, New York becomes NY, and United States becomes US. This setting only affects the address element fields (street, street2, city, state, zip, and country). |
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.
| 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. 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. |
Actions Panel
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
User Input
| Settings | Description |
|---|---|
|
Required |
When set to (ON), the end-user must enter a value in the component's visible fields. Set the toggle to (OFF) when an entry is optional. By default, the Required toggle is set to (OFF). |
|
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. |
Required Error Messages display for each visible and required address field. Error Messages also display underneath the component.
Advanced Panel
Additional Styling
| 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. Custom CSS lets you maintain a consistent look and feel when the field or element is part of a template or multiple modules. Updated CSS styling applies to all components that reference this custom class name. |
Adding an Address Search Component
In this example, configure 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. | In the Module Builder, 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. | Navigate to the component's Data settings. |
| 7. | From the Select API drop-down, select Test Google Places API or a Google Places API configured for the environment. |
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.
| 8. | Click Save Component. |
| 9. | Save your module. |
Preview your module in Express View Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View. and search for an address:
Structure of an Address Search Component's Data
Using the example above, in Express View Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View., execute the AngularJS AngularJS is a JavaScript framework added to an HTML page with a <script> tag. AngularJS extends HTML attributes and binds data to HTML using expressions. command in the DevTools Console The DevTools Console helps you securely store, build, test, and deploy your software.. The address Address Search component stores selected options in an object when viewed in the developer console. If no options have been selected, then the array is empty. In the address object, location data is stored in arrays and key/value pairs. The Address Search component 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.
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_components Data
For detailed location data, refer to the address_components array. The address_components 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
Overview
The Address Search component offers your end-user End-users, also known as Express 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 your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder 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.
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 do not have to manually enter address information in each field. The Address Search component does it for them.
-
Address Services Store and Execute Server-Side: Does not 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. keys to end-users and executes server-side with increased performance.
-
Supports Multiple Address Service Types: Creators Also known as Unqork Users, or Designer Users; is 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.
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 Builder.
About the Configuration Window
To learn more about general component settings and those that display when a component is associated with Data Models, view our General Component Settings article.
Display Panel
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.By default, this setting is (OFF). |
|
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 (OFF). |
|
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. 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 (ON). The Country Option drop-down does not contain submission data to display. 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(OFF) |
|
Show Street |
Set to (ON) to display the address field in Express View. Street Address includes building number and street address values. After your end-user selects a suggested address, this field auto-fills from the address data returned by the map service API. |
|
Show Street 2 |
Set to (ON) to display the secondary street address field in Express View. Secondary street address information might include building floor and office space values.After your end-user selects a suggested address, this field auto-fills from the address data returned by the map service API. |
|
Show City |
Set to (ON) to display the City field in Express View. After your end-user selects a suggested address, this field auto-fills from the address data returned by the map service API. |
|
Show State |
Set to (ON) to display the State field in Express View. State information might include individual U.S. state locations, territories, or sub-regions of a country. |
|
Show Zip |
Set to (ON) to display the Zip code field in Express View.. After your end-user selects a suggested address, this field auto-fills from the address data returned by the map service API. |
|
Show Country |
Set to (ON) to display the Country field in Express View. After your end-user selects a suggested address, this field auto-fills from the address data returned by the map service API. |
|
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 (ON) to hide the address search function. The Address Search component will not communicate with the Address Service API and perform an address lookup. Instead, the address fields you select display in Express View. Your end-user can then manually type in their address details. By default, this setting is (OFF). |
Data Panel
Data Source
| Settings | Description |
|---|---|
|
Place Service |
Select an address API service to search the end-user's input. 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.
| 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. Address Services must have the same name in Services Administration when promoting Address Search configurations between environments. 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 (ON) to abbreviate response data to a shorter format. For example, New York becomes NY, and United States becomes US. This setting only affects the address element fields (street, street2, city, state, zip, and country). |
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.
| 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. 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 (ON), Unqork stores values entered into the field to the database (server-side submission). This occurs in three scenarios:
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 (OFF) when you don’t want to store the values from this field in the database. 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. 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 (ON) in Module Settings, only values from fields with Store Data in Database enabled are tracked. |
Actions Panel
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
| Settings | Description |
|---|---|
|
Required |
When set to (ON), the end-user must enter a value in the component's visible fields. Set the toggle to (OFF) when an entry is optional. By default, the Required toggle is set to (OFF). |
|
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. |
Required Error Messages display for each visible and required address field. Error Messages also display underneath the component.
Advanced Panel
| 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. Custom CSS lets you maintain a consistent look and feel when the field or element is part of a template or multiple modules. Updated CSS styling applies to all components that reference this custom class name. |
Adding an Address Search Component
In this example, configure 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. |
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.
| 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.
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_components Data
For detailed location data, refer to the address_components array. The address_components 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:
Using the example above, in Express View Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View., execute the AngularJS AngularJS is a JavaScript framework added to an HTML page with a <script> tag. AngularJS extends HTML attributes and binds data to HTML using expressions. command in the DevTools Console The DevTools Console helps you securely store, build, test, and deploy your software.. The address Address Search component stores selected options in an object when viewed in the developer console. If no options have been selected, then the array is empty. In the address object, location data is stored in arrays and key/value pairs. The Address Search component 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.
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_components array. The address_components 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
