Url parameters in widgets

[ErsiLover]

I'm new to experience builder and I'm building a new project my question would be is it possible to create custom widget in experience builder that can read and fetch url parameters and then filter based on those parameters?

[TimWestern · Accepted solution]

As it happens I've been working on a widget that does the first part of this pretty easily. I don't know what kind of source you might be using, but consider a method like this:

const getServiceUrl = (dataSourceId): Promise<string> => {
        return new Promise((resolve) => {
            const checkDataSourceManager = () => {
                const dataSourceManager = DataSourceManager.getInstance();

                if(dataSourceManager) {
                    const dataSourceArray = dataSourceManager.getDataSourcesAsArray();
                    const selectedDataSource = dataSourceArray.find(ds => ds.id === dataSourceId);
                    //const dataSrcJson = dataSourceManager.getDataSource(dataSourceId).getDataSourceJson();
                    const dataSrcJson = selectedDataSource.getDataSourceJson();
                    const dataSourceURL = dataSrcJson?.url + queryString;
                    resolve(dataSourceURL);
                } else {
                    setTimeout(checkDataSourceManager, 100); // Check again after a short delay
                }
            };

            checkDataSourceManager();
        });
    };
	

• This uses a dataSourceID that is already added in the Data section
• That dataSourceID is then used to find the specific source in the array returned from getDatSourcesAsArray.
• you can then get the urlFrom a DataSource and tack on a queryString in my case it's a querystring with a token added onto it, but depending on your context and access permissions you may not need that. but the query will look like the url path you would browse to through a browser for a Feature when queried. 
• That will then resolve and return some response object that in its body would have the query in whatever format it might need to be in.  For Example json.
• Note that the path is actually a RESTful query that can return a set. you can always do additional filtering at runtime in JavaScript if needed.
  
  This is just one way to do this with JS/TypeScript.  There may be others.  For example, if you can get access to the actual FeatureLayer then you can run a query on it directly without creating the query path as a url structure.  example here: https://developers.arcgis.com/javascript/latest/sample-code/featurelayer-query-basic/ 

[ErsiLover]

Thank you for your help 🙂

[JeffreyThompson2]

If you are looking to get an arbitrary URL parameter, not necessarily a data source. You could use URLSearchParams.

Full explanation with a starter widget and an example using it to start a query here, along with many more Experience Builder tips.