主从模板 SAPUI5 1.71.21 版本中的响应式 table

Question

我反应灵敏table。列的 minScreenWidth 相应地设置为 Phone 和 table。这是一个主从应用程序。所以当 flex 布局出现时，table 缩小，因此一些不太重要的字段应该从画面中消失。这是一个主从应用程序，有 3 列，table 位于中间列。问题是网关的 SAPUI5 版本为 1.71.21。在该版本中，phone 始终设置为 false。因此，字段永远不会被隐藏。例如，如果我将版本更改为 1.84，则 table 的行为非常完美。

有没有办法解决这个问题？

我曾尝试通过可见的属性来管理它，但是每次用户进入全屏大小时都会强制刷新，等等。我还尝试在 device.system 上强制为 phone。然而 table 保持不变。顺便说一句，属性 combi 也是如此。是否可以在 system.phone 上强制为真？甚至尝试使用方法 setContextualWidth = "Phone" 但什么也没发生。如果我使用 chrome 开发工具中的模拟器，table 会缩小。

查看

            <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

如果您尝试使用设备型号设置可见属性，您将永远得到 phone 错误（如果您运行电脑中的应用程序），除非您使用 chrome 开发者工具模拟它：

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.

如果您想使用 minScreenWidth 隐藏它们，请将它们设置为“Phone”（考虑到这意味着 240px）或在你想要的像素（或其他单位）值（你可以通过调试器检查它）。

Check minScreenWidth options

还要确保将 demandPopin 设置为 false 以正确隐藏它。

我想澄清一下，如果您试图隐藏示例中的最后 3 列，则您正在以相反的方式进行操作：“Phone”意味着您不会在cellphone 如果屏幕宽度小于 240px，你将不会在桌面上看到它。

如果您希望 table 对容器宽度做出反应，您需要设置 contextualWidth 属性，但将其设置为“Phone”将使其呈现为它包含在一个 240 像素的容器中，并且不会隐藏标有 minScreenWidth“Phone”的字段，因为该值是相同的而不是更低。

您可以在此处找到使用 contextualWidth 的示例：

Static contextualWidth

Dynamic contextualWidth

Table property contextualWidth in the documentation

Answer 2

事实证明，SAPUI5 库版本 1.71 中的响应式 table 存在问题问题在版本 1.76 之后得到修复，但不能降级。所以它需要在 FES 中取消更新。

主从模板 SAPUI5 1.71.21 版本中的响应式 table

Responsive table in Master-Detail template SAPUI5 1.71.21 version

sapui5

responsive