In this article I will be exploring the ‘Fluent UI DetailsList Code Component’ that is part of the creator kit.
The Creator Kit helps you create Power Apps experiences on the web and mobile platforms by making several easy to use sample controls and components available. The toolkit contains a component library, several commonly used Power Apps component framework controls, and other utilities that increase developer productivity. All included controls and components utilize the Fluent UI framework to help you easily create consistent, beautiful, and effective user experiences for custom business applications.
You can view the code in the latest version of the Creator Kit in the GitHub repository.
Fluent UI DetailsList Code Component
The DetailsList code component allows using of the Fluent UI DetailsList component from inside canvas apps and custom pages:
- Can be bound to a Dataverse dataset or local collection (I will be using a local collection in my example).
- Supports configurable columns separate to the column metadata provided by the source dataset for flexibility.
- Cell types for links, icons, expand/collapse, and sub text cells.
- Support for paging.
- Support for sorting either using Dataverse sorting or configurable
SortByproperties. - And many more…
After you have installed the ‘Creator Kit’ managed solution you will be able to see the following components in your environment:
- Reference canvas app
- Template starter apps (canvas and model-driven app custom page)
- Component library
- Code components
- Fluent design theme editor
How do I use the ‘DetailsList’ code component in a canvas app?
Create a new screen in your app (I have renamed mine to be ‘DetailsListComponent).
Press on the ‘+’ icon to insert a control/component to the screen.
Select ‘Fluent Details List’ from the Code components section.
Add your data source, I am using a SharePoint list which contains clients information
Create a collection to call your data source, I have created one named ‘coltest’. This will capture the clients data in a collection when the app is starting.
In the Items(Items) properties of the control select the collection you have created previously. And select all the fields that you would like to display on the list.
The Creator Kit also provides a component for searching. You can add the component from the ‘Library of components’, it is called ‘SearchBox’. The search box will allow us to filter the ‘DetailsList’ with the input users will type in the search box.
Now, to configure the ‘DetailsList’ to work with the search box. We need to write some code in the ‘Items’ property of the ‘DetailsList’ code component. In my example, I want the users to be able to search using all my displayed fields. The search box will start filtering the list as soon as you start typing your input value which makes a very cool user experience when searching.
In some cases the data can contain many records, therefore I decided to create a pagination functionality to the list. The component supports pagination (paging).
Paging is handled internally by the component, however the buttons to move back/forwards must be created by the hosting app, and events sent to the component.
The following properties are used to control paging:
PageSize– Defines how many records to load per page.PageNumber– Outputs the current page shown.HasNextPage– Outputs true if there is a next page.HasPreviousPage– Outputs true if there is a previous page.TotalRecords– Outputs the total number of records available.
In order to create all the parts of the Pagination, I have created the controls that you can see in the left.
Before we start exploring the controls, it is important to note that on the screen’ property – ‘OnVisble’, I have added the following code; the code will adjust the Details List to always display the first page in the list when a user lands on this screen
UpdateContext({ctxGridEvent:"LoadFirstPage" & Text(Rand())})| Control Information | Control Code |
|---|---|
| Control name: ‘imgFirstPage’ Control type: Image – when pressed it takes the user to the beginning of the list (collection) For the image property I am using a SVG image code (you can use Bootstrap to generate the code for any SVG image you would like), please see the code example below: Note: it is very important you remember to replace any double-quotation marks (“) in the SVG code with a single quote (‘). In the ‘onSelect’ property of the control, I have added the following code; once the user clicks on icon, the Details List will navigate to the first page in the collection. – I also added in the ‘Visible’ property a condition where the control is only visible when the Details list has a previous page to display. | "data:image/svg+xml;utf8, "&EncodeUrl(" <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-arrow-bar-left' style='color:#615f5f' viewBox='0 0 16 16'> <path fill-rule='evenodd' d='M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5zM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5z'/> </svg>")UpdateContext({ctxGridEvent:”LoadFirstPage” & Text(Rand())}) grid.HasPreviousPage |
| Control name: ‘lblRecords’ Control type: Label – indicates the total number of records. The ‘DetailsList’ control has the functionality to select one or more records, therefore the label will also display how many records are selected. The desired code should be displayed in the ‘Text’ property of the label. | grid.TotalRecords & ” record(s) ” & Text(CountRows(grid.SelectedItems)+0) & ” selected” |
| Control name: ‘lblGridPage’ Control type: Label – a label that indicates which page we are on in the view. | “Page ” & grid.PageNumber |
| Control name: ‘imgNextPage’ Control type: Image – when pressed it takes the user to the next page (if one exists) in the list. – I also added in the ‘Visible’ property a condition where the control is only visible when the Details list has a next page to display. | UpdateContext({ctxGridEvent:”LoadNextPage” & Text(Rand())}) grid.HasNextPage |
| Control name: ‘imgPreviousPage’ Control type: Image – when pressed it takes the user to the previous page (if one exists) in the list. – I also added in the ‘Visible’ property a condition where the control is only visible when the Details list has a previous page to display. | UpdateContext({ctxGridEvent:”LoadPreviousPage” & Text(Rand())}) grid.HasPreviousPage |
Microsoft Skilled 
Leave a Reply