Microsoft 365 Community Column and view formatting tips, 28 Apr 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: List formatting magic - Discussion board formatting

Description

In this 17-minute developer focused demo, André Lage extends existing Kanban Board card view and renders Adaptive Cards in SharePoint, Teams and Planner. Use JSON formatting to add 3 new features to cards - flags, move to top, and expand/collapse. Arrange list data as cards in form of a Kanban board. Manage cards with filtering, menu options, bots, mail forwarding rules, Power Automate flows, use conditional formatting, collect comments, add/delete, move to next stage, and mark as complete. Exemplifies the build once, render anywhere approach. This PnP Community demo is taken from the General Microsoft 365 Developer community call recorded on April 28, 2022.

Demo Presenter
• André Lage (Datalynx AG) | @aaclage

Supporting materials
• Sample - Board tag format | https://github.com/pnp/List-Formatting/tree/master/view-samples/board-tag-format
• Samples - List Formatting Samples | aka.ms/list-formatting

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/m365pnp

A

So uh there was one update so that it today is not regarded in the discussion board but will be about the customization on the board for martin. So let me only present myself and my name is andrey lash. I work in a swiss company called data links, and these are my my social information itself and what is the idea here so here I wanted to to be to start to use the boardview that we have it on microsoft, leach and to to use what is already out there. So it's using as the normal consultant approach.

A

uh I try to try to answer the the five main question: what when why and who and when which why we should use it, and for that I, I picked the current part view and I try to you see what is out there and also on the current application from microsoft 365 and see. How can we improve the ability of the board with moving the the broadcast between both one place and another? So what was identified?

A

I identified that planner is a very good example how we can use it, and I wanted to implement it on the list to improve my improve the solution that I, that is there, but to respond my own needs. I'm not saying this is a migration for from the planet at least, but I want to have it the same capabilities plus some additional features itself, so you use the planner as well after my base of work.

A

Another thing that I'm going to do is to include also on the top of this, of the the board formatting three different features that is called the flat card, the move to the top and expand and collapse the cards and then to complement everything, because we it's not only to make the customization of the board.

A

Basically what the output will be, definitely uh transparent to and visualized by, the microsoft list, rules, sharepoint, page filter web page and, of course, the implementation with power automate with adapter tip patch, and you can see it on microsoft teams. The normal lifecycle is served for every time that we need to create a formatting. It's not only create chat and right away. You need to prepare your work, prepare what you want to achieve and what prepare the context that you want to work itself and for that.

A

This is the full process of the boarding task that I want to improve, and I wanted to pick and work itself as you see here, so they this will be a redesign of the full, the full card, using a lot of the feature that I identify on the planner itself and based on the different conditions I will be. uh There will be this option here that will pop up the car that we have a better description of visualization of this information.

A

So while we have two type of cars, the cars for realization and to edit and to display the information and also the the board card, that will be able to move to move between our board, and this will generate the flows that will create the a post in our channel using an adaptative cars and also the creation of the rules.

A

So uh as this as defined before so I went to the planner identify what is there? What is really good- and I say okay, this is something that can I improve. I can actually use it and adapt to my own needs on the list. Formatting one is the board itself and the second is the card, the card itself uh that I want to display every time I want to visualize and define so what I have done.

A

I pick the the meta information and then I try to make a mapping how this will represent itself on the on the list itself. So, as you can see all those from the left side, this is the cards that is coming from the planner, and I make a mapping from the right side how the card will be displayed on the list.

A

Formatting itself, we always talking on the board, and this is what you're going to see on the board when you're going to move it to the cards and the same will be directly on the planner word card. This is what existed there and how I adapt it and create some additional features that I will describe it later on. So what is what and where is it going to be positioned on the new board card that I customize saying this?

A

uh What is the features that I additional features that, for example, the the the planner has it so the ability to to move the volt car to up and down for since the which format is a little more limited? The only option that I prove it is. I pick the card and I move it to the top itself, and for this I use the current capability from the views from the list, and I change the order.

