Using the logged-in user's identification to automatically filter the map upon its opening

[DéveloppeurP]

Hello,

I am developing a custom widget that interacts with a webMap in my organization. My experience is secured with a user group from my organization. My goal is to filter the data on my map according to the logged-in user.

At the moment, I am able to retrieve the authenticated user. However, I am encountering difficulties in using this information to apply a filter to the data displayed when the map opens.

Does anyone have any ideas or has anyone worked on this scenario before?

[JeffreyThompson2 · Accepted solution]

The user information can be accessed in a custom widget with the props.user object. So your filter could work something like this.

if (props.user.username === 'Bob') {
    filterFunction()
}

For an example widget that uses the props.users object, you can look at the Security Widget.

[DéveloppeurP]

Thank you for your response and your promptness. The issue arises precisely when I try to apply the filter to the datasource :

if (this.props?.user?.username === "user1") {

    this.setState({query : "field = 'dispo'"})

    queryParams = {

      where: this.state.query

    };

    console.log(this.state.query);

  }

  }

console.log(dataSource)

  dataSource?.updateQueryParams(queryParams, this.props.id);

---

Since it can't retrieve the datasource, it displays "undefined

[JeffreyThompson2 · Accepted solution]

Can you share more of your code? There isn't enough here to see why you can't connect to the dataSource.

Here is the official sample for filtering a feature layer using it's dataSource.

 https://github.com/Esri/arcgis-experience-builder-sdk-resources/tree/master/widgets/filter-feature-l...

[DéveloppeurP]

export default class Widget extends React.PureComponent<AllWidgetProps<unknown>,State> {
  constructor(props){
    super(props)
    this.state={filtre: '1=1'}
    this.state={user:'utilisateur'}
    this.state={query:"field = '1=1'"}
}



}

componentDidMount() {
  this.setState({ user: this.props.user?.username });

  const dataSourceId = this.props.useDataSources?.[0]?.dataSourceId;
  const dataSource = dataSourceId && DataSourceManager.getInstance().getDataSource(dataSourceId);

  let queryParams;
  if (this.props?.user?.username === "user1") {
    this.setState({query : "field = 'OK'"})
    queryParams = {
      where: this.state.query
    };
  }

  if (!dataSource) {
    console.log("Failed to get dataSource");
  } else {
    dataSource?.updateQueryParams(queryParams, this.props.id);
  }
  
  }

  render() {

    return (
<div className="widget-starter jimu-widget">
</div>
)

[JeffreyThompson2 · Accepted solution]

The problem line here looks like this one.

const dataSource = dataSourceId && DataSourceManager.getInstance().getDataSource(dataSourceId);

With the && operator, I think this line is only capable of returning a Boolean value. Try taking out the dataSourceId && part.

const dataSource = DataSourceManager.getInstance().getDataSource(dataSourceId);

You might also need to use a shouldComponetUpdate() function to handle the initial load where the dataSource may not be available yet.

https://www.geeksforgeeks.org/what-does-shouldcomponentupdate-do-and-why-is-it-important/#