Microsoft 365 Community Power Apps, 18 Jan 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Effortlessly showing grids of data in your Power Apps using the Creator Kit

Description

A Fluent UI style set of controls. In this 21-minute citizen developer-focused demo, Scott Durow shows specifically how to render data in tabular format using a control and template from the Creator Kit. An alternative to galleries - the DetailsList control is a responsive, Fluent styled control optimized for grids of data. Create table, add columns, import data, display, sort, tab, resize, etc.

This PnP Community demo is taken from the Microsoft Power Platform community call – January 2023, recorded on January 18, 2023.

Demo Presenter
• Scott Durow | @ScottDurow

Community Call Conversation
• aka.ms/Jan18-Demo3

Supporting materials
• Documentation - Creator kit | aka.ms/creatorkit
• Documentation - Install the Creator Kit | https://learn.microsoft.com/power-platform/guidance/creator-kit/setup
• Documentation – DetailsList control | https://learn.microsoft.com/power-platform/guidance/creator-kit/detailslist
• Playlist – Creator Kit videos | bit.ly/creatorkit-playlist
• Tool – Ribbon Workbench | https://www.xrmtoolbox.com/plugins/RibbonWorkbench2016/

Stay connected
• Twitter https://twitter.com/microsoft365dev
• Call attention to your great work by using #PowerAppsCC and #PnPWeekly on Twitter.

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 Blog - https://aka.ms/m365pnp/blog
• Microsoft 365 Platform Community - https://aka.ms/m365/community

👋 Join to our weekly Microsoft 365 & Power Platform Community calls to learn more. These are PUBLIC calls for you to get access on the latest details from Microsoft and to see awesome demos from community on these technologies - Download recurrent invites from https://aka.ms/community/calls

A

B

Commonly pronounced as Duro, so actually uh the app pronunciation of names would be would be very good for that. um So I've uh been a business applications MVP since 2013 I've had the pleasure of kind of growing up with a platform from all the various different pieces coming together to make the awesome platform that we know today.

B

um There's my various different social media profiles that you can go and reach me on, but um you might have seen me as the Lemmings guy I I write games in power apps quite a lot um just to kind of just prove that they can do certain things, um but before that I was the kind of ribbon workbench guy, and this was a tool that allows you to customize powerapps model driven apps and before that it was Dynamics 365 and before that it was Dynamic CRM, um but today I'm going to be the Creator kit guy.

B

um So what is the creator kit? So the Creator kit is a uh a solution. That's been developed by the power cat team and I actually had the pleasure of working with the powercat team on it, and it's a group of components that you can install into your environment and then use in both in your canvas, apps and also your custom Pages inside model driven apps, and it basically creates this fluent UI style set of controls that you can create user interfaces that look very similar to the office.

B

The SharePoint, the model driven app style of user interface, and you know sometimes it can be quite hard to create user interfaces that look consistent with other parts of the Power Platform. So it just Bridges this Gap. Until perhaps the the first party there will be out of the box controls to do this and it's open source. You can get the the source code and so I'm going to give you some links at the end, and here they are actually, um if you want for reference on how to to endure the installation Etc.

B

But what I'm going to show you specifically in this presentation is how to show data in tabular format, because one of the things, if obviously, if you're using SharePoint tabular data is, is very common right. You know we all created a list and you can add columns and you can move them around if you've used model driven apps again, you know you it's it's a very common thing.

B

You have your list, you can sort and- um and you can add different columns and and select different rows- it's kind of a basic kind of stuff, but if you are using canvas apps without the Creator kit, we've all been there. We've tried to create grids using galleries, I've done it so many times, and it feels a little bit like Jenga, because you know you you get it looking really great and then you try and adjust something and then it all sort of come books comes tumbling down.

B

Well, I mean at least that's that's my experience, and so what the Creator kit has got is it's got something called the details list and if we come down to the reference app that you get when you install the Creator kit and and I'm not going to go through on how to install it because there's a whole ton of really great documentation. If you go to the learn page, which I'll give you a link to, um there is fantastic set of documentation that has to install it.

B

What you need to do the prerequisites and also documentation all the different components, but one of the parts of that installation is you get a sample reference app and and part of that reference.

B

App is a section on the details list, so you can see here that we've got you know like it demonstrates all of its different capabilities, um and you know it does basic basic grids, but you can also have things like icons and you can have um tags and- and you can have expanding and collapsing elements you can have inline content as well sort of content that perhaps in a responsive environment, you might want to wrap it over into multiple lines to keep the data density High, and so what I'm going to show?

B

You is how to do that right, because you know it's a it's a demo, so um I've got a uh I've, got just a canvas app here and I'm going to go and create a new screen and I'm going to use this uh responsive layout here, which is using containers, and so we've we've got um the the root and then three different containers in there.

B

Now the middle container is this container here, which is a stack set of containers, so this makes it very easy to to put out our components in there, so they just automatically stack up and I can adjust. The relative Heights make them stretch to the full width. So if you've not used responsive containers, yet I really recommend going and checking them out, because it makes making apps work on multiple different device formats really really easy um and um grids are all about data density. I mean this is the thing, because Gallery is a fantastic right.

