Creator Kit: Detail List Expand Column Type with Dataverse datasource

(0) Share

Report

Posted on by AndyBeds1

Hello All,

I've been utilising the creator kit components in a new app, in particular the detail list component.

One problem I have been experiencing however is using the "expand" cell type. I have been able to use this by following the code in the reference app, and replicating this in my app.

However, using this with a dataverse datasource/dataverse views is more challenging - in the examples provided in the MS Docs, GitHub Repo/Reference Apps, they all use a local collection, in which they patch an "expand" column to work as the trigger for expanding the column.

How could I replicate the behaviour with a dataverse datasource? AddColumn to add a similar column to patch, or creating a collection, would unfortunately remove the automatic sorting functionality or undermine the design, which is a key functionality for our use case.

Sample Code from Reference App:

Button:OnSelect:
ClearCollect(
 colAccountsExpand,
 {
 id: "1",
 name: "Contoso",
 city: "Redmond",
 country: "U.S.",
 description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
 expand: false,
 TagColor: "rgb(0, 183, 195)",
 TagBorderColor: "rgb(0,137,147)",
 externalimage: "https://via.placeholder.com/100x70",
 iconimage: "icon:SkypeCircleCheck",
 svg:varSvgSpinnerImage,
 tags:["#PowerApps","#PowerPlatform"]
 },
 {
 id: "2",
 name: "Litware, Inc",
 city: "Dallas",
 country: "U.S.",
 description: "Donec vel pellentesque turpis.",
 expand: false,
 TagColor: "rgb(255, 140, 0)",
 TagBorderColor: "rgb(194,107,0)",
 externalimage: "https://via.placeholder.com/100x70",
 iconimage: "icon:SkypeCircleCheck",
 svg:varSvgCheckmarkImage,
 tags:["#MsDyn365", "#PowerApps"]
 }
 );

DetailList:columns_Items:
 Table(
 {
 ColName: "name",
 ColDisplayName: "Account Name",
 ColWidth: Self.Width-32-32-48,
 ColIsBold:true,
 ColResizable:true
 },
 {
 ColName: "city",
 ColDisplayName: "City:",
 ColShowAsSubTextOf:"name",
 ColLabelAbove:false,
 ColIsBold:true,
 ColSubTextRow: 1
 },
 {
 ColName: "country",
 ColDisplayName: "Country:",
 ColShowAsSubTextOf:"name",
 ColLabelAbove:false,
 ColIsBold:true,
 ColSubTextRow: 1
 },
 {
 ColName: "description",
 ColDisplayName: "",
 ColShowAsSubTextOf:"name",
 ColLabelAbove:false,
 ColIsBold:false,
 ColSubTextRow: 2
 },
 {
 ColName: "expand",
 ColDisplayName:"",
 ColCellType:"expand",
 ColRightAligned:true,
 ColWidth: 32
 }
 )
DetailList:Items:colAccountsExpand
DetailList:OnChange:
 If(Self.EventName="CellAction" && Self.EventColumn="expand",
 With(LookUp(colAccountsExpand,id=Self.EventRowKey) As Row,
 Patch(colAccountsExpand,Row,{expand:!Row.expand})
 )
 );
 RecordKey: ="id"

Categories:

Building Power Apps

I have the same question (0)

All responses (4)

Answers (1)

CazzaT1 23 on at

Like (1)

Report

Hi @AndyBeds1
I am experiencing a similar issue. I think I have narrowed the issue down to the fact that the example uses a boolean value for false in the collection but I am creating a collection from a Dataverse table and only seem to be able to add a string value for the expand field.
I really hope someone can provide some help as I love the new creator kit components and would love to use the DetailsList in my app.

Was this reply helpful? Yes No
Verified answer

Shavar_Scott 175 on at

Like (3)

Report
@AndyBeds1 I found a workaround which works but** it will expand all the rows when the expand icon is clicked.

Step 1: Add a ColMultiLine element to the description object
Step 2: Set ColMultiLine property to a boolean variable for example varIsExpand

{ ColName: "description", ColDisplayName: "", ColShowAsSubTextOf:"name", ColLabelAbove:false, ColIsBold:false, ColSubTextRow: 2, ColMultiLine : varIsExpand }

Step 3: On your OnChange property Add the below code to toggle the varIsExpand variable between true and false

/* The Self.EventColumn is whatever column your expand icon is tied to in the Columns Property. What I did was, I used a field from my datasource that would always be blank and set that as the column name for my expand icon. By doing this, I can refer to that column name in the Self.EventColumn. If you don't do this, you would need to add an expand column to your datasource with AddColumns. */ Set OnChange Property: If( Self.EventName = "CellAction" && Self.EventColumn = "expand", Set( varIsExpand, !varIsExpand ))

