I have documents links on html page once hover on that link I'm opening the document in callout menu

enter image description here

In the above image you can see that the default Share, Delete & Download options are not available.

I have to add the Share, Downlaod and Delete options at the bottom.

But I have tried to use the Share functionaliy of Doc lib, but its not working for me.

Below is the working code to open call out

        //Custom callout body section function
        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;

        //call to callout manager class
        function OpenItemFilePreviewCallOut(sender, strTitle, urlWopiFileUrl) {
            var openNewWindow = true; //set this to false to open in current window

            //choose the launch point HTML element 
            var callOutContenBodySection = getCallOutFilePreviewBodyContent(urlWopiFileUrl, 308, 254);
            var clg = CalloutManager.getFromLaunchPointIfExists(sender);

            if (clg == null) {
                //call the CalloutManager to create the callout
                clg = CalloutManager.createNewIfNecessary({
                    // configure options
                    ID: 'CalloutId_' + sender.id,
                    launchPoint: sender,
                    beakOrientation: 'topBottom',
                    title: strTitle,
                    content: callOutContenBodySection,

                //Custom action 'Open'
                var customAction = new CalloutActionOptions();
                customAction.text = 'Open';
                //custom action event on click open
                customAction.onClickCallback = function(event, action) {
                    if (openNewWindow) {
                    } else {
                        window.location.href = urlWopiFileUrl;

                var _newCustomAction = new CalloutAction(customAction);


        function RemoveAllItemCallouts() {
            CalloutManager.forEach(function(callout) {
                // remove the current callout

        function RemoveItemCallout(sender) {
            var callout = CalloutManager.getFromLaunchPointIfExists(sender);
            if (callout != null) {
                // remove

        function CloseItemCallout(sender) {
            var callout = CalloutManager.getFromLaunchPointIfExists(sender);
            if (callout != null) {
                // close

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.