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:

1. reference the library file CalloutRenderItemTemplateCallbacks.js inside the page where you want to add callout modification
2. define your own javascript code inside the same page to set up the library configuration.

To hide one of the standard sections you need to set the appropriate flag from the following:
CalloutRenderItemTemplateCallbacks.FilePreview.renderSection = false;
CalloutRenderItemTemplateCallbacks.LastModifiedInfo.renderSection = false;
CalloutRenderItemTemplateCallbacks.SharingStatus.renderSection = false;
CalloutRenderItemTemplateCallbacks.SourceUrl.renderSection = false;

if you want to add the section before specific standard section you have to add a callback for the "Before":
CalloutRenderItemTemplateCallbacks.LastModifiedInfo.Before = function(renderCtx)
	// generate the content for the section based on current rendering context
var newSectionHtml = ‘<div>This is the content of the new callout section.</div>’
return newSectionHtml;

You can do the same for "After". Here's the more realistic example - it renders the data of the field from the current list item:
CalloutRenderItemTemplateCallbacks.LastModifiedInfo.After = 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.executeQueryAsync(Function.createDelegate(this, fillSection));

	// return the new section HTML
    return  '<span id="' + id + '" style="color: red;">LastModifiedInfo.Before for file "' + renderCtx.CurrentItem.FileLeafRef +  '"</span>'; 

For the description of the library go to the http://blog.alexboev.com/2013/08/custom-callouts-in-sharepoint-2013.html

Last edited Aug 26, 2013 at 5:00 AM by AlexBoev, version 2


No comments yet.