CODEWITHSUNDEEP
sharepointsharepoint-2010sharepoint-2013
Shekar Reddy
Shekar Reddy

Reputation: 756

Insert File preview into sharepoint custom callout control

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.

Upvotes: 0

Views: 3084

Answers (1)

John
John

Reputation: 26

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>

Upvotes: 1

Related Questions