Address input component (Preview)

[This topic is pre-release documentation and is subject to change.]

Entering addresses can be frustrating and error-prone, particularly in mobile scenarios.

The address input component lets you see dynamic address suggestions as you type. Using fuzzy matching logic, the component suggests multiple potential address matches that the user can select—making it quicker and easier to enter accurate addresses.

The component returns the address as structured data, allowing your application to extract information like city, street, municipality, and even latitude and longitude. The data is in a format friendly to many locales and international address formats.

To use the component, you need to enable geospatial features for the environment in addition to enabling geospatial features for each app that you want to use it in.

Make sure you also review the prerequisites for using geospatial components.

Use the component

Insert the component into your app as you normally would for any other control or component.

With an app open for editing in Power Apps Studio:

  1. Open the Insert tab.

  2. Expand Input.

  3. Select the component Address input (preview) to place it in the center of the app screen, or drag it to position it anywhere on the screen.

  4. (Optional) Select Allow in the window that asks to know your location. This enables the component to bias results by the user's current location.

    Allow highlighted in the window that asks to know your location

You can modify the component by using a number of properties.

Set a default search radius

By default, the component will search around the user's location (providing the user has consented for the app to access their location). However, you can refine the default search area to help narrow or change initial results when users input an address.

  1. On the Properties pane, set the Search within radius switch to On.

  2. Enter a longitude, latitude, and radius (in meters).

The component will start searching at the latitude and longitude, out to the distance specified in the radius field.

Use the map component with the input address component

You can save addresses that a user inputs into the address component as a data collection. You can then retrieve these addresses and display them in the map component.

  1. App the map component and the input address component to your app.

  2. On the Insert menu, select Button and move it into your app.

  3. Go to the Advanced tab on the Properties pane. Under OnSelect, enter the following:

    If(IsBlank(AddressInput1.SearchResultJson), "", Collect(locations, {Latitude: AddressInput1.SelectedLatitude, Longitude: AddressInput1.SelectedLongitude}))
    

    This causes the button to save the current latitude and longitude to a collection named locations, as long as the search results are not blank

  4. Select the map component, and go to the Advanced tab on the Properties pane.

  5. Set the following properties:

    • ItemsLabels as locations
    • ItemLatitudes as locations.Latitude
    • ItemsLongitudes as locations.Longitude

Each time a user selects the button, the result from the address input component will be added to the map as a new pin.

Properties

The following properties are on the component's Address Input pane on the Properties and Advanced tabs.

The properties are in the side panel

Some properties are only available on the Advanced tab, in the More options section.

Property Description Type Location
Enable autofill Whether the component gives address suggestions. Boolean Properties
Search result limit The number of suggested addresses the component displays. Integer Properties
Search within radius Whether the component should suggest addresses within the user-defined Radius of the Latitude and Longitude. Boolean Properties
Latitude The latitude of the center point used to geo-bias address suggestions. Requires Search within radius to be on. Decimal from –180 through 180 Properties
Longitude The longitude of the center point used to geo-bias address suggestions. Requires Search within radius to be on. Decimal from –180 through 180 Properties
Radius The radius, in meters, around Latitude and Longitude to constrain the address suggestions. Requires Search within radius to be on. Decimal Properties
Language The language the address suggestions are returned in String Properties
Country set Comma-separated list of countries to constrain the address suggestions to, in ISO 3166 alpha-2 country codes. For example, US, FR, KW String Properties

Additional properties

Default – The initial value of a control before it's changed by the user.

Text – Text that appears on a control or that the user types into a control.

BorderColor – The color of a control's border.

BorderRadius – The radius of a control's border.

BorderStyle – Whether a control's border is Solid, Dashed, Dotted, or None.

BorderThickness – The thickness of a control's border.

Color – The color of text in a control.

DisplayMode – Whether the control allows user input (Edit), only displays data (View), or is disabled (Disabled).

DisabledBorderColor – The color of a control's border if the control's DisplayMode property is set to Disabled.

DisabledColor – The color of text in a control if its DisplayMode property is set to Disabled.

DisabledFill – The background color of a control if its DisplayMode property is set to Disabled.

Fill – The background color of a control.

FocusedBorderColor – The color of a control's border when the control is in focus.

FocusedBorderThickness – The thickness of a control's border when the control is in focus.

Font – The name of the family of fonts in which text appears.

FontWeight – The weight of the text in a control: Bold, Semibold, Normal, or Lighter.

Height – The distance between a control's top and bottom edges.

HintText – Light-gray text that appears in an input-text control if it's empty.

HoverBorderColor – The color of a control's border when the user keeps the mouse pointer on that control.

HoverColor – The color of the text in a control when the user keeps the mouse pointer on it.

HoverFill – The background color of a control when the user keeps the mouse pointer on it.

Italic – Whether the text in a control is italic.

LineHeight – The vertical distance between lines of text—for example, between items in a list.

OnChange – How the app responds when the user changes the value of a control (for example, by adjusting a slider).

PaddingBottom – The distance between text in a control and the bottom edge of that control.

PaddingLeft – The distance between text in a control and the leftmost edge of that control.

PaddingRight – The distance between text in a control and the rightmost edge of that control.

PaddingTop – The distance between text in a control and the top edge of that control.

PressedBorderColor – The color of a control's border when the user taps or clicks that control.

PressedColor – The color of text in a control when the user taps or clicks that control.

PressedFill – The background color of a control when the user taps or clicks that control.

Size – The font size of the text that appears on a control.

Strikethrough – Whether a line appears through the text that appears on a control.

TabIndex – Keyboard navigation order in relation to other controls.

Tooltip – Explanatory text that appears when the user hovers over a control.

Underline – Whether a line appears under the text that appears on a control.

Visible – Whether a control appears or is hidden.

Width – The distance between a control's leftmost and rightmost edges.

X – The distance between the leftmost edge of a control and the leftmost edge of its parent container (or screen, if the control has no parent container).

Y – The distance between the top edge of a control and the top edge of the parent container (or screen, if the control has no parent container).

Other geospatial components

To visualize and interpret location data, use the Interactive map component.