Custom Ribbon Button with javascript

Question

Hi i'm working on a sharepoint Addin i wanna create a custom ribbon button using javascript , i tryed with xml it's work fine using this code :

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <CustomAction Id="e3ae8fc7-7989-467c-ba5f-6bdb1d5064c3.AzeoFullDownload"
                RegistrationType="List"
                RegistrationId="101"
                Location="CommandUI.Ribbon"
                Sequence="10001"
                Title="Invoke &apos;AzeoFullDownload&apos; action">
    <CommandUIExtension>
      <!-- 
      Update the UI definitions below with the controls and the command actions
      that you want to enable for the custom action.
      -->
      <CommandUIDefinitions>
        <CommandUIDefinition Location="Ribbon.Documents.Copies.Controls._children">
          <Button Id="Ribbon.Documents.Copies.AzeoFullDownloadButton"
                  Alt="AzeoFullDownload"
                  Sequence="100"
                  Command="Invoke_AzeoFullDownloadButtonRequest"
                  LabelText="AzeoFullDownload"
                  TemplateAlias="o1"
                  Image32by32="images/Button-Download.png"
                  Image16by16="images/Button-Download.png" />
        </CommandUIDefinition>
      </CommandUIDefinitions>
      <CommandUIHandlers>
        <CommandUIHandler Command="Invoke_AzeoFullDownloadButtonRequest"
                          CommandAction="~appWebUrl/Pages/Default.aspx?{StandardTokens}&amp;SPListItemId={SelectedItemId}&amp;SPListId={SelectedListId}"
                          EnabledScript="javascript:EnableCopyLinkToClipboard();"/>
      </CommandUIHandlers>
    </CommandUIExtension >
  </CustomAction>
<!-- 
  <CustomAction
 Id="CopyLinkToClipboardScript"
 Location="ScriptLink"
 ScriptSrc ="~appWebUrl/Pages/App.js"/>  -->
</Elements>

thank you

Answer 1

Regarding your comment, you should keep your Xml definition.

you can control the visibility of the button from JS using the QueryCommand attribute of the button. This command will allow you to control from a JS component if the button is visible or not.

Take a look at Sample code: Asynchronously checking if a Ribbon command is available.

As an example, in a project I managed I had :

 <MRUSplitButton
            Id="MyCorp.Intranet.Publishing.Ribbon.MyAction.MyButton"
            Sequence="10"
            Alt="$Resources:core,ButPublish;"
            InitialItem="Mycorp.Intranet.Publishing.Ribbon.MyGroup.Menu.MyAction.MyAction"
            MenuAlt="$Resources:core,ButPublish;"
            TemplateAlias="OneRow1"
            Command="MyCorp.Intranet.Publishing.Ribbon.MyAction.Command"
            QueryCommand="MyCorp.Intranet.Publishing.Ribbon.MyAction.Query">

And in my js component :

handleCommand: function (commandId, properties, sequence) {

    switch (commandId) {
        case 'MyCorp.Intranet.Publishing.Ribbon.MyAction.Query':
            return true; // Or false, depending on your logic
    }
}

Hopefully, you have yet implemented custom JS component. Otherwise, prepare for a big headache.