Skip to Content
Technical Articles
Author's profile photo Hans Verreydt

Using Fiori as frontend for SAP EWM RF ITS screens – Part 1

Hi All,

In this part, I’ll describe how we used SAPUI5 as basic for a Fiori like frontend for our SAP RF ITS screens.

———————————————————————————————————————

 

During the implementation of our SAP environment, I noticed that the ITS services for eWM were not really that mobile friendly.  (Still using the old “ugly” ITS screens… come on SAP, you can do better 😉 )

As we’re using different mobile devices in our locations, I was looking for a solution were the ITS screens are the same on all different devices.

So I started my search to see what others already had done in this case, but I felt disappointed… (or I’m really bad at searching 🙂 )

The best thing that I found, was a presentation from ASUG 2013 “Going Beyond SAP ITS Mobile Apps to a Responsive Design Mobile Apps” about using JQuery Mobile in the ITS templates from SAP. As I’m quite familiar with SAPUI5 and mobile apps, I took this presentation as my starting point for my quest to make something in SAPUI5.

So, when using SAP eWM, you also use the SAP RF ITS screens. When you want to set this up, you probably use the eWM RF cookbook to set everything up, and the generate all the HTML screens that you want to use.

Now for this part, generating all the HTML screens, this is the part that I have taken care of in this blog… We’ll create our own ITS SAPUI5 template generator based on the standard MOBILE4 template from SAP.

Step 1: Create a new style

  • Create a new class: ZCL_ITS_GEN_SAPUI5_MOBILE
    • and use class CL_ITS_GENERATE_HTML_MOBILE4 as the superclass

  • Create a new record in table “W3GENSTYLES”.
    • Style: ZMOBSAPUI5
    • ABAP Class: ZCL_ITS_GEN_SAPUI5_MOBILE
    • Info: For Mobile Responsive Design Style (SAPUI5)

  • Redefine methodes in class ZCL_ITS_GEN_SAPUI5_MOBILE
    • DESCRIPTION_TEXT
      • Add a new “WHEN” in the CASE for your new Style
    • CONSTRUCTOR
      • Service: ZITSGENSAPUI5
      • Theme: 99

 

 

 

Step 2: Create a new ITS service

  • Create Service: ZITSGENSAPUI5
    • Copy from standard service ITSGENMOBILE4

Step 3: Adapt the templates with SAPUI5 tags.

When you have your new service, it’s time to extend this template service with SAPUI5 coding.

Now, as you know, ITS generated HTML screens are HTML screens that will use backend logic from the SAP system. So, when using SAPUI5 as frontend, it’s only the HTML tags that we use, in combination of the existing backend logic.

I worked in the past with SAPUI5, were I used XML views and JavaScript files. In this case, I had to find something else because I can’t use XML views for this. But I found the solution! SAPUI5 has what it called, declarative support!

Declarative support is aware of properties, associations, events, and aggregations in a SAPUI5 control manner. This means that you can specify them within the markup of the HTML document either as data attributes or as child elements.

<!Doctype HTML>
<html>
<head>
<title>Declarative Programming for SAPUI5 - sample01</title>

<script id="sap-ui-bootstrap"
type="text/javascript"
src="resources/sap-ui-core.js"
data-sap-ui-theme="sap_belize"
data-sap-ui-libs="sap.m"
data-sap-ui-modules="sap.ui.core.plugin.DeclarativeSupport">

</script>
</head>

<body class="sapUiBody">
<div data-sap-ui-type="sap.m.Input" id="message" class="my-button" data-value="Hello World"></div>
<div data-sap-ui-type="sap.m.Button" data-text="Click me!" data-press="handlePress"></div>

</body>

</html>

With this method, we’ll be able to add SAPUI5 to the frontend of our ITS RF screens

  • HTML Templates
    • HEADER/BEGIN
    <head>

        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">


    `if ( ~itsmobileDeviceInclude != "" )
        include(~service=~current_service, ~language="", ~theme=~theme, ~name=~itsmobileDeviceInclude & ".html");
     end;`
    • HEADER/SCRIPT
      • Add to the end of the page, following code:
      <script src="/sap/bc/ui5_ui5/ui2/ushell/resources/sap-ui-core.js"
		id="sap-ui-bootstrap"
		data-sap-ui-theme="sap_bluecrystal"
		data-sap-ui-libs="sap.m"
            data-sap-ui-preload="sync"
		data-sap-ui-modules="sap.ui.core.plugin.DeclarativeSupport">
	</script>
    • MAIN_SCREEN/BEGIN
