Previous: Custom Callouts in the SharePoint 2013 Metro UI, Part 4: How to use callouts in autohosted app
Back to contents.
Modification of the Document Library Item Callout Content
Summary
This
article describes my approach to modification of the content inside the callout
that SharePoint 2013 renders for item inside the document library. The result
of my research is a little javascript helper I wrote. You can find the code and
the documentation on CodePlex at https://sp13doclibcalloutmodification.codeplex.com.
The Problem
SharePoint
2013 renders a special type of callout for every item inside the document
library:
The quite
popular question is – is it possible to modify the content of this callout? I
have never seen the answer so I have decided to do a little research.
The research
I thought the
new SharePoint client rendering templates feature could help to customize this
content so I have tried to find the correct template to override. However, I
have found that it is not the case and the structure and the data of the
content area for this callout is strongly hardcoded inside the out-of-the-box
clienttemplates.js file:
function CalloutRenderItemTemplate(renderCtx) {
var ret = [];
if (renderCtx.ListSchema.IsDocLib)
ret.push(CalloutRenderFilePreview(renderCtx));
ret.push(CalloutRenderLastModifiedInfo(renderCtx));
ret.push(CalloutRenderSharingStatus(renderCtx));
ret.push(CalloutRenderSourceUrl(renderCtx));
return ret.join('');
}
The code of
this function leads us to the following facts:
1. Structure. There
are 4 different “sections” of this callout:
- File content preview area
- The date of the last file modification
- The information on the file sharing parameters
- The absolute URL for downloading this file
2. Context. This
function itself and the section rendering functions inside it use some kind of
context – it contains the data about the item we render, the parent list, and
the parent web and so on.
3. No modification. This structure is hardcoded and cannot be modified to hide some
sections or add anything new
The Solution
My approach
to solve this problem is to substitute this function at runtime by slightly
modified copy. Of course, it is not perfect to change the out-of-the-box code
of SharePoint but it looks we have no other choice there. Besides this function
is a simple wrapper to the underlying sections rendering functions so I think it
is quite safe to alter it.
I have made
the modified version of the function and have added the ability to configure
the following:
- You can hide any of the four out-of-the-box sections
- You can specify the callbacks to render the new sections before or after any of the standard sections
The Library
I have
implemented the code in the new javascript file – it defines all the code for
the new function and the code to substitute the original function at runtime. Therefore,
you have to do the following actions to let this helper library work:
- reference the library file CalloutRenderItemTemplateCallbacks.js inside the page where you want to add callout modification
- define your own javascript code inside the same page to set up the library configuration.
Please note
that you don’t need to modify any of the Sharepoint system files at all!
Hiding of the standard sections
If you want
to hide any of the standard sections in this callout, you have to set the
appropriate flag for target section:
CalloutRenderItemTemplateCallbacks.SharingStatus.renderSection = false;Rendering of the new section
If you want
to add a new section before or after any of the standard section, you have to
specify the rendering callback function:
CalloutRenderItemTemplateCallbacks.LastModifiedInfo.Before = function(renderCtx)
{
// generate the content for the section based on current rendering context
var newSectionHtml = ‘
This is the content of the new callout section.
’
return newSectionHtml;
}
CalloutRenderItemTemplateCallbacks.LastModifiedInfo.Before = function(renderCtx)
{
// Create the id for the div inside our section markup where we will place new content.
// We create the dynamic Id based on the item being rendered. We can get the current item from the rendering context.
// Please note that we can get an info on the item being rendered from the supplied rendering context ('renderCtx' parameter)
var id = 'calloutAdditionalInfoSection_' + renderCtx.CurrentItem.ID;
// Let's define the function to render the content of the new section inside the created container div
function fillSection(sender, args){
// Find the container inside the created section
var div = document.getElementById(id);
// Add the content of the item's field via Client Side Object Model (CSOM)
div.textContent = oListItem.get_item('DocLibCalloutPreviewTestColumn');
}
// Load the item data via rendering context and CSOM
var clientContext = SP.ClientContext.get_current();
var oList = clientContext.get_web().get_lists().getById(renderCtx.listName);
var oListItem = oList.getItemById(renderCtx.CurrentItem.ID);
clientContext.load(oListItem);
clientContext.executeQueryAsync(Function.createDelegate(this, fillSection));
// return the new section HTML
return 'LastModifiedInfo.Before for file "' + renderCtx.CurrentItem.FileLeafRef + '"';
}
// Hide the out-of-the-box Sharing Info section
CalloutRenderItemTemplateCallbacks.SharingStatus.renderSection = false;
Pleace note
that the rendering context (renderCtx param) is quite powerful and data rich. It
contains the info about the current item, current list, current web and much
more – you can inspect its properties in the browser debugger. Here’s the
result (Share Info section is hidden and the new section is added:
The Source
You can
find the code of the library on the Codeplex project site I have made for it: https://sp13doclibcalloutmodification.codeplex.com.
There you can find the library itself and the documentation. I hope my little
research helps someone!
Previous: Custom Callouts in the SharePoint 2013 Metro UI, Part 4: How to use callouts in autohosted appBack to contents.
Previous: Custom Callouts in the SharePoint 2013 Metro UI, Part 4: How to use callouts in autohosted appBack to contents.
