In this post I will walk you through the process of building a Client Web part that creates a new document library using the new SharePoint 2013 CSOM App Model. The code for this sample can be downloaded from here.
This is all done via the new SharePoint CSOM model and doesn’t use any server side code. I avoided making RESTful calls or using any frameworks such as AngularJS or tools such as TypeScript etc. I wanted to keep this as bare bones and out of the box as much as possible. In future posts I will refine the code to leverage TypeScript and RESTful API calls but for now its pretty standard.
- Visual Studio 2013 – I used Ultimate as my MSDN subscription allowed for that
- A SharePoint 2013 instance – I used a SharePoint Online MSDN tenant with a Developer site collection to debug against but you can also use an On-premises deployment equally as well.
Client Web Parts in SharePoint 2013 require hosting in an IFrame and require list, site collection and web permissions depending on the operation. In the case of creating a new list or library you need to set the “Manage” permission at the Site Collection in the AppManifest.xml. This is covered later in this post (Step8).
Also hosting a web part page as an IFrame requires that the “AllowFraming” property being set in the rendered page or the “Not allowed to render in a frame” Error will appear. The code to do this is as follows:
1) Create a new project in Visual Studio 2013 using the App for SharePoint 2013 template and click Ok. For the purposes of the post I used the solution name AppPartSample.
2) Specify the App settings for the project. Choose a URL to debug against and make sure to choose the SharePoint-Hosted option for the App hosting options:
3) Login to your SharePoint site. In my case I am using Office365:
4) You should now have the core setup of your project. Next we will add the actual Client Web Part. Next right click on the AppPartSample project and select Add..New Item and select “Client Web Part (Host Web)” and give it a name, click Add. For this post I will call the Web part “ClientWebPartSample”:
5) You will need to specify a new client web part page, for the purposes of testing I will create a new page to host the component. You can select an existing web page but I created a new page just in case. We can also set the default page later on in the AppManifest.xml.
6) We are now ready to get coding. First open up the “ClientWebPartSample.aspx” under the Pages folder and insert the following code. Make sure not to overwrite the @Page or @Register directives at the top of the page. Paste the following code after those directives.
The .aspx page is pretty straight forward with a table for displaying the input fields and a submit button. There is also a <div> for displaying success.
The code is pretty self explanatory and well commented.
8) Before deploying and executing the code it is important to update the AppManifest.xml with the right permissions. Open the AppManifest.xml file in Visual Studio and set the permissions as follows. Set the Site Collection permissions to “Manage” as we will be creating a new Document library in the development site collection . Failing to set this will throw an access denied error when trying to create the library.
9) Also you will need to set the default start page from “Default.aspx” to the web part page you created earlier. Otherwise you will deploy and debug and it appears that nothing has happened:
10) From Visual Studio 2013 now save everything, Right click on Deploy as this will do a build and deploy the solution.
Once deployed you will be prompted with a trust dialog verifying the web part will be accessing the permissions as set in the AppManifest.xml.
Click on “Trust It”. Alternatively you can hit F5 and you can debug and step through the code but you will still be prompted with the trust dialog.
10) The page should render and the output looks pretty basic. Try entering the library details and click the submit button. A new DocLib will be created in the Host web (Dev site collection) and not the App web.
As you can see its pretty straightforward and uses out of the box SharePoint CSOM code. You can now embed the web part as a normal web part on web part pages.
I look forward to any questions or feedback and hopefully it has been a useful resource. I will recreate the project above using TypeScript and maybe employ the use of using REST API calls instead of standard SharePoint Client API calls. But that’s for another post 🙂
Here is a list of references I used when writing this:
- SharePoint 2013: Get the host web title using the cross-domain library (JSOM)
- App permissions in SharePoint 2013