Create a custom action on SharePoint list items using javascript client object model

In this post, I will explain how we can create a custom action on SharePoint list items using EcmaScript or javascript CSOM as shown below.

Image1

To put this in a perspective, let us consider a scenario – there is a Custom list in SharePoint that keeps track of the SharePoint site creation requests. Each request is stored as a separate list item that contains ‘Site Url’ (if the site is created) and “Site Creation Status’ (a choice field that tells whether the site is created or not) apart from other details. There is a need for a custom action that should use javascript CSOM to make adjustments/customization to the existing site if it exists and if it doesn’t exist then it should just tell the user that site is not yet created and thus, cant be customized. In this post, I willn’t explain how to do site customization using javascript CSOM but  I will cover how to create a custom action and how to enable it to check whether the site is created or not for a particular request. The custom action will basically read the “Site Creation Status” field to check whether the site is created or not.

To get this done, I have used 2 javascript files –
1) CreateCustomActions.js – This contains the code to create two custom actions i.e. Make Site Adjustments and ScriptLink custom action. You can put the code inside this file in Content Editor webpart and run to create these custom actions.
2) MakeSiteAdjustments.js – This contains the logic to determine whether the site is already created or not. This needs to be stored in the ‘Site Assets’ library in the root site of site collection.

To make it easy to explain, I will summarize the solution in steps –

Step 1 – Create a ‘Make Site Adjustments’ custom action
Code snippet shown below , adds a ‘Make Site Adjustments’ custom action in the edit control block of the list item. When the user clicks on this custom action, ‘DoSiteAdjustments()’ javascript method is invoked (defined in  ‘MakeSiteAdjustments.js‘) which determine whether the site is created or not(Please see highlighted). Url tokens {ItemId} and {ListId} gives you the current list item Id and List Id respectively.

//Creates a make adjustments custom action on list items
var collUserCustomAction = oList.get_userCustomActions();
var oUserCustomAction = collUserCustomAction.add();
oUserCustomAction.set_location(‘EditControlBlock’);
oUserCustomAction.set_sequence(100);
oUserCustomAction.set_title(‘Make Site Adjustments’);

oUserCustomAction.set_url(“javascript:DoSiteAdjustments({ItemId},'{ListId}’)”);
oUserCustomAction.update();

Step 2 – Create a Script Link Custom action
As the javascript function “DoSiteAdjustments()” is defined in the “MakeSiteAdjustments.js” file, this file needs to be available for the ‘Make Site Adjustments’ custom action to work or to check whether the site is created or not. Code snippet shown below, adds a reference to “~SiteCollection/SiteAssets/MakeSiteAdjustments.js” in all the pages in the site.

//Creates a Script Link custom action
var collUserCustomAction2 = oWebsite.get_userCustomActions();
var oUserCustomAction1 = collUserCustomAction2.add();
oUserCustomAction1.set_location(‘ScriptLink’);
oUserCustomAction1.set_scriptSrc(‘~SiteCollection/SiteAssets/MakeSiteAdjustments.js’);
oUserCustomAction1.set_sequence(9);
oUserCustomAction1.set_title(‘Site Adjustments Script Link’);
oUserCustomAction1.set_description(‘Site Adjustments Script Link’);
oUserCustomAction1.update();

Step 3 – Upload MakeSiteAdjustments.js file to the Site Assets library
Upload the MakeSiteAdjustments.js file to the Site Assets library in the root site in site collection as there is a script link pointing to this file.

 

DoSiteAdjustments({ItemId},{ListId}) Explained 
This method determines whether site is created or not. Code snippet below reads the “Site Creation Status” field of the current item (based on item ID). If the status is ‘Site Created’ then it can run the logic to do site customizations (which is not covered in this blog) else it will throw an alert that site is not yet created.

var ctx = new SP.ClientContext.get_current();
this.website = ctx.get_web();
this.oList = website.get_lists().getById(listid);
this.oItem = oList.getItemById(itemid);

var status = oItem.get_item(‘Site_x0020_Creation_x0020_Status’);
if(status == “Site Created”)
{
//here write the custom javascript CSOM code to make site customizations.
}
else

{
alert(‘Site is not yet created’);
}

Complete code – 

CreateCustomActions.js
function createUserCustomActionList()
{
var clientContext = new SP.ClientContext.get_current();
var oWebsite = clientContext.get_web();
this.oList = oWebsite.get_lists().getByTitle(‘Site Requests’);
var collUserCustomAction = oList.get_userCustomActions();
var collUserCustomAction2 = oWebsite.get_userCustomActions();

//Creates a make adjustments custom action on list items
var oUserCustomAction = collUserCustomAction.add();
oUserCustomAction.set_location(‘EditControlBlock’);
oUserCustomAction.set_sequence(100);
oUserCustomAction.set_title(‘Make Site Adjustments’);
oUserCustomAction.set_url(“javascript:DoSiteAdjustments({ItemId},'{ListId}’)”);
oUserCustomAction.update();

//Creates a Script Link custom action
var oUserCustomAction1 = collUserCustomAction2.add();
oUserCustomAction1.set_location(‘ScriptLink’);
oUserCustomAction1.set_scriptSrc(‘~SiteCollection/SiteAssets/MakeSiteAdjustments.js’);
oUserCustomAction1.set_sequence(9);
oUserCustomAction1.set_title(‘Site Adjustments Script Link’);
oUserCustomAction1.set_description(‘Site Adjustments Script Link’);
oUserCustomAction1.update();

clientContext.load(oList, ‘Title’ ,’UserCustomActions’);
clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}

function onQuerySucceeded() {
alert(‘Custom action created for ‘ + this.oList.get_title());}

function onQueryFailed(sender, args) {
alert(‘Request failed. ‘ + args.get_message() + ‘\n’ + args.get_stackTrace());
}

 

MakeSiteAdjustments.js

function DoSiteAdjustments(itemid,listid)
{
var ctx = new SP.ClientContext.get_current();
this.website = ctx.get_web();
this.oList = website.get_lists().getById(listid);
this.oItem = oList.getItemById(itemid);
ctx.load(oItem);
ctx.executeQueryAsync(Function.createDelegate(this, this.onSiteCreationCustomActionSuccess), Function.createDelegate(this, this.onSiteCreationCustomActionFail));
}

function onSiteCreationCustomActionSuccess(sender, args) {
var status = oItem.get_item(‘Site_x0020_Creation_x0020_Status’);
if(status == “Site Created”)
{
//here write the custom javascript CSOM code to make site customizations.
}
else{
alert(‘Site is not yet created’);
}
}


function onSiteCreationCustomActionFail(sender, args) {
alert(‘failed to get list. Error:’ + args.get_message());
}

Leave a Comment

Your email address will not be published. Required fields are marked *