Microsoft 365 Community Office Add-ins, 14 Apr 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Outlook add-in for creating templated signatures programmatically with events

Description

In this 8-minute developer-focused demo, David Chesnut shares a new PnP sample for handling event-based activation and set the signature in Outlook. Event-based activation runs an Outlook add-in when the user creates a new message or appointment. The add-in can respond to events, even when the task pane is not open. It also uses the setSignatureAsync API. If no signature is set, the add-in prompts the user to set a signature, and opens the task pane for the user. This PnP Community demo is taken from the Office Add-ins community call – April 2021, recorded on April 14, 2021.

Demo Presenter: David Chesnut (Microsoft) | @davidchesnut | Sr Dev Writer

Supporting documents:
• Repo - Use Outlook event-based activation to set the signature (preview) | https://github.com/OfficeDev/PnP-OfficeAddins/tree/master/Samples/outlook-set-signature
• Documentation - Configure your Outlook add-in for event-based activation (preview) | https://docs.microsoft.com/en-us/office/dev/add-ins/outlook/autolaunch

Stay connected:
• Twitter https://twitter.com/microsoft365dev
• YouTube https://aka.ms/M365DevYouTube
• Blogs https://aka.ms/M365DevBlog

A

So I'm going to talk about, we have a new pnp sample for outlook and this sample was actually demoed a little bit by juan. I think it was back in the january. Maybe the february call basically what it lets you do is. If I send a new message, it can display this little info bar that says: hey we see, you don't have a signature.

A

Do you want to set a signature, and I can click on this and it brings up the task pane where you can add some info about yourself and then save that, and then I can see these different template types. There's a b and c, and I can test them out, see what they look like.

A

I can assign them to various actions, and these are basically going to be events that I'll show in a second that will get fired. So I can pick like different templates for these. You know based on, if I'm sending a new mail or if it's a reply and then save it and it's saved so now. If I send a new mail, we should see that um I got my signature showing up there, which is being set uh from that add-in. So there's a couple things that were happening there.

A

You saw like the little info bar appeared without the task pane being displayed, so that's event based activation, where you get a run time to handle events, and then we also use the set signature api to do this piece where your signature in there.

A

So let me switch over to the code over here in visuals in vs code. um So there's a lot of code in here, so I'm just going to point out the more interesting parts of this so like in the manifest you'll need to configure it so that you can respond to the events that are coming from outlook.

A

So if you go down to this runtimes section where you want to set your auto run, runtime and this configures it to this configures outlook, so that it's going to send you events when there's a new mail item um and then this override is what makes it work on uh windows 10 on the desktop.

A

So basically, this is this. First, one sets up if you're writing on the web, because it's going to load an html page and then, if you're writing on the desktop, it doesn't load the html page. It goes directly to your javascript and you can see that mapped at the bottom of the manifest.

A

See where's the here it is so we can see like our autorun is going to load this autorun web html so that loads for on the web and then, if you've, if you're running someone's running on desktop, then it will just go directly to ottawnshared.js and just load that and then the two events are right up here. We have our launch events and we say hey if there's a new message being composed, call check signature or if it's a new appointment, so we handle both appointments and messages they both go.

A

They get mapped to this check. Signature function in the structure of the project. Here, all the runtime stuff is under one folder and the task pane stuff is under another. So you basically think of these as two different runtimes that are getting loaded. So this runtime gets loaded just for handling the events, and we saw that this html page autorun web html is what's used when you're on the web, and in here you can see it's loading, auto and shared and auto run web.

A

So what I want to point out here is that, if you're running on the web or if you're running on desktop on windows 10, you might want to, you might have different code, that's running, and so what this is auto unshared is all the functions that get used both for on the web and on desktop autorun web.

A

This javascript file is functions that are only used when you're on the web, and the reason for that is what, if you use the set signature api when you're on the web, it will work for message items, but it doesn't work for calendar appointments.

A

So that's why, in this autorun web js, when we're going to insert the signature, we actually do a check, and we say hey- is this an appointment if it is we're just going to write directly into the body and not use the signature api?

A

If we know it's a mail item, we'll call add template signature which calls the set signature api and then in autorun shared. We have that same function insert auto signature, but if we know we're running on desktop, then we just set the signature, because we know it works on both events and I'm sorry, yeah both calendar events and new mail items- and you can see down here when we add our template signature, we will eventually call the sec signature, async method. This is the preview api.

A

So that's one interesting thing is that sometimes you'll want to think about having different functionality based on if you're on the web or not, and so this shows how you can create a shared context as well as a web specific context.

A

Another thing to show is that there was that little image in the logo in the set signature see if I still have here like this little diamond image, that we insert there's two ways you can put that in.

A

So if we go to the templates, I'm going to start from there there's three of these functions for each template, so we have get template a get template b and c and they just return the html that we're going to embed into the email.

A

So the interesting part of this is just where we create that logo and there we're going to use this image source set to see id. This means we're going to embed the image into the mail item itself and so you'll see here where we set that tag up for the image, and then we put in the name of it, which here's uh we'll use a specific name up here. We set it to sample logo.png and then, when we return from this function, we return this object.

A

That says well: here's the html and then here's the actual image that we're embedding. So it's just a base64 encoded image for that diamond and then here's the file name to use the second way. You can do it. If you don't want to embed it is you can just reference it directly with an old-fashioned image, source tag and point to your server, which in this case is localhost and just grab it? That's probably the most typical way to refer to an image.

A

So I just want to point out there's two ways to do it and then that affects.

A

Back up here, where we insert the signature, um we're going to check so we're going to say, hey if there's a base64 image, I need to add that attachment, because it's being embedded so we'll call this add file attachment from base64 pass it. The encoded string, pass it the name of the file set it to be inline and then that once it's attached I'll get a call back, and at that point that's why we call set signature and pass it that template a now.

A

That's what happens with template a if it was template b would go down to the else statement. We say: oh, the image wasn't embedded. So in that case we just directly call set signature and we don't have to deal with trying to insert the image.

A

Okay. So that's uh interesting to point out and let's see, I think that was it, I'm not going to go through the task pane code, it's pretty straightforward! There's one pane! That's for editing, which just has all those fields you saw. You can fill out for job title and your display name and so on, and then there's the page that will actually assign the signature, so you can pick which templates you want and what actions to put them with, so that that part's, pretty straightforward.

A

I mostly just want to cover, what's happening with the events and setting the signature. So if you want to check it out, go look at um the pnp dash office, add-ins repo. If you go down to samples look set signature, you can see the readme shows you how to get it set up. It walks you through some of the code stuff I talked about. This also goes very closely with this document that talks about configure outlook add-in for event-based activation.

A

So you can follow this document. You can refer to the sample. So hopefully, all that information helps you getting set up with outlet set.

A