Fluent UI Details List Component in Canvas App | Creator Kit - Episode 05

In this video, we will discuss the Fluent UI Details List Component. Primarily we are creating Grids using native Gallery controls. But what if we want to create beautiful, enriching grid with Fluent UI? Power CAT team come up with a Fluent UI Creator Kit with a Details List component. We have divided the Details List component into two parts. During this part, we will discuss Fluent UI details list configuration, different cell types in detail. So, Let's get started!

Key Takeaways:
1. Fluent UI Grid Component
2. Fluent UI Details List Component
3. Power Apps Creator Kit
4. Creator Kit Components
5. PCF Component
6. Plug and Play Component

Chapters:
00:00 Start
01:16 Add Details List Component
02:45 Column Configuration
05:27 Cell Types in Detail list
07:24 Tag and TagIndicator
08:49 Image Type

Reference Links:

Details List Documentation:

*******
Follow Dhruvin on Social Media:
Follow my other channel for short content: @DigitalDhruvin

Follow me on Instagram:

Looking for a Consultancy? Connect Here!

Follow me on all social Media Handles:
*******
Download Creator Kit:

Reference:

*******

UI/UX Power Apps with Creator Kit
Episode 1 : Get Started with Creator Kit

Episode 2: Create Expandable Menu in 5 Minutes Using Creator Kit

Episode 3: Create Breadcrumb Component in Power Apps | Episode 03

Episode 4: Fluent UI Panel & Dialog Component in Canvas App

Episode 5: Fluent UI Details List Component

Full PlayList URL:

#powerapps #PowerPlatform #UIUX #CanvasApps #PCF #PowerAppsComponents #CanvasComponent #PowerAddicts #digitaldhruvin #dhruvinshah

[millardmanalastas]

Another great stuffs from your my friend.. very clear and i learn a lot from this well arranged content, very well clear explanations..
keep it up.. thank you very much

[atulvijay]

Hey Dhruvin, can you explain the expand & collapse of cell types. All the code components are explained in a basic level currently by all creators. I wold like to know how to use it with various data sources. Thanks in advance

[RulasRod]

Excellent video, Im waiting for next part

[jeremydeceuster]

Is there a way to make this work with SharePoint lists?

[barryferguson]

Is it possible to increase the font size in the Details List? And, is it possible to turn off the double click in the Details List Row/Cell?

[indikan]

Hi Dhruvin, Any idea if the Lookup column is in the table? sort search feature not working

[Cookies]

Hello Dhruvin, Thank you for this, it is really helpful. Please I have a question. Please how can I add accessibility to this component because of the disability people

[Kjrack-uv]

Dhruvin, how would you use this if the Data Source is SharePoint ?

[NathanJohns-xpys]

Hi Dhruvin! Do you have a link to the video where you cover setting up the expand column in the DetailsList component?

[jaimerocha]

This is an amazing tool! When using this tool I noticed that there doesn't seem to be a way to show nested data. Do you know if there will an updated control that will use the groupedlist UI, or is there a way that this solution can render nested data records?

[RLycas]

the video helps get the component working since the documentation on the microsoft library and on github can be obscure. In my case I display a list of filenames and links, how can I open the link selected by the user?
how do i select the value inside the row and not the index of the row? knowing that Self.RecordKey is equal to 0, 1, 2 etc is not useful to me and if i try to use self.selected it gives me an error, what property should i indicate?

[hemanth]

Unable to click info button within datacard, when datacard is display mode is view. Please provide solution

[VenkatSrinivasraoBathula]

how increase the font size Fluent Details list ?

[DankAri-eg]

Does someone else is also facing the problem of fields not getting selected ?