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:

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);