Microsoft 365 Community Community Demos, 25 Jan 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Viva Connections – Adaptive Card Extension for Microsoft Planner Tasks

Description

In this 12-minute developer-focused demo, Ejaz Hussain’s ACE sample shows all Microsoft Planner tasks (consolidated view) for logged-in user’s associated plans, deep links to specific tasks directly in Planner, and filters tasks based on selected plan. Uses aysnc dropdown property pane field to fetch current user's associated plans and Microsoft Graph to get plans and tasks. Submit action handling in ACE and Quick View, view multiple tasks within a single Adaptive Card. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on December 30, 2021.

Demo Presenter: Ejaz Hussain (Content and Cloud) | @EjazHussain_

Supporting material:
• Sample - Planner Tasks | https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/PrimaryTextCard-PlannerTasks

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

Today, I'm presenting a adaptive card extension uh about the planner tasks, so my name is e charles. I work for a company called content cloud and here's my twitch friend, my personal blog url.

A

uh So the main idea basically is to uh about this uh demo is to show all the planner tasks from all user associated panel plan.

A

So, for example, you you could be part of different plans or on the panel plan, so it could be a different you part of working on a different teams groups and you, you know you're part of different panel plans, so you want to have some consolidated view of all your plans in one place, and this is where it's basically, this idea came from so and also ability to view your task, a single task, specific task and see uh whether is it like when is started when it's ending and some you know description or etc.

A

Some some other fields, if you wanted to display there uh and then ability to filter task as well, based on the selected plans, and so this is where so, you have a list of, let's suppose, you're part of 10 plants, and then you use, you can see all of them and but you can also filter based on where you want, which which plant you wanted to bring tasks from say and then. uh So.

A

What I'm kind of highlights of this demo is I'm using primary text template I'm using microsoft graph to get all my planner tasks, I'm using async drop down property pane to display all my plans, which I'm associated uh and I'll, show you in a second and a demo and then uh based on which our tar plans all and the tasks you click on. You go into detail, and then you also ability to navigate into the planner of that specific task as well, and so here is a repo. Where is this?

A

The sample code is available, so if you go back to the demo um so so this is. Where is I'm in the preview mode in a mobile view? So here you could see is giving I'm basically displaying again showing all of my uh tasks from all plans at the moment. That's where you can see all here and at the moment I have a one upcoming task and six overdue tasks, because we have like a limitation.

A

We only have like two rules to display here, uh uh you know might be some other uh way to add some more data here, but I was able to get only two rows to fill in. So that's why I was like upcoming only and would you task so if I click on uh on on the actual card, it will give me some summary of different types of tasks like upcoming overdue tasks in progress and pending and completed tasks. So here from you can basically navigate to individual types of tasks.

A

Let's suppose you're going to see- and you can see this this turning into red color when is overdue, so this is also part of adaptive card. uh So, if you click on the view of the overdue task and what I'm bringing here is a name of the task uh which plan this is belong to. What's the status uh on that task and the due date, and if the due date is passed, uh then it will turn into red and then some description and then uh and then another is you have a list of tasks?

A

Basically, so it's a single adaptive card where I'm I'm basically looping through all the due tasks in here and then, if you click on the view planner here, it will open up this particular task right in the planner and then you can have further details there as well.

A

Now, so that's the so you can go back for clicking here. You can. You know vice versa. You can see your other tasks here as well, etc, and you navigate to uh you know you never get into your planner as well directly from here now. If I go uh to the desktop mode and close the preview now, if I go and select this and click on go to the properties, if you can see here at the moment is all is bringing tasks from all of them, but this is where I'm.

A

This is the select planner planner plan. You can select specific plan here so might be. The company tools is the one you wanted to bring task from. So you can see is automatically replace the company tools and also only show you the task uh which we wanted to show them. So if I, and also vice versa, so if you go to that, you know the next one.

A

So you can see this you, you basically able to see only the tasks which are from the company tools. So that's also replicated here as well, so that that and you you can you can go into further detail into uh each of them so yeah that was the demo and now, if we go back to the code, uh and how did I manage to do that?

A

