Part 3. Open Link from a Ribbon Button — Building Outlook Add-in with React
More posts on buiding Outlook add-in with React:
For our add-in we want to have a quick way to go directly to our web app so the task is to have a ribbon button in Outlook that opens up our web app.
Create a new ribbon button
In manifest.xml, we add a new button that executes a function instead of opening up the task pane. And we also need to specify where to find the function.
<FunctionFile resid="Functions.Url"/>...<Control xsi:type="Button" id="msgComposeFunctionButton">
<Label resid="funcOpenNexlWebDialogTitle" />
<Supertip>
<Title resid="funcOpenNexlWebDialogTitle" />
<Description resid="funcOpenNexlWebDialogDescription" />
</Supertip>
<Icon>
<bt:Image size="16" resid="Open.Crm.16x16"/>
<bt:Image size="32" resid="Open.Crm.32x32"/>
<bt:Image size="80" resid="Open.Crm.80x80"/>
</Icon>
<Action xsi:type="ExecuteFunction">
<FunctionName>displayNexlWebDialog</FunctionName>
</Action>
</Control>...<bt:Url id="Functions.Url" DefaultValue="https://localhost:3000/functions.html"/>
(see full file here)
Implementing the function
In /public, we add a new file functions.html, which includes Office.js script then functions.js.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title></title>
<!--<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.js" type="text/javascript"></script>-->
<script
src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"
type="text/javascript"
></script>
<script src="functions.js" type="text/javascript"></script>
</head>
<body>
<!-- NOTE: The body is empty on purpose. Since this is invoked via a button, there
is no UI to render. -->
</body>
</html>And in functions.js:
Office.initialize = function () {};function displayNexlWebDialog() {
Office.context.ui.displayDialogAsync(
window.location.origin,
{
displayInIframe: false,
},
() => {
return;
}
);
}
It’s important to have an initialise function in the first line, otherwise it will throw an error.
And we use Office.context.ui.displayDialogAsync as it opens up the Outlook in-built browser which shares the session cookie with the add-in so the user doesn’t have to log in to our web app again in their browser. If you don’t mind opening up user’s default browser, you could use Office.context.ui.openBrowserWindow instead.
Hope this helps =)
More posts on buiding Outlook add-in with React:
