How do I properly display a webpage in the taskpane?

Preston S. Butler II 1 Reputation point
2022-09-08T14:06:24.3+00:00

I have created a outlook addin with the yoeman generator. its using html and javascript. I'm trying to have a website load in the taskpane. thus far i have been unsuccessful. I attempted to edit the taskpane.html, and added an iframe, then an embeded. When the site loads though, the onload script for my site does not run in the iframe (so no responsiveness). is there another way I should be doing this?

/* eslint-disable prettier/prettier /
/

* Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license.
* See LICENSE in the project root for license information.
*/

/* global global, Office, self, window */

Office.onReady(() => {
// If needed, Office.js is ready to be called
});

/**
* Shows a notification when the add-in command is executed.
* @Paramjeet Dahiya event {Office.AddinCommands.Event}
*/
function action(event) {
const message = {
type: Office.MailboxEnums.ItemNotificationMessageType.InformationalMessage,
message: "Performed action.",
icon: "Icon.80x80",
persistent: true,
};

// Show a notification message
Office.context.mailbox.item.notificationMessages.replaceAsync("action", message);

// Be sure to indicate when the add-in command function is complete
event.completed();
}

// display a new window with a link to www.vault-solutions
function openWindow(event) {
const url = "https://aaes.vsllc-qa5.net/vs-evsearch/";
const win = window.open(url, '_blank');
win.focus();
event.completed();
}
// display a taskpane with a link to https://aaes.vallc-qa5.net/vs-evsearch/
function openTaskPane(event) {
const url = "https://aaes.vsllc-qa5.net/vs-evsearch/";
Office.context.ui.openTaskPane(url);

// The initialize function must be run each time a new page is loaded;
event.completed();
}
function getGlobal() {
return typeof self !== "undefined"
? self
: typeof window !== "undefined"
? window
: typeof global !== "undefined"
? global
: undefined;
}

const g = getGlobal();

// The add-in command functions need to be available in global scope
g.action = action;
g.openWindow = openWindow;
g.openTaskPane = openTaskPane;

Office Development
Office Development
Office: A suite of Microsoft productivity software that supports common business tasks, including word processing, email, presentations, and data management and analysis.Development: The process of researching, productizing, and refining new or existing technologies.
3,855 questions
0 comments No comments
{count} votes

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.