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.