Responsive table in Master-Detail template SAPUI5 1.71.21 version - sapui5

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>

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.

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

Related

MultiComboxBox within a table closes after selection

I have tried to resolve the problem for quite sometime but have not been successful.
Inside a table, I have a sap.m.MultiComBox. The drop down in the multicombobox closes after selecting the first value. If not inside the table, the multicombobox works fine as expected (popover does not close). One additional behavior I observed is that if I don't have the selectedKeys bound, then it works fine.
Any reasons or suggestions?
<Table
growing="true"
items="{employee>/EmployeeCollection}">
<columns>
<Column width="10%" />
<Column width="55%" />
<Column width="35%"/>
</columns>
<ColumnListItem>
<Image id="image" src="{employee>dataURI}" class="sapOB_Assign_Usercircle" />
<Text text="{employee>Name}" class="tableText" />
<VBox>
<MultiComboBox id="mcb1"
selectedKeys="{employee>roles}"
items="{
path: 'roles>/BusinessRoles',
templateShareable: false
}">
<core:Item key="{roles>id}" text="{roles>name}" />
</MultiComboBox>
<HBox />
</VBox>
</ColumnListItem>
</Table>
You must be using UI5 version 1.66 or below with growing="true" on the Table. In that case, the dropdown closes immediately after the selection due to a focus loss caused by rerendering of the list item (Its DOM element being rewritten completely). The rerendering itself is caused by two-way bound selectedKeys which explains why it "works" if the property is not bound.
Normally, two-way binding should not be used together with growing. According to the API reference:
Note: Growing must not be used together with two-way binding.
But it's still unclear whether the above constraint is still valid today (See issue #3013).
In order to keep two-way binding with growing="true", add the attribute key* to the list binding info:
<Table
growing="true"
items="{
path: 'employee>/EmployeeCollection',
key: 'employeeId'
}"
>
Here is a working example: https://jsbin.com/ciyosir/edit?js,output. As you can see, the dropdown is kept open even after selection because the list item is not rerendered thanks to the extended change detection.
Additionally, I'd suggest to upgrade to the latest stable UI5 version in order to benefit from many controls having migrated to the new semantic rendering.
* The key awaits a property name from the model of which the value is unique. For more information, see topic Extended Change Detection.

Move 1st column header to each row in certain width

Whenever the browser size goes below Desktop width, I want my responsive table to hide the column headers and instead place them in the same row as its corresponding values for each entry.
Here is a visual example of what I want:
Desktop width
Below desktop width
It seemed to me that the way to achieve this behavior was by adding...
minScreenWidth="desktop"
demandPopin="true"
...to the <Column> tag, but this does not work for the 1st column.
So my question is: How to (nicely) implement that behavior for the 1st column?
Here's my minimal example code (I changed the Table.view.xml of this example):
<Table items="{/ProductCollection}">
<columns>
<Column>
<Text text="Supplier" />
</Column>
</columns>
<ColumnListItem>
<Label text="{SupplierName}" />
</ColumnListItem>
</Table>
Responsive table doesn't allow pushing all column headers to the items. From the API reference:
The sap.m.Table control requires at least one visible sap.m.Column in the columns aggregation, therefore applications must avoid configuring all columns to be shown in the pop-in. If such a conflict is detected, then the table prevents one column from moving to the pop-in.
You'll have to add at least one more column so that the 1st column does pop-in.
Related GitHub issue: https://github.com/SAP/openui5/issues/1396

How to enable scrolling in sap.m.Table in sapui5?

