SAPUI5: When I add custom columns to smart table they don't show in filter tab - annotations

I want to use smart table with a named model. If we use a named model then it does not show the data. One possibility is to use custom list and custom columns. But as soon as I use the custom List it shows data but it will remove the defined custom columns from the "Filter, Group and sort" tabs. It means in the P13N dialog you can just play with the position of columns (As soon as you define the custom columns for all fields it will remove the "Filter, Group and sort" tabs from the P13N dialog).
I need to use named model because of some reasons. Then I need to use custom list items and columns. Now the question is how I can keep these fields or columns in the filtering, sorting and grouping tabs in P13N dialog.
<smartTable:SmartTable id="__smartTableMlst" entitySet="ProjectHeaderMstSet" tableBindingPath="TableMlstJsonModel>/ProjectHeaderMstSet"
header="{i18n>tableMlstTitle}" showRowCount="true" tableType="Responsive" showFullScreenButton="false" useVariantManagement="false"
enableAutoBinding="true" ignoredFields="ProjectDefinition,Method,Refnumber" useExportToExcel="false"
initiallyVisibleFields="MilestoneNumber,Description,OffsetMilestoneDate,OffsetMilestoneDateUnit">
<smartTable:customToolbar>
<m:OverflowToolbar design="Transparent">
<m:ToolbarSpacer/>
<m:Button type="Transparent" press="onRefreshMlstBtnPress" icon="sap-icon://refresh" tooltip="{i18n>refreshBtnTooltip}"/>
<m:Button type="Transparent" press="onAddMlstBtnPress" icon="sap-icon://add" tooltip="{i18n>createBtnTooltip}"
enabled="{objectView>/tableMlstBtnAddEnabledFinal}"/>
<m:Button type="Transparent" press="onDeleteMlstBtnPress" icon="sap-icon://delete" tooltip="{i18n>deleteBtnTooltip}"
enabled="{objectView>/tableMlstBtnDelEnabledFinal}"/>
</m:OverflowToolbar>
</smartTable:customToolbar>
<m:Table id="tableMlst" mode="MultiSelect" busy="{objectView>/tableMlstBusy}">
<m:columns>
<m:Column>
<m:customData>
<core:CustomData key="p13nData" value='\{"columnKey": "MilestoneNumber", "leadingProperty": "MilestoneNumber"}'/>
</m:customData>
<m:Text text="{/#ProjectHeaderMst/MilestoneNumber/#sap:label}"/>
</m:Column>
</m:columns>
<m:items>
<m:ColumnListItem type="Navigation" press="onPress">
<m:cells>
<m:Text text="{path: 'TableMlstJsonModel>MilestoneNumber', formatter: '.formatter.intNumber'}"/>
<m:Text text="{TableMlstJsonModel>Description}"/>
<m:Text text="{TableMlstJsonModel>OffsetMilestoneDate}"/>
<m:Text text="{TableMlstJsonModel>OffsetMilestoneDateUnit}"/>
<m:Text text="{TableMlstJsonModel>Activity}"/>
<m:Text text="{TableMlstJsonModel>ActivityName}"/>
<m:Text text="{TableMlstJsonModel>Aedat}"/>
<m:Text text="{TableMlstJsonModel>Aenam}"/>
<m:Text text="{TableMlstJsonModel>Erdat}"/>
<m:Text text="{TableMlstJsonModel>Ernam}"/>
<m:Text text="{TableMlstJsonModel>MlstSmlnr}"/>
<m:Text text="{TableMlstJsonModel>Network}"/>
<m:Text text="{TableMlstJsonModel>NetworkName}"/>
</m:cells>
</m:ColumnListItem>
</m:items>
</m:Table>
</smartTable:SmartTable>
I know about the usage of annotation files in smart tables, but is it possible to use annotation files with named JSON models? In the following image You can see how the MilestoneNumber has been removed from the filter list.