B

You know, I can go and add in a gallery and um I can bind that to some data and I can you know, add a image and I can add um sort of like a headline piece of data and then sort of a sub heading and maybe a secondary bit of data and then a Chevron to go and expand to show more data.

B

um But then, if you want to actually cram lots of data into there, then that's where grids really become come into their own, because it allows you to sort of have these columns that you can then resize and, like I, said, wrap on multiple lines. If you need to so by by default, you don't have a um a fluent style grid. We've got this data table preview, which has got some basic data grid formatting it's it's um quite Limited in what it can do, but you know sometimes it might be useful.

B

But in order to get the the details list from the fluent from the Creator kit, you have to go down to this um rather sort of hidden um little thing down at the bottom here. Well, that's a bit too large, let's just zoom out a bit! Oh, my goodness! That's there there we go! How big? Can we get this? um My my I've got a new mouse in it's. uh It's somewhat a little bit trigger happy, but anyway down the bottom.

B

We've got this, get more components so I'm going to go and add in a details list from the power cats. So if I search here you can see here, it's got details lists from the power cat, publisher and once I do that it will then be added into there. We are import that it'll be added into my set of controls that I can set into my canvas app or my custom page. It doesn't come under the layout. It comes under this code, components area, um and you know this is slightly different.

B

If you've used canvas components, it's going to be slightly different, so you have to go to this code components area, and so, when I add in this component it it just sort of Pops it in as a a square block, not really very interesting. But if I select this middle responsive container, there I can start to set the properties to say: okay I'm, going to extract it out to full fill the whole width there and I'm also going to make it um I'm going to make it cost a flexible height.

B

So it it'll fill the whole height and in order to get this start to show, data I obviously need to go and add some data to my app so I'm going to add in accounts and if we've got time. Hopefully we will also show wiring it up to some contacts as well. So I'm going to add contacts in as well like that.

B

So, if I, if this was a gallery right, I would go over to the uh the items property that I'm going to bind this to, and I I put in the I the the values that I want to the record set that I want to bind it to. So, in this case, I'm going to say, filter on accounts and show only where there is an industry set, because I'm going to show that as a a column.

B

So as soon as I do that it loads the data. um So if I, if I highlight this, you can see I've got some data in here, which is great, but it's not showing it, because it's still giving me this this message to say there are no columns defined. So there are two things: I need to do. Firstly, um I need to Define which columns I'm going to show so at the moment by default.

B

I've just got the the standard view, so the account name Etc so I'm, going to add in a industry and um I'm also going to add in a telephone as well like that uh telephone, perhaps it's already in there and the C yep, there's yeah main phone, it's already in there, um okay good. So what we'll do now is?

B

Is you can see that it's still saying they're no cons to find, because there's that second step- and this is the really important step- is because, if you've used, um SharePoint or model driven, apps you'll know, obviously you've got to define the view layout if I come into this columns property.

B

This is where I I say this is we've got the raw data, which is what we Bound to You know that we've bound it to the accounts, but we've now got to say well, which columns do you want to show in which order, and so the way we do this is um or one of the ways we can do. This is we just Define a table and we can define a row for each of the different columns I'm just going to paste in some um some data into there.

B

Just so you don't have to watch me type that out, which would be in particularly uh painful, so there we go now it. What this is doing is each of these. uh These rows in this table here, so the first one has got a number of different properties and in the docs there's a description of what these do so, but basically uh the simplest is you've got the name um of the the column that you're going to bind this particular column in the view to, and then the display name and then the width.

B

This is the sort of like the minimum information. Now you could obviously make this width responsive to paste based on the parent width and divide it by the number of columns Etc, but there's also these extra sets of properties, so in this case I'm going to say right. Well, this is the name column, so I'm going to say this is the header cell. So it's going to be slightly bigger, I'm, going to make it bold, but I'm also going to say it's sortable and it's resizable and equally for the telephone as well.

B

So if I go now and run this, it's looking good I've got my my data here and I can sort by this and I can sort by telephone, um and so it's immediately giving me that ability to show my tabulization um and the critical thing here is. This is all happening. This sorting, for example, is all happening in a delegatable way. So if you've, you know if you've done any work on large data sets.

B

You'll know that it's very important to make sure you've got delegatable uh filtering and sorting, and so this sorting will automatically be be handled against the data source. So that's um that's all great and what I'm going to do is add in a little bit more information, so add in some more columns here. So there we go and there's our existing two columns and I'm just going to pop in um three more so I've got industry code, primary contact and description. So just a couple of things.

B

I want to point out here um on primary contact, okay, the standard stuff that we would expect. You know primary contact ID, which is the name of the column in the display column. But there is this slightly interesting, separate sort by column- and this is just this is very specific to dataverse from the sense that we're displaying the name of the contact.

B

But when we are, if we are going to sort by that, then dataverse would sort of not doesn't really know if it needs to sort by the ID or if it's going to sort by the the name of the the contact. So you need to give it this um a slightly different format.

B