<!-- main screen begin -->
<div width="100%">`
    if ( ~itsmobileCuaInclude != "" ) <!-- customers cua area -->
       include(~service=~current_service, ~language="", ~theme=~theme, ~name=~itsmobileCuaInclude & ".html");
    elseif ( ~itsmobileNoCuaInclude != "1" && ~itsmobileNoCuaInclude != "X" ) <!-- default cua area -->

    end;`

</div>
<div data-sap-ui-type="sap.m.Page" data-title="Biobest SAP">
    <div data-sap-ui-aggregation="headerContent">
    </div>
    <div data-sap-ui-aggregation="content">
    • MAIN_SCREEN/END
    </div>
    <div data-sap-ui-aggregation="footer">
        <div data-sap-ui-type="sap.m.Toolbar">
            <div data-sap-ui-aggregation="content">
        	    <div data-sap-ui-type="sap.m.ToolbarSpacer"></div>
        	    <div data-sap-ui-type="sap.m.Button" data-icon="sap-icon://sys-enter" data-type="Accept" data-tooltip="Enter" data-press="setOkCode ('/00')" ></div>
            </div>
        </div>
    </div>
</div>
<!-- main screen end -->

 

    • ELEMENTS/BUTTON
`if ( ( 'GEN_NAME'[GEN_LOOP_LINE].exists == "X" ) && ( 'GEN_NAME'[GEN_LOOP_LINE].visible == "X" ) )
    `<div data-sap-ui-type="sap.m.Button" data-text="`strmask('GEN_NAME'[GEN_LOOP_LINE].label) `" data-width="100%" data-press="setOkCode ('`'GEN_NAME'[GEN_LOOP_LINE].okcode`')" ></div>`
else
    `<span style="`margin_left("GEN_COLS", "GEN_WIDTH")`; height:1px"></span>`
end;`

Save and publish your ITS service!

 

Step 4: Generate your screens!

Note: Generating screen for every small changes was tedious and lot of effort. I found a transaction that will do this job easily. Transaction Code: SIAC_REGENERATE_TEMP.

 

Result:

 

As you can see, you’ll now be able to convert your ITS screens into fancy SAPUI5 screens so all the screens are responsive on every device! *Celebration dance* 🙂

The only thing I noticed is that the response time was a little bit slower, because the sap.m.* libraries must be loaded after each call. I tried only loading the specific components (for example: sap.m.Button, …), but that didn’t work at this moment.

 

Thanks for checking out my blog!

Should you have any comments, please leave it below or send me a direct message.

 

Hans Verreydt
SAP Application Specialist – Biobest Group NV

