fetch certain amount of records and show in table - sapui5

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>

Related

SAPUI5: How can display the navigation property of an entity which multiple records in a table

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

How do I drag and drop with in one table in UI5?

I noticed on the documentation you can drag and drop between two tables https://sapui5.hana.ondemand.com/#/entity/sap.m.Table/sample/sap.m.sample.TableDnD.
But is there a way to drag and drop on the one table (same table). I have written the code for drag and drop but the drag and drop event isn't triggered when I try to drop in the same table.
<mvc:View controllerName="ariba.cso.kaarecommendation.controller.Recommendation" xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc"
xmlns:core="sap.ui.core" xmlns:f="sap.f" xmlns:dnd="sap.ui.core.dnd">
<f:DynamicPage id="dynamicPageId">
<f:title>
<f:DynamicPageTitle>
<f:heading>
<Title text="{i18n>appSubTitle}"/>
</f:heading>
<f:actions>
<Button text="{i18n>presentation}" press="onPress"></Button>
<Link id="linkid" visible="false" text="{i18n>download}" href="{/powerpoint}" press="linkPress"/>
</f:actions>
</f:DynamicPageTitle>
</f:title>
<f:content>
<Table id="tableid" items="{private}" width="auto" mode="MultiSelect">
<columns>
<Column demandPopin="false" width="auto" hAlign="Begin">
<Text text="{i18n>recommendation}"/>
</Column>
<Column minScreenWidth="Small" demandPopin="true" popinDisplay="Inline" hAlign="Begin">
<Text text="{i18n>itemid}"/>
</Column>
<Column minScreenWidth="Small" demandPopin="true" popinDisplay="Inline" hAlign="Begin">
<Text text="{i18n>areas}"/>
</Column>
<Column minScreenWidth="Small" demandPopin="true" popinDisplay="Inline" hAlign="Begin">
<Text text="{i18n>regions}"/>
</Column>
<Column minScreenWidth="Small" demandPopin="true" popinDisplay="Inline" hAlign="Begin">
<Text text="{i18n>url}"/>
</Column>
</columns>
<dragDropConfig>
<dnd:DragInfo groupName="itemsgroup" sourceAggregation="items"/>
<dnd:DropInfo groupName="dragdrop" drop="onDragDrop"/>
</dragDropConfig>
<items>
<ColumnListItem>
<cells>
<Text text="{private}"/>
<Text text="{private}"/>
<Text text="{private}"/>
<Text text="{private}"/>
<Link href="{private}" text="{i18n>urltext}"/>
</cells>
</ColumnListItem>
</items>
</Table>
</f:content>
</f:DynamicPage>
</mvc:View>
onDragDrop: function () {
var oSwap = this.byId("tableid").getSelectedItems()
if (oSwap.length !== 2) {
var bCompact = !!this.getView().$().closest(".sapUiSizeCompact").length;
MessageBox.error(
"Please pick two items.", {
styleClass: bCompact ? "sapUiSizeCompact" : ""
}
);
}
else{
var jObject = JSON.parse(this.getModel("table").getJSON());
var first = JObject.indexOf()
var second = JObject.indexOf()
jObject[first] =
jObject[second] =
this.setModel(new JSONModel(jObject), "table");
}
}
Try this:
<dnd:DragInfo sourceAggregation="items"/>
<dnd:DropInfo drop="onDragDrop" targetAggregation="items" dropPosition="Between" dropLayout="Vertical"/>
You can refer to this example in the SDK for further info

How to Bind the Property of an Instance?

