officedev / office-add-in-dialog-api-simple-example

{ARCHIVED]

[ARCHIVED] Office Add-in Dialog API Example

Applies to: Word 2016

Note:* This repo is archived and no longer actively maintained. Security vulnerabilities may exist in the project, or its dependencies. If you plan to reuse or run any code from this repo, be sure to perform appropriate security checks on the code or dependencies first. Do not use this project as the starting point of a production Office Add-in. Always start your production code by using the Office/SharePoint development workload in Visual Studio, or the Yeoman generator for Office Add-ins, and follow security best practices as you develop the add-in.

Sample description

Learn how to open popup dialogs in Office Add-ins with the Dialog APIs Office.context.ui.displayDialogAsync method and also the use of add-in commands. While the sample uses Word you can easily use the same code for other Office applications including Excel, PowerPoint and Outlook.

The first command uses the ShowTaskpane action and then an HTML button inside the taskpane to trigger a dialog from within a taskpane. The second command uses the ExecuteFunction action to display a dialog directly.

Set up the project

With Visual Studio

1. Clone this repo and then open the SimpleDialogSample.sln in Visual Studio.
2. Press F5 to build and deploy the sample add-in. Word launches and the add-in will be installed.

Without Visual Studio

1. Clone this repo.
2. Deploy the SimpleDialogSampleWeb folder in your web server of choice. Make sure it supports httpS.
3. Modify the \SimpleDialogSample\SimpleDialogSample.xml file so that all URLs point to your web server (replace the ~placeholders)
4. Create a network share, or share a folder to the network.
5. Place a copy of the SimpleDialogSample.xml manifest file into the shared folder.
6. Launch Word and open a document.
7. Choose the File tab, and then choose Options.
8. Choose Trust Center, and then choose the Trust Center Settings button.
9. Choose Trusted Add-ins Catalogs.
10. In the Catalog Url field, enter the network path to the folder share that contains SimpleDialogSample.xml, and then choose Add Catalog.
11. Select the Show in Menu check box, and then choose OK.
12. A message is displayed to inform you that your settings will be applied the next time you start Microsoft Office. Close Word.
13. Restart Word and open a Word document.
14. On the Insert tab in Word 2016, choose My Add-ins.
15. Select the SHARED FOLDER tab.
16. Choose Simple Dialog Exampmle, and then select OK.
17. On the Home ribbon is a new group called Sample Group with a buttons labeled Dialog from Task Pane and Dialog from Function.

Try out the sample

1. Click the Dialog from Task Pane button and a task pane opens.
2. Click Pick a number! to open a dialog.
3. On the dialog, click one of the number buttons. The number you chose appears in a message banner at the top of the task pane and the dialog closes.
4. Click Pick a number! again.
5. Click it again immediately to see the error when a user tries to open more than one dialog.
6. Click the X button in the upper right of the dialog to see a sample message in the task pane that responds to the user closing the dialog.
7. Close the task pane.
8. On the ribbon, click the Dialog from Function button. A short message appears in the document. You may have to drag the dialog out of the way to see it.
9. On the dialog, click one of the number buttons. The number you chose appears in the document and the dialog closes.
10. Click the Dialog from Function button again.
11. Click the X button in the upper right of the dialog to see a sample message in the document that responds to the user closing the dialog.

Additional samples

The following samples also make use of the dialog API for authentication scenarios:

• PowerPoint Add-in in Microsoft Graph ASP.Net Insert Chart
• Office Add-in Auth0
• Excel Add-in ASP.NET QuickBooks
• Office Add-in Server Authentication Sample for ASP.net MVC

This project has adopted the Microsoft Open Source Code of Conduct. For more information, see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.

office-add-in-dialog-api-simple-example's Issues

displayDialogAsync: dialog content in not loaded from time to time

In a simple scenario we open a static HTML page in an dialog from a ribbon button.
Commands.html is our function file which is called through a ExecuteFunction action:

function ExecFunction(event)
    {
        openDialog("ShowTaskPaneHelp.html");
        event.completed();
    }

function openDialog(relativeUrl)
    {
        if (!Office.context.ui.displayDialogAsync)
            return;

        var location = window.location.href.substring(0, window.location.href.indexOf("Commands.html"));
        console.log("opening dialog at: " + location + relativeUrl);
        Office.context.ui.displayDialogAsync(location + relativeUrl,
            { height: 30, width: 35 }, dialogCallback);
   }

Remarks: The dialogCallback is the same code as in your sample.

Sporadically the dialog content does not show up correct (seems the loading panel is stuck!?)

The dialogCallback does not show up any errors.
When I resize the window the correct dialog content shows up!?

cannot reopen the dialog after close

ScriptedSandbox64.exe has stopped working

Hi,

I am getting this message after 2 seconds I click 'pick a number' on Word .

*Using Visual studio 2017

Any idea how to fix it?

The Office Js Dialog API contains a bug where the width and the height are swapped

