Skip to Content
Author's profile photo Former Member

ITS templates – Styles, Themes and Legibility (MIME Repository)

A good interface is a thousand details done right. The difference between a good interface and a great one is in those details: the spelling of a word, the spacing between items, colors used and so on. There’s – literally – thousands of details that are important.

In the last document on ITS, I wrote about how to create an internet service, an ICF service for it and ITS templates for the screens: Internet Transaction Server (ITS) mobile – Developing ITS templates from scratch. In this document, I want to help you get the details right for the ITS HTML screens – creating themes as per your company standards, making them user-friendly and legible.

Recently, SAP has come up with the ITSmobile Visual Editor to make screen modifications and styling much simpler. However, if you cannot use it given the  pre-requisite considerations concerning the support packages, you may proceed as below.

After generating the templates and before applying the styling the screens roughly look like this:


The code in the template is a combination of HTML and javascript code consisting of links to various other files that you may want to include like:

  1. ~itsmobileCssInclude to replace CSS stylesheets
  2. ~itsmobileJsInclude to replace javascript
  3. ~itsmobileVoiceInclude to replace speech generating

Of course, these can also be defined as service parameters in se80 for that particular internet service. However, they will be treated as ‘default’ files for styling. The files that are referred to within the template are given preference if there is more than 1 CSS file or JS file or Voice file applicable for that service.

Also, for the above generated template, the mobile.css and cuaarea.html file of the “itsmobile” internet service is being used as default: /wp-content/uploads/2014/10/2_570881.jpg

Now, let us create our own MIME objects and modify our template to reflect the same:

  1. Create a folder path: THEMES/ALL with a CSS file (mobile.css) and a GIF file (ALOGO.GIF) under it. Please note that the outer-most folder (in this case, THEME) does not get upload in the MIME folder. Also, please use GIF file types only for logo other images as other types do not work. Allow default read and write access to this folder and the files in it.


Copy CSS code from mobile.css file of itsmobile service. You can modify the design later as you please – copying the old classes to form new ones, modifying them as required and then using the new class names.

     2. Execute report siac_upload -> At selection screen, choose last tab strip “Objects of a Theme”-> Give your service name and theme. Choose radio-button Mime Objects (Language-Independent) -> Execute (F8).


     3. Choose the created directory ‘THEMES’ which contains the mime objects -> Press OK.


In this case, the files and folder structure below the THEMES folder will get uploaded in the MIME repository for the internet service ZUK_MOB.

     4. Choose the package and the transport. If there are a lot of files to be uploaded, this may take some time.

     5. Now, the internet service looks like this:


     6. We will also create an HTML file ‘CUAAREA2.HTML’ under the HTML templates for the service.



     Name it CUAAREA2.

     7. Give the package name and transport.

     8. The default HTML file gets generated. For now, let us overwrite it with the code of CUAAREA.HTML file of the itsmobile service.


     Save and Publish it.

     9. We are done with uploading the files. Now, let us start linking to these files and making modifications as required.

     In our default template generated (‘No HTML tables’ style), we have a section of code which lets us link to our respective files:


     They can be Sound, CSS or JS files as highlighted above.

     The general structure of the code to obtain the file is:

                If (Sound/CSS/JS FileParameter is not null)

                                Then take the customer’s file from the ‘current service’ from the given path


                                Take the default file from the ‘itsmobile’ service from the given path.

     10. For linking to our CSS file, add/modify the CSS part of the code as:


     Declare a variable cssinclude that points to our file and give that for the ‘name’ attribute for the ‘current_service’. Save and publish it.

     11. In our Mobile.css file we can add (remember: copy and modify) a new class to make our screen background green:


     Save and publish it.

     12. To use the above class in our template for screen 100, we will simply change the class of the Mobile body to MobileBodyGreen as:


     Save and publish template.

     13. Our default template also has the code for the CUAAREA file and we may change it to point to our CUAAREA2 file as:


     Save and publish the template.

     14. We can modify our CUAAREA2.html file to change the logo to point to our ALOGO.GIF:


     Remember to save and publish it.

     15. Now since we have changed the MIME objects, we will publish the complete service and test:


     16. Now let us test our styling changes:


And voila! The body color is green (CSS file acknowledged) and the SAP logo is replaced by our logo (CUAAREA file acknowledged).

