When developing a new application Outsystems recommends us to use the Outsystems UI framework and I do love the experience of developing with it! Unfortunately there is a rather major issue that the Outsystems Reactive web apps do not render in Internet Explorer.

Is there any way to toggle features based on browser so that IE users (there are many in my organisation) at least would have a limited experience? React as such can work on IE 11 with polyfills, but I am not sure how this could be implemented in an Outsystems project.

It would be a great addition to have built-in feature detection when the project compiles and allow users to see some functionality instead of presenting a broken screen. Our current workaround is to redirect IE users to a traditional web app with a single page informing them to open the link in a modern browser. This is not a very neat solution and annoying to users, but it beats showing a broken page as is the default behaviour.

IE11 might be outdated, but as developers we have to accept the fact of life that a lot of users (especially enterprise users) still use this browser. To underscore this (quite sad) fact is that Microsoft actually still provides support and updates on IE11.

The option should not be between building a modern application that a subset of users can access and the rest will be blocked from, or a traditional web application. There should be a way to build a modern application where users with less modern browsers can at least utilise the core features. That way we can incentivise users to upgrade browser for the full experience instead of just blocking them out. If Outsystems seriously wishes developers to build awesome applications with the reactive framework, then adding some form of limp mode for IE11 is a must!

I would be happy to hear you share your experiences and solutions to this issue!

Hi Mattias, you are right, IE11 is a pain, but cannot be forgoten just yet.

You can detect the browser with some javascript. Have a look here: https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser

With some javascript you can have a local variable bound to a hidden field on the screen to inform your server-side logic which browser you're dealing with.

Hope it's helpful.

IE11 isn't outdated, it's legacy. Microsoft itself strongly recommends not using it, unless it is really needed to support legacy applications. There is absolutely no need to use IE11 for anything else. Microsoft has a modern, fully supported browser in Edge, and apart from that there's Chrome and Firefox as good alternatives. Any company still clinging on to IE11 as the only browser allowed has probably bigger issues than that alone.

Totally agree with Kilian

Edge is the most up to date browser from Microsoft, either you are supporting an existing legacy app or you shouldn't be building for an obsolete browser.

Best regards,

PC

Solution

Hi Mattias Rundberg,


I understand your question because we had the same issue in the past.

We had a B2C worldwide application in the industrial and agriculture segment, it means that a lot of customers use Internet Explorer and we cannot just skip them:


From our perspective, we said several times: "move to a new browser" or "IE is not a browser, Listen to Microsoft", but in the end, the customer is always right. And if we want to deliver a new Reactive application, we had to support IE because, for the customer, it's easier to move to a different supplier than to move to a different browser.


The latest OutSystems UI relies heavily on CSS variables but, on Internet Explorer, these variables are not supported. No wonder your webApp didn’t work! All the new OutSystems Reactive Web Apps are based on OutSystems UI.


So what should we do?

That was the moment we talked with OutSystems and they pointed us in the direction of Polyfill variables. We found this GitHub project CSS Variables Polyfill for IE11. In this repository, you will find a script called ie11CustomProperties.js that in essence converts all CSS variables, into simple custom properties that are supported by IE. The majority of all our CSS variables are supported and we can solve our issue with a simple script.

To make it work all we needed to do was to get this script running on our app. 

For Reactive Web Apps:

Place the script on your Scripts folder in the eSpace of our theme. 

Then make this a required script on the layout block, like this:

I will add this script into a forge component soon, and I will add a medium article with the entire explanation.


I hope this helps...

Cheers,

LSM

Solution

Luís Santos Monteiro wrote:

Hi Mattias Rundberg,


I understand your question because we had the same issue in the past.

We had a B2C worldwide application in the industrial and agriculture segment, it means that a lot of customers use Internet Explorer and we cannot just skip them:


From our perspective, we said several times: "move to a new browser" or "IE is not a browser, Listen to Microsoft", but in the end, the customer is always right. And if we want to deliver a new Reactive application, we had to support IE because, for the customer, it's easier to move to a different supplier than to move to a different browser.


The latest OutSystems UI relies heavily on CSS variables but, on Internet Explorer, these variables are not supported. No wonder your webApp didn’t work! All the new OutSystems Reactive Web Apps are based on OutSystems UI.


So what should we do?

