sharepoint 사용자 지정 설명 선 컨트롤에 파일 미리보기 삽입

Question

여기에 예제 http://blog.alexboev.com/2012/08/custom-callouts-in-sharepoint-2013.html을 따라 설명 선 컨트롤을 만들었습니다.

이제 설명 선에 문서 (이미지, pptx, pdf 등)의 미리보기 창을 추가하려고합니다. (사용자가 문서 라이브러리 항목이나 검색 결과에서 타원을 클릭 할 때 OOTB 기능과 비슷 함). 내 자신의 설명 선 컨트롤에서 어떻게이를 수행 할 수 있습니까?

Answer 1

SharePoint 2013 - Custom CallOut with File Preview을 참조하십시오.

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> 

이 작동하는 코드 예제를 제공합니다