SAP EWM RFUI Optimierung durch Custom Scripts

Wie im Artikel zu den Custom Scripts beschrieben, können auch Oberflächen von SAP EWM RFUI Applikationen angepasst werden. Diese sind oft nicht für sehr kleine Bildschirme von Scannern angepasst. Auch in Szenarien, in denen die Public Cloud verwendet wird und dadurch keine Änderungen vorgenommen werden können, ist es dennoch möglich, dass im Browser die Oberflächen angepasst werden.

Üblicherweise haben Buttons eine fest definierte Breite und Höhe in Pixeln. Auch die Schriftgröße ist fest definiert. Hierdurch passen sich die Oberflächen nicht dynamisch (responsive) an die Bildschirmgröße an. Ein normaler Menü-Dialog in SAP EWM RFUI sieht folgendermaßen aus:

Durch Custom Scripte lässt sich dieser Dialog jedoch folgendermaßen anpassen:

Nun passen sich Schriftgröße, Höhe und Breite von Buttons oder Eingabefeldern immer dem Bildschirm an. Hierdurch ist der Dialog auch auf einem Tablet für den Anweder leichter zu bedienen:

Das verwendete Skript kann im Code Editor (Kategorie SAP/ITS/Fiori Optimierung) als Beispiel ausgewählt werden. Der nachfolgende Code kann im Browser auf einem Laptop auch direkt ausgetestet werden.

Was das Skript macht: Es greift auf den #userpanel-Container der SAP RFUI zu und ersetzt die fixen Pixelwerte durch relative Einheiten (rem). Die wichtigsten Änderungen:

• Alle Buttons und Eingabefelder erhalten height: 3rem und font-size: 1.25rem – skaliert mit der Basis-Schriftgröße des Geräts
• Breiten werden auf 100% gesetzt, damit Elemente die volle Bildschirmbreite nutzen
• Fixe margin-left-Werte werden entfernt, damit Elemente auf schmalen Bildschirmen zentriert angezeigt werden

CSP-Hinweis

Wenn dein SAP-System eine Content Security Policy verwendet, kann die Skript-Injektion blockiert werden. Im CSP-Artikel erfährst du, wie du Custom Scripts von TheFlex freischaltest.

var css =
  "#userpanel > div > div { \
        position: relative !important;\
    }\
\
    #userpanel > div > div, #userpanel > div > div > div {\
        width: 100% !important;\
                               margin-left: 0px !important;\
                               height: 3rem !important;\
        line-height: 3rem !important;\
        height: unset !important;\
        margin-top: 0 !important;\
                               font-size: 1.25rem !important;\
                               text-align: left !important;\
    }\
\
    #userpanel > div > div > div > .lsRLItemCnt {\
        width: 100% !important;\
        margin-top: 0 !important;\
        height: 3rem !important;\
        line-height: 3rem !important;\
        position: relative !important;\
        margin-bottom: 0.5rem !important;\
        margin-left: 0px !important;\
    }\
     \
    #userpanel > div > div > div > .lsRLItemCnt > div {\
        height: 3rem !important;\
        line-height: 3rem !important;\
        font-size: 1.25rem !important;\
    }\
\
    input {\
        height: 3rem !important;\
        font-size: 1.25rem !important;\
    }\
\
    #userpanel > div > div > div > div, #userpanel > div > div > div > div > span, , #userpanel > div > div > div > div > span > label {\
        text-align: left !important;\
    }\
\
    .lsLabel--root .lsLabel { \
        font-size: 1.25rem !important; \
    }";

var head = document.getElementsByTagName("head")[0];
var s = document.createElement("style");
s.setAttribute("type", "text/css");
s.appendChild(document.createTextNode(css));
head.appendChild(s);