Open SharePoint Office documents in modal dialog

Sometimes we need Microsoft Office documents to be opened in dialogs instead of SharePoint’s default behavior which is opening the document in the same window or tab.

The following code helps in implementing this.

Note: This code only works for office documents. For pdf documents look at the previous article.

<!-- Put this code below the list view web part -->
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js">
</script>
<script type="text/javascript">
    $hrefVal = $("a[onclick*='return DispEx'][target!='_blank']").attr("href");
    $siteUrl = _spPageContextInfo.webServerRelativeUrl;

    $("a[onclick*='return DispEx'][target!='_blank']")
        .removeAttr("onclick")
        .attr("href", "javascript:OpenDocumentInDialogue(\"" + $siteUrl + "/_layouts/WopiFrame.aspx?action=default&sourcedoc=" + $hrefVal + "\")");

    function OpenDocumentInDialogue(href) {
        var o;
        $("body").append("<div id='docTemp' style='min-height:600px;min-width:800px;height:100%;overflow:hidden'><object data='" + href + "' width='100%' height='100%'></object></div>");
        o = {};
        o.html = $("#docTemp")[0];
        o.showMaximized = true;
        o.title = href.substring(href.lastIndexOf("/") + 1);
        o.dialogReturnValueCallback = OpenDocumentinDlgCallback;
        SP.UI.ModalDialog.showModalDialog(o);
    }

    function OpenDocumentinDlgCallback() {
        // do something here when the dialog closes
    }
</script>

 

Open SharePoint PDF documents in modal dialog

Sometimes we need PDF documents to be opened in dialogs instead of SharePoint’s default behavior which is opening the document in the same window or tab.

The following code helps in implementing this.

Note: This code only works for PDF documents. For office documents look at the next article.

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
    $("a[href$='.pdf']").each(function() {
        $(this).removeAttr("onclick").attr("href", "javascript:OpenDocumentInDialogue(\"" + this.href + "\")");
    });

    function OpenDocumentInDialogue(href) {
        var o;
        $("body").append("<div id='docTemp' style='min-height:600px;min-width:800px;height:100%;overflow:hidden'><object data='" + href + "' width='100%' height='100%' type='application/pdf' ></object></div>");
        o = {};
        o.html = $("#docTemp")[0];
        o.showMaximized = true;
        o.title = href.substring(href.lastIndexOf("/") + 1);
        o.dialogReturnValueCallback = OpenDocumentInDialogueCallback;
        SP.UI.ModalDialog.showModalDialog(o);
    }

    function OpenDocumentInDialogueCallback() {
        // Do something here when the dialog closes
    }
</script>

 

Displaying SharePoint’s “Please wait…” or “Working on it…” dialog box

The following code helps in displaying the “Working on it…” dialog box available in SharePoint 2013 or SharePoint Online.

Before you being the background operation, call the function “RequestStarted“. Once the background operation has been completed, call the function “RequestEnded“.

function RequestEnded(sender, args) {
    try {
        waitDialog.close();
        waitDialog = null;
    } catch (ex) {}
};

function RequestStarted(sender, args) {
    var waitDialog;
    ExecuteOrDelayUntilScriptLoaded(ShowWaitDialog, "sp.js");
};

function ShowWaitDialog() {
    try {
        if (waitDialog == null) {
            waitDialog = SP.UI.ModalDialog.showWaitScreenWithNoClose('Processing...', 'Please wait while request is in progress...', 120, 440);
        }
    } catch (ex) {}
};

Source: Sharepoint Stackexchange