Developing a Mobile SharePoint Solution with Infragistics - Part III: A Code Example

Mobile Man / Tuesday, December 16, 2014

In our previous blog posts, we introduced the Launchpads SDK as an extensibility agent for a SharePoint mobile solution and explored the other extensibility options found in SharePlus. Now, in our final post, we’ll explore the actual code used in adding functionality through the Launchpads SDK.

Data in a SharePoint Web

The example we use here is about using one of the API functions to retrieve information from a Contact list in SharePoint. The screenshot below shows the contacts’ information in the SharePoint site:

Show me the Code!

In a nutshell, you have to:

  1. Get the parameters ready (URL to the contact list in SharePoint, name of the list view, field values to retrieve)
  2. Invoke the API method with the required parameters, including the success callback function that receives an Array with the items and also the error and cancel callback functions.
  3. Loop through all existing items, create an HTML element (
  4. in the example) to store each contact and add it to the element with the “contactList” ID.

Getting the Contacts

To retrieve the contacts, we’ll use one of the pre-defined APIs, List.getItems, which allows for communication between the launchpads and SharePlus.

Create a SharePlusContacts.jsJavaScript file with the following code snippet:

 1 function getListItems() {
 3      //Get the required information ready
 4      var listUrl = '';
 5      var viewName = 'All Contacts';
 6      var fieldsValuesArray = ['ows_Title','ows_Picture'];
 8      //Invoke the API method, loop through the items retrieved and get the contacts
 9      SPlus.List.getItems(listUrl, viewName, fieldsValuesArray, function (items) {
11           var itemsList = document.getElementById("contactList");
13           for(var i = 0; i < items.length; i++) {
14                var item = items[i];
15                var contact = document.createElement('li');
16                contact.innerHTML = '<img src="' + item['ows_Picture'] + '" >' + item['ows_Title'];
17                itemsList.appendChild(contact);
18           }
20      }, function (errorResponse) {
21           SPlus.Utility.showMessage('Error: List.getItems', errorResponse['error#displayValue']);
23      }, function (cancelResponse) {
24           SPlus.Utility.showMessage('Cancel: SPlus.List.getItems', cancelResponse);
25      });
27 }

Note: In the code above, the Utility.showMessage API method is called to display a native alert.

Showing the result

Finally, you can decide how to show the contact list in your launchpad. In this example we package 2 files, index.html and SharePlusContacts.js, in a compressed file that will be used as launchpad.

Create an index.html HML file with the following code snippet:

 4      <div id="contactList"> 
 7      <script type=”text/javascript” src=”SharePlusContacts.js”>
 9      <script type=”text/javascript”>
10      function SharePlusOnLoad() {   
11           //Call the method included in the referenced JS file
12           getListItems();
13      }

Contacts are displayed in the HTML element with the “contactList” ID. The previous JavaScript code is invoked from the SharePlusOnLoadfunction, which is executed before the launchpad is displayed.

Note: The SharePlusOnLoad function is called to notify SharePlus that the launchpad is ready and JavaScript API functions are enabled.

Data in a SharePlus Launchpad

In the screenshot below, you’ll see a launchpad that displays the contacts information within SharePlus in a visually appealing way. There are many other ways to customize your launchpad using CSS in the HTML code, this example gives you just one idea.

So now that we’ve explored how to extend your mobile SharePoint solution with extensibility, are you ready to incorporate SharePlus or ReportPlus into your applications under your brand? Schedule a meeting with one of our product specialists to see the enterprise versions of these apps for yourself!