Microsoft 365 Community Adaptive Cards, 3 Dec 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Viva Connections + Adaptive Cards

Description

During this 13-minute Developer and Citizen Developer-focused demo, Microsoft presenters deliver an overview of Viva Connections Dashboard, elements of Dashboard, card layouts, information flow, rendering differences between web and mobile. Learn about Viva Connections’ 3 pillars – Dashboard, Applications and Feeds. Deep dive into Authoring a Quick View card in both Dashboard and in Adaptive Cards Designer – note (consistency) the same JSON, renders similar card, due to same Fluent UI/React behind scenes. Step through 6 different Quick View card layouts. This demo is taken from the Adaptive Cards community call – November 2021, recorded on November 11, 2021.

Demo Presenters:
• Emily Lynam (Microsoft)
• Max Kulakov (Microsoft)
• Siddharth Gulati (Microsoft)

Supporting materials:
• Blog - Announcing Adaptive Cards 1.5 | https://adaptivecards.io/blog/
• Blog - Guidance on implementing partner offerings for Viva Connections with ACEs and custom APIs | https://devblogs.microsoft.com/microsoft365dev/guidance-on-implementing-partner-offerings-for-viva-connections-with-aces-and-custom-apis/
• Blog - Viva Connections mobile and new partner integrations are now generally available | https://techcommunity.microsoft.com/t5/microsoft-viva-blog/viva-connections-mobile-and-new-partner-integrations-are-now/ba-p/2932217

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

Let's start with a quick recap: uh I wanted to give a quick recap on beaver connections and how the adaptive cards framework plays a big role in the extensibility world of viva connections, for both first party and third party components and how the developers can use that to extend viva connections. Experience in the dashboard viva connections has three main pillars.

A

It has dashboard where the company author can compose card and applications that different types of users, such as front line workers or other audiences, can use to perform quick task actions that are important for their day-to-day work. In addition to, in addition to the dashboard, we have the feed that gives the ability to have curated aggregation of the information across your organization and the resources which gives you the ability to access some of the key links that are available in your company.

A

We can surface the dashboard in the mobile and rich clients by using the power of sharepoint modern pages and publishing, and we also provide an authoring experience in sharepoint as well, which gives the ability to the content creators to build the dashboard for the entire organization.

A

From the dashboard standpoint, you are able to create cards and provide functionalities and capabilities to the end user, so that the end user can click on the cards and access, either pages or other kinds of interactive functionalities that the user can operate within the dashboard itself.

A

You can see that we can provide capabilities where the cards themselves can be dynamic so that they can respond to some of the actions that the end user performs. For example, we have a connector card and connector is a functionality that we have at microsoft book shuttle that can help us move from across buildings within our campus and you set the connector and when the connector is ready, the card automatically changes without any end user intervention to notify them that the shuttle is ready now in terms of the now just quickly go over the flow.

A

So in terms of the components of the dashboard we have the company name, the nav bar the company logo and the different types of card layout. So here you have a medium card and a large card over here and the company name and logo can be changed by the author or the admin.

A

We rely on teams, admin experience and the team's tenant admin capabilities to change this information. Since weber connections is a team's app.

A

Now, let's quickly talk about the overall flow, you have the card picker experience which lets you add cards inside the dashboard. We can configure the cards and once it is done, the card is available.

A

The card may or may not have an immersive experience, which we call the quick view and then, from the quick view you may or may not want to be able to access an external app that can be an external page in sharepoint or an external link for an application in microsoft team.

A

Now emily will tell you more about what is new in the viva connection, space.

B

Yes, thank you sid. um He gave you a little bit of an overview of the quick view there and that's what we're going to be focusing on from here on out. um So until recently, aviva connections, quickview card developer did not have a convenient way of developing cards. With the predictable visual outcome, um there was no way to kind of build the template out with all these card elements and then see how they would look and view the connections.

B

So if you use one of the existing post apps that you can kind of see here in the gif, maybe the bot framework, you would know the basic layout and functionality of your quickview card, but do not be able to confirm the details of how the card would render so to address this issue and provide a more accurate and robust authoring experience.

B

We brought in a dedicated viva connections host configuration with custom styling, and so that's what you're, seeing here in the gif, you can go down and select viva connections, preview um from the select host drop down and describe your content as a simple json object as usual.

B

