Adding a custom action to a callout in SharePoint 2013

This post is over a year old, some of this information may be out of date.

A couple of weeks / months ago I wrote a blog post about how to you could hide the default social actions in the callout menu of a document library (blog post). The trick to remove these actions was to override the footer template rendering of the callout.

This week I had the opposite question, how can you add a custom action to the callout with preserving the default actions. The first part isn’t that difficult, but the last part “preserving the default actions” is.

Solution

First things first, we start by adding a new custom action to the callout. When you want to add a new action to the callout, you will need to render a new footer template for the callout.

1
SP.SOD.executeFunc("callout.js", "Callout", function () {
2
  var itemCtx = {};
3
  itemCtx.Templates = {};
4
  itemCtx.BaseViewID = 'Callout';
5
  // Define the list template type
6
  itemCtx.ListTemplateType = 101;
7
  itemCtx.Templates.Footer = function (itemCtx) {
8
    // context, custom action function, show the ECB menu (boolean)
9
    return CalloutRenderFooterTemplate(itemCtx, AddCustomAction, true);
10
  };
11
  SPClientTemplates.TemplateManager.RegisterTemplateOverrides(itemCtx);
12
});
13

14
function AddCustomAction (renderCtx, calloutActionMenu) {
15
  // Add your custom action
16
  calloutActionMenu.addAction (new CalloutAction ({
17
    text: "Custom Action",
18
    tooltip: 'This is your custom action',
19
    onClickCallback: function() { console.log('Callback from custom action'); }
20
  }));
21
}

The code above will create a “Custom action” action to the callout.

As you can see the problem is that you lose the other actions, because the default footer was overridden.

To re-add the default actions, you have to call the SharePoint function that creates these actions. The downside is that these functions are different for each list / library.

Library: CalloutOnPostRenderTemplate(renderCtx, calloutActionMenu)

My Documents Library (Skydrive Pro): myDocsActionsMenuPopulator(renderCtx, calloutActionMenu)

Asset Library: AssetLibraryCalloutActionsMenuPopulator(renderCtx, calloutActionMenu)

Once you know which function you need to call, it is just a matter of adding it to the code.

1
function AddCustomAction (renderCtx, calloutActionMenu) {
2
  // Add your custom action
3
  calloutActionMenu.addAction (new CalloutAction ({
4
    text: "Custom Action",
5
    tooltip: 'This is your custom action',
6
    onClickCallback: function() { console.log('Callback from custom action'); }
7
  }));
8

9
  // Show the default document library actions
10
  CalloutOnPostRenderTemplate(renderCtx, calloutActionMenu);
11
}

Note: Line 10 needs to be changed in order to make it work on other list / library templates.

Why is my follow action gone?

That is correct, the default functions from the library and asset library don’t add the follow action by default. This action is added when the Follow Content feature on site level is activated. This feature adds a script block to the page where it overrides the default rendering of the callout of the libraries.

You can re-add the follow action like this:

1
function AddCustomAction (renderCtx, calloutActionMenu) {
2
  // Add your custom action
3
  calloutActionMenu.addAction (new CalloutAction ({
4
    text: "Custom Action",
5
    tooltip: 'This is your custom action',
6
    onClickCallback: function() { console.log('Callback from custom action'); }
7
  }));
8

9
  // Show the default document library actions
10
  CalloutOnPostRenderTemplate(renderCtx, calloutActionMenu);
11

12
  // Show the follow action
13
  calloutActionMenu.addAction(new CalloutAction({
14
    text: Strings.STS.L_CalloutFollowAction,
15
    tooltip: Strings.STS.L_CalloutFollowAction_Tooltip,
16
    onClickCallback: function (calloutActionClickEvent, calloutAction) {
17
      var callout = GetCalloutFromRenderCtx(renderCtx);
18
      if (!(typeof(callout) === 'undefined' '' callout === null))
19
        callout.close();
20
      SP.SOD.executeFunc('followingcommon.js', 'FollowSelectedDocument', function() { FollowSelectedDocument(renderCtx); });
21
    }
22
  }));
23
}

Custom action + Default actions + Follow action

As you can see it’s possible to add your custom actions, but it involves a bit of extra coding.

Adding a custom action to a callout in SharePoint 2013

Solution

Why is my follow action gone?

Related articles

Adding a custom action to a callout based on the file type

Quick Tip: Custom Action Tokens in SharePoint 2010 Designer

SharePoint Designer Workflow Action: Retrieve the File Extension

Report issues or make changes on GitHub

Comments

Elio Struyf