Refreshing a Web Resource in Unified Interface with JavaScript (The New Way)

This post comes from a great find courtesy of an elite dev I work with who goes by “PV”. We had a requirement to reload / refresh an HTML web resource on a page when a user clicked into a tab to view it. This used to be reasonably straight forward in previous D365 versions and JavaScript – get the Web Resource using getSrc, set the Web Resource to null and then back to itself using setSrc. However, this wasn’t working for us in the latest version of D365 / Power Apps.

Here’s how the new code works.

First, get the name of the tab you’re working with. I have a web resource on the Summary tab of the Account, SUMMARY_TAB:

The Web Resource simply displays the current date and time, so we can see if the date/time is updated when I click out of the tab and back into it:

The name of the web resource is WebResource_HelloWorld:

Here’s the code. In summary:

1. Get the control using getControl
2. Get the source using getSrc
3. setSrc to about:blank
4. setSrc back to the real source using a setTimeout

function OnLoad(executionContext) {
   var formContext = executionContext.getFormContext();

   var SummaryTab = formContext.ui.tabs.get("SUMMARY_TAB");
   SummaryTab.addTabStateChange(TabClicked);
}

function TabClicked(executionContext) {
   var formContext = executionContext.getFormContext();

   var webResource =formContext.getControl("WebResource_HelloWorld");
   var src = webResource.getSrc();

   var aboutBlank = "about:blank";
   webResource.setSrc(aboutBlank);

   setTimeout(function(){ 
      webResource.setSrc(src);
   }, 1000);
}

Now, rerunning the code, tabbing to a different tab and back to the Summary will reload the web resource and update the date/time:

And after tabbing:

ABOUT CARL DE SOUZA

Carl de Souza is a developer and architect focusing on Microsoft Dynamics 365, Power BI, Azure, and AI.

carldesouza.com | LinkedIn | Twitter | YouTube

Facebook

Twitter

Linkedin