Assigned Tags

      29 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Michael Lichtinger
      Michael Lichtinger

      Thanks for this blog post.

      Author's profile photo Marco Beier
      Marco Beier

      Great blog post! Nice read and a nice little deep dive/how to with lessons learned and hints. Appreciate you sharing all this. 💯😊

      Author's profile photo Hans Verreydt
      Hans Verreydt
      Blog Post Author

      Thanks! 😊

      Author's profile photo Joerg Michaelis
      Joerg Michaelis

      Hi,

      thanks for sharing this innovative approach and thanks for your feedback on the current available solution.

      I like your approach but I don't like how the buttons are shown, one line per button. How is the feedback of your customers related to this? Did you find a way to improve this?

      Did you figure out other ways to adjust the screens like changing font sizes or similar. We are highly interested about your customers feedback here.

      Regards

      Jörg (SAP SE)

      Author's profile photo Hans Verreydt
      Hans Verreydt
      Blog Post Author

      Hi Jörg,

      Thanks for your comments!

      As I'm working for the customer, I only have implemented this for us, but with this blog, I hope that others will follow and we can improve this!

      As we're currently in testing phase, I received already the first feedback for this (positive!) but I'll follow up this very closely in the next coming weeks

      About the buttons, one line for each button. I noticed that for mobile devices, like for example a Honeywell CT60 it's quite easy to use this way. Of course, when using a mobile device with hardware buttons, like the Zebra MC3300, you don't need to buttons below.

      Because it's for mobile and for touch screen only in our case, I created a easy layout with a button on each line, otherwise there was to much on the screen, which makes it difficult to use.

      We can of course play with the "width" of the buttons in the template

      data-width="100%"

      And like in the standard templates, it's also possible to include CSS files to the layout so you can adapt the standard font size ect. if necessary.

      Regards,
      Hans - Biobest Group NV

      Author's profile photo Gokul Kumar
      Gokul Kumar

      Hi Hans,

      Thanks for Sharing. We were working on the ITS by following the steps provided above.
      The Header and Footer button were reflected as "sap.m.Button". But the main screen buttons remains the same.

      Do we need to do any configuration or we are missing anything. I have attached the screenshot of what we did and how it looked on the Browser.

       

      Regards,

      Gokul Kumar M

      Author's profile photo Hans Verreydt
      Hans Verreydt
      Blog Post Author

      Hi Gokul,

       

      Did you changed the Elements/Button section? Normally this should change the generated buttons on the screen.

      `if ( ( 'GEN_NAME'[GEN_LOOP_LINE].exists == "X" ) && ( 'GEN_NAME'[GEN_LOOP_LINE].visible == "X" ) )
          `<div data-sap-ui-type="sap.m.Button" data-text="`strmask('GEN_NAME'[GEN_LOOP_LINE].label) `" data-width="100%" data-press="setOkCode ('`'GEN_NAME'[GEN_LOOP_LINE].okcode`')" ></div>`
      else
          `<span style="`margin_left("GEN_COLS", "GEN_WIDTH")`; height:1px"></span>`
      end;`
      
      

       

      Regards,

      Hans

      Author's profile photo Raja Sekhar Velisetti
      Raja Sekhar Velisetti

      Congrats and Thanks for this post.

      I too followed ASUG 2013 presentation and tried to change the look of ITS Mobile screens but I am not even close.

      Since you are working on ITS Mobile screens. Can you please tell why ITS Mobile why not design & use Fiori/UI5 screens on RF guns/ mobile screens? Please explain detail if possible. I could not find much about it. I am bad at searching too.

       

      ZITSGENSAPUI5 theme that you created, it can be applied all the old and new applications correct?

       

      I will try your approach and get back with comments.

       

      Thanks,

      Raja Sekhar

      Author's profile photo Hans Verreydt
      Hans Verreydt
      Blog Post Author

      Hi Raja,

       

      Please check also part 2: https://blogs.sap.com/2021/09/13/using-fiori-as-frontend-for-sap-ewm-rf-its-screens-part-2/

      In this part, I used the Fiori Fundamentals, which use Fiori 3 style and is for better performance.

       

      Regards,
      Hans

      Author's profile photo Sweta Gohil
      Sweta Gohil

      Hi Hans,

      Thanks for writing this blog. I tried to follow the same I could redefine DESCRIPTION_TEXT as I got redefine option for that but for constructor I am not getting it .

      Can you please specify the steps how to redefine constructor?

      Thanks & Regards,

      Sweta Gohil.

      Author's profile photo Hans Verreydt
      Hans Verreydt
      Blog Post Author

      Hi Sweta,

      I'm not sure, but did you try to create a new constructor?

      Regards,
      Hans

      Author's profile photo Sweta Gohil
      Sweta Gohil

      Hi Hans,

      Thanks by creating new constructor it worked.

      Thanks.

      Author's profile photo Laszlo Takacs
      Laszlo Takacs

      Hi Hans,

       

      Thank You for your blog! I followed your steps, and now we have a login screen, but after login, we get an empty screen. Do You have any suggestion what went wrong?

      Thank You:

      László

      Author's profile photo Hans Verreydt
      Hans Verreydt
      Blog Post Author

      Hi László,

       

      Did you first generate the "standard" SAP RF screens?

      Check first the "Configuring ITSmobile for SAP EWM RFUI: How-To Guide"

      if that was a success, try to follow the steps from by blog, normally that should work.

      Regards,
      Hans

      Author's profile photo Laszlo Takacs
      Laszlo Takacs

      Hi Hans,

       

      Thank You for your reply! We have generated the standard screens well.

      I could not implement the part you mentioned at the beginning of step 3 regarding to declarative support. I don't know where should I implement it.

      I noticed yesterday, that the class constructor of my ZCL_ITS_GEN_SAPUI5_MOBILE doesn't stop inspite of the external break point. I see my class in the table W3GENSTYLES, and the style could be seen in the generated html templates. Is there anything else customizing to do or any step we missed out?

      Thank You:

      László

      Author's profile photo Hans Verreydt
      Hans Verreydt
      Blog Post Author

      Hi László,

       

      So when you use TCODE SIAC_REGENERATE_TEMP for example, you see the option "For Mobile Responsive Design Style (SAPUI5)"? The one you created in W3GENSTYLES?

      Did you redefined the "DESCRIPTION_TEXT" and added the constructor?

      Normally, that should do the trick.

      In the Constructor, you need to add service:  ZITSGENSAPUI5, which is a copy from standard service ITSGENMOBILE4.

      In this ITS service, you can play with the HTML templates, and add for example the declarative support tags in the Header/Script.

      Also check my Part 2 blog also, which uses Fiori Fundamentals instead of SAPUI5 (better performance!)

      Regards,
      Hans

      Author's profile photo Laszlo Takacs
      Laszlo Takacs

      Hi Hans!

       

      For me everything looks good, I've implemented the "DESCRIPTION_TEXT and the constructor as well.

      This is from the constructor:

          ls_theme-service 'ZITSGENSAPUI5'.
      ls_theme-theme   '99'.

      and this is from DESCRIPTION_TEXT:

            WHEN 'ZMOBSAPUI5'.
      pe_description 'BHS design style'(004).

      I checked the htmp code in the browser, and the template looks fine:

      Template: zitsgensapui5/99//scwm/saplrf_tmpl_1.html -->

      and here is I suppose the menu, is it correct, can You attach a good html if You have?

      Thank You

      <!-- subscreen begin -->
      <div class="MobileSubScreen"><!-- line 1 -->
      <div class="MobileRow"><span style="width:9.020em" class="MobileLabel " >Whse&nbsp;No.</span><input type="text" style="width:4.100em" class="MobileEdit " onfocus="setFocusField('/scwm/s_rsrc-lgnum[1]');" onblur="leaveFocusField('/scwm/s_rsrc-lgnum[1]');" name="/scwm/s_rsrc-lgnum[1]" value="" size="4" maxlength="4"><span style="margin-left:19.680em; height:1px"></span>
      </div>
      <!-- line 2 -->
      <div class="MobileRow"><span style="width:9.020em" class="MobileLabel " >Resource</span><input type="text" style="width:15.580em" class="MobileEdit " onfocus="setFocusField('/scwm/s_rsrc-rsrc[1]');" onblur="leaveFocusField('/scwm/s_rsrc-rsrc[1]');" name="/scwm/s_rsrc-rsrc[1]" value="" size="18" maxlength="18"><span style="margin-left:8.200em; height:1px"></span>
      </div>
      <!-- line 3 -->
      <div class="MobileRow"><span style="width:9.020em" class="MobileLabel " >Dflt&nbsp;Dvc.</span><input type="text" style="width:4.100em" class="MobileEdit " onfocus="setFocusField('/scwm/s_rsrc-prdvc[1]');" onblur="leaveFocusField('/scwm/s_rsrc-prdvc[1]');" name="/scwm/s_rsrc-prdvc[1]" value="" size="4" maxlength="4"><span style="margin-left:19.680em; height:1px"></span>
      </div>
      <!-- line 4 -->
      <div class="MobileRow"><span style="margin-left:32.800em; height:1px"></span>
      </div>
      <!-- line 5 -->
      <div class="MobileRow"><span style="margin-left:32.800em; height:1px"></span>
      </div>
      <!-- line 6 -->
      <div class="MobileRow"><span style="margin-left:32.800em; height:1px"></span>
      </div>
      <!-- line 7 -->
      <div class="MobileRow"><span style="margin-left:32.800em; height:1px"></span>
      </div>
      </div>
      <!-- subscreen end -->
      </div>
      <!-- line 2 -->
      <div class="MobileRow">
      </div>
      <!-- line 3 -->
      <div class="MobileRow">
      </div>
      <!-- line 4 -->
      <div class="MobileRow">
      </div>
      <!-- line 5 -->
      <div class="MobileRow">
      </div>
      <!-- line 6 -->
      <div class="MobileRow">
      </div>
      <!-- line 7 -->
      <div class="MobileRow">
      </div>
      <!-- line 8 -->
      <div class="MobileRow"><span style="margin-left:7.380em; height:1px"></span><span style="margin-left:7.380em; height:1px"></span><span style="margin-left:7.380em; height:1px"></span><span style="margin-left:7.380em; height:1px"></span><span style="margin-left:1.640em; height:1px"></span><span style="margin-left:2.460em; height:1px"></span>
      Author's profile photo Laszlo Takacs
      Laszlo Takacs

      more comments, I can see the three fields in the html code, but it's invisible.

      Thank You:

      László

      Author's profile photo Hans Verreydt
      Hans Verreydt
      Blog Post Author

      László,

       

      You don't need to use 'ZITSGENSAPUI5' as browser service. This is only for the template generation.

      The internet service that you use on you mobile devices, is aonther ITS service.
      For example: ZEWM_ITS_UI5

      Author's profile photo Laszlo Takacs
      Laszlo Takacs

      Thank you Hans,

       

      yesterday we got closer. We have created the ITS with the ZITSGENSAPUI5, but I have forgotten to replace the HTML scripts as You mentioned, and we got the screens but of course with the old design. After implementing the scripts and regenerating our ITS we got an empty screen again.

      What is suspicious for me, that we couldn't find the java script:

      /sap/bc/ui5_ui5/ui2/ushell/resources/sap-ui-core.js"

      Thank You:

      László

      Author's profile photo Hans Verreydt
      Hans Verreydt
      Blog Post Author

      That's strange, normally you should have the SAP-UI-CORE in the system. Or, you're using a very old system... 😉

      But you don't need SAPUI5, just use the Fiori Fundamentals css files for a Fiori Look and feel as described in part 2 of my blog. It's much better for performance!

      https://blogs.sap.com/2021/09/13/using-fiori-as-frontend-for-sap-ewm-rf-its-screens-part-2/

       

      Regards,
      Hans

      Author's profile photo Laszlo Takacs
      Laszlo Takacs

      Thank You,

       

      we are on S4HANA 105. We can give a try to fiori. What is also strange for me, that in the code I see 1 pixel height, which seems to me some logic issue

      <div class="MobileRow"><span style="width:9.020em" class="MobileLabel " >Whse&nbsp;No.</span><input type="text" style="width:4.100em" class="MobileEdit " onfocus="setFocusField('/scwm/s_rsrc-lgnum[1]');" onblur="leaveFocusField('/scwm/s_rsrc-lgnum[1]');" name="/scwm/s_rsrc-lgnum[1]" value="WH10" size="4" maxlength="4"><span style="margin-left:19.680em; height:1px"></span>
      
      Author's profile photo Laszlo Takacs
      Laszlo Takacs

      Thank You Hans,

       

      The FIORI version works well!

      Author's profile photo Vishal Kumar
      Vishal Kumar

      Hi Hans

      This blog is indeed very informative, but somehow for me screens are not getting updated.

      Question 1:

      Which service I need to take as reference when creating the service in SICF ( I understand the name of service needs to be same as mentioned in Step 1: Constructor method ).

      But I am not sure about the Parameters , GUI configuration etc. about the service in SICF.

       

      I tried the other SAP standard Generation style, those are getting reflected. But somehow this New Z* style is not getting reflected on the screens. ( Eg. I tried changes the theme, color etc. nothing get reflected on the generated screens )

       

      Thanks once again.

       

      Regards
      Vishal

      Author's profile photo Hans Verreydt
      Hans Verreydt
      Blog Post Author

      In SICF, you just need to create the ICF service that you'll use as URL on your device.

      For example: ZEWM_ITS_FIORI

      The GUI Configuration of this is standard like described in the "Configuring ITSmobile for SAP EWM RFUI: How-To Guide"

      ~ITSMOBILE 1
      ~SOURCES ZEWM_ITS_FIORI
      ~THEME 99
      ~TRANSACTION /SCWM/RFUI

       

      Regards,
      Hans

      Author's profile photo Suman Pradhan
      Suman Pradhan

      Hi Hans,

      An interesting read. Thanks for writing a detailed blog.

      Regards

      Suman Kalyan

      Author's profile photo Joy Saraswaty
      Joy Saraswaty

      How can I remove Biobest SAP title ?

      Author's profile photo Hans Verreydt
      Hans Verreydt
      Blog Post Author

      HTML Template "MAIN_SCREEN/BEGIN" 😉

      Author's profile photo Joy Saraswaty
      Joy Saraswaty

      I have added my custom CUAAREA.HTML, from main screen to Upload my Client Logo. But from here I can't see, how Biboset SAP  title is generating. So at screen level I use below CSS to make it invisible.

      .fd-bar__element {
      font-size: 0}

      Also our case we, have to use our custom theme which we are using in Fiori Launchpad, so here we also add custom css in my custom MOBILE.CSS.

      Now by any chance is it possible to add this service in Fiori launchpad ?

      Screen

      Screen