Sharepoint Expert Solutions: 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.
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.

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.

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.

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" .

<%@ Page language="C#" Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<WebPartPages:AllowFraming ID="AllowFraming" runat="server" />

<html>

<head>

    <title></title>

     <script type="text/javascript" src="../Scripts/App.js"></script>

    <script type="text/javascript">

        // Set the style of the client web part page to be consistent with the host web.

        function setStyleSheet() {

            var hostUrl = ""

            if (document.URL.indexOf("?") != -1) {

                var params = document.URL.split("?")[1].split("&");

                for (var i = 0; i < params.length; i++) {

                    p = decodeURIComponent(params[i]);

                    if (/^SPHostUrl=/i.test(p)) {

                        hostUrl = p.split("=")[1];

                        document.write("<link rel=\"stylesheet\" href=\"" + hostUrl + "/_layouts/15/defaultcss.ashx\" />");

                        break;

                    }

                }

            }

            if (hostUrl == "") {

                document.write("<link rel=\"stylesheet\" href=\"/_layouts/15/1033/styles/themable/corev15.css\" />");

            }

        }

        setStyleSheet();

    </script>

</head>

<body>

    <form id="form1" runat="server">

        <div>

            <div id="AppPartmessage"></div>

            <input type="button" value="App Part!" onclick="helloAppPart();" />

        </div>

    </form>

</body>

</html>

view rawAppPart.aspxThis Gist brought to you by GitHub.

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

function helloAppPart()

{

    document.getElementById("AppPartmessage").innerHTML = "<p> My first AppPart </p>";

}

view rawapp_helloAppPart.jsThis Gist brought to you by GitHub.

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.

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.

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.

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.

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 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.

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 much easier and faster.
- See more at: http://www.sharepoint-journey.com/client-webpart-in-sharepoint-2013.html#sthash.JhsJFQKY.dpuf

Sharepoint Expert Solutions

Monday, July 29, 2013

Client webpart in SharePoint 2013