Skip to Content

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:

   /wp-content/uploads/2014/10/1_570877.jpg

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.

      /wp-content/uploads/2014/10/3_570882.jpg

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).

     /wp-content/uploads/2014/10/5_570883.jpg

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

     /wp-content/uploads/2014/10/6_570884.jpg

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:

     /wp-content/uploads/2014/10/7_570885.jpg    

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

     /wp-content/uploads/2014/10/8_570886.jpg

     /wp-content/uploads/2014/10/9_570887.jpg    

     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.

     /wp-content/uploads/2014/10/10_570888.jpg

     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:

     /wp-content/uploads/2014/10/11_570889.jpg

     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

                Else

                                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:

     /wp-content/uploads/2014/10/12_570890.jpg

     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:

     /wp-content/uploads/2014/10/13_570891.jpg    

     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:

     /wp-content/uploads/2014/10/14_570892.jpg

     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:

     /wp-content/uploads/2014/10/15_570893.jpg   

     Save and publish the template.


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

     /wp-content/uploads/2014/10/16_570894.jpg

     Remember to save and publish it.


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

     /wp-content/uploads/2014/10/17_570895.jpg

     16. Now let us test our styling changes:

     /wp-content/uploads/2014/10/18_570896.jpg

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.

6 Comments
You must be Logged on to comment or reply to a post.
  • Hello

    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 ?

  • 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….

    • 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:
      font-size:14px;

      Similarly, you can go into CSS tutorials like: http://www.w3schools.com/css/css_font.asp
      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.

  • 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”>
    <tr>
    <!– First line title and default buttons –>
    <td valign=”middle” align=”left”>`
    if ( ~windowtitle != “” )`
    <span class=”MobileWindowTitle”>`~windowtitle`</span>`
    else`
    <span class=”MobileWindowTitle”>&nbsp;</span>`
    end`
    </td>
    <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()`>
    </td>
    </tr>
    </table>
    `include(~service=”itsmobile”, ~language=””, ~theme=”99″, ~name=”include/mesgs.html”)`
    <!– end include cuaarea.html –>

     

     

     

     

  • 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.