I have implemented sap.m.Table but all the records are not displayed. Also there seems to be no option for scrolling. I went through the API which suggests using growing, growingThreshold, growingScrollToLoad of sap.m.ListBase.
Here growing would enable the table control to load more items, growingThreshold would determine the number of items to be requested from the model for each grow and getGrowingScrollToLoad would enable the user to scroll through the records instead of a more button being displayed to load more data.
However, even after using these properties my entire data is still not getting rendered and I can see that more button instead of scroll bar. Below the more button I am able to see a number that determines the entire number of records to be rendered as well and the number of records that have been rendered in the initial view.
Shouldn't scrolling be a default option if the data exceeds a page's limit? I'm very confused. Please help.
Also I did go through this post! :)
Update 8-March-2019 :
There is now a new way to enable scrolling in sap.m.Table with sticky option.
Kindly check the API and samples for more example. This new way is recommended and support and development is provided directly via the library.
Check: https://sapui5.hana.ondemand.com/#/api/sap.m.ListBase/methods/setSticky
Old Answer:
Given how the question is beautifully setup, with options:
sap.ui.table.Table : scrollable with fixed Header.
sap.m.Table: growing list, scrollable WITHOUT fixed header.
But many a times we need a sap.m.Table- scrollable but with static header, so the content below the table does not move further below. This below code will help during that time. It has a scrollable body with fixed header.
Setup: I'm using two sap.m.Table instances, one just with header and other just for data. Also, I'm using a scrollable container, which holds the 2nd table (without the header). Because of the fixed width of Scrollable container, we see a scrollbar. Dummy code is provided below:
View.xml:
<Table showNoData='false'>
<columns>
<Column>
<header>
<Text text='ID' />
</header>
</Column>
<Column>
<header>
<Text text='First Name' />
</header>
</Column>
<Column>
<header>
<Text text='Last Name' />
</header>
</Column>
<Column>
<header>
<Text text='Gender' />
</header>
</Column>
</columns>
</Table>
<ScrollContainer height='20rem' vertical='true'> <!-- To have fixed with and enable vertical scrolling of data table -->
<!-- Table to hold data, data ,data -->
<Table class='tableHdr' items='{/}'> <!-- CSS class to hide the column header, otherwise we will have 2 headers. -->
<columns>
<!-- Dont need columns header, as upper table has already defined them. -->
<Column >
</Column>
<Column >
</Column>
<Column >
</Column>
<Column >
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<Text text='{id}' />
<Text text='{first_name}' />
<Text text='{last_name}' />
<Text text='{gender}' />
</cells>
</ColumnListItem>
</items>
</Table>
</ScrollContainer>
Now, If you execute the above code without this below style class, you will end up with 2 columns headers from 2 tables. So, to remove the 2nd Column header, I used the below class:
.tableHdr .sapMListTblHeaderCell {
padding: 0rem;
}
Would like to hear the feedback on this.
By default, if there are more rows in sap.m.Table, scrolling will be there.
You can see the working example here
But if you want to force to fixed rows visibility, you can use sap.ui.table.Table with the properties visibleRowCount and minAutoRowCount.
Also note that if the vertical scrollbar is not visible for sap.m.Table, check if some other css is overriding the style. Else you can paste the code in the question with full ui code.

Change Text Font to Bold

I have a table (sap.m.Table) and would like to change the header font to bold, but I'm unable to do that. Here is my code for one of the column definitions in my *.view.xml:
<Column xmlns="sap.m"
hAlign="Left"
width="17em"
>
<Text text="Vendor" />
</Column>
After looking at the API (sap.m.Text), I don't see a way to change the text style and I'm also new to UI5. Could someone point me to where to look for this?
sap.m.FormattedText
Another option is to use sap.m.FormattedText[api] with an inline tag <strong> within the htmlText value.
<Column ...>
<FormattedText htmlText="<strong>My Column</strong>" />
</Column>
Note
In XML, the character < needs to be escaped with <.
Browsers do not guarantee that the text within <strong> is always displayed in bold.
The <strong> element is for content that is of greater importance, while the <b> element is used to draw attention to text without indicating that it's more important. [source]
The element <b> is currently not supported by the FormattedText. On the other hand, <em> is supported to emphasize the text.
sap.m.Label
Instead of sap.m.Text, you can use sap.m.Label which supports "Bold" design.
<Column id="myColumn">
<Label labelFor="myColumn"
design="Bold"
text="..."
wrapping="true"
/>
</Column>
Additionally, enable the property wrapping (available since 1.50) in order to achieve the default behavior of sap.m.Text. Wrapping should be enabled for column headers as recommended by Fiori design guidelines:
Column Headers - Best Practices
Use controls that wrap [...]. Do not use controls that truncate.
Note: If the label is not labeling anything, please try with different controls like sap.m.FormattedText.
I found by chance that using <FormattedText> instead of <Text> creates bold headers. This works without (!) using any additional bold or strong markup in the htmlText of <FormattedText>.
So in your case you would go with:
<Column
hAlign="Left"
width="17em"
>
<FormattedText htmlText="Vendor" />
</Column>
Whether this works seems to be somewhat dependent on the SAPUI5 version and the theme in use.
It works for me on SAPUI5 1.108 with the default theme (no data-sap-ui-theme specified in index.html).
Try like in the Documentation
Create a custom CSS
Add your styleclass to the Control.

Why table column headers change their width&

I open one table in the dialog window. And it looks like this:
Normal table
But if I close the dialog and reopen it, table column headers becomes more narrow like this:
Strange table
When I resize column width, headers become normal.
I use code from example SAPUI5 Explored | Grid Table
(sapui5.hana.ondemand.com/explored.html#/sample/sap.ui.table.sample.Basic/code/View.view.xml)
<t:Table
rows="Data>/Table}"
class="sapUiSmallMargin"
selectionMode="None"
enableSelectAll="false"
visibleRowCount="17">
<t:columns>
<t:Column
showFilterMenuEntry="false"
showSortMenuEntry="false"
width="3rem">
<Label text="Num" />
<t:template>
<Text text="{Data>Row}"/>
</t:template>
</t:Column>
...
And I can't understand, what is the problem.
Any ideas?
I have come across this myself as well in certain browsers (Chrome), but not in others (such as IE11).
I believe that this is a browser-specific SAPUI5 rendering problem, and not a mistake in your coding.
If you do not set the width of the column manually, it will probably work just fine. If this is unacceptable, your could manually have the table to rerender once (just like what happens when you drag the width of the column).