How to create Custom action to deploy with Sharepoint Add-ins(Apps)

There are two basic types of SharePoint Apps/Add-ins: SharePoint Hosted and Provider Hosted. Here, I will show how we can create custom action in host web document library through SharePoint Add-ins and open a model popup on click. Follow below steps:

Step 1:
Open your SharePoint App project in Visual Studio Solution. Add New Item, select Ribbon Custom action and give it name and click on Add.

Step 2:

Now in second dialog box, we have to set properties for custom action. In Dialog box. Select appropriate option based on requirement. Here, I have selected custom action scope to "List Template" and custom action scope location set to "Document Library" and click on Next.

You can select any type like Custom List, Calendar, Form Library etc.

Step 3:

Now in third dialog box, we have to specify the settings to generate a button control for ribbon. Here, I have selected "Ribbon.Documents.EditCheckout" as control location (Ribbon group where you would like to put the Control), "Demo Modal" as button control text (Name of your Control), and provide default page URL where button control navigates. Click on Finish. Now, custom action is created.

Step 4: 

Open Elements.xml file and add following attributes in <CustomAction> tag.

                HostWebDialog="TRUE"

                HostWebDialogWidth="600"

                HostWebDialogHeight="400" 

Your Elements.xml file looks like below

<?xml version="1.0" encoding="utf-8"?>

<Elements xmlns="http://schemas.microsoft.com/sharepoint/">

  <CustomAction Id="26a48039-5fc9-45fc-aabb-287b3ccedd3f.Demo_Modal"

                RegistrationType="List"

                RegistrationId="101"

                Location="CommandUI.Ribbon"

                Sequence="10001"

                HostWebDialog="TRUE"

                HostWebDialogWidth="600"

                HostWebDialogHeight="400"

                Title="Demo Modal">

    <CommandUIExtension>      

      <CommandUIDefinitions>

        <CommandUIDefinition Location="Ribbon.Documents.EditCheckout.Controls._children">

          <Button Id="Ribbon.Documents.EditCheckout.Demo_ModalButton"

                  Alt="Demo_Modal"

                  Sequence="100"

                  Command="Invoke_Demo_ModalButtonRequest"

                  LabelText="Demo_Modal"

                  TemplateAlias="o1"

                  Image32by32="_layouts/15/images/placeholder32x32.png"

                  Image16by16="_layouts/15/images/placeholder16x16.png" />

        </CommandUIDefinition>

      </CommandUIDefinitions>

      <CommandUIHandlers>

        <CommandUIHandler 

          Command="Invoke_Demo_ModalButtonRequest"

          CommandAction="~appWebUrl/Pages/Default.aspx?{StandardTokens}&amp;

          SPListItemId={SelectedItemId}&amp;SPListId={SelectedListId}&amp;SPListURLDir=      {ListUrlDir}&amp;SPSource={Source}"/>

      </CommandUIHandlers>

    </CommandUIExtension >

  </CustomAction>

</Elements>

Step 5:

Now open navigation page (App Page - default.aspx) of custom action and add below code:

<WebPartPages:AllowFraming ID="AllowFraming" runat="server"/>

All done! 

 

Now, we can deploy app in SharePoint and custom action will be created. It will open Modal Popup on click of "Demo_Modal".

 

Deployed app will looks like above Image. This is a great way to extend functionality of SharePoint.

If you have any questions you can reach out our SharePoint Consulting team here.