Microsoft 365 Community Community Demos, 27 Jul 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Adaptive Card Extensions strategy pattern for multi-action QuickView

Description

In this 9-minute developer-focused demo, Marcin Wojciechowski relates how with complex ACE’s, handling many conditional quick view onActions (many if action.id statements), can seriously complicate code. Example scenario – exposing news items with next and previous actions, options to like and comment, and the ability to post news in a Teams channel. See how to move from many onActions to a single action with refactoring. See how actions are handled/combined by the ActionExecutor! Easily add new actions and zero impact to QuickView code. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on June 30, 2022.

Demo Presenter
• Marcin Wojciechowski (Valo) | @mgwojciech

Supporting materials
• Sample - ace-strategy-pattern | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/ace-strategy-pattern
• Wikipedia - Strategy pattern | https://wikipedia.org/wiki/Strategy_pattern

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

Hello today, I would like to talk a little bit about strategy pattern and why it can why it can be quite useful in context of adaptive current extensions before we move forward two words about myself so here here we go margin myself, I'm sharpening developer. I've been told. I can go too much into the details so or if you would need any assistance, help guidance explanations on what will happen today or previously, don't hesitate to contact me at any of my lovely socials.

A

Now, let's discuss what can be the problem, especially with complex adaptive card extensions, where you have multiple multiple actions you want to execute. In the quick view, the on action method can can grow and grow and grow to absolutely unmanageable manageable state, the more ifs or switch statement statements you have. It gets more and more difficult to actually follow the code to debug and to extend it a little bit later.

A

So you need to extend your adaptive difficulty even further and finally logic that uh residues in sharepoint framework entry point classes is difficult to isolate and test what I mean by that. If you want to unit test something that is happening either in quick view in the actual web part in extension, entry point, you will have quite a hard time. Quite it will be quite difficult to properly mock the whole life cycle. Deal with that.

A

So the best thing you can do is you can forget about testing the entry points just test everything else, and with this you will be able to test how your code integrates or interacts with user without actually needing anything to know about the quick view: how to do it. As I mentioned strategy pattern strategy pattern is something very, very beautiful. It's it is one of the corridor store the cornerstones. I believe, of these design patterns in general, originally described by gang of four. What it is strategy pattern.

A

The pattern effectively tells us we will perform some action and this is exactly what we can use both in adaptive cut extensions, but also in listview extensions and in application extensions when we want to handle specific actions from one entry point, and usually we tend to do that using if actual id equals something you don't have to do it like this. And finally, you can compose different action executors under one action executor and in that action executor decide what will happen.

A

I know it's quite difficult to follow now, but this is why we are about to hit demo time in demo time. I will first of all show you my beautiful adaptive card this adaptive card, uh as you can see on the first glance, does nothing, but when you click uh quick view, you can see the loads news or the decent news. I believe that I'm six or something like that note some news. Now we can interact with that adaptive card. You can like post. We can add comment boom comment added.

A

We can share it in teams and we can, of course, navigate between the different news. If you want to sell in teams it's not a simple action, because, firstly, we need to load available teams. We have to select the team, let's say we'll post that news in id, then we have to select invoice to channel in general and finally shell it. I hope that will work I.t general here we go.

A

We shall share the news, but, as you may imagine, the code code behind the whole, if statements can get quite difficult to follow, actually to give you some context how it originally looked like.

A

That's it we have on action and you can see action id action id if action id if action id quite a lot of different action ids. So the goal is to minimize this as much as possible.

A

First or before we go further. Let's take a look at the actual adaptive contemplates when the quickview template. When you can see that yes, we have quite a lot of actions so how to handle it.

A

This I like this, looks like something I can manage what is happening here. We have our view manager and, in our view, manager we handle action. We handle action by our actual executor. What is our action executor f12 again, so our actual executable actually combines a few other actions we we want to handle then info each checks if specific action should be handled and if so handles it, let's go a little bit deeper and consider navigation action.

A

So this is what will happen when we click previous or next and action exactly as you can see, the should handle action will return true only if the action id is next or the previous. This is exactly what we have in our template and then preview send next.

A

One more time and how will we communicate with actual adaptive card to say that? Okay, we want to change state, as you can see here in handle action. We also provide the quick, quick left, quick view reference. Thanks to that, we can actually check what is the current state. So we can decide what will be the next index of news to display and we can set the state with that. We are good to go here.

A

You can also see that we are loading comments, because if there is some comment on the news we also want to display and then again we update the state, and this is exactly what is happening for every other action.

A

I had there, the post in teams. Action is a little bit different because, as I mentioned before, hosting teams actually requires you to perform few few changes in the adaptive current state. First one is to be able to select the team. Then, based on selected team, select channel based on selected channel, then you can post the the news, and this is exactly what is happening here.

A

You have a nice isolation of what we want to do, how we want to do it, and I this I believe it looks a little bit cleaner and now for the final step, as I mentioned, if you don't know me yet from this site, I'm a sucker for unit testing and with that we can actually unit test all of our actions without ever interacting with big view itself.

A

So that's it, I believe, went through that relatively quickly. I believe there is one last slide after demo time, which is why do I like it, as I mentioned easy way to add new actions uh with zero impact on quick view code?

A

Why I consider it important the bigger adaptive card is the bigger the template is and the more difficult it will became to actually change something in quick view itself with that approach, if you have new action, you just add a new action to the template and you actually, maybe you show that annual register will implement new action like this. Yes, we'll have send news in email action handler.

A

We added just here with absolutely zero impact on our queen itself, which I believe is a little bit safer next easily isolated and testable without any need of mocking serpent dependency. I believe we cover that and handles uh related to specific business actions. So domain action like again pagination and selling, can be logically grouped together under one action handler and I believe that's it. Unless there are any any more questions, I would like to thank you very much for the opportunity to be the last speaker.

A

It was lovely and thank you very much awesome stuff. Thank you marcin for that.