Modifying RF Screens in EWM by updating HTML templates

In this post, I’ll explain you the real time GUI display issues with RF screens and how to fix them when you implement RF with EWM using ITS Mobile. This will not cover implementation of RF with EWM. I assume you have prior knowledge about RF device and its functionality, integrating it with SAP EWM. To understand more you can refer RF Cookbook, SAP EWM 120 and Wiki.

General practice to design RF screens in EWM is to

• Copy standard Menus, Screens
• Modify screens with screen painter and activate
• Generate HTML templates and publish
• Check with RFUI or by running the related internet service

Here comes the trouble, sometimes what you see in RFUI does not match with browser display (on desktop or in RF device) or you are not able to modify screens with screen painter. In such cases, we can go for updating the HTML templates manually.

This post mainly concentrates on

• briefing HTML template
• updating HTML templates manually
• testing webpages locally on desktop or in RF device

I assume you don’t have any knowledge on HTML pages.

What is a HTML template and how to understand it?

In simple terms, HTML template is a combination of logical code and HTML tags. Based on inputs, code inside the template will decide how to display the page by allowing or blocking few sections of HTML tags. If you know basic commands of C you can guess what is the logic running through the page. You can refer W3C website for quick understanding of HTML.

Basic rule to remember is all HTML code starts with character ” ` ” and end with ” ` “. So, the content inside “ is HTML code and the other logical code or comments.

Sample:

`:`w(“5”, “4.100em”)`“>`

How to identify where and what to be updated in HTML template?

When you are simulating webpages in local desk browser you might have found some issues with screen like height or width of a field or label is not proper, unwanted fields appearing on the screen, missing margin space or extra space, arrangement of screen elements are not in order etc. Most of the modern browsers have Developer Tools feature (in the Tools menu as shown below) with which you can easily identify where to update in HTML template.

Aftering enabling tools, you’ll get two panes at the bottom. Left one is to view the source code and right one is to view the properties of selected object/tag. Also there are many tabs in each pane. So, just select the relevant tab to view the code.

Now click on mouse button available in left pane (right under the HTML tab), and select the object on the screen. It will highlight the selected object on the screen and also open ups the relevant code section in the bottom left pane and its properties in the bottom right pane.

Just note down the comments or object name in the HTML code and go to the same in the template. I prefer using Notepad ++ to update template.

How to identify the code and make changes?

After selecting the object like as shown above, try to change the properties in the right pane as desired. As soon as you update the properties in the right pane, same will be reflected in the webpage. So, if you are okay with the modified properties make a note of them and do similar updates in template.

Or, if you want to delete some labels/text boxes from your screen I advise you to comment that section instead of deleting the code from template. So, that you can recall original template whenever you want. Comments start with “<!–” and ends with “–>”.

Sample:

<!– not disabled –>

Note that comments should be outside of HTML code that means “`” and “`”.

How to publish your changes?

After making updates, copy template code and paste in actual template (SE80). Save changes and publish the template. Refresh your webpage, you should be able to see your changes. If you are kicked out from that page after refresh, go back to code in template and check for syntax errors like opening and closing of HTML tags etc.

Below is an example of screen on RF device before and after.