The address component is a powerful tool that uses Google's address autocomplete to help users enter addresses in a standardized, error-free format. A great feature is the ability to search for a business, which then resolves to its physical address.
However, you might also want to capture and display the business name to clarify which location was selected. You can easily achieve this by adding a calculated text field to your form.
Here’s how to set it up:
Add an Address Component - First, drag and drop an Address component onto your form canvas.
Add a Text Field - Next, drag and drop a Text Field component onto your form. This field will be used to display the business name once an address is selected. You can label it "Business Name" or something similar.
Configure the Calculated Value - Now, we'll configure the text field to pull the name from the address component's data.
Click to open the settings for the Text Field you just added.
Navigate to the Data tab.
Expand the Calculated Value section.
In the JavaScript expression box, enter the following code:
value = data.address.name;
How It Works
This simple expression works because the address component stores all the data returned by the Google Places API for the selected location. When a user chooses a business from the autocomplete suggestions, the component's data object includes not only the formatted address but also other useful details like the business name and geometry.
Our calculated value value = data.address.name simply tells the text field to display the name property from the data object of the component with the API key address.
Now, when a user selects a business in the address field, its name will automatically populate your text field, providing extra clarity on your form! ✨