Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
Former Member

Note:

The information in this blog - mobile framework page- 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.



In the mobile framework of portal on device, there is a cool feature for Tablet devices (only), which is a second level toolbox, named Toolbox Extended. The extended toolbox is designed for applications that show the user a list of data or executable items. These applications can be implemented very easily and quickly, using the JSONList API that was implemented by the portal team. The extended toolbox enables the user to explore items, drill down through the data, execute launchable items and display them within the framework or in a new window. In this blog I'll show you an example of a demo survey application that shows the survey results of their company.

This example application provides survey results of the "GNB" company and lets the user drill down in the results to see which criteria were measured in the different divisions.

To create this application, you need to create a portal component that uses the JSONList public API. After deployment, you need to configure the iView so that it loads the extended toolbox to your portal on device.

Where do you start?

Create a Portal Application Project in the IDE and add to this project a Portal Application Object. 

Change the Object to extend the AbstractJSONListComponent and not the regular AbstractPortalComponent.

This forces you to implement the method: public JSONList getJSONList(IPortalComponentRequest request,IPortalComponentResponse response) so that you will have the capability to work with the Toolbox Extended. This method returns a JSON object to the client and the Toolbox Extended displays the data within the JSON object.

JSONList is composed of JSONListItems. These items can be derived from back-end systems, databases, or just items your application creates. In this example, the application creates itsown items and returns them as a JSONList.


@Override
public JSONList getJSONList(IPortalComponentRequest request, IPortalComponentResponse response) {
          String graphIconURI = "../../companySurvey/images/chart_bar.png";
          String pieIconURI = "../../companySurvey/images/chart.jpg";
          //Get the parameters for the call
          String rootNodeId = request.getParameter("id");
          JSONList survey = new JSONList();
          if (rootNodeId == null)
          {
                   JSONListItem item =  new JSONListItem("id0", "Dining Room    Avg: 56%", JSONListItemType.FOLDER, null, 0, graphIconURI, null, null);
                   JSONListItem item1 = new JSONListItem("id1", "Human Resource Avg: 79%", JSONListItemType.FOLDER, null, 0, pieIconURI, null, null);
                   JSONListItem item2 = new JSONListItem("id2", "Managment      Avg: 83%", JSONListItemType.FOLDER, null, 0, graphIconURI, null, null);
                   JSONListItem item3 = new JSONListItem("id3", "IT             Avg: 91%", JSONListItemType.FOLDER, null, 0, pieIconURI, null, null);
                   survey.addItem(item);
                   survey.addItem(item1);
                   survey.addItem(item2);
                   survey.addItem(item3);
          }
          //Get a Drill Down on Folder Item and return different JSONList
          else if (rootNodeId.compareTo("id3") == 0)
          {
                   JSONListItem item4 = new JSONListItem("id4", "IT : Fast Responce     - 96%", JSONListItemType.FOLDER, null, 0, graphIconURI, null, null);
                   JSONListItem item5 = new JSONListItem("id5", "IT : Software Variety  - 86%", JSONListItemType.FOLDER, null, 0, pieIconURI, null, null);
                   JSONListItem item6 = new JSONListItem("id6", "IT : Advance Computers - 90%", JSONListItemType.FOLDER, null, 0, graphIconURI, null, null);
                   JSONListItem item7 = new JSONListItem("id7", "IT : Availability of Laptop  - 91%", JSONListItemType.FOLDER, null, 0, pieIconURI, null, null);      
                   survey.addItem(item4);
                   survey.addItem(item5);
                   survey.addItem(item6);
                   survey.addItem(item7);
          }
          return survey;
  }

After implementing this method, you need to provide a run-time dependency in the portalapp.xml to run your application, and then you are good to go (see details in the project code).


How does it work?

When clicking the element in the toolbox that is marked as a Toolbox Extended, the client sends an AJAX call and activates the getJSONList method. This operation is set to items on the Toolbox Extended that are tagged as a Folder. In my example, I set all the items as folders, but you can change this and make items to open iViews in the Application perspective. For example, in my example, you can point to an iView that shows the graph of a certain division in the company.


Portal Configuration

After deployment, you need to "copy-paste as PCD object" the iView and insert it to your Tablet rule. Then, edit its properties – Filter ID, Mobile Perspective and set the iView as an Entry Point.


After doing so, you'll see your application in the Toolbox perspective, and on click, you'll see your list inside the Toolbox Extended.

Conclusion & Outlook:

The Toolbox Extended feature is pretty cool, and you can create beautiful applications that show data or navigate to an application. With very easy and fast implementation, you'll have a Toolbox Extended application running in no time, thanks to the JSONList API.

The demo application code is in the SAP Code Exchange:

https://code.sdn.sap.com/code/portal-on-device/subversion/nodes/trunk/Blogs%20sample%20code?rev=30


2 Comments