Check table row based on value of input search SAPUI5 - 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.

Related

Add items to SelectDialog dynamically

I need to add more items to the SelectDialog control based on the Odata from the backend based on a condition. The code is,
if (!this._oDialog) {
this._oDialog = new sap.m.SelectDialog({});
this._oDialog.setModel(oParentModel);
this._oDialog.bindAggregation("items", {
path: "/et_getSidSet",
template: new sap.m.StandardListItem({
title: "{Sid}"
})
});
if (v === '1') {
var oItem1 = new sap.m.StandardListItem({
title: 'PC2',
type: 'Active'
});
this._oDialog.addItem(oItem1);
} else if (v === '2') {
var oItem1 = new sap.m.StandardListItem({
title: 'AC2',
type: 'Active'
});
this._oDialog.addItem(oItem1);
var oItem2 = new sap.m.StandardListItem({
title: 'IC2',
type: 'Active'
});
this._oDialog.addItem(oItem2);
}}
The issue is, when I click on helprequest icon, the item is not adding for the very first time. However, its added from second time onwards.
I need the item to get added for the first time.
Thanks in advance!
Using SAPUI5's JSView to create the dialog and Radial Chart, triggered by button press event, you can have a look at the full application here Plunkr Example
openDialog: function() {
if (!this.draggableDialog) {
this.draggableDialog = new Dialog({
title: "Charts",
type: "Message",
contentWidth: "900px",
contentHeight: "700px",
resizable: true,
content: [
new RadialMicroChart({
percentage: 75,
total: 100,
size: "Responsive",
valueColor: "Critical"
})
],
beginButton: new Button({
text: "Close",
press: function() {
this.draggableDialog.close();
}.bind(this)
})
});
this.getView().addDependent(this.draggableDialog);
}
this.draggableDialog.open();
}

SAPUI5 - sap.m.Table with factory functions not showing columns and items

I have a requirement wherein I have to populate columns and rows dynamically from oData. For test purpose I created the following JSON files for columns and rows.
column.json
{
"Columns": [
{ "column": "col1" },
{ "column": "col2" },
{ "column": "col3" }
]
}
row.json
{
"Rows": [
{ "col1": "abc",
"col2": "def",
"col3": "ghi"
},
{ "col1": "jkl",
"col2": "mno",
"col3": "pqr"
}
]
}
Here is my view
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
controllerName="sam.test" xmlns:html="http://www.w3.org/1999/xhtml">
<Table id="ID"
columns="{path: 'Column>/Columns', factory: '.populateColumns'}"
items="{path: 'Row>/Rows', factory: '.populateItems'}">
</Table></core:View>
Note that in manifest file "Column" points to column.json and "Row" points to row.json file.
Here is my corresponding controller -
sap.ui.controller("sam.test", {
// onInit: function() {
// },
// onBeforeRendering: function() {
//
// },
// onAfterRendering: function() {
//
// },
// onExit: function() {
//
// }
populateItems: function(sId, oContext) {
var row = new sap.m.ColumnListItem(sId, {
type: "Active",
cell: [
new Text({
text: "{Column>col1}"
}),
new Text({
text: "{Column>col2}"
}),
new Text({
text: "{Column>col3}"
})
]
});
return row;
},
populateColumns: function(sId, oContext) {
var sColumnId = oContext.getObject().column;
return new sap.ui.table.Column({
id: sColumnId,
label: sColumnId,
template: sColumnId,
sortProperty: sColumnId,
filterProperty: sColumnId
});
}
});
This however is not working. It renders table with no column headers and no rows. When I bind rows directly to items aggregation of Table and also provide columns aggregation with same value it works.
Am I missing something? I am having tough time figuring this out. Any pointers will be appreciated
Thanks!
3 Mistakes which I found:
Wrong type of Column: new sap.ui.table.Column- The correct column type should be sap.m.Column since this is a sap.m.Table.
Wrong name of aggregation used for sap.m.ColumnListItem: The correct aggregation is cells and not cell ( typo).
Wrong model is bound to ColumnListItem: It should be Row>col1 and not Column>col1 as Row model stores the data.
Lets correct these mistakes and below is the working code:
populateItems: function(sId, oContext) {
var row = new sap.m.ColumnListItem(sId, {
type: "Active",
cells: [
new sap.m.Text({
text: "{Row>col1}"
}),
new sap.m.Text({
text: "{Row>col2}"
}),
new sap.m.Text({
text: "{Row>col3}"
})
]
});
return row;
},
populateColumns: function(sId, oContext) {
var sColumnId = oContext.getObject().column;
return new sap.m.Column({
header: new sap.m.Text({
text:'{Column>column}'
})
});
},
Let me know if this works.

why sap.m.Select not opening in sap.m.Dialog?

I'm trying to show sap.m.Select when dialog pop up. And my dialog is opening when I press a button. So I create sap.m.Dialog dynamically when user press the button. Here how I create my dialog in controller in buttonPress function:
that = this;
var dialog = new Dialog({
id : 'reasonDialog',
title: 'Reason',
type: 'Message',
content: [
that.reasonTypeSelect,
new TextArea('id1Textarea', {
width: '100%',
maxLength: 100,
placeholder: 'Enter a reason explanation'
})
],
beginButton: new sap.m.Button({
text: 'Confirm',
press: function () {
MessageToast.show('Succesfully confirmed');
dialog.close();
}
}),
endButton: new sap.m.Button({
text: 'Cancel',
press: function () {
dialog.close();
}
}),
afterClose: function() {
dialog.destroy();
}
});
dialog.open();
and I'm creating that.reasonTypeSelect in onAfterRendering function as below :
var oItemSelectTemplate = new sap.ui.core.Item({
key : "{key}",
text : "{value}"
});
this.reasonTypeSelect= new sap.m.Select({ id: 'selectReasonTypeId',
width:'100%',
change:'handleReasonTypeSelect'
});
this.reasonTypeSelect.setModel(this.getView().getModel());
this.reasonTypeSelect.bindAggregation("items", "/ReasonTypeList", oItemSelectTemplate);
Here I can see the Select but there is no items in it.
Seems you model is not visible from the dialog component, try setting your model
oDialog.setModel(yourModel);
If it doesn't work try to do it in the "onAfterRendering" callback.
onAfterRendering: function() {
var oDialog = sap.ui.getCore().byId("reasonDialog");
oDialog.setModel(this.getView().getModel("YourModel"));
}

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

SAPUI5 Sap.m.Table Dynamic creation

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!