This question already has an answer here:
OData Model Not Working
(1 answer)
Closed 20 days ago.
I have created a webservice and trying to bind data using oData protocol in SAPUI5.
I have created a table:
createContent : function(oController) {
jQuery.sap.require("sap.ui.table.Table");
//Create table control with properties
var oTable = new sap.ui.table.Table({
width : "100%",
rowHeight : 50,
title : "Lst of Items",
selectionMode : sap.ui.table.SelectionMode.None
});
oTable.addColumn(new sap.ui.table.Column({
label : new sap.ui.commons.Label({
text : "PO Number"
}),
template : new sap.ui.commons.TextView({
text : "{PoNumber}"
}),
}
));
oTable.addColumn(new sap.ui.table.Column({
label : new sap.ui.commons.Label({
text : "Item"
}),
template : new sap.ui.commons.TextView({
text : "{PoItem}"
}),
}
));
//Filter values for a certain PO
var aFilter = [];
aFilter.push( new sap.ui.model.Filter("PoNumber", sap.ui.model.FilterOperator.EQ, "4500000043") );
oTable.bindRows({
path: "/PurchaseOrderItemCollection",
filters: aFilter
});
return oTable;
}
The output should be as follows:
PONumber POItem
4500000043 0010
4500000043 0020
But what I get is:
PONumber POItem
4500000043 0020
4500000043 0020
So it shows the last item twice and doesn't show the first item. If I put a break point in my web service code then it is populated correctly.
The data model is created in the following way:
var oModel = new sap.ui.model.odata.ODataModel(sServiceUrl, false, "user", "passw");
sap.ui.getCore().setModel(oModel);
I have encountered this. Problem is with your data model. Ensure that for the entity both PO number and PO item are marked as keys. Refresh any metadata cache, ensure that both properties appear as keys and try again. It should work.
Thanks
Krishna
My understanding is every entity/entry in the collection should have a unique id <entry><id>...</id></entry>.
And in my case, the returned collection had no ids set for the entities. So the bound ui element finds multiple objects with same id (in this case empty id) and ends up displaying value which it finds the last.
The same should apply even if the id is same across all entities.
Hope it helps, if you have not already found what the problem is.
Thanks,
Related
The Angular Material documentation gives a nice example for how to add selection to a table (Table Selection docs). They even provide a Stackblitz to try it out.
I found in the code for the SelectionModel constructor that the first argument is whether there can be multiple selections made (true) or not (false). The second argument is an array of initially selected values.
In the demo, they don't have any initially selected values, so the second argument in their constructor (line 36) is an empty array ([]).
I want to change it so that there is an initially selected value, so I changed line 36 to:
selection = new SelectionModel<PeriodicElement>(true, [{position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'}]);
This changes the checkbox in the header to an indeterminate state (as expected), but does not cause the row in the table to be selected. Am I setting the initial value incorrectly, or what am I missing here? How can I set an initially selected value?
Tricky one. You need to initialize the selection by extracting that particular PeriodicElement object from your dataSource input, and passing it to the constructor.
In this particular case, you could code
selection = new SelectionModel<PeriodicElement>(true, [this.dataSource.data[1]);
It's because of the way SelectionModel checks for active selections.
In your table markup you have
<mat-checkbox ... [checked]="selection.isSelected(row)"></mat-checkbox>
You expect this binding to mark the corresponding row as checked. But the method isSelected(row) won't recognize the object passed in here as being selected, because this is not the object your selection received in its constructor.
"row" points to an object from the actual MatTableDataSource input:
dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
But the selection initialization:
selection = new SelectionModel<PeriodicElement>(true, [{position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'}]);
happens with a new object you create on the fly. Your selection remembers THIS object as a selected one.
When angular evaluates the bindings in the markup, SelectionModel internally checks for object identity. It's going to look for the object that "row" points to in the internal set of selected objects.
Compare to lines 99-101 and 16 from the SelectionModel source code:
isSelected(value: T): boolean {
return this._selection.has(value);
}
and
private _selection = new Set<T>();
I was facing the same issue, I used dataSource to set the initial value manually in ngOnInit()
ngOnInit() {
this.dataSource.data.forEach(row => {
if (row.symbol == "H") this.selection.select(row);
});
}
If you do the following, it works too
selection = new SelectionModel<PeriodicElement>(true, [ELEMENT_DATA[1]])
To select all you can do
selection = new SelectionModel<PeriodicElement>(true, [...ELEMENT_DATA])
I hope the answer is helpful
Or more dynamically if you have a set of values and you want to filter them before:
selection = new SelectionModel<PeriodicElement>(true, [
...this.dataSource.data.filter(row => row.weight >= 4.0026)
]);
This gets more tricky if you have data loading asynchronously from an api. Here is how I did it:
Firstly I have implemented the DataSource from "#angular/cdk/table". I also have an RxJS Subject that fires whenever data is loaded (first time or when user changes page in the pagination section)
export abstract class BaseTableDataSource<T> implements DataSource<T>{
private dataSubject = new BehaviorSubject<T[]>([]);
private loadingSubject = new BehaviorSubject<boolean>(false);
private totalRecordsSubject = new BehaviorSubject<number>(null);
public loading$ = this.loadingSubject.asObservable();
public dataLoaded$ = this.dataSubject.asObservable();
public totalRecords$ = this.totalRecordsSubject.asObservable().pipe(filter(v => v != null));
constructor(){}
connect(collectionViewer: CollectionViewer): Observable<T[]>{
return this.dataSubject.asObservable();
}
disconnect(collectionViewer: CollectionViewer): void {
this.dataSubject.complete();
this.loadingSubject.complete();
this.totalRecordsSubject.complete();
}
abstract fetchData(pageIndex, pageSize, ...params:any[]) : Observable<TableData<T>>;
abstract columnMetadata(): {[colName: string]: ColMetadataDescriptor };
loadData(pageIndex, pageSize, params?:any[]): void{
this.loadingSubject.next(true);
this.fetchData(pageIndex, pageSize, params).pipe(
finalize(() => this.loadingSubject.next(false))
)
.subscribe(data => {
this.totalRecordsSubject.next(data.totalNumberOfRecords);
this.dataSubject.next(data.records)
});
}
}
Now when I want to pre-select a row, I can write a function like this in my component which hosts a table that uses an implementation of the above mentioned data source
selectRow(rowSelectionFn: (key: string) => boolean){
this.dataSource.dataLoaded$.pipe(takeUntil(this.destroyed$))
.subscribe(data => {
const foundRecord = data.filter(rec => rowSelectionFn(rec));
if(foundRecord && foundRecord.length >= 0){
this.selection.toggle(foundRecord[0]);
}
});
}
I have the requirement to send filter values via OData-service, to fill a table with relevant entries.
So basically there are input fields, where you can select e.g. "AA" (american airlines) for Carrier-ID.
So the filter values need to be created dynamically, regarding to the user input.
I tried following:
var aFilters = [
new sap.ui.model.Filter({
path: "Carrid",
operator: sap.ui.model.FilterOperator.EQ,
value1: "{selection>/Carrid}"
})
];
oModel.read("/SFLIGHTSSet",{
method: "GET",
filters: aFilters,
success: function(oData2, oResponse) {
var oJSONModel = new sap.ui.model.json.JSONModel();
oJSONModel.setData({
modelData: oData2.results
});
oTable.setModel(oJSONModel);
oTable.bindRows("/modelData");
},
error: function(oError) {
console.log("Error!");
}
});
But that doesn't work.
I receive in back-end following request:
"( Carrid eq '{selection>/Carrid}' )"
So the binding doesn't work in the filter-creation...
The binding is correct because I can use it the same way in a Label:
new sap.m.Label({
text: "{selection>/Carrid}"
});
I researched a lot and know that people have problems with it in XML views.. but couldn't find any solution for JS-Views.
I guess your problem is in the line
"{selection>/Carrid}"
Get the value of the User-Input from the Control somehow like this
var sCarrid= this.byId("MySelection").getBindingContext("selection").getProperty("Carrid");
and modify your Filter
var oFilters = [ new sap.ui.model.Filter("Carrid",
sap.ui.model.FilterOperator.EQ,
sCarrid) ];
I have this json model:
model/data.json
{
"orders" : [
{
"header" : { "id" : "00001", "description" : "This is the first order" },
"items" : [
{ "name" : "Red Book","id" : "XXYYZZ" },
{ "name" : "Yellow Book", "id" : "AACCXX" },
{ "name" : "Black Book", "id" : "UUEEAA" },
]
},
{
// another order with header + items
},
.....
]
}
and I'm assigning it onInit to the view, like this:
var model = new sap.ui.model.json.JSONModel("model/data.json");
sap.ui.getCore().setModel(reqModel);
I'm trying to display a list of orders in the first view (showing the id), like this:
var list = new sap.m.List({
id: "mainList",
items: []
});
var items = new sap.m.ActionListItem({
text : "{id}",
press : [ //click handler, onclick load the order details page ]
});
list.bindItems("/orders", items);
.... // add list to the page etc etc
What I cannot do, is connect each order to its header->id.. I tried
text: "/header/{id}"
text: "{/header/id}"
in the items declaration, and
list.bindItems("/orders/header", items)
in the list binding, but none of them works.. The id value is not displayed, even though a "blank" list item is shown..
Any idea? What am I doing wrong?
Thank you
The solution was one of those I tried (but I don't know why it didn't work at that time)
text: "{/header/id}"
The ListItem acts as a Template for a list/array of objects. That's why you bind it against an array structure in your data:
list.bindItems("/orders", itemTemplate)
That makes bindings of the ListItem relative to /orders and therefore your item should look like this without leading '/' (absolute paths would look like this /orders/0/header/id asf.):
var itemTemplate = new sap.m.ActionListItem({
text : "{header/id}",
press : [ //click handler, onclick load the order details page ]
});
Not quite sure how you made it work the way you have shown... May be it's not as picky as I thought.
Btw: For whatever reason the ResourceModel builds an exception of that syntax. You can always omit the leading '/' when dealing with ResourceModels (probably because they do not allow nested structures).
BR
Chris
Cannot add comments yet, therefore an answer to you solved Problem, that could answer the initial problem. (And inform People using that example in any way)
In the current code listing you use the variable "reqModel" to set the model, but the variable with the model in it is named "model" in the line before. Maybe that was the first reason why both of your examles would not work?
Perhaps this error was cleared on rewriting some passages while testing.
greetings! -nx
I am trying to fill in a ListBox with CustomAction and it's not going well.
I try to figure out the session.Database.Tables but have no idea how to start.
I've created a listbox like this
<Control Id="ListBox1" Type="ListBox" Sorted="no" Indirect="no" Property="LISTBOXVALUESONE" X="10" Y="50" Width="150" Height="180">
<ListBox Property="LISTBOXVALUESONE">
<ListItem Text="ARGHH!" Value="1"/>
</ListBox>
</Control>
But I cant see the property in my verbrose log or anything about an table so I guess I have to create an table in customAction and populate it?
I see my ARGHH! in the list so it should exsist but how do I access the values? And add new ones?
Found more examples and stuff in C++ but i would like to make the CustomAction in C#
EDIT
Database db = session.Database;
string sqlInsertTemp = db.Tables["ListBox"].SqlInsertString + " TEMPORARY";
View view = db.OpenView(sqlInsertTemp );
view.Execute( new Record( new object[] { "LISTBOXVALUESONE", 2, "2", "One" } ));
view.Close();
Thanks to Christopher I got it to work with adding an value.
db.Tables["ListBox"] should remain the same and name the type not the id as i taught
And on this line view.Execute( new Record( new object[] { "LISTBOXVALUESONE", 2, "2", "One" } ));
you put your Listbox Property and then the placement of the value "one" we insert
The two "2"s is what I figure the placement we want it on and I already have an test value on 1
my "ARGHH!" so I put the new on 2 and dont know the details but...
I got an Table Update error and, one dublicate value error if i put 2,1 or 1,2 in the customaction!
I wrote a blog article about 5 years ago that might help you:
How DTF is going to help me become a better .NET Developer
You want to make sure your built MSI has a ListBox table otherwise the SQL won't work when it tries to generate the temp rows dynamically at runtime. If the ListBox element doesn't do this for you, the EnsureTable element will.
The actual C# looks something like:
Database db = session.Database;
string sqlInsertTemp = db.Tables["ListBox"].SqlInsertString + " TEMPORARY";
View view = db.OpenView(sqlInsertTemp );
view.Execute( new Record( new object[] { "TESTPROP", 1, "1", "One" } ));
view.Close();
Note this is an old code example and doesn't properly take advantage of using statements and IDisposable.
Add one record to list box:
private void AddRecordToListBox(string listBoxPropertyName, int index, string text, string value)
{
View view = session.Database.OpenView("SELECT * FROM ListBox");
view.Execute();
Record record = session.Database.CreateRecord(4);
record.SetString(1, listBoxPropertyName);
record.SetInteger(2, index);
record.SetString(3, value);
record.SetString(4, text);
view.Modify(ViewModifyMode.InsertTemporary, record);
view.Close();
}
Fill ListBox:
private void FillListBox()
{
var dict = SomeDict();
int index = 1;
foreach (var element in dict)
{
AddRecordToListBox(ListBoxName, index, element.Key, element.Value);
index++;
}
}
Clear ListBox
private void ClearListBox(string listBoxPropertyName)
{
var command = String.Format("DELETE FROM ListBox WHERE ListBox.Property='{0}'", listBoxPropertyName);
View view = session.Database.OpenView(command);
view.Execute();
view.Close();
}
i have a list grid ,i am assiging the values to listGrid by some method in my app
like this
private ListGridRecord[] getData(UserRecord selectedClient) {
return new ListGridRecord[]{
new NameValueRecord(1, "US Siren", selectedClient.getClientsId()),
new NameValueRecord(2, "EN: Liste des identifiants", selectedClient.getClientId2()),
new NameValueRecord(3, "Account number", selectedClient.getClientId3()),
new NameValueRecord(4, "Partner number", selectedClient.getClientId4()),
new NameValueRecord(5, "REGON", selectedClient.getClientId5()),
new NameValueRecord(6, "US Siren*", selectedClient.getClientId6()) ,
new NameValueRecord(7, "TEST", selectedClient.getClientId7())
};
}
It works fine for me and shows the given values in the grid when the app runs .
Now i want to get these values which are displaying in the grid (Which user can also edit from the grid)
I can get the edited values like this
clientIdsGrid.setEditorCustomizer(new ListGridEditorCustomizer() {
public FormItem getEditor(ListGridEditorContext context) {
ListGridField field = context.getEditField();
if (field.getName().equals("value")) {
NameValueRecord record = (NameValueRecord) context.getEditedRecord();
But if a user dont even click on any record and just click save to save the values as it is.
How can i then get the data which is in my grid .
I am trying these
clientIdsGrid.getRecord(1);
clientIdsGrid.getRecords();
but this gives me a listGrid/listGridRecord , how can i then fetch the individual data on each row from them .
grid.addEditorExitHandler may help. Within it u can use:
grid.getEditValueAsString(row num, Column name) for getting new edited value.
If no new it will return null.