SharePoint App Tutorial
Ref: http://blog.helloitsliam.com/Lists/Posts/Post.aspx?ID=113
Ref: http://blog.helloitsliam.com/Lists/Posts/Post.aspx?ID=113
So in part 1 we looked at some basic concepts of creating a SharePoint 2013 Hosted App. In this post we will continue with our demonstration app and look to expand it further. We left off with a custom ribbon action that redirects to a page within the App Web and simply just uses the default code from the "App.js" to render your display name. As a recap the design we are looking for is to allow a user to select items from a list and then when they click the ribbon be redirected to the App Web and render a grid type view of just the selected items, which we learned from the last post we can get by using query string parameters. So to start we need to open the "App.js" file and look at the existing code.
This code is very straight forward, as it simple gets a context for SharePoint using the client object model, grabs the current web which in this case is the SharePoint site you clicked the ribbon button from and then gets the "Current User" which would be you right now. When the document is loaded which is checked with the following code:
A custom function called "getUserName()" is called which loads the current user and executes an asynchronous query which on success writes out the name that you see on the page.
So let's look at changing this to retrieve data about the SharePoint Site using the REST API that is now available in SharePoint 2013. First off we will need to add the following to the "Default.aspx" page markup.
Now we need to remove the current code from "App.js and add the following section first.
This code declares two variables, then loads them upon document ready from the query strings that are passed in the URL. It then loads a JavaScript files that is used to execute code, and we make a call to a custom method we create called "getSelectedList". The "getSelectedList" method for now is not actually getting a list, it will be retrieving the SharePoint Site Title, confusing I know but easier than changing all the code each time.
This method makes a call to the "_api" URL of SharePoint which an endpoint for the web services / WCF for the client object model components of SharePoint 2013. To read more about this, read the details on MSDN here:
In our custom method you will see that we have a success and error call to two methods shown below:
These methods simply either render an error or the SharePoint Site Title onto the "Default.aspx" page. We also have a helper method for parsing the query strings so we can use them through the code.
Now we have all the plumbing done we should be able to build and deploy our solution and it should render as shown below once we click the ribbon button.
If we debug the code by adding a break point in the "App.js" we can see that we are getting an "Access Denied" error.
 
This means that the current account is not allowed to access the root web properties. This is by design and this brings me to another consideration when designing a SharePoint 2013 Hosted App. You need to work out the permission level that you want to assign so when it is deployed the right trust level is set ready for use. To set the permission, double click the "AppManifest.xml" file in Visual Studio. Select the "Permissions" tab and you will be presented with the following screen:
Set this screen to the following:
Rebuild the solution deploy using "F5" as always from Visual Studio. This time when you deploy you get stopped halfway through and are asked to trust it.
Select the "Trust It" button and the page will load as shown below:
So the key here is that by design the end user who is accessing your application is NOT allowed to perform certain functions unless the trust level has been set in the App and accepted during installation. So now we have it working with SharePoint Site data, now let's change the code a little to retrieve a specific list from the site. First off ensure you have an announcements list with some items within the SharePoint Site you are using.
Modify the "Default.aspx" page to now have the following code, you can remove the last markup we added.
We now need to modify the custom function we wrote to now use the following:
The success and failure method also need to be changed slightly too.
As before now build and deploy using Visual Studio so we can debug if needed. Accept the "Trust" and it should render as shown below:
Now that we are able to render the values let's make some changes to the code so it will work for any list that we decide to click the ribbon button from. To do this lets first look at the URL:
If we look in the link above we have the query string from the last post already in there, which is "SelectedList={B6F5FCC8-5102-4F1B-9F24-D8929162CB51}", this means we already have the list ID so if we modify the code a little we should be able to use this dynamic value, instead of hard coding "Announcements". To achieve this firstly add the following to "App.js".
This will get us the list ID loaded into a variable we can use throughout the code. Now we need to modify the "getSelectedList" method code to be the following:
Once complied and deployed you are then able to click any list and it should render details as shown below.
Announcement List
Contacts List
So now we have the code working for any list now we need to look at restricting the list of items that is renders to the selected items that are passed in the URL. We need to change the code in the "App.js".
Next we need to change the rendering code to be the following:
Now build and deploy from Visual Studio so you can debug and you should now be able to select items within the list and when the page renders it will only display the selected items. Of course there are better way of doing this but we will save that for another day.
In the next post we will look at the options available for rendering more than just "Title" and "Body" fields and actually create the grid view we need.
|
