Implementing an Extended Toolbox Application Using JSON List API

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:

Example Example

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

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

End of the code.

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

Example Example

```
//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;
```

End of the code.

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:

Example Example

//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);
```

End of the code.

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.

More Information

Configuring the Toolbox

Mobile Perspectives