- Open the visual studio – Create SharePoint Hosted App Project Select SharePoint Hosted Add-Ins enter name click Ok
- 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
- 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
- Click on edit page -click on apps selected your recently deployed app from app gallery and add it to the page.
- 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.