User Location
The Avonni User Location component provides a way to capture and display the user's current geographic location.
Overview
The User Location component captures the user's geolocation coordinates through the browser's Geolocation API. Use it in field-service or mobile flows to record where the user is when they complete a step — for example, capturing GPS coordinates on a site visit or a check-in form.
Configuration
To configure it, click the component on the Flow screen. The Edit User Location Component panel opens on the right with three tabs: Properties, Interactions, and Style. The sections below mirror the Properties tab.
Properties
Get Current Position Onload automatically retrieves the user's location when the flow screen loads, without requiring the user to click a button.
Enable High Accuracy requests the most precise location available from the device. This may be slower and consume more battery, but produces better GPS coordinates.
Button
Button Label sets the text displayed on the location capture button.
Variant changes the visual appearance of the button. Options: Base, Neutral, Brand, Brand Outline, Destructive, Destructive Text, Inverse, Success.
Icon Name adds a Lightning Design System icon to the button.
Icon Position sets where the icon appears relative to the label (Left or Right). Requires Icon Name to be set.
Type specifies the HTML button type (Button, Reset, Submit).
Stretch makes the button take the full available width.
Disabled grays out the button and prevents the user from triggering a location request.
Interactions
Interactions define what happens when users interact with the User Location. Configure them from the Interactions tab of the Edit User Location panel.
Successful Location
Fires when the browser successfully retrieves the user's coordinates. Use this to store the returned coordinates, coordinatesSerialized, or timestamp output variables, proceed to the next screen, or trigger downstream logic based on the captured position.
Styling
The Style tab gives you fine-grained control over the User Location button's appearance. The button color sections adapt to the selected button Variant. Configure it from the Style tab of the Edit User Location panel.
Controls the outer spacing around the component, creating space between it and other elements on the screen.
Top / Right / Bottom / Left: Adjust the space on each side of the component.
Controls the inner spacing between the component's content and its border.
Top / Right / Bottom / Left: Adjust the inner spacing on each side.
Customizes the border surrounding the component.
Color: Set the border color.
Size: Adjust the border thickness.
Style: Choose a border style (e.g. solid, dashed, dotted).
Radius: Control the roundness of the corners.
Styles the button background. Colors are set per variant (e.g. Base, Brand, Neutral, Destructive, Success).
Color / Color Active / Color Hover: Set the background color in each state.
Styles the button label text. Colors are set per variant (e.g. Base, Brand, Neutral, Destructive, Success).
Color / Color Active / Color Hover: Set the text color in each state.
Font Size / Font Style / Font Weight / Font Family: Control the label typography.
Line Height: Set the label line height.
Customizes the button border. Colors are set per variant (e.g. Base, Brand, Neutral, Destructive, Success).
Color / Color Active / Color Hover: Set the border color in each state.
Size: Adjust the border thickness.
Style: Choose a border style (e.g. solid, dashed, dotted).
Radius: Control the roundness of the corners.
Adds depth to the button with shadows.
Shadow: Set the button's drop shadow.
Shadow Focus: Set the shadow shown when the button is focused.
Output Variables
The User Location exposes these output variables you can reference in your flow after the screen. To use them, select the screen element in Flow Builder, then the User Location component, and pick the output variable you need.
Location Result
Populated when the browser successfully retrieves the user's position (fires with the Successful Location interaction).
Coordinates
Location Data (Apex)
The full location object, containing latitude, longitude, accuracy, altitude, speed, speed accuracy, heading, and heading accuracy. Use this when you need to pass the structured object to an Apex action or store it in a flow variable.
Coordinates Serialized
Text (String)
The same coordinates as a serialized string. Use this when you need to store or display the location as plain text — for example, in a record field or a text template.
Timestamp
Integer
The time at which the location was retrieved, expressed as a Unix timestamp (milliseconds since epoch).
Example: On a field-service visit form, capture Coordinates to write latitude and longitude into a custom object record via an Apex action, and store Timestamp to record exactly when the technician checked in.
Flow Interaction Output Variables
Like all interactive Flow components, the User Location exposes generic output slots (Variable 1–10) that an Open Flow Dialog or Open Flow Panel interaction can fill with values from a launched flow. See Flow Interaction Output Variables.
Last updated
Was this helpful?