Microsoft 365 Community Community Demos, 23 Nov 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Microsoft Learn Module - Extend Microsoft Viva Connections with Application Customizers

Description

In this 34-minute developer focused demo, there is a presumption you have already installed the Viva Connections toolkit. Waldek Mastykarz and Vesa Juvonen step through creating an application customizer from scratch, edit the application customizer code, test the application customizer on a page, and deploy it to a Viva Connections site. Unlike web parts that can be positioned and configured by users, Application Customizers are created and positioned by developers, configured by Site Admins and work only with Viva Connections desktop experience. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on November 23, 2021.

Demo Presenters:
• Waldek Mastykarz (Microsoft) | @waldekm
• Vesa Juvonen (Microsoft) | @vesajuvonen

Supporting materials:
• Learn module - Extend Microsoft Viva Connections with application customizers | https://docs.microsoft.com/learn/modules/viva-connections-extend-with-app-customizers/
• Tools - Viva Connections Toolkit (SPFx 1.13) | npm install -g @microsoft/generator-sharepoint
• Templates – SharePoint look book | https://lookbook.microsoft.com/

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

A

We've been going through the extending of microsoft, vivo connections, um learning path uh which is available from the from the microsoft learn. uh If you go https or it's the akms, m365 dev and learn and you'll find the extend, microsoft, viewer connection and- and that really is focusing on three different uh topics. It focuses on extending the vehicle connection from a web part perspective from a application, customizer perspective and then using the adaptive card, extensions, so relatively simple scenarios and simple implementation style, but actually super powerful.

A

So it really shows how to get started from a scratch and from nothing and understanding what you can do as a starting point and then, of course, you can extend from there using the documentation and tooling and hands-on labs and samples, and all of that what is available.

A

So, within the past two weeks we've been going through uh the first. We did ac so adaptive card extensions. Then we did web parts and now we're going to the application customizers and that's basically the last piece from this learning path and then and next time we'll talk about something else again, um but not not about the not from this learning path.

A

So uh what would basically have already agreed with the cloud advocates like welding is that we will start covering more and more learning paths in this uh two cycle, because it's beneficial for community to know and see this also actually in demos as well.

A

Now, first of all just a reminder: vivo connections toolkit is already generally available, so that was released a few weeks actually before ignite and then week after ignite with a bit of a weird timing, the viva connection, mobile, went ga as well, so viva connection is already completely uh g8 and unavailable for anybody to take advantage and no additional license is needed. So the viva connection is basically a capability where you are exposing the corporate communicational intranet or the sharepoint inside of the mobile and and a desktop and potentially a tablet uh scenarios.

A

Now, from these scenarios from these three different or two different uh main kind of a differences- and there are few differences- so there's three three different extensibility options, so you can use web parts, application, customizers and adapter card extensions, adaptive card extensions are for the mobile experiences and and those are being rendered in a native mobile uh way using the native mobile framework. So it's super fast and it's targeted for mobile usage. Now the web parts and application customizers. These are similar kind of things.

A

What we've been having uh in the sharepoint in the past, as well, so we're building on an existing extensibility model. So if you've done application, customizers so web parts in sharepoint online, you will know how to do them, of course, in the in the viva connections as well huge so learning objective of today, so we will go through basically and the learning path.

A

Sorry to learn, learn module because learn path is all of the four different modules and today we're going to use one module and we're going to actually go to how to extend the video connection desktop with the application customizers. So application customization can be used in the vm connection, desktop experience, but not in a mobile experience, because mobile experience is all about adaptive cards, so we're going to create and deploy and test the custom application customizer in the vivo connection desktop throughout now, quick introductions.

A

So, basically, um after the video connection has been enabled um that's by the way, also covered in the learning path, how to enable vivo connection. What do you need to do enabling the global navigation settings antenna? That means?

A

How do you deploy the stuff in the team's admin ux after that has been then enabled um you might want to actually extend the viewer connection in a way that you want to actually inform, for example, employees with some data or information or notification and typical scenario for application customizer, especially if it's a visual application customizer would be something that we want to have a reminder for employees that there's an important company announcement or something to follow up, and we want that to be visible for every single employee all the time until they will basically click and do whatever is being asked them to do application.

A

