Microsoft 365 Community Column and view formatting tips, 23 Jun 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: List Formatting magic - Tab and Percentage Chart

Description

In this 8-minute developer focused demo, André Lage delivers simple examples of formatting we can implement on a SharePoint page today. Create tabs with associated content. The tabs sample allows you to add an icon or url to image displayed on each Tab. The percentage chart sample displays formatted chart row based on icon/emoji/svg and associated calculated numbers. Add new items to list in Property Pane on page. Edit dates and values alternatively on page or in list. This PnP Community demo is taken from the Microsoft 365 & Power Platform Development Community call recorded on June 23, 2022.

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

Supporting materials
• Repo - SharePoint List Formatting Samples | https://github.com/pnp/List-Formatting
• Feedback - Microsoft Lists | aka.ms/Feedback/Lists
• Repo - tabs format | https://github.com/pnp/List-Formatting/tree/master/view-samples/tabs
• Repo - Percent chart format | https://github.com/pnp/List-Formatting/tree/master/view-samples/percent-chart-format

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

Today I want to talk about how we can create some additional formatting and I will keep it really simple, with two simple examples that will could help us to create content on sharepoint page and for this I have these two different examples. One is for tabbing to how we can use the the list formatting to create tabs, that you can create content plus some tabs, that you can improve the ui on your sharepoint page and the second is a percentage chart. So what is the the goal?

A

I prepare a list with a with a bunch of functionalities like the amount of tabs, the icons and the image that we can use to to define some tabs the tabs. We will be able to to switch between the different areas and will display different contents. We have an icon or we can also associate the image, so we can also create some conditions. We can also have a title, a description and the more info is nothing more than the link that will redirect.

A

If there is the need itself and then I also have the percentage chart. What is the goal here? The the goal is to create something a little more like info info chart, look and feel where you can create a global value, and then you can make some type of percentage. So imagine we have a total values of of items, and then we can say how many give answers.

A

How much was the expectation and also, what is the values that we can visualize, and it can be also nice to to present this information directly on the page.

A

So, though, like I said the goal here is to to help to organize this, uh these tabs and we create, and on the right, we have the functionalities that we can validate.

A

What, when we click on the on the tab and where we save the position and where will be the content that is going to be displayed, and the second is on the percentile chart. We have a different uh views, and here I use different three different ones that I use, for example, icons that is coming out out of the box with the with the sharepoint page.

A

Also, we can also associate emojis or we can even include svg image itself, I'm going just to show the free and also you show the the list formatting, how I include it itself and let me jump just to the presentation. Oh, this is my home page and I'm going, for example, for my page. So imagine you need to create some content and you need to have, for example, you here and you want some text so text and you have.

A

This is my content, my content, and you also need to include the tab for this. I use this um this specific list and I create something that we can interact and we can switch, of course how this is. Then. If I go to the or to my support list- and I go to my items I will be, this is the way that I configure for each one of the positions I defined the title, the description and also what type of icon or, for example, one thing that I do.

A

I can include an icon, or can I include a link and he will make the switching of the area itself for the the link that I show. For example, I have one view with a. I have a specific tab and I want to display all the the tabs. The the moment I create one I can say: okay, I want to use the first one. If I make the right filter, I want to use the first one in one specific page and the second one in another specific page, and for that.

A

If, for example, I, if I go to when when I define the the view and I go to the filter, I want to say I want to define for the second tab. That should be with the top side too, and then I return to my page so just need to return to my page and I will return just one. Second, oh sorry,.

A

To the tab itself- and I can always edit and I will display only the type that I needed for that specific moment- I can go here a change and I will switch to the to the other one and of course we have the image or we have the icon associated and then we can choose and we can create content with more user experience itself.

A

That can respond some of the requests that you have from the customers when you have, for example, oh, we want to have a tab, the out of the box is not available or you have the option to make a development or, for example, for this case you can use your list formatting to create the user interaction itself, and this is how we can also create this this tab and you can use the list formatting to create the tabs, and the second option is how we can create, for example, a like a info chart approach like I already showed in one of the presentations the the goal here.

A

Is we define, for example, I want to define for the 2022 we I wanted to find that, for example, we make an enquire to 60 000 percent and we have an answer of 45 000 percent. So I just going to have it here and I will put here the title example pnp and then I will define this will have to go. That needs to be with with the color gold.

A

The moment I I create a new item and the moment I create, as you can see, we have a new option here and this will define, for example, for the ratio, and this I want just to define for the ratio of 40 for 65, and we have 75 percent of response at any moment we can always change and we can define more values, and then we can see the interaction itself for this one.

A

We I use, as we see the creation, the second one, for example, if you want to have some car sales and you want to to display how it's the current situation on that tier. You can say, okay from the total that we defined, that we should sell it. 45 000 was already sold. So we already have 75 percent of the objectives already done, and this is I'm using, for example, my ratio of 10 image that will give me the percentage of 100 and then I can play around and make the change associated here.

A

So why, for example, I would change it here, and this will only 4000 and will give me the associated value. So this will be when of course, we can also associate some emojis that we can represent the what we are trying to sell, uh try to display. I'm sorry and also we can use, for example, wave formatting that we can also display, and we can uh display the content of the value and the percentage. Of course, there are any moment that we make a change to what is the doing.

A

The css will hide and display, based on the ratio that we have it there. So if I go to my list and for example, if I go to my first one, I I'm using sbc and what I'm doing is for each one of the user, I r loading the image associated there and then for the calculation.

A

I used the three percent ratio, so I defined the area and then, with the calculation that I received from the 67 percent or 100, I decrease and increase, depending on the values that I have there the same I will have, for example, if I go for the car sales, what I have it here is nothing more than using the the icons, so I will use the car and for each one my ratio continues to be the same.

A

We have 10 cars that will represent 10, and then I can make the mathematical calculation to have the display the same that we is doing for also for the other option here, and this is a very basic and but very useful that you, if you want to create content and you don't want to create a custom, sharepoint functionalities.

A

But you can use this, which formatting to display this information itself, and what I want to say is also that these links are available on the sheet tab, industry, formatting repository and don't forget to give feedback on the list. It will be always very valuable. Based on the your experience working with the list itself that I passed to you. That's everything from my side.

B

Andre I'm back yes, excellent! Thank you! Guess, who's back david's back, yes, excellent job, andre! Thank you for sharing all that, always amazing what you do with list formatting you and chris are a dynamic duo. So thank you very, very much.