Microsoft 365 Community Community Demos, 22 Feb 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: When to build Viva Connections Adaptive Card Extensions

Description

In this 12-minute developer focused demo – Patrick Rodgers addresses the question: Do I build a web part or an ACE? Consider Lightweight (mobile first), Immediate (single idea, actionable) and Personal (provide direct value to user). Link out to richer experiences – Teams apps, SharePoint page, SaaS solutions. ACE use cases include – to solicit feedback, track task status, check paystub, clock in/out, to book travel... ACEs can be location based, allow audience targeting, and deliver an organization’s mobile portal experience. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on January 25, 2022.

Demo Presenter: Patrick Rodgers (Microsoft) | @mediocrebowler

Supporting materials:
• PnP JS Library - @pnp/odata/caching | https://pnp.github.io/pnpjs/odata/caching/
• Repo - SharePoint Framework Reference Samples | https://github.com/pnp/spfx-reference-scenarios
• Demo - Deep dive on Viva Connections Adaptive Card Extension development – State management – Patrick Rodgers (Microsoft) | @mediocrebowler – 18 January 2022

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

Thanks everybody for having me back again this week last week I was joined the call to talk a little bit about aces and ace development specifically around state, and we got some feedback coming out of that call. um People had a little a little bit more. uh You know foundational questions about when, when do you build an ace, when's, an ace appropriate?

A

Why would I use an ace versus a web part, and things like that, so we thought it would make sense to uh cover over here on uh the call why and when to build aces and to me aces are all about being lightweight immediate and personal, and what's that mean so, I'm gonna click over I've only got a few thousand slides to go through today. So this should be pretty quick, but what we've got here is an example dashboard.

A

This is just a mock-up, but gives you an idea of kind of the flavor that aces can take, and so thinking about those concepts of lightweight, immediate and personal. When you look at this thinking about lightweight, you should think about mobile. First aces are really kind of a mobile first mindset. You want to make sure that you're not writing, tons and tons and tons of code right if you're, writing 10 000 lines of code in an ace.

A

You might want to rethink that refactor that a little bit everyone's busy right everybody's on the go and covid and the pandemic and everything else and so aces are a really great way to connect to frontline workers, but also all workers, so folks everywhere throughout your company. But you want to do so in a way that keeps things sort of lightweight and clean and really helps to reduce that cognitive overhead of understanding. What you need to do, so these things should have sort of a single idea within each ace.

A

uh That's the immediate part of this um you've got a call to action. The ace does something for you helps you complete something, so you can see looking at this dashboard, just I'll call it a couple quick examples.

A

So a health check completing uh before entering facilities, that's something we've probably all dealt with a little bit with covid tracking your time off uh tracking stock prices on things learning, so a big part of viva all up and and part of organizational outreach, especially as we're all working remote is learning and keeping uh things up to date. So if I glance at my dashboard- and I see- I have a new learning topic- that's available- you can think of these aces a little bit for those of you that might remember. Windows phone live tiles.

A

You can update these dynamically to show. I've got two pending lessons. Maybe three pending lessons as I complete them. That number goes down. Maybe it says: hey you're, all up to date on your learning and all your training and as well. This immediate is these aces should should perform quickly. So you would build an ace in a case where you've got. uh You know a quick action you want someone to complete.

A

I want to view a stock price, that's a pretty clear use case that fits very well into an ace and for those cases where you need a richer experience that doesn't perhaps fit necessarily into that dashboard mindset. You really want to look about linking out to those richer experiences. Those richer experiences can be uh teams applications.

A

uh They could be a sharepoint uh page that you put your other web parts onto and build a dashboard for folks to land on uh or it could be linking out to your full sas solution, so uh ace aces. In the case, I really wanted to title this uh presentation. Ace is on the case after a paw patrol, because I've been watching a lot of paw patrol recently, um but so linking out to these richer experiences helps keep the focus in the ace, immediate and actionable and lightweight so think about that as well.

A

uh Aces provide the quick view capability, I'm going to click over here to uh slide two of 3000, and uh you can see the animation there on the left is showing you the use of this quick view, and so you have control again. We talked about this last week. We've talked about this before and the quick views uh they're defined with adaptive cards, so you have control over how that renders, but uh you should still keep that focused.

A

You could put a lot of information there, but again, you're kind of getting outside of where aces really shine and aces really provide a lot of value to your users is giving them those quick hits of action. For example, here's a daily health check is this example. Couple of clicks and you're done right. Checking a stock price might be a single click. um You know getting some learning, you might click.

A

You know view view my upcoming lessons, and that would give you a quick view list of all your lessons and you could link out then to the learning application.

A

So this immediate immediacy of these aces is all about building that engagement. So if you've got rabbits on the front lines, fighting these these horrible horses, uh you want to engage them quickly. They've got a lot on their mind, they're doing a lot every day, their context, switching constantly so make these things immediate uh in how users interact with them.

A

Give them task-based information-based uh examples of what you want them to do, or paths to follow through there and finally, personal personal is all about aces need to have value to the user direct value to the user. Why is this ace taking up space on my dashboard? Why have you taken up real estate on my mobile device right? That should have a clear answer. You should understand why you're presenting uh you know this ace to the user and what you expect them to do with it.

A

Aces allow audience targeting so very much encourage you to build multiple aces with multiple audiences in mind, right. uh An ace for me uh as a as a tech developer might not be the same as an ace for somebody uh that works uh with customers in a store, for example, but you can have those aces live side by side on the dashboard and targeted to those users as appropriate with audience targeting.

A

So it's really about connecting with workers on what gives them value and empowering them to perform that action right, whether it's log time off do a covet check in or whatever your use case might be. It's nice and small and focused and cohesive as to what you're doing and if you need to present more information, for you know an example would be like a large table of data or you need to show them an interactive experience uh that has lots of parts to it or some kind of a form builder experience right.

A

That's something that really uh oh ace, I'm really sorry adaptive card extension, great question um and pour on me for not covering that right up front, so adaptive card extension, part of sharepoint framework and uh sorry for not covering that up front, um but so these aces really help you build out these experiences and give value to your users so clicking through uh just one final slide here of the 3000.

A

So this shows you kind of how these aces fit in you've got sort of the mobile experience there on the right and then you've got the dashboard experience you might see in your browser inside sharepoint there. So these things are going to be exposed in multiple places, they're also exposed, potentially in teams potentially other places across your organization. You'll see these aces start to show up and really provide you uh launching into your larger applications.

A

So I'll finish up here, just want to list out a couple of common scenarios that we've seen as uh we've worked with isvs and our internal partners to build out these aces. But uh it's a great way to give uh your folks in your company or your users a way to provide feedback uh about things in the company uh or things about your product, for example, uh reviewing tasks that might be upcoming for them.

A

Perhaps you have a task, scheduling, system or some type of uh an ado or there's a lot of different uh kind of systems like that out in the world uh for tracking you know work you could link up an ace to that work, help developers or help anybody uh track. The work they've got going on stuff related to human resources, so we all want to check our pay stubs right.

A

We all want to you know, clock in and clock out of our work, if that's part of your job, that's something that can very easily be enabled through an ace and makes a lot of sense in that context, um and then you know, there's other cases where we've seen folks successfully link out to sort of mentoring, applications find a mentor connect with a mentor right, and that might be a quick experience in the ace linking out again to a larger application um or reaching out you know for help from a team right.

A

You might have a way to sort of ask your organization uh for new hires right. You could have a question for folks um around. You know a way for new hires to ask the organization hey. I need to book travel. How do I do that right or you could have an ace that helps folks book travel? That's another great example: we've seen a lot of there, so just to sum up uh aces when you think about building aces.

A

These adaptive card extensions, where they fit in to your sort of overall development strategy, really think about lightweight, immediate and personal think about mobile. First, how is this adding direct value to a user using this thing in a mobile context or in a dashboard context?

A

What does it make sense to put in the ace again thinking about lightweight keeping it simple and user focused and task focused? What do you want them to achieve by using your ace by using your adaptive card extension and then finally, personal make it have value to them? Make it make sense to them that it's on the dashboard of their aces versus perhaps on a larger company dashboard or located uh in a sharepoint site, a little bit deeper with a little bit more context or located in a team's application?

A

That's giving them a much richer experience than you can put into adaptive card extension, but that adaptive card extension can be the launching point to give folks that larger experience. So that's kind of how I think about aces open to uh folks having any questions about that or how we can expand on that topic.

B

Patrick, don't don't stop sharing yet uh not a few things, yes, just in time, so really good stuff and and it's good to have those business scenarios to block down, and- and it's really really important to to you, like you said understand that this is mobile first, so it's really giving you the the mobile portal building that mobile portal portal experience for your company based on your company needs and then, if you think about the card, the card is that the ace or what you're saying in here? You click it.

B

You can have a quick here. Why is that called a quick view? Well, it's called a quick view because it's a quick view on the data or to the application where you can still move into. So you basically have a quick view on, let's say the business data uh or quick view on the things. What you need to approve.

B

That's a manager or a quick view on whatever the information is, what we're actually going to use and then you can open up the actual team's application if the capabilities which are intended to do are not available or other in the basic actions which would expose the nas, but really cool scenarios and and one thing to call out, also actually- which I think we talked about more in the ace development year ago.

B

But we haven't talked about it yet that much because it wasn't yet bought at 1.13 sharepoint framework release, but it's coming soon, which is the the location based ace, is so basically location based because your mobile device obviously has a location information. So then you can imagine that, based on your location, you are in a warehouse.

B

You would see a separate set of faces and functionalities, then, as you're, seeing when you are at the office and or let's say a typical launch menu or whatever so again, because it's a mobile first based on location, we can actually adjust the behavior as we move along and implement these scenarios so really cool stuff. Thank you, patrick on this one. I just wanted to share that. The location information is pretty soon available in the ace development as well, so makes sense.

A

Right on thanks for having me thanks, patrick.