Customers could be used on that, so how would we actually then do this? So, first of all the vivo connection desktop experience is backed by sharepoint. um Nowadays, you will see us talk about more and more vima connections because hey it's a cooler name than sharepoint.

A

Don't quote me on that, but still it's it's one of the the kind of a repositioning uh where viva is being promoted, more and and the sharepoint is still in the contact site and content services behind of the scenes, we're using basically sharepoint home site, which is the one which has been exposed through viva connection, desktop inside of your microsoft themes, application so making sure that you can easily access the information directly from desktop or from the mobile experience, and as noted out over already, there application customizers only work with individual connection desktop experience.

A

They won't show up in a mobile viva connection, app so good to be aware of that again, the mobile application only supports applications, sorry adaptive card type rendering. So that's really important to understand.

A

Now. Application customizers don't have to have a ui, so they might be something like you want to have. For example, let's say google analytics or some other analytics tooling, which is tracking the user view. Google analytics is quite typical scenario for this stuff. To be fair, there is a free, um similar kind of version coming from microsoft as well, which is what what is it called well deck.

B

I know what you mean. I have.

A

Exactly this is the moment when we should be promoting our own company products yeah, you know not. Google analytics the better one.

B

The not in size.

A

It's also yeah it's another thing.

B

No, not not not in size, you're, not happy. Look it up.

A

Cool now, uh but for that scenario so- and that would be a good example of we want to embed something analytic scripts uh on the basis to analyze what's happening and then and there's no ux which we're rendering now application customizes can actually have also also uh ui elements, so they can actually claim positions uh on the on the ui which is being exposed inside of the microsoft teams. As a data connection and right now, we've been waiting for get more placeholders quite a long time and it is still in works.

A

But right now we still have one placeholder in top one placeholder in bottom, so basically a kind of a header section and then a lower footer section where you can embed extensibility on that side, and thank you christian. It is microsoft, clarity. You are absolutely correct on that. Thank you for helping us see as a microsoft employee. I guess we should know about this stuff, but.

B

Hey you cannot know everything, you cannot know everything.

A

Now for the application customers as a developer, we define the position of an application customized, and this is a really the big difference between application, customizer and extensions versus the web parts. So the web parts are being modified and configured and adjusted by the content. Editors, application customizers are something which is being looked kind of hooked or locked in the site in a certain shape or a form and the end users cannot get rid of them, so they're, basically locked in uh from that perspective, they're actual code. So it's a developer experience now.

A

You might actually think about this uh if you think about sharepoint framework extensions that what's the difference, for example, um these extensions versus some of the configuration options, what you can do uh in the lists because extensions technically, not just if you step away from the application customizers, you can do a list of our customizations, but that the difference is really the fact that when it sharepoint framework, it's code and it's developer created to developer associated, not end user or site, editor configurable.

A

So that's where the differences really are, and editors cannot get rid of them as such, because they are basically locked to be available on the site now site administrator, configure application, customizers potentially, and so there might be limited configuration capabilities. There are a few different options: how to make this happen, uh either centrally from the tenant, scoped or or then in the site level.

A

Now, in general, a recommendation is that you would build application customers if you want to add code to all pages in a vivo connection, desktop experience so something which is visible all the time it could be like a hidden master navigation.

A

If you don't like the out of the box one, it could be a master footer, it could be a notification, it could be something which is detecting that hey you're the person who who's located in this particular location- and you should be doing x and y and c today, um go there and make that happen. Just a reminder. Personalized reminders, for example, in the viva desktop experience or you haven't hey, you haven't actually completed your mandatory training and that happens actually a lot in the microsoft we're getting those reminders all the time.

A

At least I do because I never remember to do them so a reminder for me to actually follow up on on those trainings. Now, let's actually create one of these from scratch, and we do have well nicely timed today, so I will start actually from clean command line and we'll move into the right location. Let me pump up the font a bit and let me go to my bmp location.

A

uh Everybody has a bmp location right, of course, and let me actually start from here. Let me a quick shuffle things, so I can see uh the code which walder has written I'm just executing his code, so it makes me feel that I'm actually capable of writing code. How to fly. Am I oh.

B

Yeah, for me, it is, it is an ultimate test. Like can I write code that anybody else can run yes or.

