In this post you will learn how to develop a basic client webpart in SharePoint 2013.
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.
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.
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.
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.
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.
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.
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.
Once you add your App part it will show like in the below figure.
To test it click on App Part! button and the method you have written above will display a message as "My first AppPart".
You can use IE developer tool and Check the IFRAM details of App part like showing in below figure.
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."
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 184.108.40.206. So we can change the version details from here.
Here I am changing from 220.127.116.11 to 18.104.22.168 then try to deploy the app again. The app will get deploy successfully.
You can see the below image where the App which you have created got deployed and visible under Recent tab section.
You can see the below figure where you can find the version details of an app.
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..
Debug an app is very easy now. You can set a break point in the code where you want to debug and Press F5.
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.
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.
Moreover all these new features will help development SharePoint webparts much easier and faster.
Devendra Velegandla is a five-time recipient of Microsoft's Most Valuable Professional (MVP) award (2014-2019) for Office Apps and Services, 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.