Technical Articles

Hans Verreydt

August 12, 2021 5 minute read

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

29 Comments

You must be Logged on to comment or reply to a post.

Michael Lichtinger

August 13, 2021 at 8:40 am

Thanks for this blog post.

Marco Beier

August 13, 2021 at 9:54 pm

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

Hans Verreydt

Blog Post Author

August 13, 2021 at 10:43 pm

Thanks! 😊

Joerg Michaelis

August 19, 2021 at 6:17 am

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)

Hans Verreydt

Blog Post Author

August 19, 2021 at 8:03 am

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

Gokul Kumar

August 20, 2021 at 10:39 am

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

Hans Verreydt

Blog Post Author

August 20, 2021 at 10:49 am

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

Raja Sekhar Velisetti

October 7, 2021 at 6:13 pm

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

Hans Verreydt

Blog Post Author

October 7, 2021 at 7:17 pm

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

Sweta Gohil

December 3, 2021 at 11:28 am

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.

Hans Verreydt

Blog Post Author

January 6, 2022 at 9:29 am

Hi Sweta,

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

Regards,
Hans

Sweta Gohil

January 13, 2022 at 6:20 am

Hi Hans,

Thanks by creating new constructor it worked.

Thanks.

Laszlo Takacs

January 21, 2022 at 8:26 am

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ó

Hans Verreydt

Blog Post Author

January 25, 2022 at 3:31 pm

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

Laszlo Takacs

January 26, 2022 at 9:07 am

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ó

Hans Verreydt

Blog Post Author

January 26, 2022 at 10:12 am

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

Laszlo Takacs

January 26, 2022 at 12:00 pm

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>

Laszlo Takacs

January 26, 2022 at 12:11 pm

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

Thank You:

László

Hans Verreydt

Blog Post Author

January 26, 2022 at 12:29 pm

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

Laszlo Takacs

January 27, 2022 at 10:14 am

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ó

Hans Verreydt

Blog Post Author

January 27, 2022 at 11:04 am

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

Laszlo Takacs

January 27, 2022 at 11:38 am

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>

Laszlo Takacs

January 27, 2022 at 2:02 pm

Thank You Hans,

The FIORI version works well!

Vishal Kumar

January 23, 2022 at 6:48 am

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

Hans Verreydt

Blog Post Author

January 25, 2022 at 3:35 pm

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

Suman Pradhan

July 7, 2022 at 7:46 pm

Hi Hans,

An interesting read. Thanks for writing a detailed blog.

Regards

Suman Kalyan

Joy Saraswaty

August 29, 2022 at 8:35 pm

How can I remove Biobest SAP title ?

Hans Verreydt

Blog Post Author

August 30, 2022 at 8:21 am

HTML Template "MAIN_SCREEN/BEGIN" 😉

Joy Saraswaty

August 30, 2022 at 9:31 am

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

Technical Articles

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

Assigned Tags