Use onboarding Tool for Fiori

[sascha_weidlich2]

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.

Regards,

Sascha

[sascha_weidlich2 · Accepted solution]

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.

Solution:

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.