I created an array of objects:
buildPayerModel: function() {
return [
new SalesPayer("000", "2333", "033.433", "CHF"),
new SalesPayer("000", "2333", "033.433", "CHF"),
new SalesPayer("000", "2333", "033.433", "CHF")
];
}
and as a model:
this.getView().setModel(this.buildPayerModel(), "Sales")
Now I want to show the data in Table as the following:
<Table id="SalesView" inset="false" items="{ path: '/Sales' }">
<headerToolbar>
<Toolbar>
<Title text="Statistics" level="H2"/>
</Toolbar>
</headerToolbar>
<columns>
<Column width="12em">
<Text text="Payer"/>
</Column>
<Column minScreenWidth="Tablet" demandPopin="true">
<Text text="Name"/>
</Column>
<Column minScreenWidth="Tablet" demandPopin="true" hAlign="End">
<Text text="Net Value"/>
</Column>
<Column hAlign="End">
<Text text="Currency"/>
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<ObjectIdentifier title="{Sales.id}"/>
<Text text="{Sales.name}"/>
<Text text="{Sales.name}"/>
<Text text="{Sales.name}"/>
</cells>
</ColumnListItem>
</items>
</Table>
How to access the property of the instance?
Your buildPayerModel() is not building a model.
The API setModel awaits a "subclass" of sap.ui.model.Model (not an array), and a corresponding model name ("Sales" in your case).
A short binding syntax looks as follows: "{modelName>/propertyName}".
The binding is defined inside the curly brackets: { ... }
The > is needed when there is a model name.
The / at the beginning (right after possible >) indicates absolute binding syntax
Without / at the beginning --> "{modelName>childPropertyName}" indicates relative binding syntax. It is relative because such binding cannot be resolved without given context.
Given JSONModel for the "Sales", and a SalesPayer instance contains direct properties such as name and id, here is a fix for you:
buildPayerModel: function() {
return new /*sap.ui.model.json.*/JSONModel([
new SalesPayer("000", "2333", "033.433", "CHF"),
new SalesPayer("000", "2333", "033.433", "CHF"),
new SalesPayer("000", "2333", "033.433", "CHF")
]);
},
Somewhere in the same controller:
this.getView().setModel(this.buildPayerModel(), "Sales")
XMLView:
<Table id="SalesView" inset="false" items="{Sales>/}">
<headerToolbar>
<Toolbar>
<Title text="Statistics" level="H2"/>
</Toolbar>
</headerToolbar>
<columns>
<Column width="12em">
<Text text="Payer"/>
</Column>
<Column minScreenWidth="Tablet" demandPopin="true">
<Text text="Name"/>
</Column>
<Column minScreenWidth="Tablet" demandPopin="true" hAlign="End">
<Text text="Net Value"/>
</Column>
<Column hAlign="End">
<Text text="Currency"/>
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<ObjectIdentifier title="{Sales>id}"/>
<Text text="{Sales>name}"/>
<Text text="{Sales>name}"/>
<Text text="{Sales>name}"/>
</cells>
</ColumnListItem>
</items>
</Table>
setModel() gets a model as first parameter, not a plain JSON Object or Array. Furthermore, the second parameter is the model name, if you name it as "Sales", you must use "Sales>" in your bindings. Then, remember:
1. Use the "/" at the begining when building a path from the root of the model.
2. Avoid the "/" at the begining if you are binding a path relative to another context (Let's say the context of each row of the table)
Try something like this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta charset="utf-8">
<title>MVC with XmlView</title>
<!-- Load UI5, select "blue crystal" theme and the "sap.m" control library -->
<script id='sap-ui-bootstrap'
src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js'
data-sap-ui-theme='sap_belize_plus'
data-sap-ui-libs='sap.m'
data-sap-ui-xx-bindingSyntax='complex'></script>
<!-- DEFINE RE-USE COMPONENTS - NORMALLY DONE IN SEPARATE FILES -->
<!-- define a new (simple) View type as an XmlView
- using data binding for the Button text
- binding a controller method to the Button's "press" event
- also mixing in some plain HTML
note: typically this would be a standalone file -->
<script id="view1" type="sapui5/xmlview">
<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" controllerName="my.own.controller">
<Table id="SalesView" inset="false" items="{ path: 'Sales>/players' }">
<headerToolbar>
<Toolbar>
<Title text="Statistics" level="H2"/>
</Toolbar>
</headerToolbar>
<columns>
<Column width="12em">
<Text text="Payer"/>
</Column>
<Column minScreenWidth="Tablet" demandPopin="true">
<Text text="Name"/>
</Column>
<Column minScreenWidth="Tablet" demandPopin="true" hAlign="End">
<Text text="Net Value"/>
</Column>
<Column hAlign="End">
<Text text="Currency"/>
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<ObjectIdentifier title="{Sales>id}"/>
<Text text="{Sales>name}"/>
<Text text="{Sales>name}"/>
<Text text="{Sales>name}"/>
</cells>
</ColumnListItem>
</items>
</Table>
</mvc:View>
</script>
<script>
// define a new (simple) Controller type
sap.ui.controller("my.own.controller", {
onInit: function(){
this.getView().setModel(this.buildPayerModel(), "Sales")
},
buildPayerModel: function() {
var oModelData = {
"players": [
{"id": 001, "name": "Michael Jordan"},
{"id": 002, "name": "Kobe Bryant"},
{"id": 003, "name": "LeBron James"}
]
};
var oModel = new sap.ui.model.json.JSONModel(oModelData)
return oModel;
}
});
// instantiate the View
var myView = sap.ui.xmlview({viewContent:jQuery('#view1').html()}); // accessing the HTML inside the script tag above
// put the View onto the screen
myView.placeAt('content');
</script>
</head>
<body id='content' class='sapUiBody'>
</body>
</html>

Time Format and value mapping Not Working in the fragment UI5

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
}
}"/>

SAPUI5 XML View Table Color

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");
}
});
}