Embed Canvas apps in Outlook

In the first part of our series we looked into what we want to achieve and what the requirements are. So make sure to check out the requirements and set yourself up for this part. Because now we want to actually create a very simple Outlook add-in 🚀 While Outlook Add-ins uses technology that the average Power Platform maker does not necessarily posses, following this introduction is doable even if your not a developer! 🙂

📖 Intro to Office add-ins

As said in the introduction and our “mission statement” in part 1, this approach does not want you to become Office 365 developer, instead we want to focus on our strengths -> Power Platform. So the first step in ensuring this is an old classic: Don’t reinvent the wheel. So instead of learning how exactly an Office add-in is build, we will start with a provided template. Microsoft has done an awesome job of creating documentation and quick start guides. So following my own advice I will not re-write those but link you to them ✌

Make sure to check out the Office Dev Center, these links might be most relevant to you for this task:

📄 Create an Outlook add-in using a template

When I first started playing around with this topic I followed one of Microsoft quick start guides and that’s the same I would recommend to you: Build your first Outlook add-in. There are two different ways described, one using Visual Studio and one using Yeoman generator. The second one is a Node.js application which runs cross-plattform and is a bit more techy. So we will focus on the Visual Studio one 🔧

When you have the Office Developer Tools installed when creating a new project in Visual Studio you can select the “Outlook Web Add-in” and create a new project with it.

🚕 Testing it out

Before we jump into the add-in itself, let’s first check out what we created. After using the the template you can actually directly test it out! Your project should look like this:

Notice the “Start” Command on top. This command while compile your add-in and actually start the deployment process. When you first click on it, it will ask you for your Exchange email account login. It does so in order to temporarily deploy the add-in for only your account. If you want to learn about the details check out the Microsoft documentation 🤓

Make sure to have the correct browser with the same login open, because Visual Studio will load a new tab with Outlook and your add-in sideloaded. You will see your mailbox and can choose any mail to test your add-in. In the web it is placed behind the “…” button.

Clicking on it, it will open your first Outlook add-in created by yourself. Congrats! 🥳

🎨 Bringing Canvas apps into it

If you actually dive into the different HMTL / Javascript files you can make how the template add-in is structured. But remember, this approach wants to spend a less time in Visual Studio as possible. Instead all the UI and UX should be done in Canvas app editor. The core concept is visualized in the following picture. Basically we want the Outlook add-in (which is a “Task pane” add-in) to provide an iFrame which we will use to embed our canvas app.

For this reason I create a simple app which I want to embed into the Outlook add-in. After you created the canvas app make sure to save the app id. We will need it for our code.

We need to modify two files in Visual Studio, first the “MessageRead.html”. It creates the structure of the add-in which we want to simplify 😉 In order to do so navigate to the “ … ” element and replace everything which this much smaller code:

<body > 
    <div>
        <iframe id="canvas-iframe" height="800" frameborder="0" />
    </div> 
</body>

This should reduce your line code by about 100 👍 Now our entire add-in is just consiting of one single iFrame. In the next step we will go to “MessageRead.js” in order to set it up correctly. The function which is of most interest for us is the “Office.initalize” function. It gets fired up everytime the add-in is loaded. Look for the following code:

 Office.initialize = function (reason) {
    $(document).ready(function () {
      var element = document.querySelector('.MessageBanner');
      messageBanner = new components.MessageBanner(element);
      messageBanner.hideBanner();
      loadProps();
    });
  };

and replace it with:

  Office.initialize = function (reason) {
    $(document).ready(function () {
        var appId = "PUT YOUR APP ID / GUID HERE";
        $('#canvas-iframe').attr("src", "https://apps.powerapps.com/play/" + appId + "?source=iframe");
    });
  };

After that, just click on “Start” again to re-compile and deploy the updated version of your add-in 🔥 Depending on your canvas app it can look like this:

🐱‍🏍 Next steps

Go check out Part 3 of the series where we will make the canvas app context aware of the mail it is displayed on!

You find all details about the series in this overview post Canvas in Outlook 🎨📫