Microsoft 365 Community Community Demos, 14 Sep 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Microsoft Outlook Add-in Blazor Sample Update – September 2022

Description

In this 14-minute Developer-focused demo, Eric Legault expertly points you in the right direction on getting started using Blazor Web framework to build an Office Add-in using C# in addition to .NET and JavaScript. Practical review of Blazor capabilities and incompatibilities, tips for setting up project environment and Blazor project. Learn about using the Blazor client template in Visual Studio and the Office Web Add-in template to add the sideloader project. Walk through sample reference project. This PnP Community demo is taken from the Office Add-ins community call – September 2022, recorded on September 14, 2022.

Demo Presenter
• Eric Legault (Eric Legault Consulting) | @elegault

Supporting documents
• Repo - Office Add-ins code samples | https://github.com/OfficeDev/Office-Add-in-samples
• Sample - Create a Blazor Webassembly Outlook add-in | https://github.com/OfficeDev/Office-Add-in-samples/tree/main/Samples/blazor-add-in/outlook-blazor-add-in
• Developer sandbox - Join the Microsoft 365 Developer Program today! | https://developer.microsoft.com/microsoft-365/dev-program
• Website – Blazor - Build client web apps with C# | https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor
• Documentation - ASP.NET Core Blazor fundamentals | https://docs.microsoft.com/aspnet/core/blazor/fundamentals
• Documentation - Tooling for ASP.NET Core Blazor | https://docs.microsoft.com/aspnet/core/blazor/tooling
• Documentation - ASP.NET Core Blazor project structure | https://docs.microsoft.com/aspnet/core/blazor/project-structure
• Documentation - ASP.NET Core Blazor hosting models | https://docs.microsoft.com/aspnet/core/blazor/hosting-models
• Documentation - ASP.NET Core Blazor JavaScript interoperability (JS interop) | https://docs.microsoft.com/aspnet/core/blazor/javascript-interoperability
• Documentation - Host and deploy ASP.NET Core Blazor | https://docs.microsoft.com/aspnet/core/blazor/host-and-deploy
• Documentation - ASP.NET Core Razor component lifecycle | https://docs.microsoft.com/aspnet/core/blazor/components/lifecycle
• Documentation - Debug ASP.NET Core Blazor WebAssembly | https://docs.microsoft.com/aspnet/core/blazor/debug
• Documentation - ASP.NET Core Blazor dependency injection | https://docs.microsoft.com/aspnet/core/blazor/fundamentals/dependency-injection

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

A

A

I've been building um Outlook and office add-ins for 20 years, I used to be an MVP for outlooking office, apps and services from 2003 to 2018.

A

and um MVP Martin Van, Sam and I have co-authored this Blazer Outlook add-in sample that we are going to showcase for you today. I'll load up my deck here.

A

So Blazer, basically, we can run C sharp in our web add-ons now, which is phenomenal right. Typically, if you're writing C sharp in a web project, it's a it's in a web API, but now we can run C sharp in web items. That's a big win, I mean that's very exciting, right. I know Blazer's been around for a couple years, but I'm not sure. If many of you have thought of using Blazer as the solution for your office items, but it is possible and we're going to show you how to do that today.

A

So Blazer is basically just a wet assembly that allows you to build a net core compliant website that interacts with the office JS apis. So you can use your reusable razor components to build platform Solutions, and these this runs in most modern browsers.

A

So if you're thinking of migrating some vsto or Visto Solutions, this is your opportunity to reuse a lot of that business logic that that you may have in your c-sharp code and continue to use JavaScript as well. There's some interop capabilities between the two that'll allow you to build some, some pretty amazing Solutions going forward.

A

So, as I stated Blazers a web framework, it's for building Razer components. It could be hosted a bunch of different ways. There are many kinds of Blazer Solutions, well, three different kinds of of Hosting models: one is the one that we're going to be looking at today is is using the Blazer web assembly or wasm client focused type of solution.

A

