Client webpart in SharePoint 2013


In this post you will learn how to develop a basic client webpart in SharePoint 2013.

You will also learn how to debug an app  and also I want to show you how JavaScript intellisense works while developing apps. Client webpart looks similar to SharePoint webparts we build but not exactly the same.

You will see what is the error you will get if you try to deploy the same version app and how to resolve it.

Perform the beow steps to create a client webpart in SharePoint 2013.

Step1: Create SharePoint Hosted App project

To start with client webpart development, create a project of type [App for SharePoint 2013] from Apps section under the office/SharePoint, give a name and click OK.

App for SharePoint 2013

It will start the wizard, so enter your app name and site name where you want to debug your app and select the hosting environment, in this example i am selecting SharePoint-Hosted option to host app for SharePoint.

Once you complete everything click on Finish. It will create SharePoint hosted app project.

App for SharePoint 2013

Step2: Add Client webpart

Add client webpart by right clicking on project you have created above and click on [Add] [New Item], select [Client webpart (Host Web)] and enter the name of your client webpart then click on Add button in the below screenshot.

Client Webpart

It will start the wizard, Here you can enter your App part Name and Select the Page which you want to show on the App part, then Click on Finish.

Client Webpart

You can observe below Solution, where once you have added the App part it will create the page as well which will be in the App part.

Client Webpart solution

You can see the below code snippet of FirstAppPart.aspx page. In the line number six you have

"<WebPartPages:AllowFraming ID="AllowFraming" runat="server" />" which is important to allow the page to show in IFRAME.

If you don't add the above line of code snippet then it will you error as

"This content cannot be displayed in a frame" .

Below is the method which you need to add in App.js file to call the function on button click.

Once you make all the changes, Right click on the solution and click on deploy. Go to host a web site and edit a page and try to insert the App Part by selecting the App part which you have deployed.

App part

Once you add your App part it will show like in the below figure.

App Part

To test it click on App Part! button and the method you have written above will display a message as "My first AppPart".

App Part

You can use IE developer tool and Check the IFRAM details of App part like showing in below figure.

IFRAME for App Part

intellisense in Javascript:

One of the coolest feature in Visual Studio 2012 is intellisense support while writing the JavaScript code. Which you will be appreciated by most developers who find it difficult to remember the JavaScript syntax.

You can see in the below figure, while i am writing the javascript code in visual studio it is showing intellisense. So it is very easy now to write the code and developing apps using JavaScript.

intellisense support for JavaScript

Troubleshooting issues:

Once you have done with all the changes, try to deploy the app. Sometimes you might get below error

"Error occurred in deployment step 'Install app for SharePoint': The provided App differs from the another App with the same version and product ID."

The provided App differs from the another App with the same version and product ID

To resolve the above error you have change the version of app which you are deploying. where to change it?

You can find the version details of app in the Appmanifest.xml file. Please see the below figure where the version of app is 1.0.0.0. So we can change the version details from here.

App version

Here I am changing from 1.0.0.0 to 1.0.0.1 then try to deploy the app again. The app will get deploy successfully.

App version

You can see the below image where the App which you have created got deployed and visible under Recent tab section.

SharePoint Hosted App

You can see the below figure where you can find the version details of an app.

App version

To test the App click on "Test" button which we have added to the App, it will display the message which we have added in App.js file "how are you". Cool eh..

App testing

Debug or Test an App with F5:

Debug an app is very easy now. You can set a break point in the code where you want to debug and Press F5.

To test an app after setting the break point click F5 and open the App and click  on Test button from the above figure, it will call the Javascript  method which we have written on onclick event on the Test button.

Debug an App

What happens when you press F5 while debugging or testing app:

1. It fixes URL’s in AppManifest.xml and other project files.
2. It creates the inner .wsp file for the App Web.
3. It creates the Application package and adds file inside.
   a). The App.manifest file.
   b). The inner .wsp file.
   c). Other files associated with Host Web feature (if any).
4. It installs the Application package using the Lifecycle API.
5. It updates “hosts” file with App DNS setting on the local machine.
6. It launches IE and navigates to the home page on App Web.
7. It attaches the Visual Studio JavaScript debugger for IE.

When you press [ctrl] + [F5] it performs all the above steps from 1 to 6, except 7. So only if you press F5 it attaches the Visual Studio JavaScript debugger for IE.

While debugging an app if you want to attach debugger with developer tools along with by pressing F5 it doesn't work. Only one debugger will work at a time, so make you use any one of them at a time.

Conclusion:

In this post you have learned how to develop a basic client webpart,  how to debug an app, how intellisense works for Javascript code in Visual Studio 2012 and how to troubleshoot the issue while developing an app.

Moreover all these new features will help development SharePoint webparts much easier and faster.



› Client webpart

About Author

Devendra Velegandla is a four-time recipient of Microsoft's Most Valuable Professional (MVP) award (2014-2017) for Office Servers and Services MVP and  SharePoint Server.He received the MCC award for his contributions in Microsoft MSDN/TechNet forums.He loves sharing articles, videos and tutorial on SharePoint and Office 365.


If you found this post helpful, please share with your friends!!


Join 6,000 subscribers and receive instant access to

Devendra's Library of Resources for SharePoint Developers