Create a Client App Webpart in Office 365 Sharepoint 2013

Introduction

This article explains how to create a Client App Webpart in SharePoint 2013.

Prerequisites

1. Ensure you have access to the Office 365 online.
2. Ensure that the Napa tool is available in your site.

Use the following procedure

1. Create an app for SharePoint using Office 365 Tools. If you have missed out on how to create an app in SharePoint 2013, then see How to Create an app for SharePoint using Office 365 Tools.
2. Click on Pages then select ClientWebpart.
   
   
   
   
3. Here in this example we are creating a button and for the onclick event of that button we will display the text contents.
4. Now add the following code snippet inside the div tag. In this code snippet we are adding a button “btnAppPart”and div tag “AppPartmessage” so that on the click of the button some text is displayed on the screen.
    

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

   <button id="btnAppPart" onclick="helloAppPart();">Click me</button>
    

5. Before adding the onclick function in the App.js we need to refer to this js file in the ClientWebPart.
    

   <!-- Add your JavaScript to the following file -->

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

6. Click on the App.js file.
   
   
   
   
7. Add a function named helloAppPart and display the text contents by accessing the div id “AppPartmessage”.
   
   function helloAppPart() {

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

       }
    

8. That's it.
9. Now let's go and test the app webpart.

Testing

1. Now to run the app click on the "Play" button available towards the left-most corner.
   
   
    
2. The app is packaged, deployed, and installed on your Office 365 Site.
   
   
    
3. Now navigate to your site and the app webpart.
   
4. Click on Page then Edit as in the following:
   
   
    
5. Now click on Insert -> App Part then select the client webpart that you recently created (“SharePointAppDemo”) then click on “Add”.
   
   
    
6. Now you will be able to see the client webpart that you created.
   
   
    
7. Click on the “Click Me button”. You will be able to the text you added in the code.
   
   
   

Summary

Thus in this article you saw how to create a client webpart in SharePoint 2013.