um So if I start from here here to my the main, uh the plan task adaptive card extension.ts file, uh that's the main file when we started and the first four is I'm um I'm basically initializing which main card I'm going to use. So I've got planet main card view. So I I mean this is like a more of a using those cards where there's a main card view or whether it's a quick view, so I'm using those as a naming convention, so that is easy to use and navigate to in the code.

A

So I'm using two quick views and one card view here so in initialization on init function, I'm calling my all the by default is getting all plans, which is my graph service. So I'm getting all the plans when it's first load and then I have a a property pane which I'm using a custo, a property paint async dropdown. So this is where basically, I'm fetching so based on you change your selected plan. You go and get it's going to go and get the plans for you and display you in there.

A

So right at this point, this is what we we get and then what we do is and the default one is we're. Using um the primary one render card is a main card view. So if I go to the main card view one here so here we have if the due task is less than zero.

A

For some reason something goes wrong. It will show you this task. It says it's still: loading planet, hours, etc. Some images with svg. uh But if you know, if we have some tasks from the uh loaded from the graph, then you will see some upcoming and overdue tasks and vice versa.

A

So this is the two option you saw uh early on uh when the page loaded so now now, when we click on them, because we have a button here so when we click on them, what I'm doing is I'm calling planner tasks types quickly, so there is going to show us the types of so the reason why I was mentioning about the naming convention so easy for me now here is to looking at this.

A

I can easily go to the task types view here so and I can go to the class actual, and here I'm building um the types I have so this could be some dynamic, but at the moment, for the sake of demo, I've just added like a five or six types of uh a task. I wanted to see and use the different icons based on the type of task they are now.

A

It the if you see the task, I'm based on the I'm, getting the count. So I already have a task, because when we uh the good thing with this, is we because once we have once loaded the data is state is available across all of these classes? So I'm using the same task, which has been populated initially on first load. So here I'm basically filtering based on uh the number of cone based on the types we are in so and on click.

A

So what I'm doing is I'm calling? uh So if I open up quickly the json adaptive card, so I'm passing this array uh task types here into data and I'm basically doing displaying the icon and then the type the date the due date and uh and and also the action as well. So the if you see here I'm using tetris text rich text block here, for uh I think there was a. I was only able to use this text run to be able to get some colors applied into the color.

A

I think there was a bug initially, so I think they might have been fixed so but yeah I've used this one to apply some coloring based on the logic based on the count. uh But then here is the main thing is where we are passing in the action the id basically the id based on when they click they'll, be passing. This is id and this guy will come here, and this is the id basically we're setting the selector type.

A

Now, when we go to the quick view- and this is the state is, there is a selected type and now I can go to list quick way, which will be this list view, and there is the based on the selected state on the previous uh class. I can then filter task based on where uh you know the selected, the due overdue in progress, etc, and then I'm going to display pass this data to the list view my other adaptive card and uh if you can see here it's basically, this is the task.

A

I'm passing this data and I'm building this all items uh underneath in the in the loop. Basically, so I have a column set. uh um Two three four columns there, so I have a four column set and because I think for one for uh title- uh and this is the title- another one is the the plan and then the status and the due date etc as well. So yes, this is the when you can see here.

A

uh So this is the types and then, when you go inside um that's showing here- and this is where he's building this template from there.

A

Yeah, so apart from that, so if you want to go to uh controls, so you would see there's a lot of this nice documentation on the microsoft document. uh Documents about the property paint async, so I'll, follow that, and so it's just a property. Async dropdown called all the kodi's here as well, which we I'm calling from my property pane, and here is my graph service, which is very simple, simple one, I'm not using the user profile. So I'm using get plan.

A

Planner plans get planner tasks, get all tasks get plan info, and this is the get query which I'm you know, building a query and passing to this this guy and it's basically returning me the data. So yeah. That's! That's all me. That's all from me. If you guys have any question.

B

Awesome ejs very, very cool. It's really really encouraging and to see all the different use cases that the adaptive cards are getting uh utilized for some creative stuff so well done there. The link is in the chat for those that would like to check it out. It's also in our aces repository, so you can always visit there thanks again, jess great job. Thank you again for sharing.