In this way, we can play around with our CSS and HTML files to apply styling. Once we establish our final CSS and CUAAREA file, we can have a company specific theme for our pages. We can also arrange the various elements on a screen using the normal <TABLE><TR><TD> tags or any other valid HTML tags for that matter. Using custom JS files, we can also have client-side field validations, if required. For more information about HTML, CSS or JS syntaxes, you can visit W3Schools website.

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo M S P
      M S P


      I have developed the Module pool screen and deployed in ITS service.

      But when i look  in Its mobile Screen looks disturbed UI is not good

      Is there any option or parameters need to be maintained  go get user interface ?

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Yes. Refer to the above document to modify the CSS file for the styling. And for any more specific questions, please open a new thread.

      Author's profile photo Former Member
      Former Member

      Hi Utkarsha,

      I read this entire blog, but it did not help me to solve screen resolution problem, hence need help.

      Issue: For LM12 transaction I have used standard HTML template like, SAPLLMOB and Screen 2056. It has its own HTML , where I could not find a place , where I can go and change height and width which can be applicable to entire screen and will adjust as per device.
      I have configured the services properly and I can see the LM12 screen in IE and on device also. Device is Intermec. but the problem is with resolution. The LM12 screen is getting displayed in one left hand side top corner.
      I want to display it on whole screen, that is, need to adjust as per screen resolution.

      Can you please help....

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Sachin,

      From my blog above, like mentioned in point 11, you can modify the class in your CSS file to add changes like:
      height: 400px;
      width: 320px;

      also, for font, you can do:

      Similarly, you can go into CSS tutorials like:
      and play around with the display to suit your requirements.

      The class is mentioned against the 'class' attribute of the body tag in your HTML template. However, it is better to create a new custom class, add it in your CSS file and then give that file name in the attribute of your body tag.

      Let me know if you need anything else.

      Author's profile photo Former Member
      Former Member

      I have just created Mycuaarea.html just as a copy of ITSMOBILE cuaarea, when I change de default cuaarea in the page template form standar to mycuaarea and publish it I get error.

      include(~service="itsmobile", ~language="", ~theme="99", ~name="include/cuaarea.html");

      include(~service=~current_service, ~language="", ~theme="99", ~name="mycuaarea.html");

      If mycuaarea is the same as cuaarea why i get error? I dont understand


      I have tried to put as a parameter on SICF service ~ITSMOBILECUAINCLUDE = MYCUAAREA


      There is some error on my cuaarera and I do not understand why if it is an exact copy of CUAAREA


      <!-- start include cuaarea.html -->
      <table class="MobileCuaArea">
      <!-- First line title and default buttons -->
      <td valign="middle" align="left">`
      if ( ~windowtitle != "" )`
      <span class="MobileWindowTitle">`~windowtitle`</span>`
      <span class="MobileWindowTitle">&nbsp;</span>`
      <td valign="middle" align="right" width="90px">
      <!-- enter button -->
      <input type="image" class="MobileHeaderLogo" `
      `alt="`#TR_SUBMIT`" src="`mimeURL(~service="itsmobile", ~theme=99, ~language="", ~name="images/all/enter.gif")`" `sh()`>
      <!-- logoff button -->
      <a href="`wgateUrl(~okcode="/nex"); if (~SEC_SESSTOKEN != "")`&amp;~SEC_SESSTOKEN=`~SEC_SESSTOKEN; end`"><img src="`mimeURL(~service="itsmobile", ~theme=99, ~language="", ~name="images/all/logoff.gif")`" `
      `alt="`#TR_LOGOFF`" class="MobileHeaderLogo" `sh()`></a>
      <!-- SAP logo -->
      <img src="`mimeURL(~service="itsmobile", ~theme=99, ~language="", ~name="images/all/saplogo.gif")`" `
      `alt="ITSmobile 1.1" class="MobileHeaderLogo" `sh()`>
      `include(~service="itsmobile", ~language="", ~theme="99", ~name="include/mesgs.html")`
      <!-- end include cuaarea.html -->





      Author's profile photo M S P
      M S P

      Hello All,

      I have created the new custom module pool program,created new ITS service and published. When I test in SAP it words fine but when I test in browser Push buttons doesn't work and UI doesn't look good in chrome browser but looks cool in IE.

      Even Standard Menu Push buttons are not working and I have tried to put external break point and also hard break point break-point. when I check it from browser debugger is not getting triggered. and also I see send and images not getting displayed.