Add a Custom Ribbon Button in SharePoint List using SharePoint-Hosted Add-In

Let’s continue with the project where we created a list and add few site columns using custom content type.

In this article, we will add a custom action button in the Ribbon menu in Events tab of a Calendar list. With the click of this button, we will be navigated to a list.

Create an Event List Calendar in host web (Developer Site) named Meetings.

Add an event in calendar. Calendar should look like below:

In Solution Explorer, right click project name –> Add –>New Item –> Office/SharePoint –> Ribbon Custom Action. Name it as OpenIndiaStates.

In this page, select Host Web, List Instance and Meetings in respective options. Click Next.

We will now specify where we want the button to be placed on the ribbon.

We can either choose the values from the dropdown or enter our own value. We want the button to be placed in the Calendar list –> Events tab –> Actions Group. Hence, we will write Calendar.Events.Actions.Controls._children.

Press F5 and test the App.

It will open the app with the lists. Navigate to your Developer Site. Open Meetings List. In Events tab, click on button that you have created.

You will be navigated to States in India list.