Implementing an Extended Toolbox Application Using JSON List API

Context

To implement an extended toolbox application, you need to implement a portal component that provides the data to display in the extended toolbox. To do this, you use the JSON List API. The JSON List API, which is contained in the com.sap.portal.navigation.json.list package, enables you to create and consume portal components that expose lists of data that are represented as JSON objects. A JSON List component returns an ordered list of items and folders that contain items. The order of the list is defined by the insertion order (first in, first out).

The following example demonstrates how to use the JSON List API to implement an extended toolbox application that displays a list of documents.

The example shows how a single application can handle two scenarios, according to the content type of the request (MIME type). If the content type is application/json , then the getJSONList method is called; otherwise, the doContent method of the portal component is called. An example of such usage exists in the toolbox: if the value of the application's Mobile Perspective property is set to Toolbox Extended , a request for a JSON object attribute is made, whereas if the value is set to Toolbox , a standard call is made to the doContent method of the portal component.

Procedure

In SAP NetWeaver Developer Studio, open the Enterprise Portal perspective and create a portal application project.

For more information, see Creating a Portal Application Project .
In the portalapp.xml file, set a sharing reference to com.sap.portal.navigation.json.helper.api .
In the portal application project, create a portal component.
Change the component inheritor class from AbstractPortalComponent to AbstractJSONListComponent .

Add the following imports:

Sample Code

                     import com.sap.portal.navigation.json.list.AbstractJSONListComponent;
                     import com.sap.portal.navigation.json.list.JSONList;

Implement the AbstractJSONListComponent interface by implementing the getJSONList method. For example:

Sample Code

                     //Create a new JSONList
                     JSONList documentsJSONList = new JSONList();
                     //Get a list of all the documents from a documents service
                     List<Document> allDocuments = MyDocumentsService.getAllDocuments(request);
                     //For all the documents in the list
                     for (Document document : allDocuments){
                         //For each document or document folder - create a new JSONListItem
                         JSONListItem item = new JSONListItem(document.getID(), document.getTitle());
                         //If the item is a folder, set its type to FOLDER, as the default type is ITEM
                         if(JSONListConstants.JSONListItemType.FOLDER == document.getType()){
                             item.setType(JSONListConstants.JSONListItemType.FOLDER );
                         }
                         //Add the item to the JSONList
                         documentsJSONList.addItem(item);
                     }
                     //Return the JSONList
                     return documentsJSONList;

To use the application as a regular portal component, you can also add an implementation in the doContent method of the portal component. For example:

Sample Code

                     //Include HTML, CSS and JavaScript files
                     IResource html = request.getResource(IResource.STATIC_PAGE, "html/documents.html");
                     IResource css = request.getResource(IResource.CSS, "css/documents.css");         
                     IResource js = request.getResource(IResource.SCRIPT, "scripts/documents.js");   
                     response.include(request, html);
                     response.include(request, css);
                     response.include(request, js);

Build and deploy your application. For more information, see Deploying a Portal Application .
Add the application to your mobile role.
Set the value of the application's Mobile Perspective property to Toolbox Extended .
Refresh your mobile portal and check that your application is visible in the extended toolbox.

Next Steps

Configuring the Toolbox

Mobile Perspectives