Table UI design for responsive app.

[FranciscoAcuña]

Greetings experts:

I apologize in advance for the entry level question I'm about to ask but I am fairly new to UI5 development. I am working in a specification for which I have to replicate a view very similar to this following example:

The requirement is to navigate from a parent entity to this page that contains a table displaying a list of objects belonging to its dependent entity. Every item in the list should contain a checkbox, and the list header should also contain a checkbox that allows to select/unselect every item in the list. Then, upon user confirmation, I need to loop through this list and send an update request to my backend for every selected item.

What UI5 control should I use to achieve this functionality? Bear in mind that this app will be executed mostly from mobile devices so the property distribution should be as close as possible to the example shown in the image, being able to group properties vertically in a similar fashion.

[former_member34]

Thank you for visiting SAP Community to get answers to your questions. Since this is your first question, I recommend that you familiarize yourself with our Q&A Tutorial: https://developers.sap.com/tutorials/community-qa.html, as it provides tips for preparing questions that draw responses from our members. Should you wish, you can revise your question by selecting Actions, then Edit.

By adding a picture to your profile you encourage readers to respond: https://www.youtube.com/watch?v=46bt1juWUUM

Many thanks!

[david_bizer]

You could use sap.m.Table and make use of the demandpopin functionality. With this you can compress multiple columns of a table (e.g in your example material column or centro column) into one column ( AutoPopin Example for the recent available similar function to demandPopin , Auto Popin). However, normally you could show 2 columns as in your screenshot, but the second column would only have 1 property/column, while the first column will include all the other columns/properties.

But there is also the possibility to customize the table content to your needs inside <ColumnListItem> <cells> or for sap.m.List there is also the possibility to use the <CustomListItem> control (which also has a multiSelect property that includes automatic checkboxes for each entry). But care should be taken with responsive behaviour for different system devices.

[rahulpippalla]

Hello david.bizerr,in

There is a multiselect property but there is a no select all functionality to list. In this case Auto Popin might work as you proposed.

Ragards,

Rahul.