A

I could run but there's a difference can apm run your code now. Basically, what I'm doing here is that I'm running at yeoman generator, which is the creation of our sharepoint framework or viva connection project. So we start the creation of our project structure and let's actually use the values. What our documentation is giving us to use. So I'm going to use an spfx company announcement, application customizer as the solution name and then it's going to ask me.

A

This is a relatively stupid question right now, because uh and we're going to chop it in the 1.14 um version, um but we only support sharepoint online anymore, with german generator.

A

You will need to use an older version of human generator if you're targeting shop on 2016, 2019 or subscription edition, so we're gonna use that one now we're gonna use current folder because I already went to the folder where I want this to be created and then uh for these we're not gonna deep dive on the settings, but basically we're not gonna, have a tenant deployed and not unique api permissions. So not a super security, but a normal security level.

A

Still we're going to create an extension and we're going to create an application customizer and we're going to give it a name like something instruct and meaningful. Technically. This is not visible from the ux, because again, a developer still makes the decision where the application customizer is being placed. So the ux doesn't really matter that much or these descriptions doesn't matter that much but hey it's good to have them in the package.

A

Now it's going to create the solution and it's going to create the package um and for us and as it's doing that, let's actually have a look on the setup. So if you followed up on the last two weeks on our uh journey on implementing and doing extensibility uh with viva connections, so first of all, we have here relatively simple, viva connection layout. So we have a contoso personalized logo and a name. So you can personalize the viva connection based on your company and then we're using super simple uh communication sites as a starting point.

A

But we have enabled the dashboard here already and we have actually one uh announcement list which is created for just mimicking information which could be important for the employees, so we have a one complete or mandatory trading uh uh information available and then another news. Now, if I go back in the in the home, we can see that we have the ace which we have implemented in here, ace being the adaptive card extension component, which could be then exposed using the mobile experience.

A

And then we have a custom web part which is visible here as well. Now today we cannot create an application customizer again if you're super familiar with sharepoint framework, there's nothing really unique or new in here, except that now we're inside of the microsoft teams, which makes that then, as a viva connection, experience so and the cool thing about all of this one again, just to recap: there's no license cost. No, nothing! You can just embed the sharepoint online portals and modern photos directly in here. This doesn't look actually super impressive.

A

But again, if you're looking into doing a super impressive portals, I would still recommend using the sharepoint lookbook and there from here you could use something like the perspective. That's a starting point and then enable that to be the welcome page and then add the desktop, the viewer connection, dashboard and all of those experiences in here. But let's go back on our boring site. uh We should have actually made it a bit more flashy. Maybe not the flashiness is always it's it's. It might be confusing as well.

A

Now let me go back on the command line and we can see that our solution has been created and let me actually open up a visual studio code and we'll start doing some coding. Well, actually, not because remember to read the manual. The manual says that we need to run one npm install command. So let me go back in command line and, let me add a usb office ui fabric core, so I won't be wondering why isn't it working afterwards see.

B

Exactly so, why do we need that.

A

So we're gonna use this one uh for styling purposes um as we're rendering ux level information. uh We will take advantage of styling elements from the sp office ui fabric core. It gives us a styling, uh colors and style definitions which we will use in our implementation and, what's.

B

Happening here is: why isn't it and why isn't it available already for us, so.

A

Why isn't all of these available already and it's not available, because we want to make sure that if we are not using that, we do not increase the bait size. So basically, we want to make sure that the package and the javascript component, which comes out of transcompiling the timescript, is as minimal as possible. So when people are accessing the page, for example, through the microsoft teams and and from other areas, it will not be critical.

A

Well, it will not be too big. Now I I got confused because I'm reading the critical messages there now by the way on the on these things, that's actually a good point for uh just from eric every now and then you might see this, and we are of course closely following up on this quite often as you're, seeing, for example, in this case, that's critical.

A

These are not critical in run time, so they would be critical in runtime if it would be running a server side code, but not when we're running client-side code after transcompiling the typescript to javascript and those are the kind of the differences, and these are really hard to do. Kind of a spot and understand, but from our side from microsoft, site, we're of course, following up on what's happening in npm, which is by the way owned by microsoft nowadays as well, it's pretty cool now or github, but then microsoft does github. So it's complicated!

