Sharepoint 2013 App Custom Action

This post is about how to create a Custom Action using a SharePoint 2013 app project.

In this sample I’ll use a Menu action, that will be available to list items in Page Library based lists.

This menu action will update a field in the target list item.

Start creating a SharePoint 2013 app Visual Studio 2013 project, SharePoint Hosted.

Then add a new item of type “Menu Item Custom Action”:

AppRA1

Select “List Template” and “Page Library”:

AppRA2

Select your action name and target page:

AppRA3

Your Menu Action elements.xml file should be like:

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <CustomAction Id="56b2571e-1ae7-48e8-be14-2652fc86bc79.Action1"
                RegistrationType="List"
                RegistrationId="850"
                Location="EditControlBlock"
                Sequence="10001"
                Title="Action1">
    <!--
    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="~appWebUrl/Pages/Default.aspx?{StandardTokens}&amp;SPListItemId={ItemId}&amp;SPListId={ListId}" />
  </CustomAction>
</Elements>

In app Menu Action or Ribbon Action you can’t add javascript code to your Command Action (like in this post), so you need to define the  behaviour of your action in the navigation page.
My Default.aspx file includes the App.js file, I edited this file and add the following code:

 'use strict';

var list;
 var parentWeb;
 var currentItem;

$(document).ready(function () {

var hostweburl = GetSiteUrl();

var clientContext = new SP.ClientContext.get_current();
 var parentCtx = new SP.AppContextSite(clientContext, hostweburl)
 var parentWeb = parentCtx.get_web();
 clientContext.load(parentWeb);
 list = parentWeb.get_lists().getById(GetListId());
 clientContext.load(list);
 currentItem = list.getItemById(GetItemId());
 clientContext.load(currentItem);
 if (currentItem != null) {
 currentItem.set_item('Category', 'Cat1');
 currentItem.update();
 }
 clientContext.executeQueryAsync(onListLoadSucceeded,
 onRequestFailed);
 });

function onListLoadSucceeded() {
 $('#message').text('Done');
 }

function onRequestFailed(sender, args) {
 alert('Error:' + args.get_message());
 }

function getParameterByName(name) {
 var name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
 var regexS = "[\\?&]" + name + "=([^&#]*)";
 var regex = new RegExp(regexS);
 var results = regex.exec(window.location.href);
 if (results == null)
 {
 return "";
 }
 else
 {
 return decodeURIComponent(results[1].replace(/\ /g, " "));
 }
 }

function GetListId() {
 return getParameterByName("SPListId");
 }

function GetSiteUrl() {
 return getParameterByName("SPHostUrl");
 }

function GetItemId() {
 return getParameterByName("SPListItemId");
 }
 

After deployed my solution, I can see and execute my Custom Action:

AppRA4

Advertisements

Tags: , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: