Microsoft 365 Community Community Demos, 9 Nov 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Microsoft Learn Module - Extend Microsoft Viva Connections with Adaptive Card Extensions

Description

During this 30-minute developer focused demo, Waldek Mastykarz and Vesa Juvonen show start-to-end how to configure Viva Connections to communicate important announcements to employees. Designate a home site and create an announcements list on SharePoint. Then create/scaffold a project, configure in VS Code how important announcements are surfaced, test card functionality in localhost, package and install card in App Catalog, deploy card to tenant and to site, and add card to dashboard. Develop one card used in both desktop and mobile. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on November 9, 2021.

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

Supporting materials:
• Learn - Extend Microsoft Viva Connections | https://docs.microsoft.com/learn/paths/m365-extend-viva-connections/
• Documentation - Plan, build, and launch a home site for your organization | https://docs.microsoft.com/sharepoint/home-site-plan

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're going to talk about uh the microsoft learn module, which is around extend microsoft, viva connection, and this is something which we actually had a session uh also last week in ignite together with weldic.

A

So I'm gonna do a live coverage of a one module on this one and what we're going to do actually in the next upcoming two weeks, we're going to cover the other two modules, so they're, technically three technical modules uh on this session and on this information let me actually show you those so that you are up to date what those are before. We actually start this module. So if we go to the learn topic and learn url, we actually can see that the extent microsoft figure connection is technically three different different modules.

A

Well, for but that's the introduction, which is, uh how do I enable microsoft, viva connection into tenant and understanding its capabilities? The three modules are the ones which have actually then.

B

A

Exercises in them um me and waldek were closely involved in creating this material. Walter was the primary uh content creator and I guess I'm behind of some of these functionalities, but together with other vms and also spfx, now this overall, this is what was at one point.

B

A

It one and a half ie hours, something like that. The timings are now a bit confused because.

B

Yeah, I think I think it is. It is around an hour. It is around an hour but then again like. If so we measured the time in a way that how much time would it take if you would take each module by itself, but then again, if you go through all of them, you will see some things that we repeat like how to install tooling or set things up, which you only need to do just one. So if you go through all of them, it will be around an hour.

B

A

So I said what we're going to do today now we're going to do the module number three and water number three uh on that training is really to extend microsoft, vivo connections with adaptive card extensions, we're gonna, do module one and two next week and the week after that, as well so you'll know uh what that means as well, but again, this time we're gonna focus on the adaptive card extension, which is a new component type in sharepoint framework, which is a bit of a confusing thing, as we actually use sharepoint framework to build extensibility for microsoft.

A

Viva connection we're going to talk about that one in the in the future versions as well and by the way we might be potentially renaming spfx for getting some clarity on that one, because I think people it's confusing for people that why are you using sharepoint development tooling? Well, we're not we're using microsoft. 365 development tooling, which happens to be named as sharepoint framework which is being, can be used for microsoft teams and viva connections as well, but basically on this module.

A

uh The learning objectives are extend, microfiber connection, desktop with adaptive card extension and, more importantly, extend also the mobile experiences with adaptive card extensions. We're going to do a live demo with the mobile emulator. So I have here.

A

Actually let me close that one I have here a android emulator which we're going to use for testing some of this functionality as well. Now, let's actually move on on doing things. So, first of all, the scenario here is that after we have deployed the vivo connection, we want to extend it with an information for internal data sources for keeping employee informed. So as an example, we want to have an easy mobile experience to access the latest important announcements which the leadership has been sharing.

A

So, rather than forcing people to go to the desktop or using their browser, we want to surface relevant the information in a mobile experience and that's when we're going to use the mobile experiences for vivo connection and by the way, while they feel free to jump in and interrupt me whenever we need to elaborate on things now that I'm actually saying that it gets you visible in one of my screens over there. So now we can see if there's anything good. um But how do we do that?

A

How do we then extend is that's when we actually gonna take advantage of the adaptive card extension adapter card extension is something which is being it's a component type in sharepoint framework, which has an adaptive card presentation layer, so we're using the adapter card in the ux sharepoint framework is then the encodes, the orchestrator. So basically the the orchestrator, which is responsible of reacting on buttons, reacting on clicks, reacting on things and also getting the data.

A

So adapter card is the ux layer and then behind of the sense, of course, wherever the data is being surfaced, we're using graph or rest apis or we can connect to the lob lob systems as well. Whatever is needed and adaptive card presentation is in the ux side, it can be visible in the desktop and it can be visible in a mobile and it has certain level of limitations. So you cannot actually have whatever layouts in here.