You just need to pass filterProperty and sortProperty in custom column. You even can play with the starting position of the column or its visibility.
these are the key points of your answer
I added them for two columns of your code. Be aware by defining the columns, the property, initiallyVisibleFields will be ignored. Then you need to pass the visibility of the Column like this:
Here is modified code:
<smartTable:SmartTable id="__smartTableMlst" entitySet="ProjectHeaderMstSet" tableBindingPath="TableMlstJsonModel>/ProjectHeaderMstSet"
header="{i18n>tableMlstTitle}" showRowCount="true" tableType="Responsive" showFullScreenButton="false" useVariantManagement="false"
enableAutoBinding="true" ignoredFields="ProjectDefinition,Method,Refnumber" useExportToExcel="false">
<smartTable:customToolbar>
<m:OverflowToolbar design="Transparent">
<m:ToolbarSpacer/>
<m:Button type="Transparent" press="onRefreshMlstBtnPress" icon="sap-icon://refresh" tooltip="{i18n>refreshBtnTooltip}"/>
<m:Button type="Transparent" press="onAddMlstBtnPress" icon="sap-icon://add" tooltip="{i18n>createBtnTooltip}"
enabled="{objectView>/tableMlstBtnAddEnabledFinal}"/>
<m:Button type="Transparent" press="onDeleteMlstBtnPress" icon="sap-icon://delete" tooltip="{i18n>deleteBtnTooltip}"
enabled="{objectView>/tableMlstBtnDelEnabledFinal}"/>
</m:OverflowToolbar>
</smartTable:customToolbar>
<m:Table id="tableMlst" mode="MultiSelect" busy="{objectView>/tableMlstBusy}">
<m:columns>
<m:Column visible="true">
<m:customData >
<core:CustomData key="p13nData" value='\{"sortProperty": "MilestoneNumber", "filterProperty": "MilestoneNumber", "columnKey": "MilestoneNumber", "leadingProperty": "MilestoneNumber", "columnIndex":"0"}'/>
</m:customData>
<m:Text text="{/#ProjectHeaderMst/MilestoneNumber/#sap:label}"/>
</m:Column>
<m:Column visible="false">
<m:customData>
<core:CustomData key="p13nData" value='\{"sortProperty": "Description", "filterProperty": "Description", "columnKey": "Description", "leadingProperty": "Description", "columnIndex":"1"}'/>
</m:customData>
<m:Text text="{/#ProjectHeaderMst/Description/#sap:label}"/>
</m:Column>
</m:columns>
<m:items>
<m:ColumnListItem type="Navigation" press="onPress">
<m:cells>
<m:Text text="{path: 'TableMlstJsonModel>MilestoneNumber', formatter: '.formatter.intNumber'}"/>
<m:Text text="{TableMlstJsonModel>Description}"/>
<m:Text text="{TableMlstJsonModel>OffsetMilestoneDate}"/>
<m:Text text="{TableMlstJsonModel>OffsetMilestoneDateUnit}"/>
<m:Text text="{TableMlstJsonModel>Activity}"/>
<m:Text text="{TableMlstJsonModel>ActivityName}"/>
<m:Text text="{TableMlstJsonModel>Aedat}"/>
<m:Text text="{TableMlstJsonModel>Aenam}"/>
<m:Text text="{TableMlstJsonModel>Erdat}"/>
<m:Text text="{TableMlstJsonModel>Ernam}"/>
<m:Text text="{TableMlstJsonModel>MlstSmlnr}"/>
<m:Text text="{TableMlstJsonModel>Network}"/>
<m:Text text="{TableMlstJsonModel>NetworkName}"/>
</m:cells>
</m:ColumnListItem>
</m:items>
</m:Table>
</smartTable:SmartTable>
have fun

Related

Filter on custom column in Fiori

I have custom column placed in smart table. It should have sort and filter option on column but it doesn't work.
Any ideas?
<smartTable:smartTable entityset="foo">
<ui:Table>
<ui:columns>
<ui:Column>
<ui:CustomData>
<core:CustomData key="p13Data" value='\{"columnKey": "key", "columnIndex":"0", "leadingProperty":"key", "isCurrency":"true", "sortProperty":"key", "filterProperty":"key" }'/>
</ui:CustomData>
<Text text="Column name"/>
<ui:template>
<HBox>
<Text renderWhitespace="true" text="{key} "/>
<core:Icon src="sap-icon://warning" visible={= ${key} === 'XX' ? true : false }> </core:Icon>
</HBox>
</ui:template>
</ui:Column>
</ui:columns>
</ui:Table>
</smartTable:smartTable>

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 have input fields arranged in HBox/VBox?

