Microsoft 365 Community Community Demos, 11 May 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Blazor in Office Add-ins

Description

In this 17-minute Developer-focused demo, Maarten van Stam delivers a walk-through of his sample showing an Office Add-in based on Blazor WebAssembly technologies using Blazor, .NET Core, C#, and JavaScript Interop. Blazor WASM is handled just like any other Office JS add-in on cross-platform environments that are compatible with WASM. See the Blazor WebAssembly app in Word to add content controls and event handlers to the controls from the task pane. This PnP Community demo is taken from the Office Add-ins community call – May 2022, recorded on May 11, 2022.

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

Supporting documents
• Sample - Create a Blazor Webassembly Word or Excel add-in | https://github.com/OfficeDev/Office-Add-in-samples/tree/main/Samples/blazor-add-in
• Videos channel – Maarten van Stam - Soft As In Software | https://www.youtube.com/SoftAsInSoftware
• Twitch – Soft As In Software | https://www.twitch.tv/softasinsoftware

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

Well, good afternoon, it's afternoon in the netherlands, where I'm located currently, my point of my presentation is going into blazer office add-ins. um My problem with the office add-ins usually was, and I give a little bit of a history- you've started with vba and freestudio.net and complex.

A

That's where I come from and office javascript apis were not really my thing, so I really had to struggle with that and the solution for the com, add-ins and vba ideas, obviously, is that the office javascript apis across platform and using generic web technologies, but problem with that is, if you are a regular.net developer, you're, um really not adopting this api.

A

um In the beginning, it was kind of incomplete it's now getting better and in especially in excel, it's almost in part with the uh with what we have with with vista and um but the real adoption rate for dotnet.net developers stay behind, including me myself, and um that was making it hard to adopt the uh the office javascript api.

A

It's by now it's getting uh more complete, but I was still thinking about how to get net developers involved in this and the way to do that. I was thinking what, if we can create blazer add-ins within office and obviously blazer started as a server technology and, as you know, office javascript apis require the code to run on the client and when that happened, blazer also developed the blazer web assembly option and the blazer web assembly option is really um on the client side.

A

So if I move over to my screen, there we'll go to the demo.

A

What I developed in my live coding sessions on twitch and youtube is building an office add-in based on the blazer web assembly technologies, and I created a pull request for that by now. So you can see that over here and so let's try build that thing. If you go to the office, add-ins samples, repo just go to the root and you copy the github clone command and you go into a new folder.

A

Restarting just from scratch, there's nothing in here and we pull in the github command pulling in the full github repository from the office add-ins.

A

This will pull in all the code from the from the current office headings that are available that are developed right now, but this will show you that um it's not adding the pull request in yet. So you have to do a little bit of an extra step to get that if you go to the folder.

B

And see the samples.

A

You'll see, there's no blazer adding in here. So if we go to github again and we go to the pull requests, then the fourth option is there's my pull request, select that and do and again copy the code here. Go back to the thing in here run the commands.

A

This will check out the pull request and immediately shift over to the um to the to the pull request that was created. If I now go to the samples folder again.

A

Now you will see there is a wordplacer add-in, so we go into the wordplays already.

A

And in here there are two solutions: there's basically one solution. I can open that in for studio.

A

Z pick the solution just run it I'm running the fish studio, preview, 2022.

A

This will load project.

A

Let me pull this a little bit to the side here.

A

A

In the solution there is a blazer heading, that's actually the blazer heading that will be hosted in the task pane and there's a second project in in here that will be providing the site loading of this project inside word. So, if all goes right, we just have to hit a five here.

A

If the demo demogods are with us, it should trigger words and load. The ad.

C

B

A

Is word, and you already see that it's loading the add-in in the back, you see here it's starting the blazer server, but it's a web assembly. So it's running on the client. If you open word here.

A

And show task pane. You should accidentally see exactly the same thing here, and this is basically the same thing that you see over here, and this is a web assembly application.

A

The reason why this is working is because the code that is running here is actually running on the client, so it is possible to interact with the host in here. In this case, it's the host is word, but we can do things with that. Like setting up the document where you put in let's say five paragraphs in here, I'm going to convert these to content controls.

A

And put the tag on the controls, if we go in here and show the default design mode and have a properties you see now that I put a tag in here like odd for each of the content control, so you odd, even odd, even etc.

A

If I modify content controls, I make it visible, actually that they are tagged and put some things in there. Let's move that a little bit bigger.