A

So there are at least for now specific layouts and specific rendering options which are available, but they are actually relatively flexible, we're looking into providing as a much more flexibility related on adaptive card extensions, also in the future and examples what can be done, but here's a good example of a different adapter card extensions uh in the desktop view now. Adaptive card extensions are then used by the content.

A

Editors who create the vivo connection experience so basically, as a content owner of the let's say, corporate information you design what's available in the dashboard and this dashboard can be exposed in the desktop and it will be exposed also in the mobile experiences.

A

So it's the same dashboard. What we can see now right now on this ux on the on the dashboard web part, which will be then rendered in a mobile, viva connection. Experience so you'll see the same information same dashboard and all of that you can actually filter those cards based on audiences, so audiences would be, for example, security groups or microsoft. 365 groups, where you can target the card to be available.

B

And maybe also another thing to add there is that when you switch between the desktop and the mobile view as developer, you don't need to do anything. So there is no extra work for you needed to optimize the card to be shown on the desktop mode or the mobile view. You build a single card and sharepoint or viva connections in this case will automatically adjust how the card is being rendered. So so there's no additional effort or work for you or testing to ensure that the cards card works optimally.

A

And even actually better, the mobile experience will be rendered in a native mobile way. So it's not just an html page. It's a really fluent and a fast way of getting rendered and we're going to see that one in practice and as we are designing that dashboard, we we basically are able to configure this adaptive card extensions. So there's different set of options you as a developer, who builds an adaptive, cart, you can define what kind of options and configuration are available.

A

There's some level of a first party adaptive currents available, there's some level of a second party which basically means not provided by sharepoint, but people from microsoft. For you to be available and then there's the third party cards, which are basically partners providing capabilities which you can acquire from appsource or any other means from the partner ecosystem, and then you can configure. Why would you.

B

Make why would you make a card configurable.

A

Why would I make the card configurable? um It could be something like uh what is the data source which I the card will be connected into. What is the site? What are the news? What are the news types? uh Is it just a specific set of news? Is it primary news? uh Is it uh well, there's this whatever options? It's almost a similar way of configuring as the web part options in sharepoint portals.

B

Right so, in other words, to make a card more versatile and more applicable to a broader range of scenarios, as opposed to being a fixed item thing.

A

Yes, exactly exactly, rather than implementing the same thing multiple times, let's make as the option to be configurable, so it's more adaptable um so based on the user's wishes on configuring that and that could be your images that could be the exposure.

B

A

There's just unlimited potential on these cards as well, and now I already mentioned this editors can target adapter card extensions to specific audiences. Of course, if you have multiple chilean amount of audiences, it's it might be a bit complicated to currently how we're doing this, but we're looking into making that a bit better as well. In the future.

A

Now adaptive cards, extensions use, adaptive cards, that's pretty understandable! I of the card extensions. You add up the cards to render the ui and which is kind of logical. uh So it's the adaptive card technology which is available in adaptive cards, dot, io and the same technology which we use in outlook and in inbots framework for rendering the ux is available in here.

A

So in here we basically have the the card view, which is on the left, which is adaptive card and then we're able to use quick view which says fully flexible adapter card options and then from there. Typically, we can transition to the actual application. So basic flow here is that the card is easily available in mobile.

A

Quick queue is kind of a quick view on the actual data around the application and then as needed, if, if needed, if the quickview doesn't expose you to the needed steps and functionalities, then again flip to the actual personal application or a bot to do whatever you want to do. If it's not exposed as an option in the quickview.

A

That's kind of the way of thinking this as a whole, but the basic idea again is that in best case scenario, you don't need to go to the actual, complex application, which is the right side in here. You can do the basic approvals and functionalities as needed directly in the mobile experience, and then, of course, adaptive cards can can link into other resources, so they can access teams, personal application, boards and web maps, as you click forward on on moving to more specific things.

A

So I think the well-being application will be well that will be shared later in the github, and we use that in the keynote in ignite, jeff, deeperskino and then adaptive card extensions will work in both desktop and mobile experiences. We mentioned this already uh just to recap on that one. Before we go to the actual exercise of creating adaptive card, we can do some code cool. Let's actually do that. So let's do some live coding and I'm gonna actually create uh completely we'll start from scratch and we're gonna actually create uh the solution in here.

A

I'm gonna follow up on the on the exercise uh by the book, so I'm gonna actually create a folder. Can you.

