Embed with URL parameters (1/3) - Obtain URL info (available URL parameters) from the ExB app and pass it down onto the Embed widget

9391
26
05-21-2021 04:46 AM
Labels (2)
TonghuiMing
Esri Regular Contributor
5 26 9,391

In the AGOL April update, a new feature was added:

A web experience can now communicate with an embedded app by passing URL parameters to control what appears in the embedded app at runtime. Use a single URL editor to form dynamic URLs from connected data attributes or app URL parameters, or add static URLs directly.

This series contains three articles, which will work you through three different cases on how the new feature works, allowing you to further utilize the Embed widget to accommodate different scenarios.

 

URL parameters are commonly used in web applications. If you embed some content inside an ExB app, how can I pass the parameter inside this embedded content to achieve the communication from the ExB app to embedded content?

 

How to configure the app

To prepare:

  • ExB account access
  • Apps that utilize URL parameters and can be embedded into ExB apps (e.g. Web AppBuilder, Ops Dashboard, etc.). Here are two examples used to demonstrate the following test case:
https://esridevbeijing.maps.arcgis.com/apps/webappviewer/index.html?id=b66a1c2f8d5a49ecacbf0b8fb6371df2
https://lcpsfhs.maps.arcgis.com/apps/opsdashboard/index.html#/0ef4d2226513499a8254b1f2d3102317
WAB:
?extent=
?center=
?scale=
?query=
Ops Dashboard:
?state=

Note: Be aware of the differences between URL parameter usage rules for each app.

  1. After all the above information is ready, create an ExB app, drag an Embed widget to the canvas, save the app;
  2. Now, add the desired URL parameters that your embedded content is going to use to the ExB builder URL, in the browser tab, then click Enter to refresh the builder page to take effect, like this:InkedFinalExBURL_LI.jpgNote: there should only be one '?' in the URL parameters. The following ones should be changed to '&'.
  3. Inside your Embed widget, type your URL and the &query= part, for example, and then you will be able to open the URL info panel and add the app URL info as the value of this parameter at runtime. Note that the URL info generated by user selection will be in the format of {appURL.search.xxx}.
    AppURLconfiguration.pngDashboard.png
  4. After all the content being configured, save the app, and run preview mode. Note that preview will not inherit your builder URL parameter for now so you would need to add them on later.

  5. In the previewed app, all URLs will be removed now, so the added URL parameters for the embedded content shall be not affected, instead, it will show the content as it is without any URL parameters.

  6. Now, add any of the corresponding URL parameters added previously, and refresh the page, you can see the one that used the corresponding URL parameters will take effect and pass it to the embedded appRuntime_to use the URL parameters.png

 

Examples

1. Embed Case1_How to use the app URL1_WAB

End-user cases:

https://experience.arcgis.com/experience/b9a131b292c74a13ae7f3655c620d97f/?query=USA%20Major%20Citie...

https://experience.arcgis.com/experience/b9a131b292c74a13ae7f3655c620d97f/?query=USA%20Major%20Citie... 

