Technical Articles
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!
Thanks!
But: "Thats all for today" ... is there a further information about this?
Kind regards!
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.
hi, can you please attach complete code here, I tried but nothing work in IE
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
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?