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
Related
I have the dropdown in dialog as:
if (!this.pressDialog) {
this.pressDialog = new Dialog({
title: "Wafer",
contentWidth: "40px",
contentHeight: "300px",
content: [
new sap.m.Text({width:'100%', text: 'Component Name' }),
new sap.m.Select({
width: '60%',
items: [
new sap.ui.core.Item("item11", {text: "Disregarded"}),
new sap.ui.core.Item("item12", {text: "Corporation"}),
new sap.ui.core.Item("item13", {text: "Partnership"})
]
}),
new sap.m.Text({ width:'100%',text: 'Category' }),
new sap.m.Select({
width: '60%',
items: [
new sap.ui.core.Item("item1111", {text: "Disregarded"}),
new sap.ui.core.Item("item1234", {text: "Corporation"}),
new sap.ui.core.Item("item1314", {text: "Partnership"})
]
}),
new sap.m.Text({width:'100%', text: 'Quantity' }),
new sap.m.Select({
width: '60%',
items: [
new sap.ui.core.Item("item15211", {text: "Disregarded"}),
new sap.ui.core.Item("item136454", {text: "Corporation"}),
new sap.ui.core.Item("item213754", {text: "Partnership"})
]
}),
new sap.m.Text({width:'100%', text: 'MainCategory' }),
new sap.m.Select({
width: '60%',
items: [
new sap.ui.core.Item("item11411", {text: "Disregarded"}),
new sap.ui.core.Item("item34", {text: "Corporation"}),
new sap.ui.core.Item("item314", {text: "Partnership"})
]
})],
beginButton: new Button({
type: ButtonType.Emphasized,
text: "OK",
press: function () {
this.pressDialog.close();
}.bind(this)
}),
endButton: new Button({
text: "Close",
press: function () {
this.pressDialog.close();
}.bind(this)
})
});
//to get access to the global model
this.getView().addDependent(this.pressDialog);
}
It looks as:
How can I capture the data here from the dialog box and add to the table having the columns as same as each item,
Component Name,
Category,
Quantity,
main category
I am trying how can I make a JSON from the values of selected dropdown so that can bind to the table
Sorry for one more Q: how can I center the select boxes in a dialog
Any help or guiding links are appreciated TIA!
So, what I understand is that you want to make a Json model from the selected dropdown (sap.m.Select). We first create the model :
let model= {
"componentName": "Disregarded",
"category": "Disregarded",
"quantity": "Disregarded",
"mainCategory": "Disregarded",
};
let jsonModel = new JSONModel(model);
this.getView().setModel(jsonSetting, "tableModel");
Than for each sap.m.Select we have something like this (example for category):
new sap.m.Select({
width: '60%',
textAlign: "Center",
selectedKey: "{tableModel>/category}",
items: [
new sap.ui.core.Item("item1111", {text: "Disregarded",key:"Disregarded"}),
new sap.ui.core.Item("item1234", {text: "Corporation",key:"Corporation"}),
new sap.ui.core.Item("item1314", {text: "Partnership",key:"Partnership"})
]
}),
You have to add key for each sap.ui.core.Item like the desirable text and than to specify dynamic binding between the model and selected item selectedKey: "{tableModel>/category}". When another item is selected the change will be visible in the model.
To center the text in the select boxes use textAlign: "Center" and if you want to center against the dialog use sap.m.FlexBox:
new sap.m.FlexBox({
justifyContent: "Center",
items:[
new sap.m.Select({
...
}),
]
}
),
If the select boxes appear wrapped delete property width:60%
Now you have the model ready and you can bind it with the table (I think you want this in the function of OK button ).
Note that the variable model will specify the initial selected keys for each sap.m.Select (everyone set to Disregarded).
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
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.
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);
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!