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

30 Articles App Series, Apps, SharePoint 2013 1 Minute


 

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

Published by aanuwizard

Published

4 thoughts on “Article 10 from 30 : Creating a Custom Action for SharePoint 2013 App”

  1. Hi thanks for this article..

    I have installed sharepoint 2013 project templates for visual studio 2012 but I am not able to find UI custom action template … I can see only menu item custom action and ribbon custom action..

    Can you please tell me how add this custom action template..

  2. Manjunath,

    you should see that option while trying to add new item from Sharepoint App project? Can you be more specific on which type of app you are building (sp-hosted/provider hosted) ? And what version of Visual studio and sharepoint you are using?

    -Aanu

  3. HI ,

    How to add flyout anchor to the site? ,during SharePoint hosted app development with commanUIHandler(command action attribute) of ribbon button.It only allows Url not javascript plz help

  4. Pingback: How to make the shared doc space users able to send word docto email | sharepoint2013admin

Comments are closed.