Mobile Framework Page Quick Guide – Technical Overview
Note:
The information in this blog refers to a feature that is deprecated.
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:
1. Access the UCD Cleanup Tool using the following URL: http://<server>:<port>/irj/servlet/prt/portal/prteventname/HtmlbEvent/prtroot/com.sap.portal.pcd.admintools.ucdadmin.default
2. Enter a principal name (the user ID) and choose Show. -> A table of UCD users is displayed.
3. Select the user for which you want to enable the “quick guide” and check the “MFP_TUTORIAL” entry -> “Remove” -> “Close”
Disabling the Entire Feature
The “quick guide” is an iView that is part of both Tablet and Smartphone framework pages. If administrators choos not to show the quick guide, they need to do the following:
1. Set the iView “Quick Guide” to “not visible” in the Tablet Framework Page.
2 .Set the iView “Quick Guide” to “not visible” in the Smartphone Framework Page.
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.
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.
Thanks.
Hi Uma,
The following code is specific for broadcast message so everything that has BCM you will need to change of course to fit to your need 🙂
just note that this is just like PCD writing
IPcdContext userBCMCtx = null;
IPcdAttributes attrs = createAttrs( "your text" );
if ( !folderExistsInUCD( user ) )
{
userBCMCtx = createNamespace( user );
}
else
{
userBCMCtx = getNamespace( user );
}
try
{
userBCMCtx.createSubcontext( messageId, attrs );
}
private static IPcdAttributes createAttrs( String messageId )
{
IPcdAttributes attributes = PcdAccess.getPcdUtils().createPcdAttributes();
IPcdAttribute oClassAttr = PcdAccess.getPcdUtils().createPcdAttribute( PcdAttributeValueType.STRING, IPcdAttribute.OBJECT_CLASS );
IPcdAttribute IdNameAttr = PcdAccess.getPcdUtils().createPcdAttribute( PcdAttributeValueType.STRING, PcmConstants.AttributeIds.OBJECT_ID );
oClassAttr.add( IBroadcastMessageConstants.OCLASS );
IdNameAttr.add( messageId );
attributes.put( oClassAttr );
attributes.put( IdNameAttr );
return attributes;
}
hope this helps.
BR,
Saar
Thanks Saar. 🙂 I have got some idea now, Let me try and will post back. Thanks again.
Hello,
If i logon to SAP Portal in Spanish, the text doesn´t appear. Do you know where is the resource bundle file to add spanish support? I testing with SAP PORTAL 7.31 SP 17
Thanks