A

Now we are actually in the individual studio code, I'm watching the time we have plenty of time. So this is good, so no rush today, so um we already have the basic.

B

A

Exactly that I know what happened so no rushing and then running out of time. Now. What we basically have here is a sharepoint framework solution and a basic layout and a structure and baseline setup for application customizer and we're going to a bit modifying this one. So we will, we will basically make it available and more structural and make those placeholders so we're going to put a header placeholder on the page as we're rendering the page inside of the viva connection.

A

So I'm going to follow up on the guidance I'm going to modify the sp application page we're going to take placeholder content and placeholder name from there and also need it as we're pointing out to a location in a page and we're going to render some javascript in there. And then we want to access the information from sharepoint online. So I'm going to add a additional import which is sp, http client in here and then we're going to start actually a bit of implementing the code.

A

So inside of my class, that's my actual class, that's the actual typescript implementation of my application. Customizer, I'm going to add an internal variable, so we can then store the top placeholder in here pretty soon in the code, we're going to actually add a on init or we're going to modify it on init a bit so there's our on in it with right. Now it is showing a dialog with hello world on something.

A

That's not super interesting, so let's actually modify the on init completely, so we're going to actually add a change event at render placeholders, and this is basically making sure that whenever we're moving across to different ux elements and partially loading the pages and our render placeholders is getting rendered properly and what we then need is the actual render placeholder. So let me actually craft that one from the code and paste that one in that was a super fast implementation of the so fast.

A

Yes, nobody was able to even see that coming now, what we can see here, let's have a quick look on what's actually happening here, and what are we actually doing here is that we are taking an instance of the top placeholder. So there's a in the html structure in the base structure, there's a location where we can inject our custom experience. That's what we're doing here.

A

If, for whatever reason, it says not found we're just logging an exception on the browser console as we found it or when we found it we're actually calling an rest api from the announcement list and finding a news where the important field equals one. So, basically a news article, whether where it is important enough to actually get shown for the end users and then, as we get that announcements to be available, we are adding a implementation or li ul, uh html structures uh based on that information.

A

Now something what we can see actually here already is that we can't find styles, and this is basically what's still missing. We didn't. We took a dependency on that officer fabric element, but we didn't actually implement anything with that. So let's actually go back in on the solution structure and let me create a one new file in this folder and there we go and let's name that as an important company announcement uh scss.

A

What is that shortening for? I can, I can't never remember that sas it's sas yeah, but what does success actually mean in england? Never mind: okay, fine, fine,.

B

What does it mean in english? It's just a word: it's dml.

A

Is a has a actual bird behind of the.

B

Cascading style, stylesheets sheets, yeah, css,.

A

Yes, but then s css anyway.

B

A

Sassy css, okay, there we go good, so that's good to know. So that's that's what it is now.

A

What we're doing here basically, is that we're defining the styles uh for the components as we're getting rendered um for these sassy uh components uh as they can render it in the ux, and now we have the definition of the style and then in the code we will still need to get an import to that style, so I will actually add an import on this page so and that basically means that we will get that one into use. uh Did I name that actually properly?

A

uh Yes, I did so it's just not yet compiled, so I can't find it so that's fine that should be okay, even though it's actually doing that as we start bundling stuff, it can find what's available now. What we can do now uh is that we can actually start testing. I'm just double. Checking that I saved say it saved everything, because that's my uh always the thing: why isn't that working? Well, you didn't save the file, so what I'm gonna now do is then I'm gonna write here cop serve. uh That's just no browser.

A

There's a few ways of doing this: now we could actually do here a config configuration options as well and launch options so actually from here how we're testing this extension there's a few different ways of doing that. We're going to do this in a super simplistic way and we're going to actually not double.

A

What am I doing there? We go.

A

Your keyboard doesn't have characters in it. You never know. What's going to hit additional complexity, you know making it easy for yourself level, two yeah.

A

So what we're going to do now is that we're going to basically test out this component in a live page, so we're rendering that from a local host and we're going to test it out from a live page. So I'm going to actually start a notepad we're going to do a bit of a a modification here in the guidance it actually says now again, there's a few different ways of doing that.

A