A

I have a support, a support field that is called order and in these fields I save the date that the date and because the date can be transformed to numbers and all is going to be the higher number. So basically, what he's going to do, since I'm ordering the column order by ascending he's only the moment that the final stop he's going to move the card to the top itself, based on the sorting that I define it on the on the field.

A

As you can see, it will be a menu and the option will appear there. The same another option that I think is really useful is the ability on the card on the port card to expand and collapse, because we have cards that can have multiple, multiple content and will be hard to visualize in such a small page itself. So for this I identify that expand and collapse. The card is very important and I implemented because this will be useful, useful to optimize our space and we can create multiple tasks that can be easily identified.

A

I will also show the example, and the third one is that I identify from another board outside the microsoft world is the ability to create the facts, and this is more for visual representation, pretty simple. If we have autocad with the same color, people can see okay. That is something important, but if you have a caller, people will definitely will make focus and know that some action needs to be taken there, and this is why I defined this old ability to create these flags itself. So, let's go to the demo.

A

I already have a list, and here I already prepared some content with them with some of the fields that I took it before and already pre-prepared itself. So what is normal? Out-Of-The-Box behavior?

A

If we go to out of the box out of the box board, and then I choose, I will filter by the categories and I will create and what will happen here here, we're going to see the out of the box cars but, as you can see, if there is something that doesn't match, we need something else, because we need something that is really positive itself. Even it is very useful and and really great with using the ability and to customize the cards.

A

I want to do something a little better, and for that I I create this customization that I'm just going to access here and if you go to the list formatting, there is already one example that you can already pick and I'm going to copy the the the content that we have it there. So just one thing: let's see exactly and then I'm going to display and as you can see here, all the cards was already transformed, based on the the fields that was talked before and also with the ability to make some editions.

A

So we have the description. We have the title, and here is the car that we was talking about and it will take some actions associated here. As you can see in a very in a straightforward and simple way, using the sheet repository, you can already customize super fast just going to change for my already customized, because there are some custom features that I want to specifically show it. It is the ability for example, as you said it like, like, I said it before- to expand and collapse itself.

A

Another thing that we can also define is the assignment of the user. I have one user and I will include another one. I will put again myself and, for example, for this task. I can include some additional uh assignee person that he needs to take care, for example, ability to define tags and, for example, I have a tag with six, because I can have it more than one and can be visualized directly there.

A

As you can see you can edit it directly from there at any moment we can define the progress and we can also define what is the importance of this task itself. If I define important, this can be a good candidate that we can use it for or our rules. We can create a very simple rule. When is the change on the priority.

A

For urgent, I wanted to send the email to all the assignee and right away. We already create a rule that will be automatically communicate for the audience or the niska is the uh the assignees that we want to make some actions itself and any moment, as you can see here, we have a start date and an end date for here we can also at any moment- and here is also a formatting- that we can compress the date. I rearrange them that can be easily visualized, but also easy to be editable and the user friendly itself.

A

Another option that I can I was included was the menu options. I think, as you can see here, there are two different type of menu options, one ability to edit the flags like I said before, to copy the link to move to the top minimize, but I also have the ability like we have it, for example in planner, to move the the cards to the different areas. Let's go for a very simple example: I click it here and he will move it to the right area. The same I can do it with with a hand.

A

Go back and go forward and of course, we can define different rules for each one of these areas itself. Another thing that is also that was also included here is the ability to at any moment to know. If someone creates some comments or not regarding uh to be visualized directly on the card hi, this is intro, so I will go here and if we go to the area, we see that it's already one comment itself and any moment we're going to see all the actions that is associated. So we have it here.

A

So another thing that we can say like I said: the ability to include the flag and the flag will give us the visual representation. Of course, if we don't want to see it right away, we can always minimize, as you can see, we can earn a lot of space. Remember what I said regarding the moving of the the boards.

