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

  <LocationPicker
          context={this.props.context}
          label="Location"
          defaultValue={this.state.selectedAddress}
          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();
    console.log(item);
    this.setState({
      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!!!

Comments

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

WordPress.com Logo

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

Google photo

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

Twitter picture

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

Facebook photo

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

Connecting to %s