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);
}
})
Related
I am trying to define the select control in my controller but it isn't working. I want the select control to have a default value {garows>Type} and show drop down that has Question, Answer, and Button.
This is what I have tried so far. The select is the third control in ColumnListItem. Every thing else is working.
this.setModel(new JSONModel({
"type": {
"answer": "Answer",
"button": "Button",
"question": "Question"
}
}), "typDropDown");
var item = new Item({
text: "{garows>/Type}"
});
var oTable = this.byId("gaTable");
oTable.setMode("None");
oTable.bindItems({ //changes the table for guided assistance qa to editable
path: "garows>/flow",
template: new ColumnListItem({
cells: [
new Text({
text: "{garows>ID}"
}),
new TextArea({
value: "{garows>value_long}",
growing: true,
growingMaxLines: 7
}),
new Select({
autoAdjustWidth: true
}).bindAggregation("items", "typDropDown>/type", item),
new TextArea({
value: "{garows>Action}"
}),
new TextArea({
value: "{garows>Button1}"
}),
new TextArea({
value: "{garows>Button2}"
}),
new TextArea({
value: "{garows>Button3}"
}),
new TextArea({
value: "{garows>Button4}"
}),
new TextArea({
value: "{garows>Button5}"
}),
new TextArea({
value: "{garows>Button6}"
}),
new TextArea({
value: "{garows>Active_Flag}"
})
]
}),
key: "ID"
}).setKeyboardMode("Edit");
The expected result is, select control will have a default value {garows>Type} and show drop down that has Question, Answer, and Button. I would appreciate any help.
I think the data structure of your typDropDown is not correct - it needs to be an array and not an object map for the aggregation binding.
If I understand you correctly you need to bind the items aggregation to the typDropDown model (which needs to be an array) and you want to bind the selectedKey property of the Select to a value in the garows model.
So in my opionion you need to change the data structure of typeDropDown AND the item template AND you need to bind selectedKey.
On your bindAgregation it should be
.bindAggregation("items", "garows>/type", item) right?
You used a different model (typDropDown).
I am trying to use the Gantt Chart with Tree Table with an OData model. Unfortunately, I can only find examples with JSON model. I have built the hierarchy in my OData model like in the example https://blogs.sap.com/2015/10/23/treetable-odata-binding/ - I used the annotation option.
The Tree Table seems to be correct but the shapes in the Gantt do not fit to the start end end date in the related row. In the JSON examples always stands "children" at the property "shapeDataName" but I don't know what I have to write there using OData. Can somebody help?
Here you can see the structure of my OData model if I call it in the browser:
In my onInit method I did the following:
To build the shapes I wrote the following method:
My result Looks like this:
my onInit method looks like this:
onInit: function () {
var oGantt = new sap.gantt.GanttChartContainer({ ganttCharts: [
new sap.gantt.GanttChartWithTable({
id: "gantt",
columns: [ new sap.ui.table.Column({ label: "Id", template: "Aufgabenid" }),
new sap.ui.table.Column({ label: "Bezeichnung", template: "Aufgabenbez" }),
new sap.ui.table.Column({ label: "Start", template: new sap.m.DatePicker({ value: {path: "Berstartstring"}, valueFormat: "yyyyMMdd" }) }),
new sap.ui.table.Column({ label: "Ende", template: new sap.m.DatePicker({ value: {path: "Berendestring"}, valueFormat: "yyyyMMdd" }) })
],
rowSettingsTemplate: new sap.gantt.simple.GanttRowSettings( {rowId: "{Aufgabenid}" })
})
]});
var oGanttTable = oGantt.getGanttCharts()[0],
sServiceUrl = "/sap/opu/odata/sap/Z_PPM_Projekt_SRV/",
oModel = new sap.ui.model.odata.v2.ODataModel(sServiceUrl);
oGantt.setModel(oModel);
oGanttTable.bindRows({
path : "/TimingAnnoSet",
parameters: {
operationMode: "Server",
numberOfExpandedLevels: 0
}
});
oGanttTable.setShapeDataNames(["top"]);
oGanttTable.setShapes(this.configShape());
oGantt.placeAt("content");}
And here my configShape method as code:
configShape: function () {
var aShapes = [];
Rectangle.extend("sap.gantt.ppm.Rectangle", {
getFill: function(oRawData) {
switch (oRawData.Hierarchie) {
case "0":
return "black";
case "1":
return "#FF9999";
default:
return "#FAC364";
}
}
});
var oTopShape = new sap.gantt.config.Shape({
key: "top",
shapeDataName: "metadata",
shapeClassName: "sap.gantt.ppm.Rectangle",
level: 1,
shapeProperties: {
time: "{Berstartstring}",
endTime: "{Berendestring}",
height: 20,
isDuration: true,
enableDnD: true
}
});
aShapes = [oTopShape];
return aShapes;
}
I am trying to develop an SAPUI5 app but I can't add a specific text before the value in a table column.
onInit : function() {
var oModel = new sap.ui.model.json.JSONModel('add json file ');
sap.ui.getCore().setModel(oModel,'products');
}
In the View I am creating a table and binding all records:
var oTable = new sap.m.Table("productsTable",{
inset: true,
columns: [
//image
new sap.m.Column({
hAlign: "Left",
width: "100px",
demandPopin: true,
popinDisplay: "Block",
minScreenWidth: sap.m.ScreenSize.Medium
}),
]
});
var oTemplate = new sap.m.ColumnListItem({
type: sap.m.ListType.Active,
cells: [
new sap.m.Text({
text: "Title :{products>description} ",
//visible :false,
}),
]
});
oTable.bindAggregation("items","products>App",oTemplate); // Here bind all record
return new sap.m.Page({
title: "App Name",
content: [oTable],
showNavButton: true,
navButtonPress: function() {
oController.navigation();
},
footer: new sap.m.Bar({
contentLeft: [
new sap.m.Text({text: "Smart",})
]
}),
});
My desired output is:
But it's displayed this way:
As #Qualiture said in the comment this looks like you need to enable the complex binding syntax.
You can do that by setting the binding syntax mode explicitly using
data-sap-ui-bindingSyntax="complex" or implicitly by specifying the compatibility version of 1.26 or edge: data-sap-ui-compatversion="edge".
Try add slash (/) caracter before the property.
Sample:
"Title :{products>/description} "
OR
Maybe your binding is incorrect, try this
...
text: { path: "{products>/description}", //with or without slash (/)
formatter: function(desc) {
return "Title" + desc;
}
}
...
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')
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.