Modify sharepoint document library callout
-
09-10-2020 - |
質問
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.
解決
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);
});
});