A

That's not all. You can also put a event handler on the content controls and for this I need to open the inspector.

B

Otherwise, there's no use of showing what's happening.

A

Sure, if I can make that big here, we can make that bigger as well.

A

So now you can see that the undeleted handlers and the on selection change handlers are added to the content controls. So now, if I delete one of the contact controls, let's say the delete, the first event, even content control. It will show you that the even content control is triggered. So the event this handler is actually handled.

A

This is something that um that is only available in the preview at this time. For for word, that is so be careful that you have the the preview bits running for that, but merely for this demo, it's just showing what is possible and what you can do with it. If I now remove the event handles again- and I do basically just select the first- even contact control again for deletion, it will now not show any events any anymore in this displays what I did with this my little demo, I added a couple of small demos.

A

I picked randomly some some small samples from the year from from the repo, and you see while I'm switching, it's actually loading again.

A

This is um something that you probably want to avoid, but for demo purpose, I put this. This in because you basically want to make this a single page application instead of five separate applications. If you run this each time, it's loading again. So if I pick the quotes one and clear the document here, we can just add in some quotes all from the blazer add-in or you can put in some paragraphs.

A

If you go over the code, you will see that we I'm using some different uh methods to to do this. um In certain paragraphs, I'm now inserting five paragraphs and it also returns the count of the paragraph. So it's actually interacting with the task pane.

A

So to show you how this is done, we go back to fish studio.

B

Let's close this one.

A

So that we leave the debug mode, don't save and you can see it as is it's you, you just hit f5 and it should be running.

A

So if it's not running, then please contact us and we can investigate that. But the laser thing, if you go to the blazer application, I'm not sure if I can make that a little bit bigger. I don't think so.

A

What you see here is the actual www root with the static items in there and a blazer application actually consists of a special file. That's named like the blazer add-in dot lib.module.js, and this is needed to pre-load the office host before of before blazer kicks in.

A

So if I make this a little bit bigger and you will see that there is a before start so before blazer is starting, we are preparing office to run and it will actually detect if it's work working in word or in the browser.

A

And when it's terminating when blazer is stopping, then you can do other things. If you need it, there's nothing in there at this time.

A

The actual, adding consists of pages like the the index page, that's just the one that we showed the first one when I did content control stuff, let's see if you can make this a little bit readable. What you see here is the office layout, the the blazer layout, that is, with the page identifiers. If you go to the website and you type in content controls app after your url. You will go to this page.

A

If you go to hello world, there's a different page, page name there, but this all uh confirm the the blazer programming standards and the way this is done is that the markup is actually in the razer page and the code is in the code behind page. You can also do this inside the razor page by an add code tag, but I prefer to put it back into the code behind.

A

The way it's interacting with office is using the javascript interop option it's using the microsoft.js intro and, as you can see here with the second the setup document, if I go to the razer page, you will see that the setup button this one will trigger the setup function on the ccr file.

A

That's this one and the c-sharp file in this case will run the setup document javascript function, that is in the isolated javascript file in this javascript file. The the function is really exported, and this one, as you can see, this will ever interact with with word the run thing on word and by accessing the context from from this environment.

A

It's able to do things like inserting paragraphs or inserting text and things like that and do much more complicated things like the event handlers. Let's see if we can find that part here, there is a registered events that will add the handle uh content, delete and handle selection change events to the 2d context, so that whenever the content control is deleted or changed from selection, you will get a notification from that yeah, that's about it. For now the demo.

A

I think is fairly trivial um and um so yeah have a look at that and uh whenever I'm not sure when it's uh merged in the um uh in the full repo, but for now you can use the same trick. I said it clone the repo and then go to the pull request and get the command from that as well.

A

So with that, I want to finalize it with my own information there quickly.

A

That should be this one.

A

So, who am I I'm a martial storm? I've been an mp since 20 2006 and I'm live streaming all these things with the uh like the office add-ins, usually on thursday um building office, audience using blazer and net technologies on youtube.

A

If you search me for your soft testing software, that's the name that I'm using to do my live streaming or you can contact me on twitter on aafvsdam.

A

So if you have questions just let me know and that's about about it, I think for now.

C

Cool, thank you, martin. We really appreciate your going into this space and putting together this really cool sample, especially because I've seen lots of questions out there from folks of hey. We want to use blazer. How do we get this to work? And you know so. I think this it's a step forward in that space.