SAPUI5 Sap.m.Table Dynamic creation - sapui5

I have created a responsive sap.m.table. But am not able to load values from the data Object. I want to laod the "subvariants" array of objects.Pls help
summaryDetailData={"subvariants":[{"currentValue":"","Article":"1234567","question":"Carpet Installation type"},{"currentValue":"","question":"CarpetQuantity"},{"currentValue":"","Article":"1234568","question":"Underpad type"},{"currentValue":"","question":"UnderpadQuantity"},{"currentValue":false,"Article":"1234568","question":"Rapid Install"}]}
var oTable = new sap.m.Table("idRandomDataTable", {
headerToolbar: new sap.m.Toolbar({
content: [
new sap.m.Label({text: "Summary Data"}),
new sap.m.ToolbarSpacer({}),
new sap.m.Button("idPersonalizationButton", {
icon: "sap-icon://person-placeholder"
})]}),
columns: summaryDetailData.cols.map(function (colname) {
return new sap.m.Column({ header: new sap.m.Label({ text: colname })})
})
});
oTable.setModel(new sap.ui.model.json.JSONModel(summaryDetailData));
oTable.bindAggregation("subvariants", "/subvariants", new sap.m.ColumnListItem({
cells: oData.cols.map(function (colname) {
return new sap.m.Label({ text: "{" + colname.toLowerCase() + "}" })
})
}));

The way you bind the model to the table is not completely correct. You have to use bindItems to dynamically bind the table rows (items) to a model. The columns aggregation is used to define the column layout of the table whereas the items aggregation is responsible for the table records.
In your case I would create the columns in the control definition and bind the items to the model with your own template.
This should do what you´ve expected (tested it):
var oTable = new sap.m.Table("idRandomDataTable", {
headerToolbar : new sap.m.Toolbar({
content : [ new sap.m.Label({
text : "Summary Data"
}), new sap.m.ToolbarSpacer({}), new sap.m.Button("idPersonalizationButton", {
icon : "sap-icon://person-placeholder"
}) ]
}),
columns : [ new sap.m.Column({
width : "2em",
header : new sap.m.Label({
text : "Current Value"
})
}), new sap.m.Column({
width : "2em",
header : new sap.m.Label({
text : "Article"
})
}), new sap.m.Column({
width : "2em",
header : new sap.m.Label({
text : "Question"
})
}) ]
});
oTable.bindItems("/subvariants", new sap.m.ColumnListItem({
cells : [ new sap.m.Text({
text : "{currentValue}"
}), new sap.m.Text({
text : "{Article}"
}), new sap.m.Text({
text : "{question}",
}), ]
}));
oTable.setModel(new sap.ui.model.json.JSONModel(summaryDetailData));
Hopefully this helps you!

Related

MultiInput token is not showing

I'm using suggestion rows and suggestion columns. After selecting the suggestion. The token is not set to the field.
I've tried to setToken() method but still got error.
this._oMultiInput = new MultiInput({
valueHelpOnly: false,
valueHelpRequest: this._onValueHelpRequested.bind(this),
showSuggestion: true,
suggestionColumns: [
new sap.m.Column({
header: new sap.m.Label({
text: "ID"
})
}),
new sap.m.Column({
header: new sap.m.Label({
text: "{customI18n>productNameLabel}"
})
})
],
tokens: new sap.m.Token({key:"{masterData>Name}"})
});
this._oMultiInput.bindSuggestionRows({
path: 'masterData>/SH_MerchandiseHierarchySet',
template: new sap.m.ColumnListItem({
cells: [
new sap.m.Label({
text: "{masterData>ExternalId}"
}),
new sap.m.Label({
text: "{masterData>Name}"
})
]
}).clone()
});
To set the token in the field.
It goes on error beacause there isn't a method setToken()
Please you must refer only to ufficial documentation. Here you can see all action/method/properties etc. of sap.m.Token

sap.m.list - hide a row