We could actually go to the surf json and we could have been actually doing this, not using the the let's say classic url manipulation, but it says that go to the home aspx page, and then you need to update this id accordingly, so that it will actually start loading whatever we have in the local host. Where do we get that id?

A

Well, we get the id actually from our application, customizer definition, and so this is the manifest file of our component and that's the unique id uh quits are actually not unique, but that's a separate discussion. Let's not actually go there, but they're quite unique, but they're not completely unique.

B

um What does that stand? The? U in good, for.

A

Yeah, it's actually just dance, that's unique, but it's not actually there's there's an interesting studies on that, so how they're actually being resolved so they're.

B

Already, all technically, if someone else, they have the same one right, yeah,.

A

Now um I'm gonna say I'm not gonna save that. So that's no reason to doing that. I manipulated the url and let's actually go back in our browser and let me go on the sharepoint side of the house, so we can actually see the same page without the theme shell. So we can more easily actually then extend this url. So what I'm doing is that I'm pasting that massively long url, which in practice says hey sharepoint as you're loading, the home aspx page and there's a debug manifest available from localhost temp manifest.json file.

A

Please load that and there should be a component called that id and that's what's actually happening here and, as we start loading that we're telling sharepoint that hey, you should load the localhost and it's it's then sharepoint is basically hey. Are you sure that you want to do this and in this case, um as we know what we're doing we can click load debug script?

A

If you do not know what you're doing click here and say super descriptive uh answer, but something has happened on the page and as we can see, uh I was able to successfully copy paste the code from the from the material achievement.

A

I'm not going to claim that I wrote the code is that we actually have a completely amended retraining by december. 1St uh is as a reminder here. Of course it could have a link to the to the training. It could have something else and a more complex scenario available, but technically it is now loading the same entry as the swift part from the announcement. This loading from the list send us exposing that into top error. It could be much more complex, but in this case quite simple, hitters definition good. So that's working awesome.

A

So how do we now get this one uh then deployed? Well, it's not actually too hard and that's the beauty of the sharepoint framework, because everything is auto, hosted microsoft, 365 the host hosting everything for you. So let me actually go back in the comment line. uh That's our comment line. This is a comment line, so I'm gonna terminate my patch job, I'm gonna do some cleaning and we're gonna do call up bundle.ship and that's going to basically transcompile.

A

It's it's a fancy word, but basically the trans, the typescript is getting now uh transforms to be javascript, which then the browsers understand, um so that the browser doesn't do have to do any runtime transformation of the typescript. So um so typescript is a developer time. Experience javascript is the output from that typescript and then that's now, basically getting ready and my assets are available to get deployed they're. Actually, in that dist folder over there we're not going to no point actually opening up, but that one.

A

But now I'm going to do cop package solution and that's the ship it and that's going to then take the dist information and my solution definition and everything else and create that to be an sbp kg file, which we last time already set. uh Spp kt file, which is now named in here. It's actually a zip file, but it's so much cooler to name it as an sbkt file rather than as if well so,.

B

Exactly and have your own extension right, of course, because zip is so critical.

A

So now, if I go and open up my file explorer uh in my 4k uh screen, so that's it's a pretty. I can't even zoom it in the right level. Can I can I uh there we go okay. Here we go now. You can probably say something in the following solution structure from here I can go to the sharepoint and that's again, small, oh yeah right and we can see my spkt file available for me to get instant so the cool thing again.

A

I can send that to anybody in email that they can just install that to our channel and then it actually works as long as the list is available.

B

Attachment blocked.

A

Yeah in this case, it would be indeed attachment clocked, but but again now, let's get that one installed to the tenant.

A

Thank you wildeck, for keeping me honest. So so let me go my mike's sharepoint online app catalog, which luckily is getting modernized, and this is so outdated, but basically it's an administrative operation, uh so it hasn't been yet got too much love, but it's going to get more love in the future now or there's people actually already working on the modernization on all of this. Now this is the app catalog for sharepoint online and for viva connection, because again behind of the vivo connection, we're using sharepoint online as the engine.

A

At some point you might actually have maybe viewer connection app, catalog and abstraction of this and a few things there's an interesting designs and plans in the roadmap for all of this. But let's not go too much details yet on that, because things have not yet been decided.

