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

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
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
SP.SOD.executeFunc("callout.js", "Callout", function () {
  var itemCtx = {};
  itemCtx.Templates = {};
  itemCtx.BaseViewID = 'Callout';
  // Define the list template type
  itemCtx.ListTemplateType = 101;
  itemCtx.Templates.Footer = function (itemCtx) {
    // context, custom action function, show the ECB menu (boolean)
    return CalloutRenderFooterTemplate(itemCtx, AddCustomAction, true);
  };
  SPClientTemplates.TemplateManager.RegisterTemplateOverrides(itemCtx);
});

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

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

  // Show the follow action
  calloutActionMenu.addAction(new CalloutAction({
    text: Strings.STS.L_CalloutFollowAction,
    tooltip: Strings.STS.L_CalloutFollowAction_Tooltip,
    onClickCallback: function (calloutActionClickEvent, calloutAction) {
      var callout = GetCalloutFromRenderCtx(renderCtx);
      if (!(typeof(callout) === 'undefined' '' callout === null))
        callout.close();
      SP.SOD.executeFunc('followingcommon.js', 'FollowSelectedDocument', function() { FollowSelectedDocument(renderCtx); });
    }
  }));
}

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
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
SP.SOD.executeFunc("callout.js", "Callout", function () {
  var itemCtx = {};
  itemCtx.Templates = {};
  itemCtx.BaseViewID = 'Callout';
  // Define the list template type
  itemCtx.ListTemplateType = 101;
  itemCtx.Templates.Footer = function (itemCtx) {
    // context, custom action function, show the ECB menu (boolean)
    return CalloutRenderFooterTemplate(itemCtx, AddCustomAction, true);
  };
  SPClientTemplates.TemplateManager.RegisterTemplateOverrides(itemCtx);
});

function AddCustomAction (renderCtx, calloutActionMenu) { 
  // Check if the current item is a PDF document
  if (renderCtx.CurrentItem.File_x0020_Type.toLowerCase() === "pdf") {
    // Add your custom action
    calloutActionMenu.addAction (new CalloutAction ({
      text: "PDF Action",
      tooltip: 'This is a PDF action',
      onClickCallback: function() { console.log('Callback from the PDF action'); }
    }));
  }

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

  // Show the follow action
  calloutActionMenu.addAction(new CalloutAction({
    text: Strings.STS.L_CalloutFollowAction,
    tooltip: Strings.STS.L_CalloutFollowAction_Tooltip,
    onClickCallback: function (calloutActionClickEvent, calloutAction) {
      var callout = GetCalloutFromRenderCtx(renderCtx);
      if (!(typeof(callout) === 'undefined' '' callout === null))
        callout.close();
      SP.SOD.executeFunc('followingcommon.js', 'FollowSelectedDocument', function() { FollowSelectedDocument(renderCtx); });
    }
  }));
}

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

Report issues or make changes on GitHub

Related posts

Comments