How to format the Date field in Smart Table?
Oct 17, 2017 to 17/10/2017
The only way I found was by making it a customData and formmatting it
<customData>
<core:CustomData key="p13nData" value='\{"columnKey": "Erdat", "leadingProperty": "Erdat"}' />
</customData>
then
<Text text="{parts: ['Erdat'],formatter: '.formatDate'} " />
this way I was able to format my data
You may also use sap annotation sap:display-format='Date' for this:
<Property
sap:label="Test Date"
Name="ZDATE"
Type="Edm.DateTime"
sap:display-format="Date"
Precision="0"/>
which results in
Or via customData and composite binding with constraints option of sap.ui.model.odata.type.DateTime which allows you not to create custom formatter:
<Table>
<columns>
<Column hAlign="Begin">
<customData>
<core:CustomData key="p13nData"
value='\{"columnKey": "TEST_DATE",
"columnIndex":"9",
"leadingProperty": "ZDATE",
"width": "10%"
}'/>
</customData>
<Text text="Test Date Custom"/>
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<Text text="{
path: 'ZDATE',
type: 'sap.ui.model.odata.type.DateTime',
constraints: { displayFormat: 'Date' }
}"/>
</cells>
</ColumnListItem>
</items>
</Table>
Related
I have a table with many rows, based on the selected item, it should populate the associated navigation property which also has many records in another table.
I have handled the selectionChange event in my controller to trigger this behavior and I see that it returns the record(s) in my response but it doesn't show the binding in my table. Please help in this regard. This is my code
Controller.js
this.subsystemList.setEnabled(true);
this.manageDistribution.setEnabled(true);
var sourceSystem = oEvt.getSource().getSelectedItem().getBindingContext("pcsdModel").getPath();
var path = sourceSystem +"/"+"SubSystems";
var oItemTemplate = new sap.m.ColumnListItem();
this.getView().byId("idSubsystemListTable").bindItems({
path:path,
parameters:{
expand:"SubSystems"
},
length: 1,
template: oItemTemplate
});
},
This is my table
<Table id="idSubsystemListTable" inset="false">
<columns>
<Column minScreenWidth="Tablet" demandPopin="true">
<Text text="Source System Level"/>
</Column>
<Column minScreenWidth="Tablet" demandPopin="true">
<Text text="Due Date Reminder"/>
</Column>
<Column minScreenWidth="Tablet" demandPopin="true">
<Text text="Cutoff Date Reminder"/>
</Column>
<Column minScreenWidth="Tablet" demandPopin="true">
<Text text="Actions"/>
</Column>
</columns>
<items>
<ColumnListItem vAlign="Middle">
<cells>
<Text text="{SourceSystemLevel}"/>
<Text text="{DueDateReminder}"/>
<Text text="{CutoffDateReminder}"/>
<HBox>
<Button icon="sap-icon://edit"/>
<Button icon="sap-icon://delete"/>
</HBox>
</cells>
</ColumnListItem>
</items>
</Table>
This is the response from the serverenter image description here
I have fragment as mentioned below. I am mapping from a model --> myTable.
The columns are visible accept Start Time. I tried different approach for that column. Can any one find the mistake in the code. Below is the JSON Structure :
<core:FragmentDefinition xmlns="sap.m"
xmlns:core="sap.ui.core">
<Page id="jobTableDisplayPage" showHeader="false" enableScrolling="true">
<content>
<Table id="jobTable" items="{myTable>/d/results/}">
<columns>
<Column width="15em">
<Text text="Job Name" />
</Column>
<Column width="5em">
<Text text="User Name" />
</Column>
<Column width="5em">
<Text text="Job Status" />
</Column>
<Column width="5em">
<Text text="Start Date" />
</Column>
<Column width="5em">
<Text text="Start Time" />
</Column>
<Column width="5em">
<Text text="End Time" />
</Column>
<Column width="5em">
<Text text="Spool Number" />
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<Text text="{myTable>Jobname}" />
<Text text="{myTable>Usern}" />
<Text text="{myTable>Status}" />
<Text text="{myTable>Startdate}" />
<Text
text="{ path: '{myTable>Starttime}',
type: 'sap.ui.model.type.Time',
formatOptions: {
relative: true,
relativeScale: 'auto'
}
}" />
<Text text="{myTable>Endtime}" />
<Text text="{myTable>Spool}" />
</cells>
</ColumnListItem>
</items>
</Table>
</content>
</Page>
</core:FragmentDefinition>
The columns are visible accept Start Time. I tried different approach for that column. Can any one find the mistake in the code. Below is the JSON Structure :
{
"d":{
"results":[
{
"__metadata":{
"id":"blablabla",
"uri":"blablabla",
"type":"blablabla"
},
"Jobname":"JOB1",
"Usern":"BC-BATCH",
"Status":"F",
"Startdate":"10/27/2017",
"Starttime":"PT03H00M49S",
"Endtime":"PT03H31M12S",
"Spool":"0000033977"
},
{
"__metadata":{
"id":"blablabla",
"uri":"blablabla",
"type":"blablabla"
},
"Jobname":"JOB2",
"Usern":"BC-BATCH",
"Status":"F",
"Startdate":"10/27/2017",
"Starttime":"PT03H00M49S",
"Endtime":"PT03H31M12S",
"Spool":"0000033977"
}
]
}
}
I believe path doesn't need the curly brackets.
Try:
<Text text="{ path: 'myTable>Starttime', type: 'sap.ui.model.type.Time',
formatOptions: { relative: true, relativeScale: 'auto' } }" />
As mentioned in this answer, you need to use the odata binding type instead of the regular one.
So, in case of the odata type Edm.Time (Starttime and Startdate in your case):
type: 'sap.ui.model.type.Time', --> type: 'sap.ui.model.odata.type.Time',
And yes, the additional curly brackets around the path are invalid. So it should be:
<Text text="{
path: 'myTable>Starttime',
type: 'sap.ui.model.odata.type.Time',
formatOptions: {
relative: true
}
}"/>
There is a openui5 offical example about table.
Is there anyway to set class attribute dynamically for table row in the Table.view.xml.
<ColumnListItem>
<cells>
<ObjectIdentifier
title="{Name}"
text="{ProductId}"/>
<Text
text="{SupplierName}" />
<Text
text="{Width} x {Depth} x {Height} {DimUnit}" />
<ObjectNumber
number="{WeightMeasure}"
unit="{WeightUnit}"
state="{
path: 'WeightMeasure',
formatter: 'sap.m.sample.Table.Formatter.weightState'
}" />
<ObjectNumber
number="{
parts:[{path:'Price'},{path:'CurrencyCode'}],
type: 'sap.ui.model.type.Currency',
formatOptions: {showMeasure: false}
}"
unit="{CurrencyCode}" />
</cells>
</ColumnListItem>
Eg.
row 1
<ColumnListItem class="bg-gray">
row 2
<ColumnListItem class="bg-blue">
row 3
<ColumnListItem class="bg-green">
The following code does not meet the requirements：
<ColumnListItem class="{rowStyle}">
Unfortunately, 'class' cannot be bound to a property. But there are easy alternatives.
It involves below steps.
Create a property (Using CustomData) in the DOM using binding.
<ColumnListItem type="Active">
<customData>
<core:CustomData key="background" value="{Country}" writeToDom="true" />
</customData>
<cells>
<ObjectIdentifier title="{CustomerID}"/>
<Text text="{CompanyName}"/>
<Text text="{Address}"/>
<Text text="{Country}"/>
</cells>
</ColumnListItem>
Use Attribute-Value CSS selectors to select the above
written DOM and apply color
tr[data-background="Mexico"] {
background-color: #eaa6a6 !Important;
}
I have written a blog here.
https://blogs.sap.com/2016/12/02/binding-based-dynamic-background-colors-for-sap.m.table-rows/
JS Bin
You can use formatter, function will be like this :
setColour : function(Condition){
if(Condition){
var cellId = this.getId();
$("#"+cellId).parent().parent().parent().css("background-color","Blue");
}
}
your column code will be like this :
<Input value="{path:'Condition',formatter:'formmater_path.setColour'}" />
how to fetch records from database.I have 500 records i the database i want to fetch 200 records initlally and after user press more than i want to fetch another 200 records...I have done like below but am getting only 200 records if i use top=200..
if am not using top=200..then getting all records..
var url = "/sap/opu/odata/sap/ZODATA_CRUD_OPR_SRV/";
//Service Url
var oModel1 = new sap.ui.model.odata.ODataModel(url);
var oUrlParams = "$top=" + '200' + "&$skip=" +'0' ;
oModel1.read("/EmpDetails1Set", null,oUrlParams,true, function(oData){ //read method
oODataJSONModel.setData(oData);
that.getView().setModel(oODataJSONModel,"emp");
},
function(error) {
});
<Table id="table" width="auto" growingScrollToLoad="false" growingThreshold="100" items="{emp>/results}" growing="true">
<columns>
<Column id="nameColumn">
<Text text="" id="nameColnTitle"/>
</Column>
<Column id="namolumn">
<Text text="" id="nameCumnTitle"/>
</Column>
</columns>
<items>
<ColumnListItem type="Navigation" press="onPress">
<cells>
<Text id="ob" text="{emp>Name}"/>
<Text text="{emp>Address}"/>
</cells>
</ColumnListItem>
</items>
</Table>
Setting items="{/EmpDetails1Set}" is important by which it will call OData collection. I hope you have set /sap/opu/odata/sap/ZODATA_CRUD_OPR_SRV/ as your OData Service url of the application.
By this method you don't need to set model data from controller to the view.
<?xml version="1.0" encoding="UTF-8"?>
<Table id="table" width="auto" growingScrollToLoad="false" growingThreshold="100" items="{/EmpDetails1Set}" growing="true">
<columns>
<Column id="nameColumn">
<Text text="" id="nameColnTitle" />
</Column>
<Column id="namolumn">
<Text text="" id="nameCumnTitle" />
</Column>
</columns>
<items>
<ColumnListItem type="Navigation" press="onPress">
<cells>
<Text id="ob" text="{Name}" />
<Text text="{Address}" />
</cells>
</ColumnListItem>
<items>
</Table>
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");
}
});
}