[Creator Starter Kit] BUG: clickable images do not change selection in details list

[Jenefer-Monroe]

Describe the bug ColCellType "clickableimage" does not change selection in the details list. This results in the click acting on whatever was last selected, typically the wrong cell. Results in clickable images not being a reliable way to act on a detailed list, really just need to use command bars / buttons / etc

So from here, by default, we will delete thing 2, not thing 4 which would be the expected thing to delete, since you click delete on thing 4

Workaround You can capture the click and do a lookup to get the correct row, but then your selection is still off. If you did just this part of the workaround and you were turning on / off for example you would be hard pressed to know, what row did I just act on? Very difficult to make this work like would be expected.

Note Everything else changes selection (ex image (non clickable), tags, etc) Fix would be to have it change selection then pass on the action.

[nelson-yan]

Same issue with ColCellType: "link"!

[scottdurow]

Hi @Jenefer-Monroe - Thanks for the info. Can you try setting the RecordKey property to a unique key column, and then using Self.EventRowKey inside the OnChange event to LookUp the record that is having the action invoked upon?

E.g. 1) If you had a collection

ClearCollect(colRecords,
{SomeUniqueID:"aaa",Name:"Record AAA"},
{SomeUniqueID:"bbb",Name:"Record BBB"},
{SomeUniqueID:"ccc",Name:"Record CCC"}
)

2) You would then set the RecordKey property of the DetailsList to be SomeUniqueID.

3) If you had a column definition as

{ColName:"SomeUniqueID",ColDisplayName:"Id",ColWidth:100,ColCellType:"link"}

You can then add the following in the DetailsList OnChange to get the record that has its action invoked:

If(Self.EventName="CellAction" && Self.EventColumn="SomeUniqueID",
    With({
            row:LookUp(colRecords,SomeUniqueID = Self.EventRowKey)
        },
        Notify($"Link clicked for {row.Name}");
    );
);

The SelectedItems & Selected properties are somewhat de-coupled from the cell actions.

[Jenefer-Monroe]

First of all, thank you for making the detail list. I love it!

Your suggestion is effectively what I've done as a workaround. Where Name here is my Record Key

But that leaves the selection incorrect. So say instead the scenario is that you are approving or rejecting something. In this case, as shown here, I would (with this workaround) correctly approve thing 3, but from the UX you wouldn't know that. It would look like you had just approved thing 1. Leaving the user saying "Where was I? What did I just do?"

So to also force selection, I have added a columns and code to change the selection programmatically. So here I've added ctxTableEvent as the InputEvent, and a RecordSelected column to the data, and then I force the values of it

With that I correctly end up with correct row selected and acted upon. This works but it forces this fake column into the data and causes a flash as the data refreshes.

In the end it just seems like a pretty big hurtle to make this work, including data augmentation and maintenance for "selection" which is quite cumbersome. If we can capture the click and force the selection before the action, that would be amazing. Or if at least forcing selection could be easier. Like "SetSelection(recordkey)"

Please let me know your thoughts and thank you again for this component!

[scottdurow]

Hi @Jenefer-Monroe, Thanks for the super detailed info - that all makes perfect sense 😊 I think if there was a link between a cell action and the selection it would need to be a property of the control to turn it on explicitly.

In the meantime, could I suggest using the selection on the grid OR action buttons on rows?

Option 1 - Use the selection with a command bar to approve one or more items that are selected Option 2 - Disable row selection altogether and use the icon buttons to perform the actions on the rows:

It seems like the most common use of Fluent is Option 1. Incidentally - I think having inline action buttons like the Option 2 image above would be a really good feature!

Thanks again, Scott

[Jenefer-Monroe]

I was able to get rid of the flash by changing this line to only update the last selected row. For my use cases that works so I'll stick with it for now I CANT STOP hahahah

[scottdurow]

That's awesome! Thanks for posting the code 🔥