Skip to Content
Technical Articles
Author's profile photo Thales Batista

UI5 Internet Explorer 11 support is almost phasing out, support it without much effort (with polyfills)

Your UI5 app runs on everything, even on toaster, but for unexplained reasons is broken on Internet Explorer? Your main support line is newer browsers but you are concerned to keep it running on IE? You simply hate IE debugger? Welcome aboard to helltrocompatibility!

We’ve been through this such a long long time just tryin’ to kill the pain.
‘Cause nothin’ lasts forever even cold November rain.

Good news everyone! SAPUI5 support for Internet Explorer 11 is planned to phase out on Q1/2021!
Bad news everyone: it’s still not Q1/2021.

You, as a good developer, try to keep support on same Product Availability Matrix as SAP, or as a cursed one is haunted by enforced browser policy that only allows IE11 and need to make it work there.

Looking at JavaScript, it evolved (and continues evolving) since IE11 launch, a lot of cool stuff was introduced that make our lives as developers easier. It’s a double edge sword because using them makes your code incompatible with IE11 since it is not natively implemented on this browser.

Does it worth reimplement in a way that works on IE11? No, because Life found a way to solve this problem: polyfills. In simple terms: a polyfill recreates a missing function in browser with JavaScript code, you can loosely think as a compatibility layer. One example is Object.values method, it simply extract object properties values into a array. This is not natively available on IE11. A naive polyfill for it is:

if (!Object.values) {
  Object.values = function(object){
    return Object.keys(object).map(function(key){
      return object[key];
    });
  };
}

But I’m not here today to talk about polyfills, I’m here to provide a simple tip: how to put them in your UI5 project in a organized way to make IE11 transition to freedom easy, and also a easy task to clean up code after Q2/2021.

UI5 apps have manifest.json as main ruler, let’s have some benefit from it

Create a folder to store polyfills (like polyfill), put your polyfills files there, and link them in manifest.json, inside sap.ui5 namespace.

{
  . . .
  "sap.ui5": {
    . . .
    "resources": {
      "js": [{ "uri": "polyfill/Object.values.js" }]
    }
    . . .
}

That’s all for today…

But what about a external polyfill?

Bad news everyone: manifest.json resource entry only accepts relative path.

Good news everyone! It is JavaScript, you can create a local script to load a external script!

WebIDE will complain about DOM manipulation (you shouldn’t do it on UI5 common development), we are doing pro business here so we disable eslint for this snippet.

/*eslint-disable sap-no-dom-access*/
/*eslint-disable sap-no-dom-insertion*/
/*eslint-disable sap-no-element-creation*/
if (!document.getElementById("polyfill_loader")) {
	var script = document.createElement("script");
	script.id = "polyfill_loader";
	script.src = "//polyfill.io/v3/polyfill.min.js";
	document.head.appendChild(script);
}
/*eslint-enable sap-no-dom-access*/
/*eslint-enable sap-no-element-creation*/
/*eslint-enable sap-no-dom-insertion*/

 

 

With my last breath, I curse Zoidberg!

Assigned Tags

      5 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Alexander Urban
      Alexander Urban

      Thanks!

      But: "Thats all for today" ... is there a further information about this?

      Kind regards!

      Author's profile photo Thales Batista
      Thales Batista
      Blog Post Author

      Hello, I used this expression as a bridge to next section (that's why I used ellipsis on the end), because who discovers polyfills eventually will want to rely on external ones. But if you are going to use polyfills from a local JavaScript file(s), the procedure is simple as that, they just need to be somewhere in the app project structure.

      If you want more details about manifest.json, the documentation iself have a bunch of details on Descriptor for Applications, Components and Libraries section. Some "Attributes in the ... namespace" listings doesn't display a caret, but will expand anyway if you click on it.

      Author's profile photo Manoj kumar
      Manoj kumar

      hi, can you please attach complete code here, I tried but nothing work in IE

      Author's profile photo Thales Batista
      Thales Batista
      Blog Post Author

      Hello, GitHub does not allow folder structure on gists, so I'm providing only the files changed (manifest.json) and created from a UI5 app template. The only relevant part of manifest.json is the "resources"\"js" property.

      https://gist.github.com/thalesvb/81c8bf0c183b71f027b14ffaa8a110cc

      Author's profile photo Manoj kumar
      Manoj kumar

      Hi, thanks for yur reply ,Actually I am trying to add your code in web ide, in webide it is not working , other sdk I did not check. Is there anything need to do more to get it work in WEBIDE?