You can also build a Blazer server apps, where all the UI rendering is done on the server and there's no client component, and you can do hybrid Solutions as well, which allow you to um to do all kinds of fancy things for hosting on Native mobile and desktop apps kind of thing that rendered to an embedded, webview control, but regardless of the whole screen model, the way that you build Razer components is the same.

A

So if you're familiar with building websites in asp.net core with uh with the Razer files and all that you can still continue to do, that, you can even mix in other JavaScript UI Frameworks like bootstrap, and so you've got a lot of choices for building a full stack web development experience with.net.

A

You also have the ability to share code between the client and server apps, so lots of possibilities here and, if you're interested in comparing some of the hosting models, there are some guidance available in Microsoft docs, but you may have some very unique scenarios that you want to consider. So take a look at see which one is more appropriate for you going forward. If there's some things that you expect to do in Blazer, you can't do the typical things that interact directly with the desktop like the file system or sockets or multi-threading.

A

Everything in Blazer is single threaded. If you have any highly secure applications that are using.net for system.security.cryptography implementations, that's not supported in blazer. For now, um you you'll want to look at using the subtle crypto apis for those scenarios and if you are integrating Azure Solutions like key Vault, you can't use client Secrets at the moment in the client projects. But you can even continue to do that in like your web API server solution so getting started.

A

If you want to build an add-in feel free to get a developer sandbox that you can get a renewable 90-day, E5 developer subscription and make sure to go to the office. Add-In samples repository that has this code sample ready for you to run and keep your eye on the readme in that repo for breaking changes and guidance that we may add to it.

A

After the fact, one of the things that you may come across if you run that sample right in uh right away from from GitHub, is, if you hit F5, make sure that you set up your email address for the tenant that you're testing with in the solution and set. Maybe you might have to if you're using office developer, sandbox 10, you may have to enable multi-factor off and I'll show you where that setting is in the solution, and you may have issues side loading. The project I was having those issues as well.

A

So I'll show you a quick way of getting started without side loading and just manually installing the add-in all right. So let's get started on the sample here all right. So let's get taking a look at the project tooling. Here we based this off of a we stole two project templates from Visual Studio One. We started with the Blazer client template in visual studio and we also used an office web add-in template to get the side loader project.

A

This is over here, so we'll provide some guidance on how to correctly I'm trying to get my my zoom in going here.

A

um I can't recall, stop my head how we migrated this side, loader project from an office web ad in template, but I think it's more of associating the web project with this imported side. Loader projects and Martin's got some uh interesting techniques that he wants to perfect when he comes back from vacation he's going to be working on that we've also had a discussion with some of the asp.net team on on tooling updates that may be coming in the future to get an actual bona fide office web add-ins Blazer template in visual studio.

A

So hopefully that will get that at some point, all right, so I I mentioned how you set up your tenant. You want to add your email address here and you may need to set multi-factor off true, um but if you're having problems side loading it, then what you want to do is go into the solution, configuration and set the Outlook Blazer side loader project to not start so you will just be starting the web server. You go to your at my add-ins page and Outlook load the Manifest file from the build folder.

A

It's not the actual, build folder, but there's a subfolder that has a auto-generated manifest. That's not the same as this XML manifest file because it has placeholders for the remote app URL that are changed at compile time. With the address of your uh your local web server, so that you'll have to do to get that going. So, let's take a look at the Tooling in this project. It's if you're familiar with asp.net core project, you'll, see the familiar www root the model pages and shared folders that are typical of a lot of asp.net core projects.

A

In our case, we have some.

A

Our main logic is in the index razor index razor pages, and we also have the index HTML page I can't draw a circle for the life of me can I and this Blazer add-in dot lib.module.js file, which is pretty important as you'll see soon. Let's take a look at the the first thing you want to do.

A

If you're setting up a Blazer project is take a look at the index.html page, it has the main root component specified in this div as the app for the value of the ID, and this will make sure to load the Blazer, runtime um and other situations, and you may don't get over focused on this particular reference here. It's looking for a blazer.web assembly.js file that does not actually exist in your project.

