Article 10 from 30 : Creating a Custom Action for SharePoint 2013 App


 

This post is article-10 from the 30 Articles App series for SharePoint.

An App can have custom action in the host web.

When I say an App it relates to all kind of SharePoint app ( sharepoint-hosted/ auto-hosted / provider-hosted )

How to create it?

  1. Open your Sharepoint App project in Visual Studio.
    Add new Item-> UI Custom Action -> Add it.
    20121023-214739.jpg
  2. Enter custom action code into the element.xml file as per your target location in ribbon and/or ECB menu and list types for this custom action. (This is similar to SP2010)

Custom action at ECB menu : (1)
<CustomAction Id=”d960b369-1187-4893-b892-8a43383541b7.HostWebCustomAction1″
RegistrationType=”List”
RegistrationId=”101″
Location=”EditControlBlock”
Sequence=”100″
Title=”Invoke MyApp’s custom action”>
<UrlAction Url=”~appWebUrl/Default.aspx?{StandardTokens}” />
<!–CustomAction>

Custom action for Ribbon area : (2)
<CustomAction Id=”75dd24d9-0c16-4ef5-be0a-f52ed0e620fa.HostRibbonCustomAction1″
RegistrationType=”List”
RegistrationId=”101″
Location=”CommandUI.Ribbon”
Sequence=”100″
Title=”Invoke MyApp’s Ribbon custom action”>
<CommandUIExtension>
<CommandUIDefinitions>
<CommandUIDefinition Location=”Ribbon.Documents.Manage.Controls._children”>
<Button
Id=”Ribbon.Library.Connect.PropertyViewer”
Alt=”Invoke MyApp’s Ribbon custom action”
Sequence=”100″
Command=”Invoke_CustomAction”
LabelText=”Invoke custom action”
TemplateAlias=”o1″/>
</CommandUIDefinition>
</CommandUIDefinitions>
<CommandUIHandlers>
<CommandUIHandler
Command=”Invoke_CustomAction”
CommandAction=”~appWebUrl/Default.aspx?{StandardTokens}”/>
</CommandUIHandlers>
</CommandUIExtension>
</CustomAction>

Make sure that you put the correct CommandAction url : ~appWebUrl is for sharepoint-hosted App and ~remoteAppUrl should be used in context with remote-hosted App.

How to access it on SP host web?

Custom actions are placed into ribbon area and/or ECB menu.

As here I have chosen Document Library as target list template => select a document => expand the (…) menu and also check the ribbon area to find custom actions.

Here is how it looks after deploying the app to your host.

20121023-214749.jpg