I'm having trouble getting the current JSON model element which is bound to a RowRepeater element.
With tables and lists, I would simply retrieve the current index (or indices) and based on these values, I point to the matching element in my JSON model.
However, the RowRepeater element does not have a current index property. As I feel I should be able to retrieve the current element directly, as opposed to indirectly by the current index, is there a better, uniform way to retrieve the current element?
Sample code for model :
var mydata = {
"data": [
{
"key": "67b895bf-8d89-11e3-94a7-0000005341de",
"name": "my 1st item"
},
{
"key": "7780de05-8d83-11e3-bec4-0000005341de",
"name": "my 2nd item"
}
]
};
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData(dummydata);
sap.ui.getCore().setModel(oModel);
Sample code for RowRepeater (I want to retrieve the current 'key' upon pressing the delete icon):
var oRowRepeater = new sap.ui.commons.RowRepeater();
//create the template control that will be repeated and will display the data
var oRowTemplate = new sap.ui.commons.layout.MatrixLayout();
var matrixRow, matrixCell, control;
// main row
matrixRow = new sap.ui.commons.layout.MatrixLayoutRow();
//Text
control = new sap.ui.commons.TextView();
control.bindProperty("text","name");
//add content to cell, cell to row
matrixCell = new sap.ui.commons.layout.MatrixLayoutCell();
matrixCell.addContent(control);
matrixRow.addCell(matrixCell);
//delete icon
var icon = new sap.ui.core.Icon({
src: sap.ui.core.IconPool.getIconURI("delete"),
size: "16px",
color: "#333",
activeColor: "#BBB",
hoverColor: "#888",
width: "60px",
});
icon.attachPress(function(oEvent) {
sap.ui.commons.MessageBox.alert("TODO: Implement delete based on current/data/?/key");
});
//add content to cell, cell to row
matrixCell = new sap.ui.commons.layout.MatrixLayoutCell({ hAlign : sap.ui.commons.layout.HAlign.Right });
matrixCell.addContent(icon);
matrixRow.addCell(matrixCell);
// add row to matrix
oRowTemplate.addRow(matrixRow);
//attach data to the RowRepeater
oRowRepeater.bindRows("/data", oRowTemplate);
the following works for me
icon.attachPress(function(oEvent) {
sap.ui.commons.MessageBox.alert(this.getBindingContext().getProperty('name'));
});
the selected object
var seletedRow = this.getBindingContext().getObject()
Related
I used SmartTable with the property initiallyVisibleFields. I bound ODataModel to it. The problem is when I want to show all fields of ODataModel, e.g. after I click on SmartTable's row and try to display it in the dialog. I just see fields from initiallyVisibleFields property. It looks like ODataModel is filtered with initiallyVisibleFields property.
I was thinking about JSONModel where I put copy of ODataModel before it is bind to SmartTable, but I am planning to use SmartFilterBar, so index of shown data in the table will be changed after filtering. So I can not simply pull data from JSONModel. I can still filter data from JSONModel based on the fields I get from
ODataModel filtered with initiallyVisibleFields but there I can still get different data, because there can be differences in the fields which are hidden.
Please, can you advice me how to solve this issue?
Thanks for any tips.
...
return Controller.extend("ABC.View1", {
oDialog: null,
onInit: function() {
var oModel, oView;
oModel = new ODataModel("/sap/opu/odata/sap/ABC/", {
useBatch: false
});
oView = this.getView();
oView.setModel(oModel);
this._createSmartTable();
},
_createSmartTable: function() {
var oSmartTable = new SmartTable('idSmartTable',{
entitySet: "ABCListSet",
tableType: "ResponsiveTable",
sStyleClass: "sapUiResponsiveContentPadding",
initiallyVisibleFields: "A,B,C,D",
showRowCount: false,
enableAutoBinding: true,
demandPopin: false,
useVariantManagement: false,
useExportToExcel: false,
useTablePersonalisation: true,
});
// Register event row click
var that = this;
var oTable = oSmartTable.getTable();
oSmartTable.attachDataReceived(function() {
var aItems = oTable.getItems();
if (aItems.length === 0) return;
$.each(aItems, function(oIndex, oItem) {
oItem.detachPress(that._createDialog);
oItem.setType("Active");
oItem.attachPress(that._createDialog);
});
});
var oVBox = new VBox();
oVBox.addItem(oSmartTable);
var oPage = this.getView().byId("idPage");
oPage.addContent(oVBox);
},
_createDialog: function(oEvent) {
//HERE I the oEvent has data filtered by initiallyVisibleFields property of Smarttable.
},
});
...
Do I understand you correctly that you want to show the complete entry in a dialog? The SmartTable uses $select statements to only load the fields of an entity that are also shown in the table. If you want to load all, I think you should add them in the requestAtLeast property.
I'm having problems concerning adding a row with input field to add item to the table. I'm trying to use this example
addEntry : function(oEvent) {
var path = oEvent.getSource().getBindingContext().getPath();
var obj = {
fname: null,
lname: null,
desc: null,
createNew: false,
removeNew: false,
saveNew: true
};
var oModel = this.getView().getModel();
oModel.setProperty(path, obj);
},
The only difference that i want is for the row to be visible from the start (without the + icon) so that the user can directly add fields and when OK is clicked, a new row needs to be added.
Thank you
You should remove the addEntry() function as it is just triggering from the Add Icon and instead create the object on your onInit() function.
It will look like this:
onInit : function() {
var dummyData = [{"fname": "",
"lname": "",
"desc": "",
"removeNew": false,
"saveNew": true}];
var oModel = new sap.ui.model.json.JSONModel({data : dummyData});
this.getView().setModel(oModel);
}
When you click on the save button, the saveEntry() function will be triggered and the new entry will be pushed to the model.
A new form will show up by calling the addEmptyObject() function at the end of it.
Here is a working example:
https://jsbin.com/wutefaz/edit?html,js,output
I am working with sap.m.table. I have requirement to apply or change the background color for some of the rows based on the data in one of the column in those rows in table.
I am using the following code but it is not working
created the CSSfile: test.css
<style type="text/css">
.Total {
background-color: LightSteelBlue !important;
}
</style>
The above CSS file declare in Component.js like the following way ( correct me if this not right way to make the css file available to access in whole ui5 project.
"resources": {
"css": [
{
"uri": "css/test.css"
}
]
}
In Controller.i have defined the following method to apply the style sheet for the particular rows alone in table.
rowColours: function() {
var oController = this;
console.log("rowColours() --> Start ");
var oTable = this.oView.byId("tblAllocation");
var rows = oTable.getItems().length; //number of rows on tab
//start index
var row;
var cells = [];
var oCell = null;
for (i = 0; i < oTable.getItems().length; i++) {
//console.log("rowColours() :: row--> "+row);
//actualRow = oTable.getItems(); //content
if (i == 0) {
row = oTable.getItems()[i];
cells = cells.concat(oTable.getItems()[i].getCells());
//getting the cell id
oCell = cells[2];
oCell = oCell.toString().substring(29, oCell.length);
otemp = this.getView().byId(oCell).getText();
if (otemp.toString() == "TotalAllocation") {
oTable.getItems()[i].$().taggleClass("grandTotal");
}
}
}
console.log("rowColours() --> end ");
}
In the above method. I am checking the cell2 data ( in table cell 2 i was using the Textview control to display the data. when call this method to get the data in that cell. I am getting the following error.
otemp = this.getView().byId(oCell).getText());
error:
Uncaught TypeError: Cannot read property 'getText' of undefined
is the following code is possible to change the row bg color.
if (otemp.toString() == "TotalAllocation") {
oTable.getItems()[i].$().taggleClass("Total");
}
Please let me know how to change the bg color or applying the style for the perticular row in sap.m.table
Thanks
The approach your following is not right. Better you can use a formatter.
Example:
var oTable = new sap.m.Table({
columns: [
new sap.m.Column({
header: new sap.m.Label({
text: "Name"
}),
}),
],
items: {
path: 'modelList>/',
template: new sap.m.ColumnListItem({
cells: [
new sap.m.Text({
//formatter to the text property on sap.m.Text control.
text: {
parts: [{
"path": "modelList>Name"
}],
formatter: function(name) {
if (name == "TotalAllocation") {
// use this.getParent().. until u get the row. like this below and add class.
this.getParent().getParent().addStyleClass("Total");
}
}
}
})
]
})
}
});
I am using combo box in a table having two fields as male and female and if i change that value to be stored in the JSON model data..How to use an event to it..
The following is my code
oTable.addColumn(new sap.ui.table.Column( {
label: new sap.ui.commons.Label({text: "Gender"}),
template: new sap.ui.commons.ComboBox(
{items: [new sap.ui.core.ListItem({text: "Female"}),
new sap.ui.core.ListItem({text: "Male"})]}).bindProperty("value","gender"),
sortProperty: "gender",
filterProperty: "gender",
enabled : true,
change: function(oEvent){
sap.ui.getCore().byId("gender").setValue(oEvent.oSource.getSelectedItemId());
},
width: "75px"
}));
function change(oEvent){
var bEnabled = oEvent.getParameter("enabled");
// modify the enabled property value in the model to reflect changes
oModel.setData({enabled: bEnabled}, true); // true means merge the data instead of replacing
};
But it is not reflecting the values..please correct the code.
you should move your `change` function to the combobox, currently is is attached to the column (which does not have an event like that).
you can put your `bindProperty`-call to the constructor
in the event-function you have to get the model and change its value.
new sap.ui.commons.ComboBox({
value: "{gender}",
items: [
new sap.ui.core.ListItem({
text: "Female"
}), new sap.ui.core.ListItem({
text: "Male"
})
],
change: function(oEvent) {
var newValue = oEvent.getParameter("newValue");
var bindingPath = this.getBindingPath("value");
this.getModel().setProperty(bindingPath, newValue);
}
})
How can I get index of pressed ColumnListItem? I want to get and pass to controller method.
View code:
var oTable = new sap.m.Table({
id: "Countries",
mode: sap.m.ListMode.None,
columns: [ new sap.m.Column({
width: "1em",
header: new sap.m.Label({
text: "Name"
})
})
]
});
var template = new sap.m.ColumnListItem({
id: "first_template",
type: "Navigation",
visible: true,
selected: true,
cells: [ new sap.m.Label({
text: "{name}"
})
],
press: [oController.pressListMethod]
});
oTable.bindItems("/eventos", template, null, null);
oPage.addContent(oTable);
Controller code:
pressListMethod: function(index){
var oData = sap.ui.getCore().getModel().getProperty("/eventos/"+index+"/name");
alert(oData);
}
You shouldn´t rely on the index since the index in the table can differ from the index in your model (e.g. due to filtering and sorting).
You can read the bindingContext of the pressed ListItem like this:
pressListMethod: function(event){
var bindingContext = event.getSource().getBindingContext();
}
The bindingContext is an artificial object containing the related model and a path of the object within the model.
You can then read properties of your object like this:
var name = bindingContext.getProperty("name");
To get the whole object you can do it like this:
var myObject = bindingContext.getObject();
To get exact value of product
SelectedRowContext.getObject('PRODUCT_ID')
To get Name of product
SelectedRowContext.getObject('NAME')