Skip to Content

Use onboarding Tool for Fiori

Jul 21, 2017 at 11:43 AM


avatar image

Hey everyone,

at the moment im trying to implement an onboarding tool for UI5 Apps. For this i tried various JS libs like "introJS" or "Chardin.js".

After some investigations i found a Problem with the CSS Class .sapMPage (the Property isolation:isolate causes a new z-index Stack). So i needed to manipulate the Page with a new CSS Class when the tool is active.

After this little "hack" everything works fine if i launch the App in standalone Mode, but when i open the app inside the FLP (SAP_UI 751) it doesn't work anymore. Sadly im not finding any issue so far.

Has anyone else tried to use some onboarding Tools inside the FLP and made it work like expected? If yes i'm curious for your answers how you achieved that.



10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

1 Answer

Best Answer
Sascha Weidlich Jul 21, 2017 at 12:35 PM

Nevermind. I found the Solution by myself.

The "ViewportContainer-Div" inside the Fiori 2.0 FLP causes this bug, because of its CSS-Properties "will-change" & "-webkit-perspective". These two properties will break the z-index Stack.


i simply added an CSS Class like

.disableWebkit {
    -webkit-perspective: none !important;
    will-change: initial !important;

to the DIV when starting the Onboarding-Tour and removed it when exiting the Onboarding-Tour. Now introJS works like a charm even while using it inside the FLP.

10 |10000 characters needed characters left characters exceeded