Custom Action Menu In SharePoint ListItem

ECB Menu For SharePoint or Custom action menu is available for user access at different locations in SharePoint. It can be an icon/text, which can be used to implement functionality such as navigating to a landing page, starting a Workflow on an item or any custom action inside SharePoint.

ECB Menu can be created using SP designer as well as Jquery. If usign designer, go to list/library then under custom action, click create new button and provide the page URL appended with "?ID={ItemId}", if we want to pass current item ID.

By default SharePoint provides the default custom action like edit, delete and view item options.

Here we will be adding new ECB Menu as "Custom Edit Page" as shown in the below image.

On click of the Cusom Edit Link, it will be redirected to my custom edit page which I have created under list form.

Also, I am passing the ID of current list item as well as Source page URL from where it will be redirected back after performing action on redirected edit page.

Implementaion

It can be implemented with any list/library, however I have implemented it on list.

You can use any ScriptEditor/CEWP on your page and put all below scripts as is by just changing the list name and URL.

Note: The ECB Menu by default will open in next tab, but if we want to open the link in current tab, it can be done by putting below script in SharePoint designer under Navigate to URL option.

javascript:(function() {var items = SP.ListOperation.Selection.getSelectedItems(); window.location.href= "http://sites/QA/SL_MI/Lists/ComplainTracking/CustomEditPage.aspx?ID={ItemId}";})()

Full Script

<script language="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', AddCustomUserActionToECB);
});
function AddCustomUserActionToECB() {
var clientContext = new SP.ClientContext();
var oWeb = clientContext.get_web();
var oList = oWeb.get_lists().getByTitle('ComplainTracking');
var userCustomActionColl = oList.get_userCustomActions();
clientContext.load(oList, 'UserCustomActions', 'Title');
clientContext.executeQueryAsync(function() {
var customActionEnumerator = userCustomActionColl.getEnumerator();
var foundAction = 0;
while (customActionEnumerator.moveNext()) {
var oUserCustomAction = customActionEnumerator.get_current();
if (oUserCustomAction.get_title() == 'Custom Edit Page') {
//oUserCustomAction.deleteObject();
//clientContext.load(oUserCustomAction);
//clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceededdelete), Function.createDelegate(this, this.onQueryFailed));
foundAction = 1;
break;
}
}
if (foundAction == 0) {
var oUserCustomAction = userCustomActionColl.add();
oUserCustomAction.set_location('EditControlBlock');
oUserCustomAction.set_sequence(100);
oUserCustomAction.set_title("Custom Edit Page");
//oUserCustomAction.set_url("/sites/QA/SL_MI/SitePages/CustomSearch.aspx?ListId={ListId}&ItemId={ItemId}&ItemUrl={ItemUrl}");
oUserCustomAction.set_url("/sites/QA/SL_MI/Lists/ComplainTracking/Edit1.aspx?ID={ItemId}&Source=/sites/QA/SL_MI/SitePages/ListViewGrid.aspx");
oUserCustomAction.update();
clientContext.load(userCustomActionColl);
clientContext.executeQueryAsync();
}
}, function(sender, args) {
console.log('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
});
}
</script>

2 Comments

Join the conversation! Your thoughts help the community grow.

Praveen Kumar8y ago
HtmlString += '<li class="image">'; htmlString += '<a nowrap class="link_tag" href="'+ results1[i].DownloadURL.Url +'">'; htmlString += results1[i].Title; if(banner=jQuery(results1[i].Banner_Image.Url) === null ? '' : jQuery(results1[i].Banner_Image.Url)) { htmlString +='<img class="baner_image" src="'+banner+'" alt="">'; } Hi suman, i am fetching the banner url from the list but i dont knew how to give null point exception to this function. can you please help me with this?
Quickbooks Support8y ago
The codes which are given in the post are very helpful for the programmers as they want to create the custom action menu and will also take the help of these codes for its programme.