This question already has answers here:
sap.m.IconTabBar: How to Make Header Sticky / Only Content Scrollable
(2 answers)
Closed 18 days ago.
Does anybody know a solution to use a Panel oder sap.m.Table inside the ScrollContainer? No matter what parameter I change, the result is still the same. The target should be a Table or Panel including a scrollbar but a scrollbar appears for nearly the whole site; in this case for the whole IconTabBar.
My XML-View
<IconTabBar expanded="true" expandable="false" select="showSource" width="auto">
<items>
<IconTabFilter text="Privileges">
<ScrollContainer height="100%" width="100%" horizontal="false" vertical="true">
<Table id="privilegesTable" items="{/callbackData1}" fixedLayout="true">
<columns>
<Column>
<Label text="User"/>
</Column>
<Column minScreenWidth="Desktop" demandPopin="true" hAlign="Center">
<Label text="Object Type"/>
</Column>
<Column minScreenWidth="Desktop" demandPopin="true" hAlign="Center">
<Label text="Grantor"/>
</Column>
<Column minScreenWidth="Tablet" demandPopin="true" hAlign="Right"/>
</columns>
<items>
<ColumnListItem>
<cells>
<ObjectIdentifier title="{grantee}"/>
</cells>
<Text text="{object_type}"/>
<Text text="{grantor}"/>
<MenuButton text="Fix it" id="fixButton">
<menu>
<Menu itemSelected="onMenuAction">
<items>
<MenuItem icon="sap-icon://call"/>
<MenuItem icon="sap-icon://lateness"/>
<MenuItem icon="sap-icon://key-user-settings"/>
</items>
</Menu>
</menu>
</MenuButton>
</ColumnListItem>
</items>
</Table>
</ScrollContainer>
</IconTabFilter>
<IconTabFilter>
...
</IconTabFilter>
</items>
</IconTabBar>
How It Looks Like
As you can see in the picture above, there is a gap between the Table and the Scrollbar.
There are two issues described in the question.
How to remove the padding between the table and IconTabBar
Solution: Disable applyContentPadding in IconTabBar.
How to make only the content scrollable
Solution: Enable stretchContentHeight in IconTabBar or use IconTabHeader as described here: https://stackoverflow.com/a/47750244/5846045
put the sap.m.Page propertry enableScrolling to false. this deactivates the scrolling for the whole page. now the scroll container should get active. but careful, either the scroll container need a determined height or it's parent container.
Related
Hello Experts, I'm unsure why this error (pictured) is appearing. As far as I know, SmartTable should be able to take care of everything to do with variant management, right? In my controller, I dont have any code pertaining to variant management.
Here is the below code for my smartTable:
<smartTable:SmartTable id="smartTable" entitySet="Z9NRS_REQUESTSet" tableType="ResponsiveTable"
useExportToExcel="true" beforeExport="onBeforeExport" demandPopin="true" useVariantManagement="true" useTablePersonalisation="true"
header="Manage Requests" showRowCount="true" persistencyKey="SmartTableAnalytical_Explored" enableAutoBinding="true"
class="sapUiResponsiveContentPadding" initiallyVisibleFields="ZNRS_REQUEST,ZREQUESTOR_NAME,ZPRODUCT_FAMILY,ZOEM,ZTIER,ZCUSTOMER_PN,ZMATERIAL_NO,ZSTATUS_DESC,ZCONNECTOR_CONFIG" >
<smartTable:customToolbar>
<OverflowToolbar>
<ToolbarSpacer/>
<!--<Button icon="sap-icon://settings" type="Accept" />-->
</OverflowToolbar>
</smartTable:customToolbar>
<Table mode="SingleSelectMaster" selectionChange="onPress" inset="false" >
<columns>
<Column>
<Text text="Status"/>
<customData>
<!--p13nData is a keyword that links smartTable to this and let it identify this custom column-->
<core:CustomData key="p13nData" value='\{"columnKey":"ZSTATUS_DESC",
"leadingProperty":"ZSTATUS_DESC", "sortProperty":"ZSTATUS_DESC",
"filterProperty":"ZSTATUS_DESC", "columnIndex":7}' />
</customData>
</Column>
</columns>
<items>
<ColumnListItem >
<!--<ObjectStatus text="{ZSTATUS_DESC}" />-->
<ObjectStatus text="{ZSTATUS_DESC}" state="{path:'ZOVERALL_STATUS', formatter:'.formatter.DrawingStatus'}" />
</ColumnListItem>
</items>
</Table>
<!-- layout data used to make the table growing but the filter bar fixed -->
<smartTable:layoutData>
<FlexItemData growFactor="1" baseSize="0%"/>
</smartTable:layoutData>
</smartTable:SmartTable>
When I deployed and tested variant management it worked. But in FLPSandbox it wasn't working, so I guess it had to do with the app's access to some backend system(?)
I have a smarttable with custom toolbar and a table inside.
Now I want to put just the table and not the whole smarttable inside of a scroll container. But if I do that then data is not bound to the inner table anymore.
<smartTable:SmartTable id="_0" entitySet="ProjectOrganisationHeadSet" tableBindingPath="/ProjectOrganisationHeadSet"
tableType="ResponsiveTable" smartFilterId="prorgrelWorklistFilterBarId" showFullScreenButton="true" useVariantManagement="false"
enableAutoBinding="true" ignoredFields="" beforeRebindTable="handleBeforeRebindTable" app:myStatus="EDIT"
initiallyVisibleFields="ProjectorgaId,Title,....">
<smartTable:customToolbar>
<OverflowToolbar design="Transparent">
<ToolbarSpacer/>
<Button type="Transparent" press="onCreateBtnPress" icon="sap-icon://add"/>
</OverflowToolbar>
</smartTable:customToolbar>
<ScrollContainer id="__scrollContainer0" horizontal="true" vertical="true">
<Table id="table0" mode="None" busyIndicatorDelay="0">
<items>
<ColumnListItem type="Navigation" press="onPress">
<cells>
<Text text="{path: 'ProjectorgaId', formatter: '.formatter.intNumber'}"/>
</cells>
</ColumnListItem>
</items>
</Table>
</ScrollContainer>
While it must show 40 rows, it shows nothing. If I remove the scrollcontainer all rows will be shown.
I have this table component (sap.m.Table):
<Table
inset="false"
items="{
path: '/SelectExpenseDetails'
}" >
<headerToolbar>
<Toolbar>
<Button icon="sap-icon://cause" press="onBack" ariaLabelledBy="Atrás" />
<Button icon="sap-icon://message-information" press="showInfoExpenseItem" ariaLabelledBy="Atrás" />
<Title text="{i18n>GV.APROB.EXPENSES.detail.title}" level="H2"/>
</Toolbar>
</headerToolbar>
<columns>
<Column width="7em" >
<Text text="{i18n>GV.APROB.EXPENSES.detail.concepto.pago}" />
</Column>
<Column
width="4em"
demandPopin="true"
hAlign="Center">
<Text text="{i18n>GV.APROB.EXPENSES.detail.monto}" />
</Column>
<Column width="1.5em"
demandPopin="true"
hAlign="Center">
</Column>
</columns>
<items>
<ColumnListItem>
<ObjectAttribute text="{ExpensesCategory}" />
<ObjectNumber
number="{PlanAmount}"
unit="{masterExpense>/CurrencySymbol}" />
<Button icon="sap-icon://comment" press="showCommentsExpenseDetailItem" class="sapUiTinyMarginBegin"/>
</ColumnListItem>
</items>
</Table>
Function showCommentsExpenseDetailItem display the popover. Popover component is opened but it doen's display data:
Here is code:
showCommentsExpenseDetailItem: function(event){
var popover = sap.ui.xmlfragment("la.incloud.rva.aprobaciones.view.components.popover-comment-item-detail", this);
this.getView().addDependent(popover);
popover.openBy(event.getSource());
}
And this the XML fragment:
<core:FragmentDefinition
xmlns="sap.m"
xmlns:core="sap.ui.core">
<Popover
showHeader="false"
placement="Bottom">
<TextArea value="{Comments}" growing="true" growingMaxLines="4" width="100%"/>
</Popover>
</core:FragmentDefinition>
I supposed that "{Comments}" is the right way of calling poperty of list items.
It seems that I'm wrong...
I assume that the Comments property belongs to an entity of the SelectExpenseDetails entity set. The problem that you are facing is in fact because of an incorrect binding path.
You have attached your popup as a dependent of the view itself. This means that all its relative bindings (like the one for the text area's value) will be resolved based on the binding context of the view. If the view is not bound to anything, the binding will not be resolved.
To go around this, you should bind the popup itself to the correct path, obtained from the item which was pressed. So you should adjust your event handler like so:
showCommentsExpenseDetailItem: function(event){
var popover = sap.ui.xmlfragment("la.incloud.rva.aprobaciones.view.components.popover-comment-item-detail", this);
this.getView().addDependent(popover);
popover.bindElement(event.getSource().getBindingContext().getPath());
popover.openBy(event.getSource());
}
Also, you are creating a new popup each time you press the button, you might want to reuse the popup instead (either create it declaratively in the view or store it as a property of the controller).
I´ve started with my first SAPUI5 application and build a responsive table.
Now I have the requirement to color specific rows depends on a value in the model.
I´m using a XML-View.
Could I define a method in my controller for that? (How it should be working?)
Home.view.xml
<Table id="idMachineTable"
inset="false"
items="{
path: 'machinemodel>/collection'
}">
<headerToolbar>
<Toolbar>
<Title text="Header" level="H2"/>
</Toolbar>
</headerToolbar>
<columns>
<Column
width="12em">
<Text text="Product" />
</Column>
<Column
hAlign="Right">
<Text text="Price" />
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<ObjectIdentifier
title="{machinemodel>test}"
text="{machinemodel>test}"/>
<Text
text="{machinemodel>test}" />
</cells>
</ColumnListItem>
</items>
</Table>
You can do that with a customdata attribute that creates a dom attribute. Then you can select the rows you want to color via css.
<ColumnListItem>
<customData>
<core:CustomData key="mydata" value="{machinemodel>status}" writeToDom="true" />
</customData>
<cells>
...
<html:style type="text/css">
tr[data-mydata="B"] {
background-color: #faa !important;
}
</html:style>
Full example on jsbin.
I like the answer #schnoebel provided
here is an alternate way (jsbin), in the Items binding define a change handler
items="{
path: 'machinemodel>/collection',
events: {
change: '.onItemsChange'
}
}"
then in the handler add your style class
onItemsChange: function(oEvent){
var oTable = this.byId("idMachineTable");
oTable.getItems().forEach(function(oItem){
var oContext = oItem.getBindingContext("machinemodel");
if (oContext && oContext.getObject().status === 'A'){
oItem.addStyleClass("overdue");
}
});
}
I have a Table and I want to merge duplicates in the first column:
<Column mergeDuplicates="true">
<Text text="Society"/>
</Column>
<Column>
<Text text="Ref2"/>
</Column>
...
I want to have a complex element in the first column: An icon that shows the flag of society.
<items>
<ColumnListItem>
<cells>
<StandardListItem title="{model>society/description}"
icon="{path: 'model>society/code',
formatter: 'ui5bp.Formatter.iconGeneral'}"/>
<!--<Text text="{model>society/description}"/>-->
<Text text="{model>ref2}"/>
</cells>
</ColumnListItem>
</items>
But if I set the StandardListItem instead the simple text the mergeDuplicates="true" does not work.
Are complex column items and the mergeDuplicates property incompatible?
Now StandardListItem has this result:
How can I create a correct "MyCustomColumnListItem" to show the flag on the left and descriprion on the right without space up and down?
The data in your example is not mergeDuplicate ready (from what you show, nothing would be merged), but I took a guess and set up some test data that might be similar. You can perhaps look at using an ObjectAttribute which has an icon and a text, as shown in this snippet.
sap.ui.xmlview("main", {
viewContent: jQuery("#view-main").html()
})
.setModel(new sap.ui.model.json.JSONModel({
records : [
{ icon : "http://www.flags.net/images/smallflags/ANTA0001.GIF", text : "Delete", comment : "delete" },
{ icon : "http://www.flags.net/images/smallflags/ANBA0001.GIF", text : "Delete", comment : "negative" },
{ icon : "http://www.flags.net/images/smallflags/ANDR0001.GIF", text : "Remove", comment : "sys-minus" }
]
}))
.placeAt("content");
<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-libs="sap.m" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-xx-bindingSyntax="complex"></script>
<div id="content"></div>
<script id="view-main" type="ui5/xmlview">
<mvc:View
displayBlock="true"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m">
<Table
items="{/records}">
<columns>
<Column mergeDuplicates="true"><Label text="Icon" /></Column>
<Column><Label text="Comment" /></Column>
</columns>
<items>
<ColumnListItem>
<cells>
<ObjectStatus
text="{text}"
icon="{icon}" />
<Text text="{comment}" />
</cells>
</ColumnListItem>
</items>
</Table>
</mvc:View>
</script>
Not sure if a custom control or ListItem will work...
As an alternative, you could also use two columns, each set with mergeDuplicates="true" and display an Image and Text separately. That should definitely work
I.e.:
<Table id="tbl" items="{model>/yourData}">
<columns>
<Column mergeDuplicates="true" mergeFunctionName="getSrc">
<Text text="Society" />
</Column>
<Column mergeDuplicates="true" />
</columns>
<items>
<ColumnListItem>
<cells>
<Image src="{model>society/flagImg}"/>
<Text text="{model>society/description}" />
</cells>
</ColumnListItem>
</items>
</Table>