Add JavaScript commands to your Ribbon buttons – Popout example

January 10th, 2013 | Categories: SharePoint 2010

The same way as we can use JavaScript Commandlets from favorites in your browser, you can also use them in your SharePoint List Ribbon. In this example we’ll create a button in the NewForm List ribbon that will open the form in a new tab without modal dialog.

First let’s prepare. We’ll need two icons for the button – a 16×16 and 32×32 version. You can use samples below:

fullscreen16  fullscreen32

Now let’s open the site with SharePoint Designer and upload the two images to the site (either images folder in SharePoint designer or any document/picture library).

Next in SharePoint Designer select the Lists and Libraries option under Navigation and select the list you need to add your custom button to.

Select Lists and libraries and your list

With the list open in SharePoint designer, click the Custom action button and select New Form Ribbon.

Custom action - new form ribbon

In the popup window fill in the name and if needed description of your new button:

Enter name and description

In the Select type of action select Navigate to url and enter the following in the box below:

javascript:var d=document.location.href.replace(‘&IsDlg=1’,”);;

Select third and paste the javascript

Now all that remains is to select images for the button in the last section:

Take care of images

And leave the rest of settings to default.

Now you should see your newly created custom action in the Custom actions section

The result

In some cases SharePoint designer won’t add this. In that case set the Navigate to url to some valid url ( :)), complete the process, then edit the custom action and replace link with your JavaScript.

Without any further ado you can immediately see results:

The result - before click  The result - after click

Why you might need a popout you might ask? simple… for bookmarking, linking,…