How to Add Custom Buttons to the Ribbon in SharePoint

Step 1) Open SharePoint Designer.

Step 2) Open the Site that contains the list or library that you want to apply the custom button to.

Step 3) Click on Lists and Libraries.

Step 4) Select the list or library that contains the Ribbon menu that you want to apply the custom button to.

Step 5) Click on Custom Actions

Step 6) Click on View Ribbon. It will give you a form to fill out.

Step 7)  Enter a name and description for your new custom action.
Note:  Whatever you type in the “Name” field will show up on the Ribbon.

Step 8) Your custom button can be used to run a workflow, show an existing form, or navigate to another Web page.  In the “Select the type of action” section, select one of the three choices:

Option 1: “Navigate to form” causes the button to open up a form that you have saved to the list.

Option 2: “Initiate workflow” causes the button to run a workflow of your choice.

Option 3: “Navigate to URL” causes the button to essentially act as a link.

(Note: you can use this option to link a form that is on a different list.)


Step 8) Scroll down to the “Advanced custom action options” section (seen below), put an image in the button image URL section.

(You will first have to insert the image in your site assets on your SharePoint site before you can browse for it.)

Choose the 32×32 image so you have a nice big image on your button.

“Sequence number” determines the position the button has on the ribbon. Although there are some limitations as to where on the ribbon you can put the button.

Step 9) Click Ok and you are done.

Here is an example of a custom button that I built to add Client Folders to a document library.


-Benjamin Lloyd,
SharePoint Developer and Trainer,
Sector Learning Solutions

Advertisements

6 responses to “How to Add Custom Buttons to the Ribbon in SharePoint

  1. Hi Benjamin!
    Great post! I tried to add a custom button as described above. Unfortunately the image doesn’t show. I read in other discussion boards that the image file has to be stored in the _layouts/images directory. Is that true?
    Regards,
    Katrin

    • Hi Katrin,

      We’re glad you enjoyed the post!
      Benjamin finished his co-op work term with Sector Learning Solutions back in May 2012, so I’ve asked our Collaboration Systems Business Analyst (and SharePoint consultant), Chris Stone, to answer your question.

      Chris says:
      “You do not need to place the file in the layouts directory as long as the people who want to see the image have at least read access to wherever you store the picture. Please make sure the picture is appropriately sized at 16×16 or 32×32 (That’s measured in pixels) otherwise it may have issues.”

      Hope that’s helpful!

      -Kelly Marshall,
      Director of Communications,
      Sector Learning Solutions

  2. Hi Kelly, hi Chris!
    Thank you for your answer.
    My picture has the right size (16×16 pixels, i also tried out 32×32). I have full access to the picture library the file is stored in, but not even I can see it. The button is there, but no image is shown. 😦
    Any other suggestions?
    Best regards,
    Katrin

  3. Hi again!
    It actually works! I didn’t change a thing and suddenly the images were shown. =)
    Thank you so much for your assistance.
    Greetings,
    Katrin

  4. We are a group of volunteers and opening a new scheme in our community.
    Your site provided us with valuable information to work on.
    You’ve done an impressive job and our whole community will be thankful to you.

  5. Thanks for finally writing about >How to Add Custom Buttons
    to the Ribbon in SharePoint | Sector Learning Solutions <Loved it!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s