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

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

Back in October 2013 I wrote a post on how you could add your custom actions in a callout like this (Adding a custom action to a callout in SharePoint 2013):

This time I had the requirement to only add an action for a specific file type.

Solution

The solution is rather simple. Here is the code from my previous post:

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

22
  // Show the default document library actions
23
  CalloutOnPostRenderTemplate(renderCtx, calloutActionMenu);
24

25
  // Show the follow action
26
  calloutActionMenu.addAction(new CalloutAction({
27
    text: Strings.STS.L_CalloutFollowAction,
28
    tooltip: Strings.STS.L_CalloutFollowAction_Tooltip,
29
    onClickCallback: function (calloutActionClickEvent, calloutAction) {
30
      var callout = GetCalloutFromRenderCtx(renderCtx);
31
      if (!(typeof(callout) === 'undefined' '' callout === null))
32
        callout.close();
33
      SP.SOD.executeFunc('followingcommon.js', 'FollowSelectedDocument', function() { FollowSelectedDocument(renderCtx); });
34
    }
35
  }));
36
}

With this piece of code you can add a custom callout action for all documents, so what we need to implement is a check to see if the document is for example a PDF document. This information can be retrieved from the renderCtx object like this, and to be more specific, if you click to open the callout the renderCtx object contains all the information about the current item:

The file type can be retrieved like this:

1
renderCtx.CurrentItem.File_x0020_Type

Once you know the file type, you could implement the check like this:

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
  // Check if the current item is a PDF document
16
  if (renderCtx.CurrentItem.File_x0020_Type.toLowerCase() === "pdf") {
17
    // Add your custom action
18
    calloutActionMenu.addAction (new CalloutAction ({
19
      text: "PDF Action",
20
      tooltip: 'This is a PDF action',
21
      onClickCallback: function() { console.log('Callback from the PDF action'); }
22
    }));
23
  }
24

25
  // Show the default document library actions
26
  CalloutOnPostRenderTemplate(renderCtx, calloutActionMenu);
27

28
  // Show the follow action
29
  calloutActionMenu.addAction(new CalloutAction({
30
    text: Strings.STS.L_CalloutFollowAction,
31
    tooltip: Strings.STS.L_CalloutFollowAction_Tooltip,
32
    onClickCallback: function (calloutActionClickEvent, calloutAction) {
33
      var callout = GetCalloutFromRenderCtx(renderCtx);
34
      if (!(typeof(callout) === 'undefined' '' callout === null))
35
        callout.close();
36
      SP.SOD.executeFunc('followingcommon.js', 'FollowSelectedDocument', function() { FollowSelectedDocument(renderCtx); });
37
    }
38
  }));
39
}

On the highlighted line a check is in place to see if the current item is a PDF document, if that statement is true, the custom action gets added, otherwise nothing will be shown.

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

Solution

Related articles

Adding a custom action to a callout in SharePoint 2013

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