Creating Dynamic Actions for Your Mobile Framework Page Application

Hi, my name is Yotam, and I am one of the client-side developers who implemented the new mobile framework page.

The SAP NetWeaver Portal mobile framework pages give you the ability to create dynamic actions for your applications, and add them to the framework action bar.

The action bar button is located on the right-hand side of the framework header; clicking on it shows us the available action items.

In this short document, I will show you how to create dynamic actions from within your portal applications, and add them to the action bar for both the smartphone and tablet framework pages.

Here is the result you will get in the tablet framework page:

And on the smartphone it will look like this:

Before We Hit the Road

Right before we start, we need to have some background information about the action bar dynamic action implementations.

• The dynamic actions are added using the AFP collections, for more detail on the API, see the following documentation: http://help.sap.com/saphelp_nw73/helpdata/en/8d/693216e9804e048d9d0cc425cb46ea/content.htm
• The Home page perspective loads the applications once, but there is a mechanism for re-prompting your dynamic actions when we show a home page application, so don’t worry.

Adding a Dynamic Action

In order to load a dynamic action to the mobile framework action bar, we need to do the following operations:

1. Create a new collection – for containing your actions
2. Create a collection item – for defining the dynamic actions you wish to add

Now here is the code which makes the magic happen:

//creating a new collection which will contain our actionEPCM.getSAPTop().LSAPI.Collections.createCollection(
     "collectionID",
     EPCM.getSAPTop().LSAPI.Collections.Types.ACTION_BAR_ITEM, //collection type
     "collectionTitle",
     "collectionTooltip",
     null,
     null,
     true,
     10,
     false);
//creating the new action as a collection item                  
EPCM.getSAPTop().LSAPI.Collections.createItem(
     "collectionID",   //parent collection ID
     "itemID",
     "My Item Title",
     "itemTooltip",
     function(){
          alert("item was clicked");
     }, //the new item on-click function
     null,
     true,
     20,
     null,
     null,
     true,
     false,
     "/images/actionBar/item_icon.png"); //action item icon

Now after adding this code snippet, a new action item will be added to your action bar, which should look just like the images above.

If you wish to add multiple operations, you can do so by creating multiple collection items inside a single collection.

Action Items Icons

When you add a new action with no icon or when your icon’s URL path is not valid, the default “?” icon will be added.

And What About Hiding the Default Actions?

The mobile framework page allows you to configure which of the default action bar actions you wish to show or hide.

The default framework actions are:

1. Add to Favorites
2. Refresh
3. Log-Off

If you wish to hide any of them, go the portal “framework page configuration” which is located under “content administration” –> “portal display”.

There you will be able to choose the mobile framework you wish to configure, and under the “Action Bar” section you can uncheck any items you wish to hide.

Adding New Action Buttons to the Header

Much like the adding actions to the action bar, the new tablet framework page allows you to add more action buttons next to the action bar button (up to two). This is done using the following code:

EPCM.getSAPTop().MFP.Components.UIController.addActionButton({
     action: function(){alert("first out of two")},
     className:"myActionIcon"
});
EPCM.getSAPTop().MFP.Components.UIController.addActionButton({
     action: function(){alert("second out of two")},
     className:"myActionIcon"
});

The result of this code will look like this:

The addActionButton function expects two possible inputs:

1. action – JavaScript function that will be triggered when the button is clicked
2. className – CSS class name that contains the image of the added button

UI Enhancements

The action bar is mainly written once (with few minor adjustments), and drawn in two different ways. We gave it one UI for the smartphone scenario, and a different one for the tablet.

If you wish to change the action bar UI, you should do so in three different CSS files:

1. widgets.css – for modifying general action bar styling
2. tabletui.css – for modifying the tablet UI of the action bar
3. smartphone.css – for modifying the smartphone UI of the action bar

The widgets.css file contains the basic common styling properties of the action bar. For example, positioning, display, common colors, etc. The device-specific files contain the special styling applied to each device in order to give a different representation which fits its dimensions and user experience.

Conclusion & Outlook

As you see, it is quite simple and straight forward to make your applications more contextually aware and provide the end user with an improved user experience. Actions (collections) provide the developers with an easy way to extend their application’s reach into the framework page header area, and allow improved application usability.

Good luck!