Create Client Web Part to the App using visual studio 2012

In this task, you will add a Client Web Part and code it. This web part can be used on pages outside of the App to add functionality to the hosting SharePoint site.

• Add a Client Web Part
• In the Solution Explorer, right click the HelloApp project node and select Add-->New Item from the context menu.
• In the Add New Item dialog, select Client Web Part.
• Name the new item MyClientWebPart and click Add.

• Adding a Client Web Part
• In the Create Client Web Part dialog, choose Create a new client web part page and give it the name MyClientWebPartSource. 

•  Replace the entire contents of the Elements file with the following:

• Add a new JavaScript file to hold the logic for the client web part.
• Right-click the Scripts folder in Visual Studio and choose Add / New Item.  Choose Web / JavaScript File and give it a name of MyClientWebPart.js. 

• Add the following code to the new MyClientWebPart.js file.

function helloAppPart() {
    var message = getQueryStringValue("Message");
    document.getElementById("appPartDiv").innerHTML = "" + message + "

";
}
function getQueryStringValue(paramName) {
    var params = document.URLUnencoded.split("?")[1].split("&");
    var strParams = "";
    for (var i = 0; i < params.length; i = i + 1) {
        var singleParam = params[i].split("=");
        if (singleParam[0] == paramName)
            return decodeURIComponent(singleParam[1]);
    }
}

In the Pages folder, open the item MyClientWebPartSource.aspx.  Add the following in the HEAD tag. <script src="../Scripts/MyClientWebPart.js"></script>

• Replace the contents of the BODY tag with the following.

<div id="appPartDiv"></div>
<input type="button" value="Push Me!" onclick="helloAppPart();" /> 


The result will look like the following:

 

Add the Client Web Part to a Page:

In this task, you will run the App and add the Client Web Part to the home page of the portal.

• Deploy the App
• In Visual Studio, right click the HelloApp node and select Deploy from the context menu.
• When the App is deployed, open your browser to the home page of the SharePoint site hosting the App (not the home page of the App itself!).
• Add the Client Web Part
• In the ribbon, select Page-->Edit Page.
• Click Add a Web Part in any Zone.
• Add the My Client WebPart part to the page. 
•  
  
• Click the Push Me button to test the functionality. 
•  
  
• Testing the Client Web Part
• Retract the App
• In Visual Studio, right click the HelloApp node and select Retract from the context menu.
• Note that the Client Web Part is removed from the home page.