0

I'm creating a provider hosted add-in for sharepoint online and i want to create button or, better if possible, a dropdown button in the command bar, somthing like this:

enter image description here

maybe this question has been asked many times but i can't find any clear answer.

So far i could create buttons inside the context menu of the items creating custom actions with visual studio.

<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <CustomAction Id="2bd189ad-3561-405e-815e-39f1a7fa1548.MenuItemCustomAction2"
                RegistrationType="List"
                RegistrationId="101"
                Location="EditControlBlock"
                Sequence="10001"
                Title="Invoke &apos;MenuItemCustomAction2&apos; action">
    <!-- 
    Update the Url below to the page you want the custom action to use.
    Start the URL with the token ~remoteAppUrl if the page is in the
    associated web project, use ~appWebUrl if page is in the app project.
    -->
    <UrlAction Url="~remoteAppUrl/WebForm1.aspx?{StandardTokens}&amp;SPListItemId={ItemId}&amp;SPListId={ListId}" />
  </CustomAction>
</Elements>

but i can't find a similar one for the command bar. I'm not using sfpx because, as far as i understand, it is just for sharepoint hosted applications.

Thanks for helping.

2 Answers 2

0

Create custom action buttons to SharePoint List using SharePoint Designer 2013

Note: This only works for classic view lists.

  • 1.Download the print icon and upload it to Site Assets Library

enter image description here

  • 2.Open your list in SharePoint Designer 2013
  • 3.Click on "Display Form Ribbon" on "Custom Action" dropdown menu

enter image description here

  • 4.Name it "Print Item" and Set “Navigate to URL:” to

    javascript:window.print()

  • 5.Browse for the button image URL (I used 32×32) and select the print.png image you added to Site Assets Library

enter image description here

  • 6.Change “Manage” in Ribbon Location to “Actions” and click OK

    Ribbon.ListForm.Display.Actions.Controls._children

enter image description here

0

I got a solution for the idea. I created a ribbon button with visual studio, this is how the xml codes looks if anyone wants in the future.

<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <CustomAction Id="9b50e988-bfdd-4415-a883-4e645c642d49.RibbonCustomAction1"
                RegistrationType="ContentType"
                RegistrationId="0x0101"
                Location="CommandUI.Ribbon"
                Sequence="10001"
                Title="Invoke RibbonCustomAction 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.Tabs._children">
                <Tab Id="Custom Tab" Title="Custom Tab" Description="Custom Tab">
                    <Scaling Id="Custom Tab.Scaling">
                        <MaxSize Id="Custom Group.Scaling.MaxSize" GroupId="Custom Group" Size="TwoLarge" />
                        <MaxSize Id="Custom Group 2.Scaling.MaxSize" GroupId="Custom Group 2" Size="OneLarge" />
                        <Scale Id="Custom Group.Scaling.Scale" GroupId="Custom Group" Size="TwoLarge" />
                        <Scale Id="Custom Group 2.Scaling.Scale" GroupId="Custom Group 2" Size="OneLarge" />
                    </Scaling>
                    <Groups Id="Custom Tab.Groups">
                        <Group Id="Custom Group 2" Title="Custom Group 2" Description="Custom Group 2" Sequence="7888" Template="Ribbon.Templates.OneLarge">
                            <Controls Id="Custom Group 2.Controls">
                                <Button Id="CustomButton3" LabelText="Custom Button 3" Image16by16="/_layouts/15/images/attach16.png" Image32by32="/_layouts/15/images/attach16.png" ToolTipTitle="Custom Button 3" ToolTipDescription="Custom Button 3" Command="CustomButton3.Command" TemplateAlias="c3" />
                            </Controls>
                        </Group>
                        <Group Id="Custom Group" Title="Custom Group 1" Description="Custom Group 1" Sequence="10000" Template="Ribbon.Templates.TwoLarge">
                            <Controls Id="Custom Group 1.Controls">
                                <Button Id="CustomButton1" LabelText="Custom Button 1" Image16by16="/_layouts/15/images/itslidelibrary.png" Image32by32="/_layouts/15/images/itslidelibrary.png" ToolTipTitle="Custom Button 1" ToolTipDescription="Custom Button 1" Command="CustomButton1.Command" TemplateAlias="c1" />
                                <Button Id="CustomButton2" LabelText="Custom Button 2" Image16by16="/_layouts/15/images/dldsln16.png" Image32by32="/_layouts/15/images/dldsln16.png" ToolTipTitle="Custom Button 2" ToolTipDescription="Custom Button 2" Command="CustomButton2.Command" TemplateAlias="c2" />
                            </Controls>
                        </Group>
                    </Groups>
                </Tab>
            </CommandUIDefinition>
            <CommandUIDefinition Location="Ribbon.Templates._children">
                <GroupTemplate Id="Ribbon.Templates.TwoLarge">
                    <Layout Title="TwoLarge" LayoutTitle="TwoLarge">
                        <Section Alignment="Top" Type="OneRow">
                            <Row>
                                <ControlRef DisplayMode="Large" TemplateAlias="c1" />
                                <ControlRef DisplayMode="Large" TemplateAlias="c2" />
                            </Row>
                        </Section>
                    </Layout>
                </GroupTemplate>
            </CommandUIDefinition>
            <CommandUIDefinition Location="Ribbon.Templates._children">
                <GroupTemplate Id="Ribbon.Templates.OneLarge">
                    <Layout Title="OneLarge" LayoutTitle="OneLarge">
                        <Section Alignment="Top" Type="OneRow">
                            <Row>
                                <ControlRef DisplayMode="Large" TemplateAlias="c3" />
                            </Row>
                        </Section>
                    </Layout>
                </GroupTemplate>
            </CommandUIDefinition>
        </CommandUIDefinitions>
        <CommandUIHandlers>
            <CommandUIHandler Command="CustomButton1.Command" CommandAction="https://contoso.azurewebsites.net/pages/index.aspx" />
            <CommandUIHandler Command="CustomButton2.Command" CommandAction="http://www.bing.com" />
            <CommandUIHandler Command="CustomButton3.Command" CommandAction="https://developer.microsoft.com/sharepoint" />
        </CommandUIHandlers>
    </CommandUIExtension >
  </CustomAction>
</Elements>

enter image description here

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.