PnP Location Picker Control for SPFx

This location picker control allows you to search and select the location, also allows enter a custom location. also it is easy to use we don’t have to configure for API permissions

Importing location picker control

import { LocationPicker, ILocationPickerItem } from "@pnp/spfx-controls-react/lib/LocationPicker";

Control tag and the attributes

          onChange={(locValue: ILocationPickerItem) => {
            this.setState({ selectedAddress: locValue })
          } />

retrieve value from SharePoint list and assign value to the location picker control

  _getListItem = async () => {
    const item: any = await sp.web.lists.getByTitle("Demo").items.getById(1).select("Title", "Address").get();
      selectedAddress: JSON.parse(item.Address)

Update location picker value to the SharePoint

 _updateListItem = async () => {
    const updatedItem = await sp.web.lists.getByTitle("Demo").items.getById(1).validateUpdateListItem(
        FieldName: "Address",
        FieldValue: JSON.stringify(this.state.selectedAddress),
Location searching mode

Download complete project in the blow GitHub link

If you have any questions, feel free to let me know in the comments section.
Happy coding!!!


Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s