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).
Related
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
I am using a sapui5 smart table to list down my products. It includes product code, product description and order quantity.
Among these three fields i want to update only the order quantity. It should be an inline editing in the table.
In my smart table i have enabled the property "editable" as "true". It makes the entire row is editable. Instead of making entire row editable, i want make only one cell to be editable.
Example
<smartFilterBar:SmartFilterBar id="smartFilterBar" entityType="ZDEMO_C_MyEntityType" persistencyKey="SmartFilter_Explored">
</smartFilterBar:SmartFilterBar>
<smartTable:SmartTable id="mySmartTable"
smartFilterId="smartFilterBar"
tableType="GridTable"
editable="true"
entitySet="ZDEMO_C_MyEntity"
useVariantManagement="false"
useTablePersonalisation="true"
header="My Products"
showRowCount="true"
useExportToExcel="true"
enableAutoBinding="true">
</smartTable:SmartTable>
I can see 2 ways:
Make use of "field controls" concept. It requires adding a special properties within your entity type, which define the state of the fields (cells). Also some annotations have to be introduced (in the metadata.xml by backend) to initiate the handling.
Here is a link where concept described using Form control as an example, but the same rules are applicable for Table as well:
https://blogs.sap.com/2017/06/06/dynamic-field-control-using-annotations-in-sapui5/
Redefine the table rows manually in your XML and bind the needed cell(s) against the property of the local JSON model, which could be changed depending on some conditions (e.g. Edit button press).
The 1st approach is better from the architectural perspective but requires some data model modifications (from the backend side).
The 2nd approach allows to do everything on UI and program some complex UI logic, which defines the cells state.
You choose.
You can add a sap ui table inside the smart table and add columns with customdata property. Follow these steps.
Make editable="true" as editable="false"
In your xml, make sure to add this namespace xmlns:core="sap.ui.core"
Within the smarttable tag add below.
<smartTable:SmartTable .................................
<Table>
<columns>
<Column>
<customData>
<core:CustomData key="p13nData" value='\{"columnKey": "OrderQty", "leadingProperty": "OrderQty", "columnIndex":"2"}'/>
</customData>
<Text text="Order Qty"/>
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<Input value="{OrderQty}" type="Number" editable="true"/>
</cells>
</ColumnListItem>
</items>
</Table>
</smartTable:SmartTable>
Add below tag inside table to make your column editable
<table:Column sortProperty="Max_Capacity" filterProperty="Max_Capacity" id="maxCapCol">
<Label text="Max Capacity"/>
<table:template>
<Input text="{Max_Capacity}" />
</table:template>
</table:Column>
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.
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.
I want to place a text field in a matrix layout. Please check below code and please suggest how to check XML code errors? Every time I stuck in designing the XML code. Please suggest me how to overcome that.
<core:View
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
xmlns:l="sap.ui.commons.layout"
controllerName="matrix.matrix"
xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="ytftfhgff">
<content>
<l:MatrixLayout layoutFixed="true" columns="4" width="600px" widths="150px,150px,150px,150px">
<l:MatrixLayoutRow>
<l:MatrixLayoutCell colSpan="4">
<Text text="Its a heading" />
</l:MatrixLayoutCell>
</l:MatrixLayoutRow>
<l:MatrixLayoutRow>
<l:MatrixLayoutCell>
<Label text="First Name"/>
</l:MatrixLayoutCell>
<l:MatrixLayoutCell>
<TextField id="axscx" width="20em"></TextField>
</l:MatrixLayoutCell>
</l:MatrixLayoutRow>
</l:MatrixLayout>
</content>
</Page>
</core:View>
Thanks in advance,
sriman.
In general the errors logged by the XMLTemplateParser to the console should be understandable enough to get a basic idea of what's going wrong. In your case it is quite simple. The default namespace is set to "sap.m", i.e. the runtime tries to load the TextField control from that library. This cannot work as sap.m does not have a TextField control.
You can either use the Input control, i.e. replace TextField with Input. Or introduce an additional namespace:
xmlns:commons="sap.ui.commons"
and define the TextField in the following way:
<commons:TextField id="axscx" width="20em"/>
I would prefer using the Input field.