Embedding Shiny Apps in Experience Builder

[AnthonyCastelletto]

Hello Experience Builder Community,

    I'm developing a "Franken-app" using Experience Builder as a kind of top level interface. Part of the system is an R Shiny app I developed to handle some search functions. I also bolted on a simple report function which gets implemented as a Download Handler linked to a button on the user interface. I then put this into Experience Builder using an embed widget.

   The intended sequence of events is as follows: User searches the database and gets results back. The user says, "I want to save this as a report" and clicks the "Report" button. The report button kicks off a function in Shiny which puts the result set into an MS Word document (which will be nicely formatted at some point). This all works fine. Except when I embed this search app in Experience Builder. Here, when the user clicks on the "Report" button, nothing happens. However, if the user does a ctrl+click it all works.

   My question is this: Is there a setting in the Experience Builder embed widget which would change the click behavior? If I implement this as an iframe tag in the Embed widget, is there an option I should specify?

  To see this in action: go to: https://experience.arcgis.com/experience/a8d5e92fdcee48ea88b5cc73b2fb1ecf/page/Simple-Search . Enter "flood" in the text entry box (it's a term I know will produce results). You'll see a couple items listed. Then click "Generate Report". Nothing happens. Do a ctrl-click and you'll see the function generate a Word doc for download. The naked shiny app is: https://noep.shinyapps.io/dc_simple_search/ . This is all in a very rough state right now so go easy. I need to write some error handlers, come up with a report layout and... so many things.

For those curious, the backend database is a Digital Commons academic repository. The apps interact with it through an API. The main reason I haven't tried to develop this in Javascript or Typescript as a custom widget is my own lack of skill in the languages.That and the lack of infrastructure I have available. I need to get something up relatively quickly so I used what I had and what I had expertise in.  Thanks for your feedback and advice.

[JeffreyThompson2 · Accepted solution]

I tried your app in three different browsers. In Firefox, I was able to download the report using Ctrl+click. I was not able to download the report at all in Chrome or Edge. All three browsers throw a console warning about blocking the download. Here is a link to the Chrome/Edge error.

The Embed Widget works by using the iframe html tag. Iframes are inherently a security risk as they are used to bring in content from other websites and if the other site is compromised your's (or ESRI's) could be as well. Because of the riskiness, browsers are now defaulting to blocking downloads by iframe and the Embed Widget has been intentionally limited in Experience Builder. I doubt this will work, but use the Code option in the Embed widget and use:

<iframe width="100%" height="600px" sandbox='allow-downloads allow-scripts allow-same-origin' src="https://noep.shinyapps.io/dc_simple_search/"></iframe>

I expect the Embed Widget will not allow an iframe with a sandbox attribute. (You may need to adjust the size and the allow-scripts and allow-same-origin options may not be necessary.)

If you use Developer Edition, there is nothing ESRI can do to stop you from making a custom Embed widget that allows downloads through an iframe.

[AnthonyCastelletto]

That makes sense. I ran into the security limitation on something else I made. I'll try the sandbox download option. If that doesn't work, then I've got a couple of vague ideas for a work around.

I'm way out of date on a lot of security issues in wed development. I'm economist who happens to know how to code who's filling in for want of a web developer. Thanks for the advice.