Adding custom column to SAPUI5 smart - columnKey error - sapui5

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...

Related

UI5: SmartTable Personalisation/Variant Management Error

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(?)

How to put table of UI5 smarttable inside of a scrollbar?

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.

SAP UI5 filtering the table rows within the date range

I have a table with list of records (Rows Data fetched from local JSON).
I want to filter the table with "TO" field.
If i give the date as Feb 13,2018 and click on "Display" button. Table must filter all the rows which are upto Feb 13,2018. But im not able to achieve this. Can you please help me to solve this? Below is my Code..
XML ::
<DatePicker id="leaveSince" valueFormat="dd-MM-yyyy" class="leaveSinceInput"/>
<Button text="Display" type="Accept" class="sapUiSmallMarginBegin" press="displayTable"></Button>
<Table id="idLeaveTable" inset="true" items="{path: 'overviewModel>/leaveOverview'}">
<columns>
<Column>
<Text text="Type of Leave" />
</Column>
<Column minScreenWidth="Tablet" demandPopin="true">
<Text text="From" />
</Column>
<Column minScreenWidth="Tablet">
<Text text="To" />
</Column>
<Column>
<Text text="Status" />
</Column>
<Column minScreenWidth="Tablet" demandPopin="true">
<Text text="Used" />
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<Text text="{overviewModel>typeofleave}" />
<Text text="{overviewModel>from}" />
<Text text="{overviewModel>to}" />
<Text text="{overviewModel>status}" />
<Text text="{overviewModel>used}" />
</cells>
</ColumnListItem>
</items>
</Table>
Controller
displayTable:function(oEvent){
var leaveSince=this.getView().byId("leaveSince").getValue();
var filter = new sap.ui.model.Filter("to", sap.ui.model.FilterOperator.BT, leaveSince);
var list = this.getView().byId("idLeaveTable");
var binding = list.getBinding("items");
binding.filter([filter]);
}
The Value format for the date was dd-MM-yyyy. Can someone please help me to fix my query?
Thank you in advance
The problem is that you use DatePicker control as it is (without data binding) and get the value from the input itself (string date value).
But the thing is that Filter object does not understand date strings, it works with the date objects (plain JS date object).
So you your case I see 2 solutions:
Bind the DatePicker to the local JSON model and by pressing on "Display" just get it through getProperty method.
Make use of "getDateValue" metho of DatePicker to fetch the JS date object
After you successfuly got the date object, make use of LT operator in Filter object construction.
I would recommend the 1st variant, because this is more convenient and extensible solution.

IconTabBar and ScrollContainer Issue [duplicate]

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.

Popover inside on Table doesn't display data

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).