um But if I run this you'll notice that it's not giving me this description column- and this is a very, very common Pitfall, because I've now got I can sort my primary contact. So if I show there we go. The is all my my contacts, but it's not showing the description and the reason being is if I go into edit here. I haven't added this into my fields that I'm going to expose- and this is very important, because what you're doing is you're telling uh power-ups what data needs to be requested from that data source.

B

So it doesn't just go and get all the data, and so now you can see as soon as I do that. You can see we're now getting that the description um added to each of the row, but also notice that it's added underneath that that that first row and the reason being is, if you look at the columns down here, we've got a special property here. Called coal show as subtext off. So we're saying, show this particular piece of information as a child of the name, and you could make this Dynamic.

B

So you know, based on the format the width of the the app you could fold in, to show it as a as a child column or if you've got space, show it as a separate column. So that's all great- um and one thing to point out here- is that this is all accessible, so I I'm using the curse Keys here to move up and down- um and you know, I- can tab around as well and I can use return to uh to actually do all the sorting and that's.

B

This is some of the things that are actually quite difficult to manage if you're using galleries to sort of, but we would just assume that they work for grids. It's just one of those kind of things. So what I do now is I'm going to show a additional row um for the related columns?

B

uh Sorry, the related contacts and I'll the way that I'll do that is I'll, go into the uh the container here and I'll add in another details list. So it's going to add it underneath now, apologies I'm, not, but just because I've got enough time.

B

I am not uh naming all my have my containers and my controls using you know a name, a correct naming convention, um which you obviously should do, um but there we go I've now added in my uh a separate date details list and what I want to do is I want to say when I select a contact in the top here, it shows the related contacts uh below so I'm just going to pop in some uh some columns for this uh child set of um contacts, but also going to bind it to um the like that.

B

Okay I'm going to bind it to some con. The contacts here and and what I'm doing here is I'm, saying only show me the contacts where the company name on on the contact equals the selected account in the top grid, because there are lots of properties that these grids give you. So you can give them input properties other than the rows that you want to show The View, but it's also got output properties.

B

In this case, which row has been selected, it's also got other output properties like the number of Records, the number of pages, all of those kind of things um there's also this interesting thing here this as type um and what this is doing is it's because the parent company or the parent uh of a contact is actually a polymorphic lookup, so it can re, it can um be related to a parent account or actually it could also be related to a parent contact, so I'm sort of casting this I'm, forcing it to always use the account, um and otherwise there would be a type mismatch here and again, that's sort of like a a data burst thing, um so I'm going to pop in a column going to the columns here and I'm, going to say tables like that, a table and put in a column.

B

uh Oh, no, not that one, that's a little bit, let's just jump in the gun and for a little bit more so there we go and now we're showing if I select that it's now showing only the contacts for that selected record. But the last thing I wanted to show you is that um when we are using these details lists, it's got the ability to show some slightly different formatting for these cells, because, um if you're using a gallery, obviously it's super super flexible.

B

Okay, you know you can um you know you can show any data that you look, you can use any formatting, any colors, fonts type buttons, all those kind of things. With the with the details list. There is a trade-off right. You know you do have to manage that trade-off.

B

But if I go into my Fields here and add, in my credit, uh credit hold there like that, we now, if we wanted to show that as a sort of like a as a a colored tag like a SharePoint list style thing, um what we can do is you can come into the format of the of my credit, hold column and I can Define this as being a a tag.

B

So here we can see that we've now defined this as a tag, column cell and we're also saying we're now defining the color is going to be taken for this particular cell. From this other column, here this credit tag, color, and so at the moment it's just great right, because there is no, we haven't defined that additional column, and so the way we do that is if we come into the records for this particular contact and after I replace this.

B

um What I'm doing here is: let's just name this as grid contacts, because that's the name it we're going to give it and I go into here.

B

um What we're looking at here is our grid accounts, then we're just adding in an additional column called credit tag color, because that's the name we specified in our view, property in when we're defining the columns and we're just saying if, if it's credit hold is true, then we're going to give it this color. uh If it's not we'll, have this color, and so, if we run this, you can see there we go. We've we've got it now highlighted in different colors, and there are.

B

There are sort of different other things you can do put in svgs, and things like that now I just want to highlight something. Lastly, and that is that, um as soon as you do this, you do lose some of the Sorting um aspects, because this is now using a local collection because you used ad columns, it's not binding directly to the dataverse.

B

So if you come over into the the documentation- and you look at the Behavior section- there's a lot of information there on how to manage sorting when you're binding it to a collection rather than directly to a data source as well as how to manage paging and all of those kind of things. So it's a fantastic set of documentation that backs that up and there's even kind of code samples that you can copy and paste in there, um but yeah that. That's really what I wanted to show you.

B

You know how you can very quickly get that kind of fully uh fully fledged data grid style functionality very very quickly, without having to go and use that Jenga style grid using galleries. um So yeah David. That's uh that's all from me.

A

Awesome Scott well, I think now uh we can officially call you awesome demo guy is that I think everybody agrees with that. So uh you can add another one to the list very, very good.

B

Oh those um those links actually well we'll you know those those are the links so I guess your emails email, those out to get more information.

A

Yeah I put them in the chat earlier for you as well, so everybody command um so excellent. Thank you. Scott very, very cool.