Modify sharepoint document library callout

Question

I am trying to override a sharepoint call out in a document library. So far, I was able to add a link to the footer using this javascript:

SP.SOD.executeFunc("callout.js", "Callout", function () {
    var itemCtx = {};
    itemCtx.BaseViewID = 'Callout';
    itemCtx.Templates = {};
    itemCtx.Templates.Footer = function(itemCtx) {
        var calloutID = GetCalloutElementIDFromRenderCtx(itemCtx);
        var itemId = itemCtx.CurrentItem.ID;
        var listId = itemCtx.listName;
        var listUrl = itemCtx.listUrlDir;
        var customFooter = [];
        var someUrl = "some url";
        var link = "<a href='#' onclick='OpenPage(\""+someUrl+"\")'>Click Me</a>";

        customFooter.push('<span id=' + StAttrQuote(calloutID + '-ecbMenu') + 'class="js-callout-actions js-callout-ecbActionDownArrow">');
        customFooter.push(linkCosignSign);
        customFooter.push(linkCosignPrepare);
        customFooter.push(RenderECBinline(itemCtx, itemCtx.CurrentItem, itemCtx.CurrentFieldSchema));
        customFooter.push('</span>');
        return Callout.GenerateDefaultFooter(calloutID, customFooter.join('')); 
    };
    itemCtx.ListTemplateType = 101;
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(itemCtx);
});

function OpenPage(myurl) {
    // navigate to the url
    //window.location.href = myurl;

    // open in a new window
    window.open(myurl);
}

I also want to increase the size of the callout to the maximum of 610px, but I am not sure how to override it. I have seen examples of creating a new callout and setting the size, but nothing about existing callouts associated with a document library. Any help is appreciated.

Answer 1

You can increase the "default" content width by setting the variable Strings.STS.L_DocLibCalloutSize, just change it after strings.js is loaded.

Strings.STS.L_DocLibCalloutSize = "610"

It is defined in clienttemplates.js, worst case you'll have to override the entire function; function OpenCallout(launchPoint, curEvent, node, listItemID) {...

If you take a look in the function the create part looks like this:

listCallout = CalloutManager.createNew({
      launchPoint: launchPoint,
      ID: calloutID,
      openOptions: {
        event: "none",
        showCloseButton: true,
        closeCalloutOnBlur: true
      },
      onOpeningCallback: function(callout) {
         Callout_OnOpeningCallback(callout, listItemID);
      },
      onOpenedCallback: function(callout) {
        launchPoint.focus();
      },
      beakOrientation: "leftRight",
      onClosedCallback: ecbManager.DismissECB,
      contentWidth: parseInt(Strings.STS.L_DocLibCalloutSize),
      boundingBox: document.getElementById('s4-workspace')
   });

Update for iframe width:

Tbh I'm not sure about this approach, but you don't have to override anything, maybe you find a better solution. But you'll atleast see how it could work:

$(".ms-list-itemLink").each(function(e,i)  { 

    $(this).click(function() {
        var self = this;
        var checkExist = setInterval(function() {
            if(CalloutManager.isAtLeastOneCalloutOpen()) {

                CalloutManager.forEach(function(i) {

                    if(i.isOpen()) {            

                         $("[id='co"+i.getID()+"_callout-body']").find("iframe:first").width('610px');                      

                    }           
                }); 

                $(self).unbind("click");
                clearInterval(checkExist);

            }
        }, 100);

    });
});