12

I have specific requirements from my client that he wants to add some additional Ribbon Button "but only" via JavaScript (including EnableScript reading value from some other list). They don't want to deploy anything to SharePoint server.

So I know how to that via recommended way

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <CustomAction Id="HelloWorldExample"
                Title="Hello WorldExample"
                Location="CommandUI.Ribbon"
                RegistrationType="List"
                RegistrationId="101">
    <CommandUIExtension>
      <CommandUIDefinitions>
        <CommandUIDefinition Location="Ribbon.Documents.Manage.Controls._children">
          <Button Id="Ribbon.HelloWorldExample"
                  TemplateAlias="o1"
                  Command="HelloWorldExample"
                  LabelText="Hello world Example"/>
        </CommandUIDefinition>
      </CommandUIDefinitions>
      <CommandUIHandlers>
        <CommandUIHandler Command="HelloWorldExample"
                          CommandAction="javascript:alert('Hello world Example from ribbon !');"
EnabledScript="javascript:
           function getStatus()
           {
             //check  something
           }
           return false;" />
      </CommandUIHandlers>
    </CommandUIExtension>
  </CustomAction>
</Elements>

But how to accomplish this just via JavaScript/jQuery?

1
  • If you find anything, please update this thread! Thanks :-)
    – AymKdn
    Jun 8, 2014 at 9:25

3 Answers 3

15

They have a JavaScript API for this: http://msdn.microsoft.com/en-us/library/office/ff408647(v=office.14).aspx

You can even add command ui extension like you have them.

var context = new SP.ClientContext.get_current();
this.site = context.get_web();
var customAction = this.site.get_userCustomActions().add();
customAction.set_location('CommandUI.Ribbon.NewForm');

var uiExtension = '<CommandUIExtension xmlns="http://schemas.microsoft.com/sharepoint/">' +
                        '<CommandUIDefinitions>' +
                            '<CommandUIDefinition Location="Ribbon.ListForm.Edit.Commit.Controls._children">'+
                                '<Button Id="Ribbon.Documents.New.RibbonTest" '+
                                        'Command="PrintPage" '+
                                        'Sequence="0" '+
                                        'Image16by16="/_layouts/images/NoteBoard_16x16.png" '+
                                        'Image32by32="/_layouts/images/NoteBoard_32x32.png" '+
                                        'Description="Uses the notification area to display a message." '+
                                        'LabelText="Notify hello" '+
                                        'TemplateAlias="o1"/>' +
                            '</CommandUIDefinition>'+
                        '</CommandUIDefinitions>'+
                        '<CommandUIHandlers>'+
                            '<CommandUIHandler Command="PrintPage" '+
                                'CommandAction="javascript:SP.UI.Notify.addNotification(\'Hello from the notification area\');" />'+
                        '</CommandUIHandlers>'+
                       '</CommandUIExtension>';

customAction.set_commandUIExtension(uiExtension);

customAction.set_registrationId("0x0108");
customAction.set_registrationType(SP.UserCustomActionRegistrationType.contentType);

customAction.update();

context.load(this.site,'UserCustomActions');

context.executeQueryAsync(Function.createDelegate(this, this.onSuccess),
        Function.createDelegate(this, this.onFailure));
4
  • 2
    Sorry to asking in old thread. I used your code and successfully add ribbon button. However when I refresh the page a new button is added. So refresh the page 5 times 6 buttons will be added. How can I prevent?
    – Mark L
    Apr 15, 2016 at 6:41
  • 1
    @Mark You are supposed to only run it one time, you are now adding a new Custom Action every time you load the page. You could add it with an sort of "admin" page for this, or simply just run it in the browser console Apr 15, 2016 at 12:55
  • 1
    Thanks. Although I can remove the action with Designer 2013 I cannot find the right coding to remove it. There are many reference to add/modify but somehow I cannot find how to "remove".
    – Mark L
    Apr 18, 2016 at 1:47
  • 1
    @Mark To remove all from a web ( named site in the example above), you can simply just use: site.get_userCustomActions().clear(); and execute. Else you have to iterate over the custom actions on the object you added it to, and check for the once you want to remove and use deleteObject Apr 18, 2016 at 7:04
1

Nevermind my previous answer, forget I said anything. In javascript, you can create a set elements without having to write anything in the original html document. functions like *.createElement(), *.class(), and *.id() can let you create and configure your html element.

Here is the link to all the Javascript functions for this.

And here is a link to add attributes to an element.

So your javascript will be something like:

function myRibbonButton() {
var btn=document.createElement("myButton");
btn.id = "myID";
btn.class = ...
//and so on
}

So you can create elements in javascript, just tailor it to what you need.

5
  • Hi Brandon, thanks for answer. But it this example he is again using standard way of creating Ribbon button and then Javascript to perform some action. So it is not accually what I need. He had XML Ribbon deffinition and so. And I need to Create that button via Javascript.
    – Leo
    Jun 6, 2014 at 10:19
  • Oh, okay, sorry about that. Misunderstood the question, thought it was kind of strange, hah. So what you want to do, is where you usually put the button declaration, you would instead just add a script that declares the html button in the script?
    – Brandon C.
    Jun 6, 2014 at 11:00
  • yap... exactly that.. so everything over JavaScript.
    – Leo
    Jun 6, 2014 at 11:31
  • I seem to remember being actively able to insert text using the .html() function with javascript. I'll try to find it, and I will update my answer as soon as I can.
    – Brandon C.
    Jun 6, 2014 at 12:04
  • Oh, yeah, you can create elements with javascript using the .createElement() function. Writing something like var btn=document.createElement("BUTTON"); var t=document.createTextNode("CLICK ME"); btn.appendChild(t); will create a button on the page through javascript.
    – Brandon C.
    Jun 6, 2014 at 12:08
1

This would help.

Plus, surely, the same stuff can be deployed via CSOM and UserCustomActions.

1
  • 2
    Second link is dead.
    – ameliapond
    Apr 24, 2017 at 7:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.