The address component utilises Google Address Lookup to facilitate users in searching and selecting addresses in a structured format. The collected information is stored in an object with numerous fields that can be accessed by other components (for instance, in calculated values, as dynamic fields, or even on a map). In this article, we will demonstrate various examples of how to reference the address component.
Reference the address component in a map component
When an address is selected in the address component Team Forms will save many attributes associated with that address (e.g., latitude, longitude, and formatted address). This means you can use the response to the address component to dynamically update to position displayed on a location component (map). The steps below will outline how you can do this.
Drag and drop an address component into your form
Drag and drop the location component into your form to display a Google maps interface.
Under the data tab of the location component update the "Calculated Value" setting with a JavaScript expression to set the value of your location to the location from the address component. Below is an example of this:
value = "location": {
"latitude": data.address?.geometry?.location.lat,
"longitude": data.address?.geometry?.location.lng,
"mapTypeId": "roadmap",
"zoom": 15
}
Reference address in content component
The content component can reference the response to other fields, including the address component. However, since the address component is stored as an object with various fields (e.g., latitude, longitude, and formatted address), you’ll need to specify which field you want to dynamically display in your content component. Here’s a common example of displaying the formatted address. Please note that you’ll need to modify this for your specific form.
Please send the package to {{ data.address.formatted_addres }}