1

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

  • What is your question ? – Steve B Apr 7 '16 at 10:07
  • my question is how can i create a Custom Ribbon Button for sharepoint addin with javascript – ysfibm Apr 7 '16 at 10:09
  • Why do you want to create the button through JS? You can add it as a module along with your Add-in and then control whether it's enabled or disabled through JS. – Nisarg Apr 7 '16 at 12:40
  • yeah , but i don't want the button directly when i deploy the the add-in ,i wanna call a js fonction to add it – ysfibm Apr 7 '16 at 14:22
  • has any one a solution for this? – ysfibm Apr 7 '16 at 21:29
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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