Multiselection table control

[fjcarrasco]

Hello experts. I have a requeriment to show a table where user can select several rows in order to run some process at the end with all selected rows. Next screenshot is from the Fiori for iOS Guidelines and is exactly what I need:

is there this UI control in MDK ?

I have looked into table control and grid however I didn't find any property to make them multiselectable.

is there a control to do it ? if not, would there be some way to do it?

Thanks

Kiko

[bill_froelich · Accepted solution]

You can implement your own similar functionality today. Instead of trying to actually update the table itself, you will want to setup tracking (toggling) for the list of selected items in your OnPress rule for the grid table. I would store an array in the page ClientData that contains the list of Id values for the selected items. Your OnPress rule will add or remove the selected row id to the array.

Then in your first column you will have a rule that checks if the current row Id is in the array. If it is in the array you return X, otherwise return O (or the appropriate images).

export default function ShowSelectedText(context) {
    let icons = [];
    
    let pageData = context.getPageProxy().getClientData();
    let selectedItems = pageData.selectedItems;
    
    if (selectedItems && selectedItems.includes(context.binding.ProductId)) {
        return 'X';
    }
    return 'O';
}

[fjcarrasco · Accepted solution]

That's remarkable. It works perfectly. Many thanks for your approach.

[fjcarrasco]

Thanks Bill. It would be nice to have a preview of this new feature.

In the meantime, I'm trying to do manually doing the following:

1) Include a new item in my grid to show 'X' or 'O' depending on whether the row is selected or not. Initially with default value 'O'. If I manage I will try with icons to make it prettier.

2) onPress event in a row I switch de value of the item I added:

The change is done however the control doesn't show the new value unless you scroll the screen up and down.

I have tryed to do a context.redraw() but then the default initial value 'O' is set again.

Is there a way to do a soft refresh same as when I scroll the screen up and down in order not to initialice the control and the value of

the new item? or any other idea to managed my requirement ?

Thanks

Kiko

[bill_froelich]

We will be adding support for multi-select in an Object Table in the next major MDK release. I will have to see if I can grab a screenshot to show what it will look like.

--Bill

[bill_froelich]

Here is a screenshot of how it looks on iOS