The Office Js Dialog API contains a bug where the width and the height are swapped when using "Office.context.ui.displayDialogAsync". This bug occurs in the latest version of all desktop apps (Word/Excel/PowerPoint). Not in Office Online. Is this bug known?
When I set width: 100, it shows the height is 100%.

Is it a known issue and when it will be fixed?

Edge widens the dialog to fit the title

When opening a dialog, and specifying the width and height, Edge seems to ignore the width, and widen the dialog, in order to fit the title (which includes the url, which is in itself already not desirable)
This causes an ugly dialog to be displayed for us.

Does the Dialog API supports Outlook WebClient( OWA)

Hi ,

Is the Dailaog API 1.1 available for OWA ?

When I tried to do so, I m getting the 5001 Internal Error
osfruntime.js:13 Error while parsing the 'sandbox' attribute: ms-allow-popups

The specified address has not been not trusted by the add-in

I get this error when the dialog box is opened through the function or from the task pane.

"The specified address has not been not trusted by the add-in"

I don't have https on my local web server. if I enable SSL, no breakpoints are hit because IE is blocking it (if this is causing the issue, can you tell me how to enable SSL locally?)

Thanks.

There is no maximize button to make the dialog full screen

I really like this dialog but I would really appreciate if someone adds maximize button to make the dialog full screen. And if it is full size then minimize the dialog to its original size.

Is it possible?

Office.context.ui.messageParent can't talk back to the host in Outlook Online (Web)

I am trying to build outlook plugin and I put it and test it on Outlook online, however, "Office.context.ui.messageParent" can't talk back to the host.

in host page, it run below code for user to login (I use AzureAD SSO for login user)

var fullUrl = location.protocol + '//' + location.hostname + (location.port ? ':' + location.port : '') + "/AzureAD/Login";
        Office.context.ui.displayDialogAsync(fullUrl, {
            height: 60,
            width: 60,
        }, function (result) {
            var dialog = result.value;
            dialog.addEventHandler(Microsoft.Office.WebExtension.EventType.DialogMessageReceived, processMessage);
        });

function processMessage(arg) {
        var resp = JSON.parse(arg.message);
        console.log("Message received: " + JSON.stringify(resp));

}

it shows the dialog with AzureAD permission correctly, user give the consent, after that, this dialog suppose to talk back to the host by using below code (in dialog):

Office.initialize = function (reason) {
            $(document).ready(function () {             
                    Office.context.ui.messageParent(true);                
                });
        };

However, the host can't get any message in processMessage function.

But, the same code works fine for my Word Add-in for Word Online.

I also checked DialogAPI doc, (https://docs.microsoft.com/zh-cn/javascript/api/office/office.ui?product=outlook&view=office-js#displaydialogasync-startaddress--options--callback-)

It mentioned: "This method is available in the DialogApi requirement set for Word, Excel, or PowerPoint add-ins, and in the Mailbox requirement set 1.4 for Outlook".

And I did put 1.6 in my manifest file.

<Hosts>
    <Host Name="Mailbox" />
  </Hosts>
  <Requirements>
    <Sets>
      <Set Name="Mailbox" MinVersion="1.6" />
    </Sets>
  </Requirements>

Still no luck, any idea?

Thanks

Cannot read property 'registerForEvent' of null

When is triggered the pop-up action, not the iFrame version. The new window lunch the error Cannot read property 'registerForEvent' of null. This error interrupt all the functioning of the dialog window.
This error also appears on Excel add-ins, and prevent to sent back the information to the parent task pane window.

Some interesting fact, is that this error appears as soon as the <script> tag is added to the pop-up html, without even put any additional line of code.

Here is the trace:

word-web-16.00.js:21 Uncaught TypeError: Cannot read property 'registerForEvent' of null
    at OSF.DDA.WAC.Delegate.registerEventAsync (https://appsforoffice.microsoft.com/lib/1/hosted/word-web-16.00.js:21:105449)
    at e.(anonymous function) (https://appsforoffice.microsoft.com/lib/1/hosted/word-web-16.00.js:21:67767)
    at Object.value [as addHandlerAsync] (https://appsforoffice.microsoft.com/lib/1/hosted/word-web-16.00.js:21:74229)
    at r.initializeAndChangeOnce (https://appsforoffice.microsoft.com/lib/1/hosted/word-web-16.00.js:21:204774)
    at OSF.InitializationHelper.prepareRightBeforeWebExtensionInitialize (https://appsforoffice.microsoft.com/lib/1/hosted/word-web-16.00.js:21:234160)
    at https://appsforoffice.microsoft.com/lib/1/hosted/office.js:12:12664
    at d (https://appsforoffice.microsoft.com/lib/1/hosted/office.js:12:3420)
    at f.waitForFunction (https://appsforoffice.microsoft.com/lib/1/hosted/office.js:12:3509)
    at d (https://appsforoffice.microsoft.com/lib/1/hosted/office.js:12:12458)
    at OSF.InitializationHelper.loadAppSpecificScriptAndCreateOM (https://appsforoffice.microsoft.com/lib/1/hosted/word-web-16.00.js:21:233537)

Any idea about how to fix this issue?