A

Okay at it's going to know how to find this file just by the name of it, because it's going to match the um the project namespace name so you're gonna have to make sure that this file is named just like your project, so that this other name file can find it it's a little confusing at first, but don't worry about it.

A

So the other main file is that blazeraddin.lib.module.js file that I just mentioned- and this is where you can customize the loading process and before start function, you can also Define like the login level and other hosting model options. This is where the net runtime gets downloaded um along with the app and all the other apps dependencies and the it's where the runtime is initialized. So you can run the app after that fires.

A

You'll have your code in the index.razer that's c-sharp file, and this is where, in the on after render async, we can load other JavaScript modules right. So in this case we have an index.razer.js file. It's co-located alongside the c-sharp file with our Razer page right and once that external module fires, then it goes back to the to the Blazer module and then the after started function, fires and that's where you can initialize libraries and the entire Blazer instance is added as an argument.

A

If you need to do some pretty fancy things so in this case, for this demo, we're simply going to be listing all the attachments in a current email message and just explain some of that data in a task Pane and we have code in that JS file. That's going to be going through all the attachments in the email and getting the data calling some asynchronous methods down here.

A

That's going to call the get attachment, content, async method and bring all that together, so that it's rendered in our actual Razer page, where we have some components set up here to grab data from this mail. Read data object that we're setting in the c-sharp class by calling this await get email data function. That's going down here calling a JavaScript function in that JS file to get the data from it, and once that object is populated with data, then the razor component can render it. So, let's hit F5 and hope the magic happens.

A

It's going to be loading an instance of the um of a browser, but this is not where we want to showcase everything, because it's going to fail and I'll just blow through these breakpoints, because it's not hosting the office runtime. Obviously so you're going to get an unhandled error on the bottom. But if we go to Outlook, find an email with attachments.

A

Load, our add-in.

A

Load our add-in, maybe I'll, have to go to the Outlook client, because that button is not appearing. Is it it seemed to move some reason. I saw it up here at one point, let me double check to make sure that the add-in is still here. It's not. Where did it go? Oh brother, okay! Well, let's load the add-in beef. Thankfully we're right. This is the folder I was mentioning earlier. It's a subfolder of the project. It's in the bend debug office app manifest, and this is where the compiled version of the Manifest a run.

A

Okay, good, it's loaded, it was there. Yesterday, it was there. Yesterday all right go back to our email button. Yes Blazer Outlook sample, so this is going to launch the task pane. Now some of these break points are going to get fired. Oh an unhandled error has occurred. Fantastic I, wonder what happened here. Of course, the demo gods of obtained to tell me something, is going on and can I figure it out fast?

A

Maybe, let's just restart it.

A

I don't want to close Visual Studio. Let's try this one more time, if not I'll just give up, because the devil gods have clearly been angered, and let's start this again.

A

Cross our fingers- this was running yesterday, of course,.

A

At least he saw the UI load.

A

Okay, yeah yeah at least things are working. Let's try this again come on magic button load the add-in without errors. Oh there it is fantastic. There we go. We've got some of the base64 attachment data output to the task pane, so you know that all those functions that we that I showed you as I, walk through everything actually work. In closing, let me see if I got back to my deck here.

A

If you want to have some guidance on exploring Blazer, there are a bunch of links in this deck feel free to spend a lot of time. Understanding the intricacies of laser and JavaScript interop, because there's a couple magnificent pages in the um link down here in the asp.net core Blazer JavaScript interoperability. There's a couple documents on how to call JS from.net and how to call.net from JS.

A

They are very long reads: you may get tripped up, but have added, take a look at how we're doing things in the sample and take it from there other than that, if you have any questions, feel free feel free to ping me on social media um hit up martinvandstam as well, and keep your eye on that sample repo and especially in the readme, will provide additional guidance based on the questions and the feedback that you give us. So hopefully that got your ideas and light bulbs going to build web add-ins using Blazer thanks.

A

Everybody cheers thank you Eric. That was awesome.