B

Increase the font size absolutely.

A

So I will zoom in that a bit more so now I will go to the spfx company asus and in here we're gonna. Do yo, microsoft, sharepoint so again we're looking at potentially renaming sharepoint framework, because it's not necessarily that understandable. That sharepoint framework is the extensibility model for vivo connections as well. But what we're going to keep the solution? Name normal sharepoint framework kind of a flow we are creating the project for us to use, so we're going to use sharepoint online. We're going to use the current folder.

A

We're not going to do this as a global deployment. We're not going to have unique api permissions. We're not going to deep dive on the different options in here, but as I'm creating this new components and solution, the what kind of client side component type option will be then adaptive card extension. So let's actually choose that one.

A

And then it's going to ask me what is the basic starting point of the adapter card extension component type and in this case we're going to use the basic card template and, let's give it a name like important announcement and a description is, shows important announcements, so it actually shows important announcements and now it starts the flow of actually creating things. Now as we're waiting for that to happen, let me show you where we are within this particular tenant which we're going to use as an exercise. So, first of all let me go in here.

A

We have a sharepoint home site, so this has been configured as a sharepoint home site in this home site. We have some custom web parts available already and we also have this announcement list just to give us an example scenario where we have uh important announcement. uh Well, one of them is an important announcement. Other one isn't an important announcement, so kind of an announcement from the from the leadership again, I would actually create an announcement list.

A

I would create pages, but again it's a simple scenario to demonstrate what we can do with the ace card and if I go back in home it is a home site. So when I click the global navigation, I can see the clock on navigation. I can see other settings available from here. What we also done is that we already enabled to give a connection style to be in the microsoft teams, so technically we're in the microsoft teams.

A

I'm not going to be in a desktop, I'm going to be in the web client, but we can see the contoso in here which has the viva connection, and it has been personalized already with the custom logo, custom, icon and all of that and and it has all of the different functionalities available. Let me actually refresh so we get the global navigation to work as well.

A

There we go, but we can see the sharepoint portal inside of the microsoft teams already exposed with the personalized icon and functionalities. That's interesting that it's planned.

B

That's awesome, questions from the audience so number one: does the home side need to be a route site in your tenant, or can you designate any site as a home site and is there any any effect or any impact on choosing a non-root site as the home side.

A

uh I'll answer this one and then let's try to focus on the exercises and do the questions in the end, but uh any site can be said to be a home site in a tenant, so uh it doesn't have to be the root side. Quite often, people want to use the root side in this case. uh It's just intentionally actually not the roots, not to root side. So it's just sites less home and technically would be able to flip the home to be the route as well, so that is supported in sharepoint online nowadays.

A

So there's tests multiple options how to make this happen, but I know that there's a lot of questions. Well, if you don't mind, let's try to do the exercises.

B

A

Run out of time again yeah, so we have a bad habit of doing that good. uh So let me go back in here and then the scaffolding has been completed, so I will then open up the resource studio code.

A

I'm going to use the dark one now, so I'm not going to go in the microsoft learn recommendation, but I'm going to zoom out just a bit, so we understand what's actually happening um in the ignite. We were told to use the white background, but it's just it breaks my eyes. I just can't do that. So it's just nice, but um the primary structure in here I'm not going to go deep time in here.

A

If you're familiar with sharepoint framework, you know that we have a packet solution and which is kind of a defining, how the solutions are being packaged. So basic structures and everything is exactly the same game, because it's sharepoint framework solution. But now we have this adapter card extension option and in this case we have now created the important announcement adapter card to be available. It's just the extensions in here. So let me actually modify this a bit.

A

We want the surface the important announcements from the announcement list, so therefore we want to use uh the sp http uh client, so I'm going to actually import that to be used in my code, we're going to actually introduce an interface which we're going to then use to store the information about the announcement which we're going to load directly from the sharepoint list. So I'm actually going to have that interface with the title and url in this case. That's the information.

A

What we're going to use from the list data, then we want to modify uh our existing uh adaptive. Current extension state not to be about description, but we want to actually be the state about the announcement itself so about the title and url which we actually can see there, and then we need to a bit modified on init. So we basically just modify that to be this state modification and can actually overwrite the whole on init. So just in case, so I don't actually mess up the demo.

A

But basic change here was that we are setting the announcement to be undefined rather than what it was related on description. And then we can see that we have a function which is around uh fits announcements which we haven't implemented. So we need to implement that. Let me copy that code also from the code from the example and let's have a look on what we're doing here.

