Creating Client Web part in Office 365

In this article we are going to explain how to create webpart in office 365 using JavaScript object model in this article you would be able to see the walk through of the SharePoint Hosted Add-Ins and the process of creating client webpart and custom action.

  1.    Open the visual studio – Create SharePoint Hosted App Project Select SharePoint Hosted Add-Ins enter name click Ok

  1. Now enter your site name where you wanted to debug your App and select the hosting environment type so I am, going the select SharePoint Hosted Add-Ins

  1. Now Click on next button enter your valid credential to connect with your SharePoint Online site

Once you complete everything click on finish. It will create SharePoint Hosted App Project. Now follow the next step to add client webpart in your project

       Right click on project – Click add new Item choose Client Webpart(HostWeb)


it will open the next wizard here you can enter the new page name where you wish to show the app part in my case I am selecting the existing page from solution

click on the finish client app part will be added in the solution as shown below

Now let’s create a custom property in client app part. I have added six properties in my webpart as shown below

To read the values from properties I am going the write a custom JS script to get the values

after reading all the values from webpart I am going to create a custom action dynamically on the configured list.

After writing your complete code and your business logic deploy your app to the SharePoint online and install in your environment.

Follow the below steps to add and configure your webpart on the page

  1. Click on edit page -click on apps selected your recently deployed app from app gallery and add it to the page.

  1. Now configure your custom properties which you have created and click on Apply/Ok

After the above configuration you can see see the custom action created on your list as shown in below screenshot.

Click on the above ribbon buttons – below screen will appear .After the above configuration you can see see the custom action created on your list as shown in below screenshot.



End !!


Add a Comment

Your email address will not be published. Required fields are marked *