> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/flow/flow-components/user-location.md). # User 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](/flow/component-builder/interactions-panel.md) 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. {% tabs %} {% tab title="Margin" %} 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. {% endtab %} {% tab title="Padding" %} Controls the *inner* spacing between the component's content and its border. * **Top / Right / Bottom / Left:** Adjust the inner spacing on each side. {% endtab %} {% tab title="Border" %} 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. {% endtab %} {% tab title="Button Background" %} 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. {% endtab %} {% tab title="Button Text" %} 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. {% endtab %} {% tab title="Button Border" %} 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. {% endtab %} {% tab title="Button Shadow" %} 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. {% endtab %} {% endtabs %} *** ## 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). | Output variable | Type | What it returns | | -------------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | **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](/flow/component-builder/interactions-panel/open-flow-dialog.md) or [Open Flow Panel](/flow/component-builder/interactions-panel/open-flow-panel.md) interaction can fill with values from a launched flow. See [Flow Interaction Output Variables](/flow/component-builder/interactions-panel/flow-interaction-output-variables.md). --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.avonnicomponents.com/flow/flow-components/user-location.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.