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.
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 an XML fragment and use it in several places in an XML view like this:
<IconTabFilter text="ABC" key="1" icon="sap-icon://alphabetical-order">
<content>
<Table id="table1" width="auto" items="{path:'/ContactSet',parameters:{expand:'BusinessAddress,HomeAddress,OtherAddress,Photo'},filters:[{path:'Surname',operator:'StartsWith',value1:'A'},{path:'Surname',operator:'StartsWith',value1:'B'},{path:'Surname',operator:'StartsWith',value1:'C'}]}" noDataText=" {worklistView>/tableNoDataText}" busyIndicatorDelay="{worklistView>/tableBusyDelay}" growing="true" growingScrollToLoad="true" updateFinished="onUpdateFinished">
<headerToolbar>
<core:Fragment fragmentName="de.cimt.cimply.AddressBook.view.worklist.tablesHeader" type="XML"/>
</headerToolbar>
<columns>
<core:Fragment fragmentName="de.cimt.cimply.AddressBook.view.worklist.tablesColumns" type="XML"/>
</columns>
<items>
<core:Fragment fragmentName="de.cimt.cimply.AddressBook.view.worklist.tablesRows" type="XML"/>
</items>
</Table>
</content>
</IconTabFilter>
<IconTabSeparator icon="sap-icon://process"/>
<IconTabFilter text="DEF" key="2" icon="sap-icon://alphabetical-order">
<content>
<Table id="table2" width="auto" items="{path:'/ContactSet',parameters:{expand:'BusinessAddress,HomeAddress,OtherAddress,Photo'},filters:[{path:'Surname',operator:'StartsWith',value1:'D'},{path:'Surname',operator:'StartsWith',value1:'E'},{path:'Surname',operator:'StartsWith',value1:'F'}]}" noDataText="{worklistView>/tableNoDataText}" busyIndicatorDelay="{worklistView>/tableBusyDelay}" growing="true" growingScrollToLoad="true" updateFinished="onUpdateFinished">
<headerToolbar>
<core:Fragment fragmentName="de.cimt.cimply.AddressBook.view.worklist.tablesHeader" type="XML"/>
</headerToolbar>
<columns>
<core:Fragment fragmentName="de.cimt.cimply.AddressBook.view.worklist.tablesColumns" type="XML"/>
</columns>
<items>
<core:Fragment fragmentName="de.cimt.cimply.AddressBook.view.worklist.tablesRows" type="XML"/>
</items>
</Table>
</content>
</IconTabFilter>
I have some bindings in tablesHeader fragment file:
<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core">
<Toolbar>
<Title text="{worklistView>/worklistTableTitle}"/>
<ToolbarSpacer/>
<SearchField tooltip="{i18n>worklistSearchTooltip}" search="onSearch" width="auto"/>
</Toolbar>
</core:FragmentDefinition>
Now the question is how can I customize the binding inside the fragment based on its parent element.
For example I would like to have <Title text="{worklistView>/worklistTable1Title}"/> when it is placed inside the IconTabFilter with key="1" and also <Title text="{worklistView>/worklistTable2Title}"/> when it placed inside the IconTabFilter with key="2".
One possibility is to pass this binding to the fragment when we place it in the destination. But I don't know do we have any option for that in SAPUI5 or not.
The other possibility is to use some kinds of templating like what explained here. However, again I don't know how to make the conditions based on the parent element.
Note: I don't want to enter the codes inside the fragment file directly in the destination file, as I want to prevent repeating the code.
You need to play with the worklistView JSON model. As you mentioned it is a JSON model there will be a common property which is bind to the header text control irrespective of the selected key.
On load IconTabBar will set the default key using selectedKey property. So we can set this key value as the default value for the header text in the header section.
view.xml
<IconTabBar
id="idIconTabBar"
select="handleIconTabBarSelect"
selectedKey="1"
class="sapUiResponsiveContentPadding">
<items>
<IconTabFilter text="ABC" key="1" icon="sap-icon://alphabetical-order">
<content>
<Table id="table1" width="auto" noDataText=" {worklistView>/tableNoDataText}" busyIndicatorDelay="{worklistView>/tableBusyDelay}" growing="true" growingScrollToLoad="true" updateFinished="onUpdateFinished">
<headerToolbar>
<core:Fragment fragmentName="path/tablesHeader" type="XML"/>
</headerToolbar>
<!-- columns-->
<!-- items -->
</Table>
</content>
</IconTabFilter>
<IconTabSeparator icon="sap-icon://process"/>
<IconTabFilter text="DEF" key="2" icon="sap-icon://alphabetical-order">
<content>
<Table id="table2" width="auto" noDataText="{worklistView>/tableNoDataText}" busyIndicatorDelay="{worklistView>/tableBusyDelay}" growing="true" growingScrollToLoad="true" updateFinished="onUpdateFinished">
<headerToolbar>
<core:Fragment fragmentName="path/tablesHeader" type="XML"/>
</headerToolbar>
<!-- columns-->
<!-- items -->
</Table>
</content>
</IconTabFilter>
</items>
</IconTabBar>
Header fragment
<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core">
<Toolbar>
<Title text="{worklistView>/worklistTableHdrTitle}"/>
<ToolbarSpacer/>
<SearchField tooltip="{i18n>worklistSearchTooltip}" search="onSearch" width="auto"/>
</Toolbar>
</core:FragmentDefinition>
controller.js
worklistView model will be set with an extra property worklistTableHdrTitle with the default value as per the key which is mentioned in the IconTabBar.
setworklistViewModel: function() {
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({
"worklistTableHdrTitle": "Table1 Title",//default value, as selectedKey="1" in IconTabBar
"worklistTable1Title": "Table1 Title",
"worklistTable2Title": "Table2 Title",
"tableNoDataText": "No Data"
});
this.getView().setModel(oModel, "worklistView");
},
Manipulate the worklistView model data based on the selection.
handleIconTabBarSelect: function(oEvent) {
var sSelectedKey = oEvent.getParameters("selectedKey").key;
if (sSelectedKey) {
var oModel = this.getView().getModel("worklistView");
if (oModel)
oModel.setProperty("/worklistTableHdrTitle", (sSelectedKey === "1") ? oModel.getProperty("/worklistTable1Title") : oModel.getProperty("/worklistTable2Title"));
}
},
I have a XML view with a smart table binded to an oData service. For this smart table I want to add a custom column for erdat as described in the SAPUI5 sample.
Code from the XML view:
<smartTable:SmartTable id="smartTable0" entitySet="<my_entity_set>" enableAutoBinding="true" beforeRebindTable="onBeforeRebindTable"
tableType="ResponsiveTable" useExportToExcel="true" useTablePersonalisation="true" showRowCount="true" showFullScreenButton="true"
class="sapUiResponsiveContentPadding" exportType="UI5Client" demandPopin="true">
<smartTable:layoutData>
<FlexItemData growFactor="1" baseSize="0%"/>
</smartTable:layoutData>
<Table alternateRowColors="true" fixedLayout="false" growing="true" growingScrollToLoad="true" growingThreshold="20">
<columns>
<Column width="200px" hAlign="Begin">
<customData>
<core:CustomData key="p13nData" value="\{'columnKey': 'erdat', 'leadingProperty': 'erdat', 'columnIndex': '0'}"/>
</customData>
<Text text="Erdat"/>
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<Text text="{path: 'erdat'}"/>
</cells>
</ColumnListItem>
</items>
</Table>
</smartTable:SmartTable>
Without the custom column the smart table displays the data as expected. When I add the custom column I get an error:
Uncaught (in promise) The table instance contains some columns for which a columnKey is provided, some for which a columnKey is not provided.
The table shows the column headers only, but no data. I have tried several combinations with and without columnKey or leadingProperty but without success. The field erdat is included in the oData service.
Web search didn't provide a solution for me. Any help would be appreciated.
If I replace ' with " and vice versa in <core:CustomData value=...> it's working as intended. Should have typed exactly as in the example...
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.
In a normal list we have sth like this
<List noDataText="---" id="__list0" items="{model>/Orders}">
<items>
<StandardListItem type="Navigation" title="{model>OrderName}" press="onPress" />
</items>
</List>
So we set the press-Event in the Items, but if we have a SmartTable we do not have the inner
<StandardListItem type="Navigation" title="{model>OrderName}" press="onPress" />
I just have:
<sap.ui.comp.smarttable:SmartTable xmlns:sap.ui.comp.smarttable="sap.ui.comp.smarttable"
height="100%"
width="100%"
direction="Column"
fitContainer="true"
tableType="ResponsiveTable"
header="Smart Table"
enableAutoBinding="true"
id="__table0"
entitySet="Datas"/>
//Not the same Model in this case
How can I set an onPress event for the columns?
Thank you very much for your Help.