sharepoint - 将文件预览插入共享点自定义标注控件

Question

我在这里按照示例 http://blog.alexboev.com/2012/08/custom-callouts-in-sharepoint-2013.html创建标注控件。

现在我正在尝试在标注控件中添加文档（图像、pptx、pdf 等）的预览窗格。（类似于用户单击文档库项目或搜索结果中的椭圆时的 OOTB 功能）。我怎样才能在我自己的标注控件中实现这一点。

Answer 1

请参阅SharePoint 2013 - 带有文件预览的自定义标注。

它提供了一个工作代码示例：

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();
}

用法：

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