...(can change per user's request and then show the different cities here)

2. Embed Case1_How to use the app URL2_embedDashboard 

End-user cases:

https://experience.arcgis.com/experience/9b69e6e7a6984952944d0410ac9b1872/?state=Michigan

https://experience.arcgis.com/experience/9b69e6e7a6984952944d0410ac9b1872/?state=California

 

Key Point

  • Type in the URL parameters you want for the ExB builder site, then save the app, so that the Embed widget can use them. You can even ignore the value of the parameter in the builder interface - try it out 🙂
  • You are able to change the values of these URL parameters for ExB apps at runtime as long as they are valid for the embedded content.

What's coming next

- A new filter URL parameter (?data_filter=?dsId1:filter, dsId2:filter)

- How to use it in the Embed widget

 

 

26 Comments
cnw_ivesleung
New Contributor III

Will this be available for Dashboards where hash # is used?

GIS_utahDEM
Occasional Contributor II

Is it possible to use URL parameters on an embedded dashboard to either allow a selection (within the dashboard) as a trigger for a data action (in an ExB table), or as a data action triggered by another ExB widget? Essentially I want a selection on a dashboard list to filter an ExB table, or a selection on an the ExB Table to highlight, flash or center on the related item in the embedded dashboard. The fact that certain URL parameters can take user input makes me think this would be possible, but I'm just not sure how to work it. 

Jianxia
Esri Regular Contributor

@GIS_utahDEM, the drawback for embedded apps is that they can't interact with other widgets from ExB as embedded apps live in sandboxes, isolated from others. The only way to communicate with them is to pass URL parameters down currently.

Jianxia
Esri Regular Contributor

@cnw_ivesleung, could you provide more information on what you are trying to do?

EmilyMcLeanACTGOV
Occasional Contributor

Hi @GIS_utahDEM ,

For your example of "selection on a dashboard list to filter an ExB table" you'll need URL parameters to be supported within Experience Builder Widgets. I've submitted an idea for this functionality here: Experience Builder Widgets to Support URL Parameters 

Hope this helps!

Thanks, 

Emily

MattHuser
New Contributor II

So if an Experience Builder references a simple Web Map, parameters do not work?  The only way to honor parameters within EB for situations like zooming to an address or extent is to create a WAB solution that references the Web Map and use the Embed Widget to reference the WAB solution instead of the Web Map inside of the EB?  If I'm reading this correctly, that would be problematic because I would lose out on functionality offered by the other widgets in EB since they would not be able to connect/interact with the embed widget content. 

Maybe I'm missing something...I have an EB that references a WebMap, how can I add a parameter to get to an address or extent?

Thanks!

Jianxia
Esri Regular Contributor

@MattHuser, the Embed widget with URL parameter in this blog, designed for the communication between embedded apps and an experience, is different from a general URL parameters. Unlike Web AppBuilder or Dashboards, Experience Builder has not had support for URL parameters described here, for example. Some of them will be supported eventually but there is no timeline currently. Hopefully this helps clarify a bit.

Matt-Huser
Occasional Contributor

@Jianxia Thank you for the follow up and clarification.

BymiljøetatenOsloKommune
New Contributor II

Hi there!

seems like url-info have broke.

 

BymiljetatenOsloKommune_0-1648538161413.png

 

TonghuiMing
Esri Regular Contributor

@BymiljøetatenOsloKommune You will have to manually put the desired URL parameters in your app URL to make it work. Please refer to the detailed steps provided above.

TonghuiMing_0-1648538696796.png

 

BymiljøetatenOsloKommune
New Contributor II

Thx @TonghuiMing !

it works 🙂

 

BymiljøetatenOsloKommune
New Contributor II

@TonghuiMing Hi again!

the Url-info work but seems embedded widget in arcgis experience builder in agol now showing contenr with url parameters. It has worked before.

 

BymiljetatenOsloKommune_0-1648647292206.png

 

TonghuiMing
Esri Regular Contributor

@BymiljøetatenOsloKommune - This is a bug and should be fixed now. You can give it a try.

TimConfare2
New Contributor III

I cannot get this to work, but then again I may be trying to do something that is not possible.  There are so many widgets that are available in WAB that are not in EB that I have to "split up" tasks between the two.  For example, I have a EB with some basic tools but I also need to provide a Public Notification tool to create mailing labels.  My thought would be to create a new page and embed a WAB site that has just the mailing label function.  I would like to sync the extent of both pages and the only way that's possible is through a url parameters function.  But I'm not sure that is the intent of this as nothing I try is working.  

AFackler_NAPSG
Occasional Contributor

Came here in reference to this post I made https://community.esri.com/t5/arcgis-experience-builder-questions/url-parameters-in-experience-build... @TonghuiMing

I can't seem to get this working for Dashboards. Am I doing something wrong?

My dashboard is set with a parameter 'teamname" which filters everything by the field 'team_name_filter". Works fine on dashboards, but when I copy it into ExB I keep getting No Data messages. Any ideas?

Dashboard Parameters:

AFackler_NAPSG_0-1669221046560.png

URL for the embedded dashboard

AFackler_NAPSG_1-1669221297184.png

URL and what shows up

https://experience.arcgis.com/experience/9051a07ffd1947bbb395e9f9b4088f85/page/Tactical/?teamname=TX...

AFackler_NAPSG_2-1669221338542.png

 

TonghuiMing
Esri Regular Contributor

Hi @AFackler_NAPSG - I checked your app above, and it appears that the Embed widget on this page does not configure to use any parameter at all:

TonghuiMing_1-1669947678567.png

Maybe you can refer to the steps in this post and try again? Note that any manually typed-in bracketed content will not be picked up, you need to use the URL info panel and then save the app, otherwise, the changes won't be recognized by the Embed widget.

AFackler_NAPSG
Occasional Contributor

I had to switch it back to the base URL since it broke the dashboard if I had the URL parameters in there (it would show the widgets as "No Data" seen in the screenshot which we can't have for a long time since this is used by teams for exercises).  I think I see what I'm doing wrong, I'll comment back when I have something

 

AFackler_NAPSG
Occasional Contributor

@TonghuiMing Okay getting closer I think.

I read the above closer and finally got the team name filter to appear in the URL Info list and it doesn't break the app when I have no filter on there. However when I try to put a filter on, nothing happens. Any suggestions?

AFackler_NAPSG_0-1670265577719.png

trying with the team name filter = MO-TF1. On the dashboard itself it would filter the data for that team only

AFackler_NAPSG_1-1670265645880.png

 

I appreciate the help, if we can get this working we can make it so the teams can easily filter the whole ExB by their team and help limit confusion

LaraJuliussonUSFS
New Contributor II

Hi @TonghuiMing, Thank you for this article. Would you help me understand better if I can do what I am trying to do. Also, perhaps you can help me @Jianxia

@AFackler_NAPSG, did you ever get this to work? I'd really appreciate some help, if so.

I am wanting to use an Experience Builder Query widget to query an embedded WAB. I was able to use a Share widget in WAB ("query and zoom to a feature") to get the basic URL I need to create the query in WAB, but I am not sure how to pull the queried feature name from the Experience query to pass it to the WAB URL. This does not seem to work:

MyWebAppViewerURL&query={appURL.search.query}

Would you be able to provide the steps to do this?

Thank you, Lara

 

 

Jianxia
Esri Regular Contributor

Lara, I don't think the workflow you described is doable. Currently the query url parameter in Experience Builder is not supported.

AFackler_NAPSG
Occasional Contributor

@LaraJuliussonUSFS I haven't been able to get it working and I still don't know what I'm doing wrong. Still waiting for a response but I think I'm just going to let it go. Ops Dashboard parameters are different format to ExB which doesn't help either.

MichaelChristensen31
New Contributor II

Hello- I need some help with passing multiple parameters from EB to an embedded ops dashboard. I have had success with passing one parameter, see example below:

.....shboards/8baaa347c09e41d8ac2f8865ae08086a#p1={Field} where p1 is a URL parameter that is configured in the dashboard. 

I would like to add a second parameter to pass in a date value from a filter in EB to further filter the embedded dashboard's content. I can't find any documentation on the syntax for passing more than one parameter. I have tried using. I will also note that just finding help documenting how to pass one parameter was not easy. Can date value parameters be passed in?

.....shboards/8baaa347c09e41d8ac2f8865ae08086a#p1={Field}&p2={DateValue} and several variations to no avail. Any help would be much appreciated.

 

Thank you

Jim_Wei
Esri Contributor

@TonghuiMing @Jianxia 
I see that there's App URL Parameters coming up for the Q4 2023 Roadmap. Does this mean we can expect to see part 2/3 & 3/3 of this series come out soon? This post has been very helpful and examples will complement the documentation page. Look forward to seeing an update from you guys. 

NataliyaLys
Occasional Contributor II

I am wondering if the URL parameters search would work if I embed Citizen Reporter application into Experience Builder site. From a little bit of testing i have done, I cannot get it working.

Here is my experience builder site:

https://experience.arcgis.com/experience/3138d7fedb644db688f8646d4364a339

And here is the site, I am trying to embed with parameters

https://omaha.maps.arcgis.com/apps/CrowdsourceReporter/index.html?appid=7bfb0ea7720b4ec1a45cdb58c2a5...

Thank you,

 

TimberErickson98
New Contributor

I have a general question about the guide in general, just some clarification. When you add your URL parameter to the Experience builder URL. Are you doing that on the published version of the experience? because the picture you show first in the guide shows a URL that is not in builder mode. every time I try to apply that to the exp URL, nothing happens, when I put it in the URL while in a builder instance it works but my URL parameter does nothing to my dashboard. I'm not sure if my URl needs to include the specific pages as our experience has multiple pages as well. Just kind of confused on the visual resources of the guide.

WhitneyPatterson
New Contributor II

Thank you for the article @TonghuiMing. Where did you get the ?state= parameter from? Was this a parameter that was added to the Dashboard first in the View panel? If so, is this a feature or category parameter? It would be helpful to have edit access to the original Dashboard or screenshots and an explanation of how the Dashboard is configured or what specific data source corresponds to 'state'.

We created an EXB with multiple pages in which a user selects a polygon on the first page and all subsequent widgets are filtered using the integer FIRESHED_ID field as a primary key. On the last page of the EXB we have an embed widget with a Dashboard that is to display a summary of the data results described in the EXB.  The Dashboard's widgets are rendered only when filtered with the Source and Target fields being FIRESHED_ID.  We'd like for the initial polygon and FIRESHED_ID selection on page 1 of the EXB to also select the same polygon and FIRESHED_ID that would then "trigger" the embedded Dashboard's widgets to filter with this selected FIRESHED_ID.  Is this possible? At this point, our only goal is to have users select a polygon only once in EXB and have it passed on to Dashboard by any means necessary without having users select the polygon again in Dashboard. Thank you for any assistance. 

About the Author
Product Engineer for Experience Builder and Web AppBuilder. Into sports like kayaking, canoeing, and swimming. Big fan of aquariums. U of M alumni.