Microsoft 365 Community Community Demos, 22 Jun 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Using Blazor in a Microsoft Excel add-in

Description

In this 17-minute Developer-focused demo, Maarten van Stam step’s through cloning his sample repo and showing his Blazor Webassembly Excel and Word “starter” projects you can leverage. Create a table and bubble chart in Excel and content control interactions in Word. Blazor is an option for .NET developers more familiar with C# than JavaScript. Evaluate your VBA applications, perhaps you can do same thing in Blazor. Using Blazor is a path for moving from COM, VSTO or VBA Add-ins to Office Web Add-ins. This PnP Community demo is taken from the Office Add-ins community call – June 2022, recorded on June 8, 2022.

Demo Presenter
• Maarten van Stam - MVP Office Add-ins | @aafvstam

Supporting documents
• Sample – Create a Blazor Webassembly Excel add-in | https://github.com/OfficeDev/Office-Add-in-samples/tree/main/Samples/blazor-add-in/excel-blazor-add-in
• Samples - Office Add-ins code samples | https://github.com/OfficeDev/Office-Add-in-samples
• Documentation - Office Add-ins platform overview | https://docs.microsoft.com/office/dev/add-ins/overview/office-add-ins
• Maarten’s YouTube channel: https://youtube.com/softasinsoftware
• Maarten’s blog: https://blog.softasinsoftware.com
• Maarten’s web site: https://www.softasinsoftware.com

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

Yeah so welcome. I was in the last call in months ago already as well. I think, and then we demo the word blazer add-in. Today we extended the samples with another demo, this time for excel and some small information about me. The the research that I was doing on this blazer add-in is usually done by me in a live coding session, that's usually on tuesday and thursday on youtube. The address in the slide here is like youtube.com slash soft as a software, artificial tv, softest software.

A

You can follow along with me in the live coding sessions. If you like, and you can contact me on twitter and on this alias aaf v, a sd am and the sample is currently merged into the official office. Add-In development samples, repo.

A

The address is also on this slide, and I think you also saw it with the um the outlook demo so last time what we demoed was how we created an add-in available for word developed in blazer. So basically, you're allowed to do your development in dot-net and do the just the office development part is interrupt using the office javascript interrupt to interact with with the office host in this case word and excel.

A

I will show this one as well briefly after the excel demo, but first, let's go to a screenshot of the excel demo. It looks basically the same since the task pane is still development developed in blazer.

A

um So it's a c-sharp front-end with the the blazer markup, and in this case you see a table created and a bubble chart. But that's that's. Stick in the slides and just do the live demo here to see how easy it is to to just start your development.

A

What we what you can do is you just go to the sample repo from the office, adding samples if you go in there, you go to the code button on the top right, where you copy the clone commands starting a command window command window.

A

And go to your specific location where you want to deploy your clone.

A

I have a specific folder for that repost and I'm making a folder there make directory 2022.06.

A

What's today, 08 demo live go to 2022.

A

Let's be more specific, there 0 8 demo live.

A

The command in there just hit, enter and wait for github to clean to clear your download and get the sample repose into your machine.

A

I can indeed copy the link in the chat, but this is a complete thing. There will be url from here.

A

A

Back to the download the the repo clone, as you can see, it's now completely cloned. We have an office add-in samples, folder. We go to the office samples folder, there's a samples over inside there.

A

And there's a huge list of samples already available in there, but the one I want to highlight today. That's the blazer add-in holder. A month ago. We deployed it to the root of this folder, but this time we because we now have two hosts.

A

We created a subfolder for this laser add-in and if you look at that, you now see there's an excel blazer add-in and a word blazer adding. So, let's start with the excel laser heading.

A

The path is a huge length by now there's a solution file in there. If you simply start this solution, file excel solution, file hit enter.

A

It will open up your studio with the excel project in here.

A

Loaded project depends on the extensions that you have installed in your studio. How long it will take to load your extension of things because well, that's free studio.

A

What you now see here is we have two projects in there. That's the blazer alien itself. That's basically the the task pane that's hosted in uh in excel, and we have a manifest project to be able to run the project from f5 and start it automatically. Let's hit f5 here.

A

That will now start building the blazer add-in in the background, and it will launch the blazer add-in as a server and once that's running, you will be able to.

A

Have that show up in the task pane? Usually the thing in what you see here in the browser is hosted on, uh let's say as your web apps or something like that or in your preferred other host. So usually, this is not running, but you only see excel with this button in here. In this case, it just got started with your sample heading. It got it now. You can open the task pane.

