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
Step 2: Create a new ITS service
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."
With this method, we'll be able to add SAPUI5 to the frontend of our ITS RF screens
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
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
- DESCRIPTION_TEXT
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:
- HEADER/SCRIPT
<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
- SAP Managed Tags:
29 Comments
