Insert File preview into sharepoint custom callout control

Question

I followed example here http://blog.alexboev.com/2012/08/custom-callouts-in-sharepoint-2013.html to create callout control.

Now I'm trying to add Preview pane for documents(images, pptx, pdf etc..) in callout control. (similar to the OOTB functionality when user clicks on ellipse in document library item or search result). How can I achieve this in my own callout control.

John John · Accepted Answer · 2014-01-23T20:35:12

See SharePoint 2013 - Custom CallOut with File Preview.

It provide a working code sample:

function getCallOutFilePreviewBodyContent(urlWOPIFrameSrc, pxWidth, pxHeight) {
    var callOutContenBodySection = '<div class="js-callout-bodySection">';
    callOutContenBodySection += '<div class="js-filePreview-containingElement">';
    callOutContenBodySection += '<div class="js-frame-wrapper" style="line-height: 0">';
    callOutContenBodySection += '<iframe style="width: ' + pxWidth + 'px; height: ' + pxHeight + 'px;" src="' + urlWOPIFrameSrc + '&amp;action=interactivepreview&amp;wdSmallView=1" frameborder="0"></iframe>';
    callOutContenBodySection += '</div></div></div>';
    return callOutContenBodySection;
}

function OpenItemFilePreviewCallOut(sender, strTitle, urlWopiFileUrl) {
    RemoveAllItemCallouts();
    var openNewWindow = true; //set this to false to open in current window
    var callOutContenBodySection = getCallOutFilePreviewBodyContent(urlWopiFileUrl, 379, 252);
    var c = CalloutManager.getFromLaunchPointIfExists(sender);
    if (c == null) {
        c = CalloutManager.createNewIfNecessary({
            ID: 'CalloutId_' + sender.id,
            launchPoint: sender,
            beakOrientation: 'leftRight',
            title: strTitle,
            content: callOutContenBodySection,
            contentWidth: 420
        });
        var customAction = new CalloutActionOptions();
        customAction.text = 'Open';
        customAction.onClickCallback = function (event, action) {
            if (openNewWindow) {
                window.open(urlItemUrl);
                RemoveItemCallout(sender);
            } else {
                window.location.href = urlItemUrl;
            }
        };
        var _newCustomAction = new CalloutAction(customAction);
        c.addAction(_newCustomAction);
    }
    c.open();
}

Usage:

<a id="CallOutExample" onclick="OpenItemFilePreviewCallOut(this, 'My Title','<WopiFileUrl>')" title="CallOut With File Preview" h ref="#">Call Out with File Preview</a>

Insert File preview into sharepoint custom callout control

1 Answers