I have a problem and hope to find help. On a sap.m.page i have placed a list (sap.m.list)
new sap.m.Page(
"mainPage", {
title : "",
enableScrolling : true,
content : [
oList = new sap.m.List("items", {
threshold : 2,
inset : false,
headerText : "Aufträge",
//filters : filters,
columns : [
new sap.m.Column({
hAlign : "Left",
width : '45px',
//styleClass : "qty",
header : new sap.m.Label({
text : "Station"
})
}),
new sap.m.Column({
hAlign : "Left",
width : '40px',
header : new sap.m.Label({
text : "Zeit"
})
}),
new sap.m.Column({
hAlign : "Left",
width : '20px',
header : new sap.m.Label({
text : ""
})
}),
new sap.m.Column({
hAlign : "Left",
width : '20px',
header : new sap.m.Label({
text : ""
})
}),
new sap.m.Column({
hAlign : "Left",
width : '50px',
header : new sap.m.Label({
text : "Raum"
}),
minScreenWidth : "Phone"//XXSmall"
//demandPopin : true
}),
new sap.m.Column({
hAlign : "Left",
width : '40px',
header : new sap.m.Label({
text : "Bett"
}),
}),
new sap.m.Column({
hAlign : "Left",
width : '20px',
//styleClass : "qty",
header : new sap.m.Label({
text : "St."
})
}),
new sap.m.Column({
hAlign : "Left",
width : '20px',
//styleClass : "qty",
header : new sap.m.Label({
text : "Typ"
})
(...)
For the entries i have a template definded
//Template für die Listzeilen
var template = new sap.m.ColumnListItem({
type : "Navigation",
cells : [
new sap.m.Label({
text: "{Orgpf}"
}),
new sap.m.Label({
text : "{Uhrzeit}"
}),
new sap.ui.core.Icon({
src: "{IconTermin}"
}),
new sap.ui.core.Icon({
src: "{IconAufbereitung}"
}),
new sap.m.Label({
text: "{Bett}"
}),
new sap.m.Label({
text: "{Bettnr}"
}),
new sap.m.Label({
text : "{Status02}"
}),
new sap.m.Label({
text: "{Betttyp}"
})
(...)
The data for the list comes from an odata-service an our sap gateway. I fill the table with follwing routine
var filter = new sap.ui.model.Filter("Team", sap.ui.model.FilterOperator.EQ, localStorage.getItem("Team"));
oList.bindAggregation("items", { path: "/AuftragSet", filters: filter, template});
This works fine.
Problem: not all entries should be displayed after loading the entries. After processing a visibile entry with a special type the corresponding entry should be now visible. I dont want to read the data again with the service, because i have not internet access at all places. Therefore i select more entries and need to hide some of them. How can i solve this? Where can i set the filter?
THX for your answers.
Kind regards,
Sven
In your case, Filter is not good option because you want to download all data and show select few. On the other hand, Filter will cause server to return select few rows beating your purpose.
You can use inherited visible property of sap.m.ColumnListItem. When defining your template add visible property and bind it to your OData property.
var template = new sap.m.ColumnListItem({
type: "Navigation",
visible: "{put you OData determining property here}",
cells: [...]
});
Also, consider using sap.m.Table or one of its subclasses as sap.m.List with columns is deprecated. https://sapui5.hana.ondemand.com/docs/api/symbols/sap.m.List.html#addColumn.
Use this link to decide which table to use: https://sapui5.hana.ondemand.com/#docs/guide/148892ff9aea4a18b912829791e38f3e.html
Hope this helps.
Filtering out the data that you want to bind the table is the good way to do. find the below link for how to filter the Table or List on success of your OData service: sapui5-how-to-filter-data-with-2-or-more-values

Check table row based on value of input search SAPUI5

I have a table (multiselect mode) with a search field. Is there a way that when I search, the value of the search result will automatically check the corresponding row in the table. Initially I though I could just search and then if the result length is 1, do a getItems() on the table and setSelected = true on the first row. The row gets selected, but when I exit the searching, it the row get deselected.
var oSerialTable = new sap.m.Table({
mode: sap.m.ListMode.MultiSelect,
columns: [
...
],
items : {
path : "/results",
template: new sap.m.ColumnListItem({
cells: [
new sap.m.Text({ text: "{Sernr}" }),
new sap.m.Text({ text: "{Equnr}" }),
new sap.m.Text({ text: "{Lbbsa}" })
]
})
},
select : function(evt){
},
updateFinished: function(){
var aItems = oTable.getItems();
console.log(aItems);
if (aItems.length == 1){
console.log(aItems[0]);
aItems[0].setSelected(true)
}
}
});
oSerialTable.setModel(ocheckSerialBatchJsonModel);
var oSerialTableSearch = new sap.m.SearchField({
search: function(oEvent){
var filterValue = oEvent.getSource().getValue();
var aFilter = new sap.ui.model.Filter("Sernr", sap.ui.model.FilterOperator.EQ, filterValue);
var oItemTemplate = new sap.m.ColumnListItem({
cells: [
new sap.m.Text({ text: "{Sernr}" }),
new sap.m.Text({ text: "{Equnr}" }),
new sap.m.Text({ text: "{Lbbsa}" })
]
});
oSerialTableSearch.bindItems({path:"/SerialSet", template:oItemTemplate, filters: [aFilter]});
}
});
This gets much easier if you bind the selected property of the ColumnListItem to your model.
You can then perform the filtering and selection on your model data:
...
template: new sap.m.ColumnListItem({
cells: [
new sap.m.Text({ text: "{Sernr}" }),
new sap.m.Text({ text: "{Equnr}" }),
new sap.m.Text({ text: "{Lbbsa}" })
],
selected: "{selected}" //Bind selection to model
})
...
var oSerialTableSearch = new sap.m.SearchField({
search: function(oEvent){
var filterValue = oEvent.getSource().getValue();
var array = ocheckSerialBatchJsonModel.getProperty("/results");
array.forEach(function(item){
//update selected state of each item
item.selected = (item.Sernr == filterValue || item.Equnr == filterValue || item. Lbbsa === filterValue);
});
ocheckSerialBatchJsonModel.setProperty("/results",array); //Write back to Model to update bindings
}
});
Example with your code on JSBin.

Data Binding in Sap.m.Table

I am Trying to bind some filtered data with sap.m.table
Model I am using
var model = new sap.ui.model.json.JSONModel("../services/myexp.xsodata/ExpenseItem?$format=json&$filter=Expense_Claim_No eq "+id, false);
console.log(model);
sap.ui.getCore().setModel(model,'myitem');
model is returning data as json format
{
d: {
results: [
{
__metadata: {//some info
},
Expense_Item_No: 11011,
Expense_Claim_No: 1101,
Expense_Item_Description: "Taxi",
Expense_Amount: 800,
Expense_Item_Category: "Travel"
},
{
__metadata: {//some info
},
Expense_Item_No: 11012,
Expense_Claim_No: 1101,
Expense_Item_Description: "Meals",
Expense_Amount: 1200,
Expense_Item_Category: "Daily Expenses"
}
]
}
}
my sap.m.Table code
var aColumns = [
new sap.m.Column({
header : new sap.m.Label({
text : "Expense Item No"
})
}),
new sap.m.Column({
header : new sap.m.Label({
text : "Description"
})
}),
new sap.m.Column({
header : new sap.m.Label({
text : "Category"
})
}),
new sap.m.Column({
header : new sap.m.Label({
text : "Amount"
}),
})
];
var oTemplate = new sap.m.ColumnListItem({
cells : [
new sap.m.Text({
text : "{Expense_Item_No}",
wrapping : false
}),
new sap.m.Text({
text : "{Expense_Item_Description}",
wrapping : false
}),
new sap.m.Text({
text : "{Expense_Item_Category}"
}),
new sap.m.Text({
text : "{Expense_Amount}"
})
]
});
var oTable = new sap.m.Table({
columns : aColumns
});
oTable.bindItems("myitem>/", oTemplate);
But it's not showing the data on the table. What am I doing wrong.
Please Help. Thank you
Try
oTable.bindItems("myitem>/d/results", oTemplate);

How to get content of a row in sap.m.table

So basically My problem is I have a page:
var page1 = new sap.m.Page({
title: "Something",
enableScrolling : true,
content : [
oTable = new sap.m.Table("items", {
columns : [
new sap.m.Column({
styleClass : "name",
hAlign : "Left",
header : new sap.m.Label({
text : "firstColumn"
})
})
]
})]
});
var template = new sap.m.ColumnListItem({
type : "Navigation",
cells : [
new sap.m.Label({
text : "{name}"
})
]
});
template.attachPress(function(oEvent){
var selectedRowContext = oEvent.getParameter("item");
alert(selectedRowContext);
});
Here I want to get the selectedRowContext and I don't know how?
Thank you
If you are binding data try
this.getBindingContext(/*modelName?*/)
or
oEvent.getSource().getBindingContext(/*modelName?*/)
//oControlEvent is the argument from the attachpress event
var selectedData = oControlEvent.getParameters().rowBindingContext.getModel().getData();
var selectedPath = oControlEvent.getParameters().rowBindingContext.getPath();
var selectedIndex = selectedPath.split("/")[selectedPath.split("/").length - 1];
selectedData = selectedData[OBJECTNAME][selectedIndex];