Responsive table in Master-Detail template SAPUI5 1.71.21 version

Question

I have a responsive table. Columns have the minScreenWidth set to Phone and table accordingly. This is a master-detail app. So when the flex layout comes into picture, table shrinks, and therefore some fields less important should be get out of picture. It is a Master-Detail app with 3 columns, with table being in the mid column. Problem is that the Gateway has a SAPUI5 version of 1.71.21. And in that version, phone is always set to false. So, fields are never hidden. If I change the version to, for instance, 1.84, then the table behaves perfectly.

Is there anyway to solve this issue?

I have tried by managing this with the visible property, but that force a refresh every time user goes to full screen size, and so on. I also tried by forcing true to phone on device.system. Yet the table is kept unchanged. BTW, property combi is also true. Is it possible to force true on system.phone? Even tried with method setContextualWidth = "Phone" but nothing happened. If I use the emulator from chrome dev tools, the table do shrinks.

View

            <Table
            id="lineItemsList"
            width="auto"
            items="{
                path: '/ItProjWbsSet',
                sorter: {
                    path: 'Pspid',
                    descending: false
                }
            }"              
            mode="MultiSelect"
            updateFinished=".onUpdateFinished"
            selectionChange="onSelectionChange"
            noDataText="{i18n>detailLineItemTableNoDataText}"
            busyIndicatorDelay="{detailView>/delay}">

....

                <Column demandPopin="false" minScreenWidth="Phone">
                     <Text text="Level"/>
                </Column>
                <Column demandPopin="false" width="12em"  minScreenWidth="Phone">
                     <Text text="WBS Element"/>
                </Column>
                <Column demandPopin="false"  minScreenWidth="Desktop" visible="{= !${device>/system/phone}}">
                     <Text text="Basic Start"/>
                </Column>
                <Column demandPopin="false"  minScreenWidth="Desktop" visible="{= !${device>/system/phone}}">
                     <Text text="Basic Finish"/>
                </Column>   
                <Column demandPopin="false"  minScreenWidth="Desktop" visible="{= !${device>/system/phone}}">
                     <Text text="Actual Start"/>
                </Column>

Answer 1

It turned out that there is an issue with responsive table in SAPUI5 libraries version 1.71 Issue gets fixed after versions 1.76 onwards, but can't be downgraded. So it needs un update in FES.

Answer 2

If you are trying to set the visible property with the device model, you will always get false for phone (if you run the app in your pc) unless you emulate it with chrome developer tools:

Check note in documentation

The sap.ui.Device API detects the device type (Phone, Tablet, Desktop) based on the user agent and many other properties of the device. Therefore simply reducing the screen size will not change the device type. To test this feature, you will have to enable device emulation in your browser or open it on a real device.

If you want to hide them with minScreenWidth, then set them to "Phone" (take into account that that means 240px) or set that value in the pixel (or other unit) value you want (you can check it through debugger).

Check minScreenWidth options

Also make sure that the demandPopin is set to false in order to properly hide it.

I would like to clarify that if you are trying to hide the 3 last columns from your example, you are doing it the other way around: "Phone" means you won't see it in a cellphone and you won't see it in desktop if screen width is lower than 240px.

If you want the table to react to the container width you would need to set the contextualWidth property, but setting it to "Phone" will make it render as if it was contained in a 240px container and won't hide the fields marked with minScreenWidth "Phone", since the value is the same and not lower.

You can find examples of the use of contextualWidth here:

Static contextualWidth

Dynamic contextualWidth

Table property contextualWidth in the documentation