A

That will load the same thing that you basically saw here in the uh in the so-called server.

A

This demo consists of two small uh demos like one basic hello world thing where this do nothing else than going into your spreadsheet and putting hello world in your a1 cell.

A

The second demo is a bubble chart demo, where we can create a table on a new sheet basic sample sample sheet, and when we hit the create bubble chart button, it will automatically use the data in from this table and creates a bubble chart from there.

A

That's the excel demo. Let's quickly do the same with um with word.

A

It's just as easy as the excel demo go to your word demo with blaze. Reading oh.

A

First, laser in there.

B

A

Again, there is a solution file in there.

A

If we kick in the solution file for the word demo,.

A

Quickly see the same thing, it will also be running on f5.

A

There you are, it's just.

B

A

Again, there's a web api, a website and a manifest project. I for now run f5 again.

A

That will build the word, adding.

A

The same thing it will trigger the both the uh the server side, as is also the host word. In this case, you have to wait, I think, for the website to trigger there. It is.

A

There are more demos in this um um in this task page. So if I go to word now, we do got it again, show the task pane. Now we have five demos in there. I'm not going to show them all today, because we already did that in the previous demo last month, but quickly to make this a complete overview.

A

We're going to the content control demo, where we set up the document with some paragraphs in there over the paragraphs into content controls, you now see that here's content controls back the content controls if you're going to develop tab design mode. You will now see that if you go into the that's, not the right one, if you go into the properties again, not the right. One properties should show you the tags on the on the content controls and if I do modify content controls, you will see that tags are visible in there.

A

There's also an event handler option in in this demo. If you register the event handlers and you go into the inspection thing.

A

And you can see on the console that the event handlers are actually active and if I delete the first content control, the first even content control it's deleted from the document, and it will also be trigging an event. In the background.

A

And removing the event handlers to clean them up. That's basically the word demo, but let's go into the.

A

Background for the blazer laser heading and save this.

A

And as we are demoing the excel demo today, let's go into the excel project again.

A

Let's open that quickly,.

A

What you need to do for a blazer add-in is make sure that the blazer engine is loaded after the initialization for office and what we do for that is going to create a module. That's a basic! That's a convention for blazer uh web assemblies with an option in there to run something in the before start and do something in the after start.

A

We are using the before start to make sure that word is started to get triggered. So it's um so it's ready uh whenever the host is running.

A

The remaining part of the project is basically a common blazer uh application, and if you go into the layout of this project, you see that there's you can recognize things like pages and shared environments for, uh for instance, for your navigation menu and in this, in this case, you see the bubble chart demo, that's basically uh yeah, there's not much weight on the ccr part here, where we just trigger, create table function and create bubble, chart function.

A

um That is triggering the c sharp code in here and that in turn will create a table and create a bubble chart using the office. Api interfaces, and this specific demo is um is yeah. As I said, it's it's low weight on the c-sharp thing, but you can imagine if you have more things on on your back end, that that needs processing.

A

In the end, the the interaction with office will be a lot less and, and you see sharp code will will be extended into more sophisticated coded code things to do, for instance, if you need to do things like rendering 3d objects in your task, pane, for instance, or you go back to your database engine, to collect your data and do so. You do the things with the data there by doing so, you're able to do that in c-sharp, and not so much in in javascript anymore.

A

So your main development efforts can be done in c-sharp and that that's basically the the main benefit of this as a net developer, I'm basically a net developer.

A

You recognize much more of the things that that you see in the blazer environment that you recognize from your asp.net coding that you've been doing already over years and um yeah. That's that's basically the benefit of this. It's a. They are really starter projects, um so you can clone them and get your thing going.

A

Try pick up these the samples and and and think of your own project and see, for instance, if you can take your your visto applications or you, basically your vba application and see if you can do the same thing in blazer, because this is much more closer to the project that you already have in place, and this might also be a step up or maybe for the one outlook that you see coming up coming up when the comment is at this time are not not supposed to support it.

A

So yeah. The next thing that we all work on will be. I think eric will be doing. That mostly is developing the outlook add-in, and I also want to have a look at here, the powerpoint add-ins, to do the same thing and get started project for that as well.

A

That's basically my my thing here for today, and I hope you want to have a look at it and see what you can build with it, because I really think it's especially for net developers. It's a promising environment.

A

Okay, that's it close! My screen! There.

C

All right, thank you, martin. We really appreciate the community contribution you've made here at these samples to the office island samples, repo.