Mobile Framework Page Quick Guide – Technical Overview

For a list of deprecated features and possible alternatives that you can use instead, see SAP note 2204286.

Overview

The Mobile Framework Page (MFP) was developed for “tablet” and “smartphone” devices.

To make using the mobile portal easier for first-time users, we developed a “Quick Guide” that provides a brief explanation about the main UI elements of the MFP.

The “quick guide” openes each time an end user enters the portal via the MFP. To stop displaying the guide, the user can select the “Do not show this again” check box.

By tapping the black arrows, or swiping the screen, users can page through the “quick guide” to learn about the different UI elements. The relevant UI element is highlighted, and a short description about the element is presented.

We also added an entry to the toolbox for opening the “quick guide” manually. This item is part of the “eu_mobile_role”.

when opens the “quick guide” from the toolbox, it openes in a separate tab, the toolbox entry is also available for users who selected the “Do not show this again” check box.

Enabling the Quick Guide for a Specific User

The information about whether to expose the tutorial per user is maintained in the UCD.

If a user selected the “Do not show this again” checkbox and would like to see the tutorial again when opening the MFP, the administrator can expose it again by doing the following:

3. Set both the Tablet and Smartphone “Quick Guide” iViews to invisible in the “eu_mobile_role”.

* If the administrator removes the iViews from the framework pages, and leaves it on the role, tapping the Quick Guide from the toolbox will open a new tab with the framework page without the Quick Guide.

Technical Information

JSON

The quick guide is based on a JSON that represents the UI elements to display. Each element in the JSON is represented as a page in the guide.

The JSON is maintained as a property on the “Quick Guide” iVIew. In order to view the JSON, open the iView from within one of the framework pages and look for the property “TabletJsonConfiguration” or “SmartPhoneJsonConfiguration“ per requested JSON.

The JSON can be changed according to the administrators decision.

The structure:

All text is taken from a resource bundle (for translations), so text can be changed by changing the properties file of the iView on the server itself.

The attributes:

title – the title of the UI element that is displayed, taken from a resource bundle (e.g. the text “Launcher” in the second screenshot)

arrowposition – as you can see, there is an arrow pointing to the UI element on the screen, the arrow appears as part of the page and could

point to a general position on the screen. The values it gets are 0-12. 0 means no arrow and 1-12 draw an arrow according to a position

on a clock face (e.g. 11 is the second screenshot)

text – represents the main text of the guide, taken from a resource bundle (e.g. the text “Open applications and …” in the second screenshot)

headertext – relevant for the first and last page, taken from a resource bundle (e.g. the text “Welcome to SAP NetWeaver Portal…” in the first screenshot)

helptext – relevant for the first and last page, taken from a resource bundle (e.g. the text “You can open the Quick…” in the first screenshot)

helpiconcssclas – relevant for the first and last page, represents the image to take from the sprite (e.g. the “light bulb” in the first screenshot)

cssclass – represents the image to take from the sprite (e.g. the “Launcher icon” in the second screenshot)

idofuielement – the ID of the UI element that we want to highlight on the framework

func – calls a function on the client side, enables to perform necessary actions on the framework (e.g. opening the toolbox to display “search”)

Resources

All the images are maintained in a sprite file that is maintained in the Web Resource Repository (WRR) and could be replaced by the administrator.

The css and less files are also placed in the WRR and can be replaced as well.

The entry to look for in the WRR is pcd:resource_repository/application_branding/~com.sap.portal.navigation.mobile.apps.tutorial

The properties files are part of the iView. There is a file per language. The administrator can change the text in the properties files as well.

Of course all changes done there will be overwritten in the next upgrade.

Landscape / Portrait

All position calculations are made according to percentages, that way, the guide changes according to the state of the device.

4 Comments

Thanks for the excellent article! Could u please shed some light on how you store and retrieve data from UCD. I have seen the code samples from the SAP help website, but they are very limited. Their documentation only shows how to create namespace and make use of existing namespaces etc.. but not really on how to save information onto these namespaces. It would be of great help, if you could throw some code snippets on how to save information in UCD.