Step 4: OnVisible of the Screen, set varIsExpand to false

//This defaults the expand icon to collapse initial OnVisible Set( varIsExpand, false )

Again, This is not the cleanest way to go. but it did work for me. And I didn't lose the automatic sorting from Dataverse!

Was this reply helpful? Yes No
AndyBeds1 21 on at

Like (0)

Report

@Shavar_Scott Thank you for the response! I have tried this, and it did work successfully! A shame about it expanding all rows, but still very useful to have the capability now!

Was this reply helpful? Yes No
Sorye 3 on at

Like (0)

Report
Using the Opportunity table from D365:
You'll need to recreate sorting manually but it's not very complicated and the functionality is the same as the default out of the box sorting.

A possible (haven't tested) workaround would be creating a boolean column called 'Expand' and a column called 'RecordKey' on the Dataverse table itself with default values being 'false' and the record's GUID respectively. You would then patch the Dataverse record and update it's Expand field onChange.

https://learn.microsoft.com/en-us/power-platform/guidance/creator-kit/detailslist#manual-sorting

Sorting
Details_List OnChange:

If( Self.EventName = "Sort", UpdateContext( { ctxSortCol: Self.SortEventColumn, ctxSortAsc: If( Self.SortEventDirection = 'PowerCAT.FluentDetailsList.SortEventDirection'.Ascending, true, false ) } ) );

Details_List Items:

SortByColumns(col_opportunity, ctxSortCol, If(ctxSortAsc,SortOrder.Ascending,SortOrder.Descending))

Details_List CurrentSortDirection:

If(ctxSortAsc, 'PowerCAT.FluentDetailsList.CurrentSortDirection'.Ascending, 'PowerCAT.FluentDetailsList.CurrentSortDirection'.Descending)

Details_List CurrentSortColumn:

ctxSortCol

End Result:

Expand/Collapse
App onStart:
Create the Column_Items and Items properties for the Details_List.

Set( col_items, Table( { ColName: "expand", ColDisplayName: "", ColWidth: 32, ColResponsive: false, ColRightAligned: true, ColCellType: "expand" }, { ColName: "name", ColDisplayName: "Name", ColWidth: App.Width / 2, ColSortable: true, ColIsBold: true, ColResizable: true }, { ColName: "estimatedclosedate", ColDisplayName: "Estimated Award Date", ColShowAsSubTextOf: "name", ColWidth: App.Width / 7 - 20, ColSortable: true, ColIsBold: true, ColResizable: true }, { ColName: "estimatedvalue", ColDisplayName: "Proposal Amount", ColShowAsSubTextOf: "name", ColInlineLabel: "$", ColWidth: App.Width / 7 - 20, ColSortable: true, ColIsBold: true, ColResizable: true }, { ColName: "parentaccountid", ColDisplayName: "Account", ColWidth: App.Width / 7 - 20, ColShowAsSubTextOf: "name", ColSortable: true, ColIsBold: true, ColResizable: true }, { ColName: "parentcontactid", ColDisplayName: "Contact", ColWidth: App.Width / 7 - 20, ColShowAsSubTextOf: "name", ColSortable: true, ColIsBold: true, ColResizable: true }, { ColName: "new_servicetype", ColDisplayName: "Type", ColWidth: App.Width / 7 - 20, ColShowAsSubTextOf: "name", ColSortable: true, ColIsBold: true, ColResizable: true }, { ColName: "new_source", ColDisplayName: "Source", ColWidth: App.Width / 7 - 20, ColShowAsSubTextOf: "name", ColSortable: true, ColIsBold: true, ColResizable: true } ) ); //Important - Expand Column is used to open or close the dialog while RecordKey is used to patch the specific row. ClearCollect( col_opportunity, AddColumns( Opportunities, "expand", false, "RecordKey", Opportunity ) )

Details_List Items:
col_opportunity
Details_List Column_Items:
col_items
Details_List OnChange:
Lookup the datasource by it's GUID using the Details_List EventRowKey and RecordKey. Adding the GUID column to the collection via RecordKey column (see Col_Opportunity) allows the EventRowKey to output that GUID onChange.

If(Self.EventName="CellAction" && Self.EventColumn="expand", With(LookUp(col_opportunity, Opportunity = GUID(Self.EventRowKey)) As Row, Patch(col_opportunity,Row,{expand:!Row.expand}) ) );

End Result:
On the left I have a gallery displaying the collection and it's expanded value.
On the right I have the Details_List with functional expanding/collapsing.

Combined Sorting and Expand:
A to Z
Z to A

Was this reply helpful? Yes No