- SharePoint 2013 Hosted Apps – Do they really work? Part 1
- SharePoint 2013 Hosted Apps – Do they really work? Part 2
- SharePoint 2013 Hosted Apps – Do they really work? Part 3
In our last post we made changes to our SharePoint 2013 Hosted App, to use the REST API to get list items that were selected from a list. When you clicked on the Ribbon button it sent the selected items to the “default.aspx” page of the App Web and rendered them accordingly. The code we used for rendering the selected items was not ideal as we just asked the REST service to give me everything and then filter out the ones that are not in the query string. As you can imagine not the most performing code you could write.
To make this better and faster one of the new features of the REST API is to pass filters directly to the call. Firstly let’s look at the syntax, we can use. We can test this by using the following URL against our Office 365 site.
https://demo.sharepoint.com/sites/appdev/_api/web/lists(‘{List_ID}’)/items
This will let you call the REST API directly and see an RSS feed type result come back. Some basic examples would be to specify the fields that come back. To do this the URL would need to be the following:
When this is ran you should see the following:
This does not really help us as we would like to see the core XML, I use Fiddler for this, so when you call the URL you are able to inspect the response. You will see a get request similar to this:
If you select that line and then select the “Headers” tab on the right and choose “XML” from the bottom you should see the returned XML response.
This just helps me see that the right XML is being returned. Using the “$select” parameter we can specify as many fields as we wish or simply remove it to show all fields.
Now back to the original issue, we want to only retrieve the selected items form the REST API call, not all of them and filter. So we can now use another parameter “$filter“. As a simple example let’s retrieve one of the items from our “Announcements” list.
This URL will render the following:
And out Fiddler trace shows the following:
So what if we wanted to filter on multiple values, so in our example let’s say we had selected items 3 and 2. Our new filter URL would be the following:
Our fiddler trace will now return the following:
So to tie this all together we need to change out code in the “App.js” to be the following so it only returns the selected items. Firstly we need to modify the following code:
This creates a new variable to contain a dynamic query. We then modify the core document ready code to not run and simply show us an alert box saying the “selectedids” variable is not populated, in the real world you would change this behavior of course. We then wrap a call to the “getSelectedItemIDs” and the rest of the core code to ensure it does not run when nothing has been selected. Now we need to modify the core method “getSelectedList” to contain a filtering option.
We also need to remove the last code we used in the “getListSuccess” method as we are no longer getting all the items and filtering through the loop process.
Lastly we need to create the new method “getSelectedItemIDs” which simply splits the query string that contains the selected IDs from the list, loops through them and creates an output that renders like this:
Now when we run the code, we are able to select values and when we click the ribbon button will render only those, by using the REST API query to just get those items.
So to recap we have looked at using the selected items query string, passing it into the REST API call after dynamically create the filter clause then rendering the values out on the page. In the next post we will look at creating the rest of the user interface such as the grid for the specific fields we want to show.