This content can then be rendered natively inside a host app and automatically adapt to the look of feel of viva connections. So as part of this visual alignment effort between viva and the adaptive card designer, we did a full design audit of all the card elements available in the adaptive card designer. So everything you see there in the card elements list on the left, from containers to inputs, to text blocks and more and we applied the fluent design styles to properties like spacing: color, fonts, rounded corners and updated.

B

All of the input controls that you see there to.

C

B

Styled just like they are in fluent ui react so that they will be cohesive with the design system in teams and in sharepoint, almost all of the same style updates. We have done for the viva connections product. You will also see in the adaptive card designer viva connections postdoc.

B

um So now any quick view our designer will automatically adapt to the look and feel of viva connections. um So you can kind of see the outcome of your designs instantaneously.

B

Next sid will show you what this full workflow looks like from the adaptive card. Template design that you're seeing here to authoring a quick view in sharepoints.

A

Yeah, so I'm just gonna play my demo.

D

In the first part of the demo, I'll be showing you how the card you design in adaptive box designer will look when it is compared to the same card in the viva connections. Dashboard for this demo I'll be creating a card for one of our product following so first I'll be going to adaptive card designer site, I'll uh I'll, select, weaver connections preview as my host application next I'll be replacing the default uh template json with the json that we have for our hololens card.

D

And click on the preview mode to see how it looks as as you can see that the moment I introduced the the json, it immediately got printed here you can scroll to see how your cart looks and if you want, you can make changes from here.

D

Now, I'm going to show you how you can get the same card in the weaver connections, dashboard edit and then I'm going to edit the properties of the lens card change, the card action to show the quick view and then insert the same json that we have that we had introduced here.

D

Next, I'm gonna click preview.

D

There you go as you can see the card that got generated in the adapter card designer the weaver connections. Post application is identical to the card that we have in the connections. Dashboard.

D

With this work, you get what you see now axe will demo the different card scenarios, but one can come up. Thank you.

E

Thank you seed heart. Now, let's take a closer look at what's possible to achieve with adaptive cards. Here you can see a set of sample cards with quick views tied to the cards themselves or the action buttons. All these greek views were designed with the business scenarios in mind and to demonstrate layouts and adaptive card capabilities.

E

Adaptive card framework has a pretty basic set of building blocks. Nevertheless, you can still create pretty complex and attractive uis, and it's easy too. Even a designer like myself, can build a quick view within 30 minutes. Devs, though, can do more exciting things like using dynamic data or api.

E

This events card right here has a schedule, quick view that features animated gif text blocks.

E

Two pivots for day, one and day two schedule, column set and a registration form.

E

Next up, it's office, 365 card with top 5, frequently asked questions quick view. If you click it you'll see a pretty simple layout with an accordion list containing answers. You can collapse and expand each item.

E

Tj34 food is a common scenario across all businesses. Here we can see an example of a menu for a cafeteria stations in rotation and resident venues. It's a pretty complex layout using column sets images and text.

E

This card is different from the previous three, because it doesn't use cda to show quickly. Instead, quickly is tied to the card itself, because the card uses image layout. If we click the card, you'll see somewhat fancy layout using the timeline, dates, images and supportive text.

E

Time off time off has a pretty simple, quick view with a prominent headline image and a title also, it features current balance of sick days, pay time off and wellness also a simple form to submit your time off.

E

Inventory this card has a pretty complex, quick view that features nested containers. You can see them right here and a pretty complex column set layout below, and this concludes my overview of currently available quickview layout. I'm pretty sure that we're going to be expanding these layouts in the future and sharing them with developer community.

A

Max, do you mind telling us about the differences between the mobile and the web.

F

Yeah, thank you guys. I appreciate your support just a few words on what expectations you should have when uh seeing renderings of quick views on web and and mobile.

F

So adaptive card is not a pixel, perfect tool, and you should expect some differences between what you see on the web and what you see on the mobile as the screenshot on the right clearly demonstrates you can see like differences in faces font sizes.

F

Some of the colors can be different, but overall it should be a pretty close representation of the adaptive card that you will see in adaptive card designer across ios, android and web, and we are aware that, like there are some functional design gaps there, so we would really appreciate your help and feedback to identify those in case we missed them and feel free to use uh to send your feedback our way and we're gonna address them as soon as possible. Thank you.

C

Awesome, thank you so much for those demos. As we can see, the the chat is very excited. It looks like the adaptive cards were were really standing out for everyone, so so that's great.