Using the WebCenter People Connections Service REST APIs with Ext

Ext is a popular JavaScript library for building tables and forms and linking them to REST web services. The following example illustrates how to display a list of connections from the People Connections Service REST APIs using an Ext JsonStore and GridPanel.

The HTML page

The following code creates an HTML page and a JavaScript file. The HTML page must reference the required Ext files and the JavaScript file, connections.js. The HTML page is very simple:



<head>
        <link rel="stylesheet" type="text/css" href="../../extjs/resources/css/ext-all.css" />
        <script type="text/javascript" src="../../extjs/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="../../extjs/ext-all.js"></script>
        <script type="text/javascript" src="connections.js"></script>
</head>

Add a destination div in the body of the page. The GridPanel is rendered in this div.



<body>
        <div id="connections"></div>
</body>

The JavaScript

Create a new file named connections.js. In this example, all of the JavaScript is a parameter to Ext.onReady(). This enables population of the list when the page loads.



Ext.onReady(function() {
        //our code goes here
});

The next steps set up the JavaScript to do the following:

  1. Query the WebCenter server resourceIndex to determine the entry point of the People Connections REST API.
  2. Send an authenticated request to the entry point, and examine the response to determine the URL of the Connections list.
  3. Send an authenticated request to the Connections list URL.
  4. Add the response—a JSON list of connections—to a new Ext JsonStore.
  5. Create an Ext GridPanel to display the JsonStore.
  6. Render the GridPanel in the destination div, "connections".

Step 1: Query the resourceIndex.

Notice that this example asks for responses in JSON format.



//Connection Information
var resourceIndexURL = "http://<webcenter_server>/rest/api/resourceIndex";
var peopleServiceURN = "urn:oracle:webcenter:people";
var connectionsURN = "urn:oracle:webcenter:people:person:list";
var connectionsRel = "urn:oracle:webcenter:people:person:list:connections";

//create a request for the resourceIndex
Ext.Ajax.request({
        url: resourceIndexURL,
        method: 'GET',
        success: function(response, opts) {
                //locate the people connections entry point
                var index = Ext.decode(response.responseText);
                for (x in index.links) {
                        if (index.links[x].resourceType == peopleServiceURN) getMe(index.links[x].href);
                }
        },
        failure: function(response, opts) {
                 alert('Could not communicate with the REST server.');
           },
        headers: {
                'Accept': 'application/json'
        },
});

Step 2: Send an authenticated request to the People Connections entry point, and get the Connections list URL from the response.

By default , the REST API uses Basic authentication for secure APIs. In this example, credentials for passing to the Connections list URL are Base64 encoded. Ext does not have a Base64 utility object itself, but one has been developed for it. 



function getMe(requestURL) {
        //Encode a token to identify yourself with secure parts of the REST API.
        var unencodedToken = "username" + ":" + "password";
        var encodedToken = "Basic " + Ext.util.base64.encode(unencodedToken);

        //call the connections entry point
        Ext.Ajax.request({
                url: requestURL,
                method: 'GET',
                success: function(response, opts) {
                        //locate the link for my connections
                        if (index.links[x].resourceType == connectionsURN) {
                                if (index.links[x].rel == connectionsRel) getMyConnections(index.links[x].href, encodedToken);
                        }
                },
                failure: function(response, opts) {
                        alert('Could not communicate with the REST server.');
                },
                headers: {
                        'Accept': 'application/json',
                        'Authorization' : encodedToken
                },
        });
}

Step 3: Send an authenticated request to the Connections list URL.



function getMyConnections(requestURL, encodedToken) {
        Ext.Ajax.request({
                url: requestURL,
                method: 'GET',
                success: function(response, opts) {
                                displayData(response, opts);
                   },
                failure: function(response, opts) {
                         alert('Could not communicate with the REST server.');
                   },
                headers: {
                        'Accept': 'application/json',
                        'Authorization' : encodedToken
                },
        });
}

Step 4: Add the response to a JsonStore.

Previously, this example names displayData() as the handler for a successful call to the Connections list URL. Now, it creates the function and adds the JsonStore code. In the JsonStore, define the data model for the data and map it to results expected from the REST call.



function displayData(response, opts) {
        //create a datamodel to display the JSON
        var store = new Ext.data.JsonStore({
                // store configs
                autoDestroy: true,
                storeId: 'forumStore',
                // reader configs
                root: 'items',
                idProperty: 'id',
                fields: ['displayName', {name:'email', mapping:'emails.value'}, 
                {name:'phone', mapping:'phoneNumbers[0].value'}]
        });
}

Step 5: Create an Ext GridPanel to display the JsonStore.

In the grid, define the columns and title. Set other display options, such as the size of the table. Append the following code to displayData():



//create the Grid
var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
                {id: 'conn', header: 'Connection', width: 80, sortable: true, dataIndex: 'displayName'},
                {header: 'Email', width: 120, sortable: true, dataIndex: 'email'},
                {id: 'phone', header: 'Phone', width: 120, sortable: true, dataIndex: 'phone'}
        ],
        stripeRows: true,
        autoExpandColumn: 'conn',
        height: 200,
        width: 400,
        title: 'My Connections',
        viewConfig: {scrollOffset: 2}
});

Step 6: Render the GridPanel.

Finally, append this last line to displayData():



grid.render('connections');

The Result

Notes

You must run Ext on a web server. If that server is not WebCenter, then you will run into cross-site scripting problems. If you cannot run the example on your WebCenter server, and you want to use Ext, consider a proxy, such as Apache or WebCenter Ensemble.