A

So let me hide that one and let's have a look on what we're doing so, we're opening up a we're using the svp http client that takes care of our call against to sharepoint we're not using bmpjs in this case, so we're going to stay in this kind of a native uh what's happening behind the scenes.

A

Bmw is absolutely brilliant stuff to use as well, but we wanted to keep this as simple as possible and then we're hearing that absolute url of the site hitting that announcement list and getting an uh that announcement, where the important tag is being true, equals one and we're going to select title and id. So basically we're getting the information and from that list you breathe. Chris wanted to say something: yes, yes,.

B

No well, no also honored to ask like what is the special thing about the sp http client, and is that, if that is the only way for us to be able to use rest in spfx,.

A

That helps on the authentication side of the house, so basically it makes the authentication and uh to watch the sharepoint to be yeah. You don't need to worry about it. It's just completely and abstract from you again. Bmpjs is a great option when you're hitting graph, which is an absolutely a great option as well when you're using graph. Then we have a separate graph client for that as well, and the key point here is to really the abstract and the authentication potential authentication complexity when you're hitting this or getting the information cool.

A

That's all we're going to do actually in here, so we get kind of get the data we're going to get the title and the url of that announcement, so making sure that's with us and then we're going to start doing a bit more modification. So let me actually modify the icon property here. So the icon property is basically is visible in the top left corner of the cart. So then we're going to do a warning there, so we're kind of notifying hey. This is an important thing for the end user.

A

So that's pretty much a simple thing. What we're doing here now, then we will go to a separate view. So we'll go to the cart view. Cartridge is responsible what we're going to render whenever we show a card. So what's going to be rendered in that card, rendering mode? We can we're going to save practice relatively soon and let me actually modify the data a bit as the data in here.

A

We do not have a primary text and that's not interesting we're going to modify that that to be actually this, this date.announcement.title, so we're going to show the title of the announcement which we already queried from the list, and the second thing is that we're going to modify the buttons a bit so the the the card buttons.

A

So let's modify that function as well to be about uh the url. So when I click the button will I will be redirected to the url, which will then show the item about which was the important item from the list and then we're going to do a a on card selection modification as well. So let me actually modify this one a bit: we're not going to deep that being.com we're going to go to an announcement url as well, so that's basically just overwriting those settings and that they are correctly done now.

A

Then I'm going to go to my console, there's multiple ways of doing this again. So let me actually zoom that a bit you could use the control and terminal inside of visual studio code matter of a preference again what's right and what's wrong. Who knows, but let's quickly test this out, not philip gulp uh pull up is something completely different. Hopefully that doesn't actually mean anything.

A

I don't know if it would actually mean anything but anyway, so comp serve no further we're basically gonna load the local host, we're going to serve that component from a local host, just to double check that it's actually working properly in the test environment, and we can see that it's now loading localhost is running.

A

We can actually test out things and then let me go back in my browser: let's go and test it out until it's working properly and here I'm going to go I'm in the context of the home site because that's where the announcement is and we were hitting in the context of the url to that site. So let's make sure that we're in the right location and let me write here there we go and workbench. So I want to test out that card that is working properly.

B

A

B

To zoom the url.

A

So we basically go to an underscore layout, 15 workbench, and this is the sharepoint online workbench developer workbench, so where we are able to test which parts and cards live so that they're working properly before we deploy them. So this way we are can do debugging and all of that stuff and directly from localhost good call. Thank you all the condone and in here, if we now go and search for uh what was it important, important announcements.

A

I think it was important announcement there we go important announcements. uh We can say that the card is available. uh We overwrote that icon over there. We said that it's an important announcement. We took the title and we said that when you click the title or when you click the view, we will be redirected, the user to the individual announcement details, so let's actually also double check that that's working properly.

A

So now, if I go to the preview mode, there is rendering- and now, if I click the card, I will be redirected completely mandatory training december 1st, okay. So that's working correctly, so we're redirected to the right location. That's really cool good. Let's then stop this one um again relatively simple card uh just to show uh how to get started on things, uh and then we want to package this. So we want to make sure that uh that this is running without the local local workbench, so I'm gonna go to golfbundle.chip.

A

Let me actually do this and do this and called bundle dasta ship. So basically in comment line, I'm selling for the code that get yourself ready to get packaged so that the bundle does ship basically means and then we're going to do another command, which is called. Let me actually carry that as well and call packet solution and that's the ship and that's going to then package us an sbb kg for which we're going to then install to the actual tenure.