A

We are limited with this, so I will show how we can do the action, so I will click on the option move to the top and then, when I go to the left, you're going to see that he already changed the order when I return it back, he move it to the to the top. The only the only issue here is uh this is not a synchronous and will not update right away how this was then.

A

So if we go to the list settings what the only thing that was done, we create a support column that is called order. We went to the, for example, for the task taskbox box, and what what I do is just change the order itself and then we'll change the the order, how we're going to see the the field. So it's going to move to the top. Now I want to move the who to the top.

A

I can do the same, I'm just going to save it here and the next time I make an update so just going to move to the top.

A

If everything is okay,.

A

Okay and then the card went to the top itself, and this is a very simple option.

A

Another thing that we can also do is, for example, if we want to cancel a card automatically will be scratch and, as you can see, we can also define other type of rules, for example, for this card here, so just going to close it, I'm going to expand it and I'm going to access to the to the our code and what I want to do so we're just going to minimize this one here and I want to go to the completed.

A

So what I want to do is to create a very simple action, so I go here category okay, I have it here that will be changed to the to the rule. So what I want to do- and I hope everything will be run- fine, so expand, and what I want to do is the condition that is, if expand.

A

Equal false then becomes true or false, so we're just going to implement, and if I create something like this, as you can see, the the card was expanded automatically when we say it's completed, we'll minimize. This will be interesting if we have multiple tasks and we wanted to have a better visualization itself and the same way we have the cars we the time timeline point of view we can also have- and this is also available- a task that we have like a normal cart and the menu will appear on the on the top left.

A

Of course, we also have the ability to edit properties and all the other options that was available before another thing, like I told it before the same way, we have the card here. There is also one additional card that you can have the visualization. So what is the idea? The same card that we use to visualize is the same that we use it for editing and to visualize on more detail and, of course we can do all the changes associated there, and for this we have.

A

We came with integration with the with our microsoft sharepoint page, so this is my current sharepoint page, where I have all the outputs from the different port itself and of course I can make a filter, and this will make some actions associated. As you see here, all the same menus options that we have there will be also be able to have it here and if I start to move so the the category will be automatically updated and also the will happen with our filter.

A

So we can have it the menus, the filter, the mapping and all these capabilities itself in a very straightforward approach that we can have it uh everything in the point of center life and then comes to our last action itself. The moment I define the card to the as completed. I want that to do some actions associated here and for that I have here uh one adaptative card. So the moment the card is completed, I will receive from the flows and cards that will be pre-filled itself where this can be defined. It is my flow.

A

This is my condition, and this is the card itself. What I have done, I prepare my card with the image with the metadata so that it needs to be received, and then I just included on my solution itself, and then I have the visualization on an integration with the teams.

A

So this is the full cycle with with the boarding how we can make it in a way that is not only for the visualization, but also how you can use it and to optimize it in a way that can be more adaptative for your own needs itself, just going to access it here and and like this, and then we can also use it for on our own different needs and also with the different capabilities itself, and this is something that we can already start to make some uh actions associated.

A

So this is a very simple example with a full process and with a full with a lot of with the full customization of your port, and the key here is using your consultant capabilities.

A

The formatting always has to respond to business needs, and these examples, plus the sub formatting like the date compress, can also be accessed to your list. Formatting- and I hope this temple can help you to prepare your your task and your solutions that you can easily notify from outside, and you can use the implemented for your own business needs and in better and improve it and using the different capabilities from microsoft. 365 and that's it everything from my site, save it fast to you.

B

Excellent andre: this is amazing and yeah just for those watching at home. This was a sharepoint list, so the uh the the maturity that list formatting has brought forward is amazing and what you're all doing with it is fantastic and you can have it all for the low low price of free by the way it's all in the samples andre has uploaded it so definitely take advantage. So thank you again, great stuff.