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:

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

                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:

     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.