That was the moment we talked with OutSystems and they pointed us in the direction of Polyfill variables. We found this GitHub project CSS Variables Polyfill for IE11. In this repository, you will find a script called ie11CustomProperties.js that in essence converts all CSS variables, into simple custom properties that are supported by IE. The majority of all our CSS variables are supported and we can solve our issue with a simple script.

To make it work all we needed to do was to get this script running on our app. 

For Reactive Web Apps:

Place the script on your Scripts folder in the eSpace of our theme. 

Then make this a required script on the layout block, like this:

I will add this script into a forge component soon, and I will add a medium article with the entire explanation.


I hope this helps...

Cheers,

LSM

I'm a colleague of Luis and he had already shared this solution with me. It solved a lot of our issues, so I'm looking forward for the forge component!

Good Luck!
JPP

Luís Santos Monteiro, thank you very much for your very good explanation! I will try this solution, it seems to be exactly what I am looking for. I will mark as a solution as soon as I have tested it.

I agree with you in principle, Killian. The issue is that my user base had IE as the forced default browser (long story why but has to do with completely unrelated legacy applications). This means that as soon as the user receives a link to our applications the only way to open them is by copy-pasting them into Edge or Firefox. That is not a good user experience. If the user could choose their default browser, then it makes sense to inform that the application does not support IE. But penalising the user for decisions she does not have influence over is in my view not a good philosophy if one wishes to take a user-centric approach to development.

Finally, thank you all for your help and input!

Dear Luis,

Thank you very much for your help, it resolved all the issues so far with "vanilla" UI Reactive! There are some issues with other forge components (Dropzone and SweetAlert2) for which we are looking at fixes.

I found that loading the script using the require script system action in OnApplicationReady also works. The advantage with that solution is that it becomes independent from the screen layout which reduces the need to add it in several places if one has several layouts (e.g. Login page). This should somewhat improve maintainability in case of needs to update the script.

I think that this would be a very useful and appreciated Forge component. Do not hesitate to contect me directly should you with any help with testing or anything else when preparing it!

I wish you all a good day and a great weekend!

I just wanted to add a small update on how I have resolved this thanks to the help of the community. Hopefully, it may be helpful to someone.

The following was done in a library module so that I can use it wherever I would need it:

1. I implement a small Javascript which returns the browser name and version, based on a code snippet I found on StackOverflow:

2. Then I created a small flow to populate an output structure so that I can use it also as a function in case I need that at one point:

3. I used this function in a new client action to activate the IE fix in case needed:

4. Finally, I use this Client Action in the OnApplication Ready event where I also store a Client.IsIE boolean in order to easily be able to adjust the logic for any additional adjustments I might need to do because of IE (such as displaying a banner advising that IE is not fully supported):


Once again thanks to @Luis for his great help!



Hi Mattias Rundberg,


Thanks for your feedback, I'm happy that you can solve the issue with all community effort. :)

Special Thanks to Tiago Simões and Miguel Vicente, they are not involved in this thread of comments, but they have been working on this subject for so long and after business hours ;)


This week, José Pedro Proença and I will work together on a component to deploy in Forge with some scripts for some Outsystems UI widgets could work on IE.

The component will not work for all widgets, like progress bar, flip content, Dropdown Tags, LightBoxImage etc... But you can have a Minimum Viable Product for IE.


Cheers,

Luís

Luís Santos Monteiro wrote:

Hi Mattias Rundberg,


Thanks for your feedback, I'm happy that you can solve the issue with all community effort. :)

Special Thanks to Tiago Simões and Miguel Vicente, they are not involved in this thread of comments, but they have been working on this subject for so long and after business hours ;)


This week, José Pedro Proença and I will work together on a component to deploy in Forge with some scripts for some Outsystems UI widgets could work on IE.

The component will not work for all widgets, like progress bar, flip content, Dropdown Tags, LightBoxImage etc... But you can have a Minimum Viable Product for IE.


Cheers,

Luís

It sounds promising and a component I think many will find useful! I agree it is not a question of making the application 100% IE compliant, but at least provide skeleton functionality and the information that a better experience is available by using a more modern browser.


Hi Mattias Rundberg,


The component on Forge was uploaded last weekend.

You can check the function to retrieve the browser IE (using the Built-in function GetUserAgent() ), and you can edit the Function and adapt for other browsers too.


Cheers,

Luís