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

      7 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