sap.ui.commons.Link doesn't work in Binding - sapui5

I have a table when I try to bind the column of this table to a json data. It works in one of my tables and in other tables it doesn't show anything. I checked content and the way I get the json data and it is exactly the same in all tables.
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Names"}),
template:
new sap.ui.commons.Link({
text:"{name}",
})
}));
the table that shows the content sits in shell and other tables that show nothing sit inside sap.ui.ux3.ThingGroup. I am wondering if the reason that I don't see the binding is because of ThingGroup or not? because as soon as I change the sap.ui.commons.Link to sap.ui.commons.TextView it works.
The cut down version of my code is:
addLayerTable: function(){
var jsonData1 = {
"layers" : []
};
$.getJSON(URI, {}).done(function(data) {
if(data.layers !== undefined){
$.each(data.layers, function(i, field) {
jsonData1.layers.push({
"name" : field
});
});
}
layerDetailPage(jsonData1);
}).fail(function() {
alert("Error while reading layers Data or layers do not exist");
});
var oTable = new sap.ui.table.Table({
rows:{
path:"/layers",
},
width: "900px",
visibleRowCount: 10,
navigationMode : sap.ui.table.NavigationMode.Paginator
});
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Names"}),
template:
new sap.ui.commons.Label({
text:"{name}"
})
}));
function layerDetailPage(layerData){
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData(layerData);
sap.ui.getCore().setModel(oModel, "layerModel");
oTable.setModel(oModel);
};
var oFC1 = new sap.ui.ux3.ThingGroup();
oFC1.addContent(oTable);
return oFC1;
}
As soon as I change the sap.ui.commons.Label to TextView, names become visible. but at the moment nothing. Funny enough if I add a press function to my table and try to get the name of the row in the table it works although it is not visible.

Related

SAPUI5 unable to get table editable cell value

I am trying to get the cell value of an editable column on a button click but i am getting all selected row values except the editable column value.
Please let me know how can i get the value.
Below is my code:
var oTable = new sap.ui.table.Table({
sId: "Master Table",
selectionMode : sap.ui.table.SelectionMode.Multi,
selectionBehavior: sap.ui.table.SelectionBehavior.Row,
enableCellFilter : true
});
// define the Table columns and the binding values
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "ID"}),
template: new sap.ui.commons.TextView({text:"{ID}",editable : false,filterProperty: "ID"})
}));
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Name"}),
template: new sap.ui.commons.TextView({text:"{NAME}",editable : false})
}));
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Address"}),
template: new sap.ui.commons.TextView({text:"{ADDRESS}",editable : false})
}));
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "PIN CODE"}),
template: new sap.ui.commons.TextView({text:"{PIN_CODE}",editable : false})
}));
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Mobile Number"}),
template: new sap.ui.commons.TextField({text:"",editable : true})
}));
Here mobile number is my editable field which the end user can fill in the table.
I have a button and on the click of the button i am trying to fetch the selected row values as below:
oButtonUpdate.attachPress(function(){
if(oTable.getSelectedIndices().length==0){
sap.ui.commons.MessageBox.alert("No Row Selected");
return;
}
for(var i = 0; i < oTable.getSelectedIndices().length; i++){
for(j=0;j<4;j++){
alert(oTable.getRows()[oTable.getSelectedIndices()[i]].getCells()[j].getText());
}
}
});
Now the above code only returns me till PIN Code.
How can i get the value of the editable cell.
Thanks in advance
I don't think it has anything to do with the cell being editable.
While "TextView" has "getText()" to retrieve the value, "TextField" has "getValue()".
See the documentation link here.
Either you change the TextField to a TextView (if possible), or you adjust your loop to the following snippet:
for(j=0;j<4;j++){
var oControl = oTable.getRows()[oTable.getSelectedIndices()[i]].getCells()[j];
if (oControl.getText) {
alert(oControl.getText());
}
else if (oControl.getValue) {
alert(oControl.getValue());
}
}
The "else if" part is optional since just "else" would suffice in this case.

SapUi5 TreeTable is different rendered within jQuery.getJSON() call

I create several treetables, each is placed on it's own div.
The main reproducable problem i've got:
creating the tables directly -> everything looks fine (see image 1)
creating the tables within an asynchron jQuery call: the first added table gets always a vertical scrollbar (see image 2)
here is the code:
var oData = { root: ...}
// code for image 2
jQuery.getJSON(url, function (result) {
createTable(oData['table1'], 'table1')
createTable(oData['table2'], 'table2')
})
// code for image 1
createTable(oData['table1'], 'table1')
createTable(oData['table2'], 'table2')
function createTable(oData, codeSample){
var oTable = new sap.ui.table.TreeTable({
columns: [
new sap.ui.table.Column({label: "trans_class", template: "trans_class"})
, new sap.ui.table.Column({label: "Checked", template: "checked"})
],
height: '100%',
selectionMode: sap.ui.table.SelectionMode.None,
enableColumnReordering: false,
expandFirstLevel: false,
visibleRowCount : INITIAL_ROW_COUNT_IN_TABLE,
visibleRowCountMode : sap.ui.table.VisibleRowCountMode.Auto,
toggleOpenState: function(oEvent) {
var isLeafExpanded = oEvent.getParameter("expanded");
if(isLeafExpanded){
oTable.setVisibleRowCount(oTable.getVisibleRowCount() + 2)
SUM_INDEX_TOGGLE = SUM_INDEX_TOGGLE + 2
}else{
oTable.setVisibleRowCount(oTable.getVisibleRowCount() - 2)
SUM_INDEX_TOGGLE = SUM_INDEX_TOGGLE - 2
}
}
})
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData(oData);
oTable.setModel(oModel);
sap.ui.getCore().setModel(oModel, codeSample);
oTable.bindRows("/root");
oTable.expand(4); // expand Sum Row
//Bring the table onto the UI
oTable.placeAt(codeSample);
}
How can I fix this issue. I want that all my tables look the same.
Workaround: add a simple textField and hide it after adding the treeTable:
addSimpleHiddenTextField(HIDDEN_TEXTFIELD)
for(var i in config.TABLES){
createTableAndPlaceIt(result[i], i, config.TABLES[i])
}
hideSimpleTextField(HIDDEN_TEXTFIELD)

How to add combo box events in sap Ui5

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

Get ColumnListItem index sapui5

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

The control manages the rows aggregation. The method "addRow" cannot be used programmatically

I have a table that I want to distinguish between the items in the table by checking some condition and if the condition holds, i want to add row. but when I try to do that I get the error that:
The control manages the rows aggregation. The method "addRow" cannot be used programmatically!
var oTable = new sap.ui.table.Table({
width : "900px",
visibleRowCount : 10,
navigationMode : sap.ui.table.NavigationMode.Paginator
});
oTable.addColumn(new sap.ui.table.Column({
label : new sap.ui.commons.Label({
text : "Names"
})
}));
$.each(data, function(index,
nodes) {
if (nodes == something) {
oRow = new sap.ui.table.Row();
oRow.addCell(new sap.ui.commons.Link({
text : "something"
}));
oTable.addRow(oRow);
};
});
};
You cannot add data manually to the sap.ui.table.Table. This has to be done using databinding. Please check the examples in the documentation:
https://openui5.hana.ondemand.com/#test-resources/sap/ui/table/demokit/Table.html
you can find more information on data binding here:
https://openui5.hana.ondemand.com/#docs/guide/91f0ca956f4d1014b6dd926db0e91070.html