Creating Client Web part in Office
365
Hello Everyone in this article I am 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
2.
So 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
3.
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)
Now 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
Now 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.
2.
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 .
Hope this article will help in creating client webpart in SharePoint Online.
Feel free to drop your comments below .
Happy Coding !!