I have a table and in one of the column's I am trying to show 4 input fields with 2*2 manner
For eg i have a Sample Column :
I have tried VBox as :
<Column>
<m:Text text="Sample Column" />
<template>
<m:VBox visible="true">
<m:Input value="test1" editable='false'/>
<m:Input value="test2" editable='false'/>
<m:Input value="test3" editable='false'/>
<m:Input value="test4" editable='false'/>
</m:VBox>
</template>
</Column>
I have tried HBox(replacing VBox above and some random text) and it shows all columns as:
May i know how to achieve 2*2 as (trying to explain):
try this:
<m:VBox visible="true">
<m:HBox>
<m:Input value="test1" editable='false'/>
<m:Input value="test2" editable='false'/>
</m:HBox>
<m:HBox>
<m:Input value="test3" editable='false'/>
<m:Input value="test4" editable='false'/>
</m:HBox>
</m:VBox>

How to set visible false of a Text field

In XML i have :
<Column>
<m:Text text="TEST page" />
<template>
<m:HBox>
<m:Text text=" BP : {BPOOption}" wrapping="false" id='BP'/>
<m:Text text=" QTY : {Quantity}" wrapping="false" id='QTY'/>
<m:Text text=" B : {Batch}" wrapping="false" id='Batch'/>
</m:HBox>
</template>
</Column>
I have seen that default it has visible='true' , also checked putting visible='false' for each Text field.
What I am trying to achieve is set the Text visible='false' using ID's in controller ...
I tried as :
var BPText = this.getView().byId('BP');
BPText.setVisible(false);
In console...
But this doesn't work ....Is there any way to set visible or hide a text field , any help is appreciated TIA
Thanks for #Marc and #cmdd comment's ....the solution is as :
No more id's required ,
<m:Text text=" BP : {BPOOption}" wrapping="false" visible="{= !!${BPOOption} }"/>

resizing columns width in sap.m.Table

I have a lot of rows in sap.m.table and I want to show all rows' names properly. First I made table auto and gave the columns 100% width and made them demand popin. I tried a lot of combinations but I couldn't manage to show them properly. Here what I've got at the end.
My view is at the below:
<m:ScrollContainer
height="100%"
width="100%"
horizontal="true"
vertical="true"
focusable="true">
<m:Table id="idTable"
inset="false"
growing="true"
growingThreshold="3"
fixedLayout="false"
visibleRowCount="7"
border-collapse="collapse"
items="{
path: '/...',
sorter: {
path: '...'
}
}">
<m:headerToolbar>
</m:headerToolbar>
<m:columns>
<m:Column
minScreenWidth="Desktop"
demandPopin="true"
width="12em">
<m:Text text="{i18n>YUKLEME_NO}" />
</m:Column>
<m:Column
minScreenWidth="Desktop"
demandPopin="true"
hAlign="Left">
<m:Text text="{i18n>GEMI_BILGISI}" />
</m:Column>
<m:Column
minScreenWidth="Desktop"
demandPopin="true"
width="12em"
hAlign="Left">
<m:Text text="{i18n>YUKLEME_ARAC_SAYISI}" />
</m:Column>
<m:Column
minScreenWidth="Desktop"
demandPopin="true"
hAlign="Left">
<m:Text text="{i18n>PROFORMA_NO}" />
</m:Column>
...
<m:Column
demandPopin="true"
width="14em"
hAlign="Left">
<m:Text text="{i18n>MODEL}" />
I also tried minScreenWidth="Desktop" and wrapping="true" for columns. But still it didn't change.
Thank you for your helps.
See sap.m.Column.minScreenWidth as well as Enum sap.m.ScreenSize.
You are using minScreenWidth="Desktop" for all your columns. That means the columns will look like what you see until your screen width goes below 1024px. You could play around with different combinations of sap.m.ScreenSize for your columns. But you could also use something like minScreenWidth="1280px" instead of using the enum. Furthermore, you could use the width="9em" or what ever value. So basically the issue you described occurs if you have a bad configuration for your column's minScreenWidth properties.
If you are not thinking of going mobile this particular scenario, I would suggest you to go to for sap.ui.table.Table.
Sample code:
oTable = new sap.ui.table.Table({
title: "Table with fixed columns Example and scroller",
visibleRowCount: 7,
firstVisibleRow: 3,
selectionMode: sap.ui.table.SelectionMode.Single,
navigationMode: sap.ui.table.NavigationMode.Paginator,
fixedColumnCount: 0
});
Working JS Fiddle here