Will you please tell me how to refer to the first tabular (and single) record?
There is a table with only one record:
<Table items="{WaybillsPlaces}" mode="SingleSelectMaster">
<columns>
<Column hAlign="Center">
<header>
<Text text="Number" />
</header>
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<Text text="{CoNumber}" />
</cells>
</ColumnListItem>
</items>
</Table>
How can I read the field of the first record without a table?
<Text text="{WaybillsPlaces[0]/>CoNumber}"/>
I get a table reply, but I do not want to display it in the table - I want to display it in the form in text boxes, so there will always be one line in the response.
<entry>
<id>
http://xxxxx.xxx.local:8000/sap/opu/odata/sap/LOGISTICS_SRV/WaybillsPlaces('4610103052')
</id>
<title type="text">WaybillsPlaces('4610103052')</title>
<updated></updated>
<content type="application/xml">
<m:properties xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata" xmlns:d="http://schemas.microsoft.com/ado/2007/08/dataservices">
<d:CoNumber>46101030520001</d:CoNumber>
</m:properties>
</content>
</entry>
EDIT (As #Denis description in the comments):
I have an OData giving me the following entry
<entry>
<id>
http://xxxxx.xxx.local:8000/sap/opu/odata/sap/LOGISTICS_SRV/WaybillsPlaces('4610103052')
</id>
<title type="text">WaybillsPlaces('4610103052')</title>
<updated></updated>
<content type="application/xml">
<m:properties xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata" xmlns:d="http://schemas.microsoft.com/ado/2007/08/dataservices">
<d:CoNumber>46101030520001</d:CoNumber>
</m:properties>
</content>
</entry>
How can I bind the CoNumber property with a Input within a From ??
give and ID to your table, get the table in your controller and call its 'getItems()' method. Then get the first object in the returned array:
In your view
<Table id="myTable" items="{WaybillsPlaces}" mode="SingleSelectMaster">
<columns>
<Column hAlign="Center">
<header>
<Text text="Number" />
</header>
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<Text text="{CoNumber}" />
</cells>
</ColumnListItem>
</items>
</Table>
In your controller
onCertainEvent(evt){
var oTable = this.getView().byId('myTable');
var oFirstItem = oTable.getItems()[0]; // This is your ColumnListItem object in the first row
var oFirstCellItem = oFirstItem.getCells()[0]; // This is your Text object in the first cell of the first row
var sCellText = oFirstCellItem.getText(); // This is the text string in your first cell of the first row
}
EDIT: bind only the first item in your model
In this case you can do aggregation binding. For aggregation binding you need multiplicity greater than 1. So do property binding in yout ColumnListItem with WaybillsPlaces/0/CoNumber
<Table id="myTable" mode="SingleSelectMaster">
<columns>
<Column hAlign="Center">
<header>
<Text text="Number" />
</header>
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<Text text="{WaybillsPlaces/0/CoNumber}" />
</cells>
</ColumnListItem>
</items>
</Table>
EDIT: Data Binding options in certain events
<!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_bluecrystal'
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
controllerName="my.own.controller"
xmlns:l="sap.ui.layout"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
xmlns:f="sap.ui.layout.form"
xmlns="sap.m">
<Panel headerText="Table Panel">
<Table id="myTable" items="{/WaybillsPlaces}" mode="SingleSelectMaster" select="onRowPressed" updateFinished="onUpdateFinished">
<columns>
<Column hAlign="Center">
<header>
<Text text="Number" />
</header>
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<Text text="{CoNumber}" />
</cells>
</ColumnListItem>
</items>
</Table>
</Panel>
<Panel id="Panel1" headerText="onAfterRendering Data Binding">
<Label text="First Item - Property binding:"></Label>
<Input id="Input1"></Input>
<Label text="First Item - Element binding:"></Label>
<Input value="{CoNumber}"></Input>
</Panel>
<Panel id="Panel2" headerText="onUpdateFinished Data Binding">
<Label text="First Item - Property binding:"></Label>
<Input id="Input2"></Input>
<Label text="First Item - Element binding:"></Label>
<Input value="{CoNumber}"></Input>
</Panel>
<Panel id="Panel3" headerText="onRowPressed Data Binding">
<Label text="Selected Item - Property binding:"></Label>
<Input id="Input3"></Input>
<Label text="Selected Item - Element binding:"></Label>
<Input value="{CoNumber}"></Input>
</Panel>
</mvc:View>
</script>
<script>
// define a new (simple) Controller type
sap.ui.controller("my.own.controller", {
onAfterRendering: function(){
var oTable = this.getView().byId('myTable');
var oFirstItem = oTable.getItems()[0]; // This is your ColumnListItem object in the first row
var oFirstCellItem = oFirstItem.getCells()[0]; // This is your Text object in the first cell of the first row
var sFirstItemDataPath = oFirstCellItem.getBindingContext().getPath();
this.getView().byId("Input1").bindProperty("value", sFirstItemDataPath + "/CoNumber");
this.getView().byId("Panel1").bindElement(sFirstItemDataPath);
},
onUpdateFinished: function(oEvent){
var oTable = oEvent.getSource();
var oFirstItem = oTable.getItems()[0]; // This is your ColumnListItem object in the first row
var oFirstCellItem = oFirstItem.getCells()[0]; // This is your Text object in the first cell of the first row
var sFirstItemDataPath = oFirstCellItem.getBindingContext().getPath();
this.getView().byId("Input2").bindProperty("value", sFirstItemDataPath + "/CoNumber");
this.getView().byId("Panel2").bindElement(sFirstItemDataPath);
},
onRowPressed: function(oEvent){
var oFirstItem = oEvent.getParameter("listItem"); // This is the pressed ColumnListItem object
var oFirstCellItem = oFirstItem.getCells()[0]; // This is your Text object in the first cell of the pressed row
var sFirstItemDataPath = oFirstCellItem.getBindingContext().getPath();
this.getView().byId("Input3").bindProperty("value", sFirstItemDataPath + "/CoNumber");
this.getView().byId("Panel3").bindElement(sFirstItemDataPath);
}
});
// instantiate the View
var myView = sap.ui.xmlview({viewContent:jQuery('#view1').html()}); // accessing the HTML inside the script tag above
// create some dummy JSON data
var data = {
WaybillsPlaces: [{
CoNumber: "Item 1",
},{
CoNumber: "Item 2",
},{
CoNumber: "Item 3",
}]
};
// create a Model and assign it to the View
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData(data);
myView.setModel(oModel);
// put the View onto the screen
myView.placeAt('content');
</script>
</head>
<body id='content' class='sapUiBody'>
</body>
</html>
EDIT2: Bind a form input to a certain property in a OData Model
Here I'm gonna use Northwind OData service, for ease of use, but you just need to use your own model. I used the "Customers" entitySet (a.k.a "Customers" DB table), and the "CustomerName" property in this entitySet.
In your case (as per the given OData in the description, you should use the 'WaybillsPlaces' entity and your 'CoNumber' property. If you want to access one specific entry, provide the Key between parenthesis in the binding URL (in your case: WaybillsPlaces('4610103052')).
I highly recommend you to read more about OData binding in UI5 (here and here). In a productive application, please set your OData model in the manifest.json file, to be sure that the $metadata call is done when the application starts, avoiding this way performance and many other issues.
HERE THE SNIPPET
Related
I am trying to build an application that has table#1 with clickable items and display data in another view with table#2 depending on which item you clicked in the first table.
This is some weird behaviour and I'll try to explain the problem the best I can:
The application works fine the first time you use it - I click an Item in table#1 -> it navigates to the view with table#2 and displays the dependent data. Everything works perfectly fine.
Now if i navigate back to table#1 and click another item, it loads table#2 but without any data.
The third time (and every time after that) I navigate back and click an item in table #1 and table#2 is supposed to load I get the error message :
"Error: Missing template or factory function for aggregation items of Element sap.m.Table"
I have tried reloading the item aggregation, destroying the template on navigation, reloading model data and setting the templateSharable flag to true / false but nothing helped in any way.
I'm posting the relevant code for the view with table #2 below
My XML Code:
<f:SimpleForm id="simpleform" editable="true" layout="ResponsiveGridLayout">
<f:content>
<semantic:SemanticPage id="page" headerPinnable="false" toggleHeaderOnTitleClick="false" >
<semantic:content id="posContent">
<Table
id="rkDetailTable"
noDataText="{i18n>tableNoDataText}"
>
<columns>
<Column>
<Text text="Pos ID"/>
</Column>
<Column>
<Text text="{i18n>Art_RkDetail}" />
</Column>
<Column>
<Text text="{i18n>Betrag_RkDetail}"/>
</Column>
</columns>
<items>
<ColumnListItem id="rkDetailTableTemplate" type="Navigation" press="onDetail">
<cells>
<ObjectIdentifier title="{RkposId}" />
<Text text="{RksatzId}" />
<ObjectNumber number="{RkposBetrag}" unit="EUR" />
</cells>
</ColumnListItem>
</items>
</Table>
</semantic:content>
</semantic:SemanticPage>
</f:content>
</f:SimpleForm>
The corresponding controller:
onInit: function () {
this.getRouter().getRoute("RkItemDetail").attachMatched(this.onRouteMatched, this);
},
onRouteMatched: function (oEvent) {
var oArguments = oEvent.getParameter("arguments");
var RkId = oArguments.RkId;
var sBindingPathAbrechnung = "/AbrechnungSet(" + RkId + (")");
this.getView().byId("simpleform").bindElement(sBindingPathAbrechnung);
var sBindingPathPosition = "/AbrechnungSet(" + RkId + (")/ToPos");
this.byId("rkDetailTable").bindItems({
path: sBindingPathPosition,
template: this.byId("rkDetailTableTemplate"),
templateShareable: true
});
}
Disregard the element binding, it is used for something else in that view.
Thank you!
In you table change the <items> aggregation to <dependents>.
<Table
id="rkDetailTable"
noDataText="{i18n>tableNoDataText}"
>
<columns>
...
</columns>
<dependents>
<ColumnListItem id="rkDetailTableTemplate" type="Navigation" press="onDetail">
...
</ColumnListItem>
</dependents>
</Table>
I'm creating a read only form that will be used to display a summary of information. I need to send a parameter to the backend first before getting the information but I don't seem to see that parameter is reaching it.
It does reach the entity set but it does not show the parameter. Am I binding correctly?
This is on the controller:
onInit: function() {
var urlEnding = "1000012233";
var oFilterDist = new sap.ui.model.Filter("ID",
sap.ui.model.FilterOperator.EQ, urlEnding);
var summaryText = this.getView().byId("summaryForm");
summaryText.bindElement({
path: "/SummaryScreenSet",
filters: [oFilterDist]
});
}
This is on the View
<VBox class="sapUiSmallMargin" fitContainer="true"
height="100%" width="100%" justifyContent="End"
displayInline="true" id="leftVBox" items="{/SummaryScreenSet}">
<items>
<f:SimpleForm editable="true" layout="ResponsiveGridLayout" id="summaryForm" columnsL="1" columnsXL="1" labelSpanL="5" title="Account Summary" labelSpanM="5">
<f:content>
<Label text="Status" id="__label6" design="Bold" class="sizeText"/>
<ObjectStatus text="{CONTRACT_STATUS}" id="__status6" state="Success" class="boldText"/>
<Label text="Permit Required" id="__label10" design="Bold" class="sizeText"/>
<Text text="{PERMIT_REQD}" id="__text32" wrapping="false" class="sizeText"/>
<Label text="Bill Date | Due Date" id="__label11" design="Bold" class="sizeText"/>
<Text text="{BILL_DATE} | {DUE_DATE}" id="__text33" wrapping="false" class="sizeText"/>
<Label text="Last Estimated Date | Next MR Date" id="__label17" design="Bold" class="sizeText"/>
<Text text="{LAST_PAYMENT_DATE} | {nextMRDate}" id="__text39" wrapping="false" class="sizeText"/>
</f:content>
</f:SimpleForm>
</items>
</VBox>
Going to assume you want a single, specific entry. In that case, what you're looking for is the Entity, not the EntitySet + filter. Coincidentally, here's one I wrote yesterday that works. I've changed the paths and ID's to reflect yours:
var form = this.getView().byId('summaryForm');
form.bindElement({
path: "/SummaryScreenSet('" + urlEnding + "')",
events: {
change: function() {
//triggers on error too I think
form.setBusy(false);
},
dataRequested: function() {
form.setBusy(true);
}
}
});
In that case you don't need the VBOX either, just the form. Don't forget to implement SUMMARYSCREEN_GET_ENTITY or whatever the method is on your DPC_EXT.
Edit: might want to set editable on the form to false, it shrinks the layout to suit text instead of inputs.
This question already has answers here:
bindProperty to Single OData Entity
(2 answers)
Closed 18 days ago.
How to fetch single entity record data please find the code below
binding in xml table.am doing like below
table in xml view
<Table items="{/dum}" id="table" width="auto">
When you can bind the url directly to the table:
If I give like below am getting all records.
var url = "/myentity";
var table = oView.byId("table");
table.bindItems({
path: url,
template: table.getBindingInfo("items").template
});
If I give var url = "/myentity('srujan')";
am not able to get particular user data
HTTP request failed400,Bad Request,{"error":{"code":"005056A509B11EE1B9A8FEC11C23378E","message":{"lang":"en","value":"System query options '$orderby,$skip,$top,$skiptoken,$inlinecount' are not allowed in the requested URI"
Here's the snippet that shows how bindElement ("binding" in the XML) it works for your case:
var oModel = new sap.ui.model.json.JSONModel({
"Product(1)": {
Price: 100,
Name: "Product # 1"
},
Products: [{
Price: 200,
Name: "Product # 1"
}, {
Price: 500,
Name: "Product # 2"
}, {
Price: 542,
Name: "Product # 3"
}]
});
sap.ui.getCore().setModel(oModel);
sap.ui.xmlfragment({
fragmentContent: document.getElementById("table").textContent
}).placeAt("content");
<!DOCTYPE html>
<html>
<body>
<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m"></script>
<script id="table" type="sapui5/xml">
<Table xmlns="sap.m" binding="{/Product(1)}">
<columns>
<Column>
<Label text="Binding" />
</Column>
<Column>
<Label text="Column 2" />
</Column>
<Column>
<Label text="Column 3" />
</Column>
</columns>
<items>
<ColumnListItem>
<Text text="/Products(1) on table" />
<Text text="{Name}" />
<Text text="{Price}" />
</ColumnListItem>
<ColumnListItem binding="{/Products/2}">
<Text text="/Products/2 on item" />
<Text text="{Name}" />
<Text text="{Price}" />
</ColumnListItem>
</items>
</Table>
</script>
<div id="content"></div>
</body>
</html>
Im building an application with two textboxes, a button and a table. On pressing the button, an array of filters is composed from the contents of the textboxes and sent to my oData service in a read request. Right now, when one record is returned (as it shows in the console), the table will not be updated. What am I missing?
This is the table:
<Table id="PLTab" items="{/ORDSET}">
<headerToolbar>
<Toolbar>
<Title text="Planned Orders" level="H2" />
</Toolbar>
</headerToolbar>
<columns>
<Column>
<Text text="Product" />
</Column>
<Column>
<Text text="Planned Order" />
</Column>
<Column>
<Text text="Production Planner" />
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<ObjectIdentifier title="{Maktx}" text="{Matnr}" />
<Text text="{Ordno}" />
<Text text="{Name}" />
</cells>
</ColumnListItem>
</items>
</Table>
And this is the relevant part of the controller:
onInit: function() {
var oModel = this.getOwnerComponent().getModel("path");
oModel.refresh(true);
this.getView().setModel(oModel);
},
openOrders: function(oEvent) {
var PLFilters = [];
PLFilters.push(new sap.ui.model.Filter({
path: "Matnr",
operator: sap.ui.model.FilterOperator.EQ,
value1: this.getView().byId("Product").getValue()
}));
PLFilters.push(new sap.ui.model.Filter({
path: "Locno",
operator: sap.ui.model.FilterOperator.EQ,
value1: this.getView().byId("Location").getValue()
}));
var oModel = this.getOwnerComponent().getModel("path");
oModel.read("/ORDSET", {
filters: PLFilters,
success: function(oData, oResponse) {
console.log(oData);
}
});
}
Thanks & regards,
Max
var oModel = this.getOwnerComponent().getModel("path");
You use the model named "path" to read data, but in your XML View you use the default model (unnamed).
Try to change to
var oModel = this.getOwnerComponent().getModel();
I'm a beginner to SAP Fiori (UI5) and trying to retrieve a value from a table made with sap.m.Table in SAP Web IDE. But I don't succeed. Anybody hints on how to get there?
<Table id="table0" items="{/Entity1_Set}">
<ColumnListItem detailPress=".onShowHello" type="DetailAndActive">
<Text id="text5" maxLines="0" text="{Id}" />
<Text id="text6" maxLines="0" text="{field1}" />
<Text id="text7" maxLines="0" text="{field2}" />
<Text id="text8" maxLines="0" text="Euro"/>
</ColumnListItem>
<columns>
<Column id="column0">
<Label id="label0" text="Floor"/>
</Column>
</columns>
</Table>
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/m/MessageToast",
], function(Controller, MessageToast) {
"use strict";
return Controller.extend("QuickStartApplication.controller.View1", {
onShowHello: function(){
MessageToast.show("Hello World!");
},
});
});
In the "hello world"-MessageToast, I would like to display values of the fields in my table.
You can pass parameters in the function, which is called during an event.
Please see also https://sapui5.hana.ondemand.com/#docs/api/symbols/sap.m.ListItemBase.html#event:detailPress
Using these parameters, you can access the bound data.
Please see the following code on how to read the binding context of the ColumnListItem:
detailPress : function(oEventParams){
var oListItem = oEventParams.getSource();
var oBindingContext = oListItem.getBindingContext(); var sSomePropertyValue = oBindingContext.getProperty("<nameOfProperty>"); }
Using .getProperty, you can access your field values.