Word add-in stops working after dialog.close is fired. Office JS

I have been working on an Office365 application where I opened a dialog and after some kind of activity when I close the dialog with dialog.close(). It works perfectly fine but ribbon button stops working and next time it will not show that same dialog again.

  Office.context.ui.displayDialogAsync("https://" + location.host + "/Dialog.html", { width: 90, height: 90, requireHTTPS: true }, function (asyncResult) {
        dialog = asyncResult.value;
        dialog.addEventHandler(Office.EventType.DialogMessageReceived, processMessage);
        if (asyncResult.status !== Office.AsyncResultStatus.Succeeded) {
            return;
        }
    });

and here is my processMessage function

function processMessage(arg) {
try{
    var messageFromDialog = JSON.parse(arg.message);

    var base64 = messageFromDialog.image.split(",")[1];
    Word.run(function (context) {
        var body = context.document.getSelection();
        body.insertInlinePictureFromBase64(base64, Word.InsertLocation.replace);
        return context.sync();
    }).catch(function (error) {
        app.showNotification("Error: " + JSON.stringify(error));
        if (error instanceof OfficeExtension.Error) {
            app.showNotification("Debug info: " + JSON.stringify(error.debugInfo));
        }
    });
    if (messageFromDialog.messageType === "dialogClosed") {
        dialog.close();
    }
} catch (ex) {
    console.log("Exception " + ex);
}
}

Thanks in advance :)

Updated

This issue only occurs in office online.

Sorry about the delay investigating this issue. Long story short, I had to do a couple of changes in your code so this can work, it was throwing a couple of exceptions (see changes below). I did not had the images you are inserting so I am also assuming the base64 you are sending to the method is a valid image. Also FYI please update Office build 16.0.7967.2139 was shipped Apr 21st, but this should also work on the build you cited.

Here are the changes I made:

I changed this line to only get the property: var messageFromDialog = arg.message; (why are you parsing JSON?)
I also chagned this one : if (messageFromDialog === "close"), we dont have a messageType property.(we have type) BTW my Dialog.html page looks like this one ( I cannot see yours but i am assuming the user is selecting an image on it)

<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.1.min.js"></script>

    <!-- For the Office UI Fabric, go to http://aka.ms/office-ui-fabric to learn more. -->
    <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/2.1.0/fabric.min.css">
    <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/2.1.0/fabric.components.min.css">
    <script>
        Office.initialize = function () {
            $('#button1').click(one);
            $('#button2').click(two);
        };

        function one()
        {
            Office.context.ui.messageParent("Picked 1");
        }

        function two() {
            Office.context.ui.messageParent("close");
        }

    </script>
</head>
<body>
    <p class="ms-font-xxl ms-fontColor-neutralSecondary ms-fontWeight-semilight">Pick a number</p>
    <button class="ms-Button ms-Button--primary" id="button1">
        <span class="ms-Button-icon"><i class="ms-Icon ms-Icon--plus"></i></span>
        <span class="ms-Button-label" id="button1-text">1</span>
        <span class="ms-Button-description" id="button1-desc">Number 1</span>
    </button>
    <button class="ms-Button ms-Button--primary" id="button2">
        <span class="ms-Button-icon"><i class="ms-Icon ms-Icon--plus"></i></span>
        <span class="ms-Button-label" id="button2-text">2</span>
        <span class="ms-Button-description" id="button2-desc">Number 2</span>
    </button>
</body>
</html>

I also think you are not checking if the dialog was closed properly, you are doing it through the message, but you need so subscribe to the DialogEventReceived event to know if the user closed the dialog (and not with a message).

function showDialog() {


    var url = "https://" + location.host + "/Dialog.html";
    Office.context.ui.displayDialogAsync(url, { width: 10, height: 10, requireHTTPS: true }, function (asyncResult) {
        dialog = asyncResult.value;
        dialog.addEventHandler(Office.EventType.DialogMessageReceived, processMessage);
        if (asyncResult.status !== Office.AsyncResultStatus.Succeeded) {
            app.showDialog("OK");
            return;
        }
        else {
            app.showDialog("whats up");
        }
    });

}


function processMessage(arg) {
    try {
        var messageFromDialog = arg.message;
       
        var base64 = messageFromDialog.image.split(",")[1];
        Word.run(function (context) {
var body = context.document.getSelection();
            body.insertInlinePictureFromBase64(base64, Word.InsertLocation.replace);
            return context.sync();
        }).catch(function (error) {
            app.showNotification("Error: " + JSON.stringify(error));
            if (error instanceof OfficeExtension.Error) {
                app.showNotification("Debug info: " + JSON.stringify(error.debugInfo));
            }
        });
        if (messageFromDialog === "close") {
            dialog.close();
        }
    } catch (ex) {
        console.log("Exception " + ex);
    }
}

来源：https://stackoverflow.com/questions/42950678/word-add-in-stops-working-after-dialog-close-is-fired-office-js

标签

office365

office-js