Skip to Content

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:

/wp-content/uploads/2012/10/1_151213.png

And on the smartphone it will look like this:

/wp-content/uploads/2012/10/2_151214.png

Before We Hit the Road

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

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:

/wp-content/uploads/2012/10/3_151216.png

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!

To report this post you need to login first.

7 Comments

You must be Logged on to comment or reply to a post.

  1. Yan Vulich

    Just added action buttons in eFeed iView for switching view: with\without images.

    It took like 2 sec to understand this blog.

    Dude, you’re rocks!!!

    Thanks !!!

    (0) 
  2. ROBERT ROBERTSON

    “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.”   

    You mention that there’s an event to create the Action Bar buttons – we’re trying to add Action Bar Buttons immediately after the framework loads.

    What mechanism should we be utilizing?  or an event that we can subscribe?

    (0) 
    1. Yotam Kadishay Post author

      If you want to do it for an application (Home Page, inner framework application), you should do it as described in the code examples above.

      If you have a separated script running, you can do it once the EPCM and MFP are loaded, but remember, there are no framework fixed actions – they are relevant per-application, so an application should load them, the framework will hide them when navigating away, and will show them when returning.

      (0) 
  3. ROBERT ROBERTSON

    Specifically, how do I know that the framework is initialized and when is the soonest that I can call my code to add the action buttons?  Is there an event that is fired once the mobile framework is fully loaded?  I tried the “AFPisLoaded” event but there is still
    framework code that executes after that event.  Also, you mention “a mechanism for re-prompting your dynamic actions when we show a home page application” but you don’t say what it is or explain it.  How do I find documentation on it?

    (0) 
    1. Yotam Kadishay Post author

      Hi Robert,

      This mechanism of adding application to the action bar is implemented to compliment portal applications, and therefore the actions will be loaded when an application is loaded (this is after the MFP\AFP are loaded) and therefore, you don’t need to verify what is loaded or wait for an event – you can simply call this API on your portal application java-script.

      On the other hand, adding actions to the entire framework is not supported, so we do not provide and global event which indicates its the time to use this API.

      Regarding your quote, if you add an action from an application which is one of your home-pages, then navigate away to another home page and back, the MFP will not prompt the application to re-load, and therefore we will remember to return the action item for your application.

      here is a link to the documentation: http://help.sap.com/saphelp_nw73/helpdata/en/3a/6640ad28ea43bf8c853ef1cc79964e/content.htm

      Regards,

      Yotam.

      (0) 
  4. ROBERT ROBERTSON

    My JavaScript is executing before the framework is initialized.  It looks like our code is executing before the page navigation (registerOnPreNavigate) executes and then it hides the button we created. How do we handle this?

    (0) 
    1. Yotam Kadishay Post author

      Hi,

      Again, as i told you, this feature only supports application adding the icons, other flows are not supported and might not work fully – applications will load only after the framework is initialized.

      If you want to do so anyway, try to wait for MFP to load, with repetitive setTimout, though this is really not the recommended way of adding actions for applications, and might not work correctly.

      Regards,

      Yotam.

      (0) 

Leave a Reply