A

So I'm going to install that component svpk file, which is actually safe, file but hey, and to my tenant, we're going to drag and drop that to the app catalog.

A

It's going to then prompt that hey, so you need to be administrator. You need to understand, don't just take random examples from the internet and just put it in your tenant running. What's wrong with that uh to the tenant there. We go um yes, why? Why is that?

A

Just take the javascript file and put it in your channel what's wrong with that now, as we can see and that's the component and we can see that it's deployed and more importantly, there was no package there errors, so we're basically good to go so now we're going to install that to our site. So let me go back in the sharepoint site. I will go to site contents.

A

We already see two components being installed which are actually again again. We actually get the full name. Now we can't can't it says, ace, client, side component and this one says with part client side component, but now I can add the third one, which is the application customizer. So I'm gonna add an application.

A

Now this is actually really good, so we're hitting this because there's a cached entry related on the local host definition, which we were playing around in here. So this might happen, but this is. This is a bit of a annoying thing. Let me go back in the home.

B

A

We can, in our dogs,.

B

We have instruction to turn it off. Yes, you do.

A

You do you do, and I forgot about it after doing that, so.

B

A

Way uh to actually clear that is, add a parameter reset equals true and in the docs it actually says that, but I skipped that so I didn't like you know. Why would you read it? That's what you get exactly, then. You get surprises. Luckily I've I've seen this one before so now. Let me do this one more time. Let me go near and add an app there. We go now it's working properly.

A

I can go to from my organization which basically shows those applications which are available from my app catalog directly, not just from a sharepoint store.

A

I could access the sharepoint store from here as well, and the one which has not yet been added is the application customizer one I'm going to add that to the site adding adding successfully, and if I now go to site contents, we can actually see that we have three of them now installed, but, more importantly, wow there's our awesome awesome customizer available because again the application customizer renders in all of the pages. So it doesn't matter.

A

If you are inside of the list, experience wow, it doesn't matter if you are inside contents or or if you are in pages wow, um wow. Okay, we need to have a look on that.

A

I want confused uh or in the homes uh we can actually see that the the application customizer is getting rendered uh properly and because that's the intention, it is all the time available, I'm going to render it on the pages. Now now we're still in sharepoint. But where is the viva connection? Well now, if we go to the microsoft team site and I'm going to use the browser again simplicity, because I mean I guess my desktop is in the session right now- we're recording the session.

A

So I can't use that and if we refresh the page, we can see that, of course, the application customizer is getting rendered in the microsoft teams, with the viva connection, experience and video connection extensibility here as well. So you as a customer or as a partner you design, what's available, what's visible in the viva connection, which is by the way, a cool partner opportunity as well. So you can start designing different kind of experiences and then interest based experiences without them being exposed through the viva connection uh in the in the microsoft teams.

A

Technically, there's ways even to have multiple ones of this, so you could have one which says contoso and then condos sales as a second one. So there's multiple different opportunities available for people now uh the developer tenant by the way does not require any premium license. Developer tenant is just free for everybody, it's e5 and music. Let's get this started, I think that's it did I miss any questions. uh Waldek you've been answering some of them. I answered.

B

All of them they wanted to know everything they.

A

Wanted to know everything, okay cool, so let me go back on on the slides. uh I think we have a few slides in this one still uh so, basically what we did in here uh before we close up on the on the side. We created a new solution. We created the application customizer, we test it out, and we deployed that to the tenant and again the cool thing about sharepoint framework, hopefully being renamed. Something else pretty soon uh is, is that it's automatically hosted inside of microsoft 365.

A

So there wasn't really complexity on the deployment of that elements. So a component of complexity and deployment of the solution as such. Now, of course, uh just the summary that one, oh now the person is happy. So, finally, he is convinced after three of these sessions.

A

With how we can how we can extend the vivo connection desktop with the application customizer, it does not work in the mobile experience. So you cannot actually use that in there because again, the mobile experiences is for adaptive card, rendering options, and today we did the deployment and testing application customizer in the viva connection, desktop there's a few different ways of again doing that. So we did it with a debug url manipulation directly and there's a documentation how to do it from the serve.json as well again matter of opinion, how how those are being done.

A

But that's all what we're going to do within this demo.