A

So this is now fully contained uh solution, packets and that's the cool thing about this one. I can send it to anybody else as they email or attachment and they can sustain that to their tenant and then it's gonna work. Hopefully, if I didn't do any mistakes well, we test it out, so it should be working fine.

A

So, let's actually double check that everything is working. uh I'm gonna open up my file explorer in that folder and I'm going to go to sharepoint folder, I'm going to go to the solution, folder and then super super small there. We can see an sppkt file which says the sharepoint packaging file. It's actually safe file, but it's it's renamed to be a with a fancy uh extension. It sounds cooler than a zip file right now.

A

What we're going to do is we're going to go to the app catalog it's much cooler and we're going to go to our app catalog and again a bit confusing. We are doing a vivo connection, extensibility. We need to install that to the sharepoint app catalog. Potentially this is going to be all renamed in the future as well.

A

We'll see I'm going to install the sppkkg file.catalog, it's going to tell me that hey there's the package, this is going to be hosted automatically from sharepoint online, so the hosting is automatic for sharepoint framework components, which is really the key benefit of this implementation, and then I'm going to say, deploy and that's going to then deploy that to be available to get installed on a site level. Cool brackets. Is there looking pretty promising, but let's go and check it out and test it out in the site.

A

So let me go to the home side again. Our objective was to put it in dashboard, so I'm going to go in the gear whenever the gear loads. There we go so I'm going to go and set up a viva connection and by the way the vivo connection configuration options is visible here after you have enabled site to be a home site, so you need to define the site to be a home site and after that there might be a delay, a small delay on there.

A

I think the documentation says up to 24 hours, delay, which is pretty horrifying, but I think it was 30 minutes, at least for me, to get this link visible. There's this time it shows behind the scenes running and then, after that you can get to the viva connection and I can see view dashboard and then we can start designing of the experiences for our tenant and this talent will be relatively simple. So we're going to edit the dashboard we're going to add a card, and I think it was important.

A

Correct. Oh, but I didn't install that just you know, following up on the guidance.

B

Debugging solution.

A

Yeah, it's never.

B

Good, it would help.

A

If you read the manual, so we need to install that to the side, so we haven't installed the solution to the site, so it's not yet available in the site. So what I'm going to do is then I'm going to go to the site. Contents install an app, and we can see that from my organization.

A

We have that available. So this is the ace client side solution. I'm going to add that one to my site there we go. It has been added to the site in the site, content page, let's go and check it out, it's available getting installed and there we go. That's now available. I already had the custom web part here available as well and just to demonstrate that you can customize the welcome page. So now, let's do this one more time. So that's the custom web part.

A

Let me go whenever the gear is coming back, one two: three: there we go and set up fifa connection, fiba dashboard, and now, if I edit this, if you go here and do it again important well, we can see it already over there. There we go important announcement and when I click it, it works so there's the card, and now I can do re-publish and then we're going to test it out in a mobile as well. And basically, if I now click this one, I will be redirected to the news article.

A

So that's called that works now. If I go to the home of the site, uh we can. We should be able to see relatively soon, there's a small delay again on the caching and that we can see that the dashboard is now updated. So we can see the card over there. If I go to microsoft themes in the mobile in this case also in a mobile site, let's actually do a refresh here.

A

We can say that the dashboard is updated as well, so we design a new version of the dashboard and now the exciting part also is that if I go into, let me actually close up.

A

So here right now we are copying and reloading the whole android sdk or android experience, and I restarted the actual composer behavior here and then and we do see there we go so we should see and we do see the configurable options. So basically there's the update available in the ux.

A

So now that we have it updated and then, when I click this one, I will be redirected to the actual news article. In that context, and of course potentially, you could actually expose the all of the details.

A

What we're going to say here in the quick view in this uh in this card so basically having this is the card view and then having a quick view for the card, which would be actually showing the details of that card and of that experience which we have in here, but again keeping simple things simple uh within the mobile within this learn module and we didn't do that for the experience, but should be good, um and that is absolutely an option. And this this is how we got the android emulator.

A

Finally, updated a bit a strange uh experience still on the courser, but should be good to go and we can say the same card natively rendered in a native format in an android native way in here as well, which is pretty cool. And then this is the vivier already getting opened to get in inside of the actual application, which is this case, the sharepoint, let's close up uh for today from a timing perspective, uh we are heating on the hour as well and we'll certainly provide more guidance and information related on the android testing.