Custom Actions Add custom buttons to SharePoint list ribbon using SharePoint Designer 2013

Custom Actions Add custom buttons to SharePoint list ribbon using SharePoint Designer 2013

In this post, we will discuss how to add custom buttons to the SharePoint 2013 list ribbon using SharePoint 2013 designer.

You may also like to read:


– Retrieve List Item and Dynamically Adding Drop down using REST API and JQuery

– Custom Ribbon Action and set the Customize Icon to Ribbon button in a SharePoint Hosted App

Follow below steps to add custom buttons to SharePoint list ribbon:
– Open your SharePoint 2013 site using SharePoint designer 2013, then from the Site objects click on the Lists and Libraries from navigation.

– This will display all the lists and libraries in the page. Click on the particular list in which you want to add the button. Then from the List settings page, go to the ribbon click on Custom Action -> View Ribbon as shown in the fig below:

Custom Actions Add custom buttons to SharePoint list ribbon using SharePoint Designer 2013
Custom Actions Add custom buttons to SharePoint list ribbon using SharePoint Designer 2013

– This will open the Create Custom Action dialog box, Give a Name for the button and optionally put a description. Then in the Select the type of action there are three options to do:
1- Navigate to form: You can give the form name where you want to navigate.
2- Initiate workflow: You can initiate any workflow associated with the list by choosing this option.
3- Navigate to URL: You can specify the URL where you want to navigate on click on that button.

Here first we will choose to Navigate to URL option and give the URL like below:

Custom Actions Add custom buttons to SharePoint list ribbon using SharePoint Designer 2013
Custom Actions Add custom buttons to SharePoint list ribbon using SharePoint Designer 2013

Then in the Advanced custom action options, you can provide the Button image URLs and then in the Ribbon Location, you can provide the where the button will appear in the Ribbon. Here I have given the default option “Ribbon.ListItem.Actions.Controls._children”. In this case, the button will appear in the list ribbon under Items tab in the Actions section. see fig below:

Custom Actions Add custom buttons to SharePoint list ribbon using SharePoint Designer 2013
Custom Actions Add custom buttons to SharePoint list ribbon using SharePoint Designer 2013

You can check out SharePoint 2013 Ribbon Locations in this MSDN article.

Now once you click on OK in the Create Custom Action dialog box, then open the list in the browser, you will be able to see the button like below. Once you will click on the button you will be redirected to the provided URL presented in the Custom Action dialog box.

Custom Actions Add custom buttons to SharePoint list ribbon using SharePoint Designer 2013
Custom Actions Add custom buttons to SharePoint list ribbon using SharePoint Designer 2013

Open JavaScript Dialogbox:
You can open a JavaScript dialog box by writting the below line in the Navigate to URL in the Select the type of action:

javascript: alert(‘Hello World !!!’);

Custom Actions Add custom buttons to SharePoint list ribbon using SharePoint Designer 2013
Custom Actions Add custom buttons to SharePoint list ribbon using SharePoint Designer 2013

You can also call any JavaScript function presented in the page. You can put the below code in a script editor web part in the List view page.

<script type=”text/javascript”>
function CallHello() {
alert (‘Hello World !!!’);
}
</script>

Then you can modify the Navigate to URL and can write like below:

javascript: CallHello();

Custom Actions Add custom buttons to SharePoint list ribbon using SharePoint Designer 2013
Custom Actions Add custom buttons to SharePoint list ribbon using SharePoint Designer 2013

Get Selected Item Ids:

We can also get Ids of the selected items by using the below JavaScript code. Edit the page and then add a script editor web part into the page. Then insert the below JavaScript code:

<script type=”text/javascript”>
function GetItemId() {
var ctx = SP.ClientContext.get_current();
var items = SP.ListOperation.Selection.getSelectedItems(ctx);
var selectedItems = ”;
for (index in items) {
alert (items[index].id);
}
}
</script>

Now modify the Navigate to URL option like below in the Create Custom Action dialog box.

javascript: GetItemId();

Now whenever user select one or more than one item and then click on the custom ribbon button which we have just created, it will display the selected item ids.

Hope this will be helpful.

Check out Best Alternative to InfoPath -> Try Now

EnjoySharePoint YouTube Channel

About Bijay Kumar

I am Bijay from Odisha, India. Currently working in my own venture TSInfo Technologies in Bangalore, India. I am Microsoft Office Servers and Services (SharePoint) MVP (5 times). I works in SharePoint 2016/2013/2010, SharePoint Online Office 365 etc. Check out My MVP Profile.. I also run popular SharePoint web site SharePointSky.com

View all posts by Bijay Kumar →