how do I use select control in my controller? - sapui5

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

Related

SAPUI5: How to export a table containing combobox and list into a spreadsheet?

I've successfully created an sap.m.Table containing, among the others, 2 columns of type sap.m.Select and sap.m.List. The data is displayed nicely. Unfortunately, I didn't manage to export these 2 columns into a spreadsheet?
The controller contains the following code to add an sap.m.Select and sap.m.List to an sap.m.Table.
var oSelectedProductList = new sap.m.List({
mode: sap.m.ListMode.None,
})
var oSelectedProductItemTemplate = new sap.m.StandardListItem({
title: "{ProductValue}",
})
oSelectedProductList.bindAggregation("items", "RnoSelectedProducts", oSelectedProductItemTemplate);
var oProductLevelTemplate = new sap.ui.core.ListItem({
key: "{TechnicalDescription}",
text: "{Description}"
});
var oProductLevelSelect = new sap.m.Select({
items: {
path: "/ProductLevel", //no curly brackets here!
template: oProductLevelTemplate,
templateShareable: false
},
selectedKey: "{ProductLevel}",
forceSelection: false,
editable: false,
width: "100%"
});
In fact, Customer Level is a sap.m.Select and Customer ID is a sap.m.List.
I don't know how I can export them using the library sap.ui.export.Spreadsheet (I can export the remaining columns).
Thanks

Bind Selected Item to Dialog

I am attempting to show data from a table item in the controls of a dialog. Here is a Plunker: https://plnkr.co/edit/MPHT17Hf4xNj3ZuuNXMd?p=preview
And here is the code specifically which gets the item data and sets it in the 'detailItem' JSONModel:
onItemPress: function(evt) {
var me = this;
var view = me.getView();
var item = evt.getSource().getBindingContext('list').getObject();
view.getModel('detailItem').setData(item);
var dlg = new sap.m.Dialog({
title: 'Edit Item',
type: 'Message',
content: [
new sap.m.VBox({
items: [
new sap.m.Label({
text: 'Section'
}),
new sap.m.Input({
value: '{detailItem>sectionId}'
}),
new sap.m.Label({
text: 'Cost'
}),
new sap.m.Input({
value: '{detailItem>costId}'
})
]
})
],
beginButton: new sap.m.Button({
text: 'Ok',
press: function() {
dlg.close();
}
}),
endButton: new sap.m.Button({
text: 'Cancel',
press: function() {
dlg.close();
}
}),
afterClose: function() {
dlg.destroy();
}
}).open();
}
The Plunker is pretty straight forward. Basically, I want to select an item in the table, open a dialog with a couple input fields allowing the data to be edited. I am trying to bind the input fields to the selected item by setting the data for the 'detailItem' model and attempting to bind the value property of the input fields to the respective data element.
Here is a working example (forked from yours): embed.plnkr.co/ictpCHG0R3H3jtsCmHKW.
The approach with the relative binding syntax was alright. We don't, however, need a second model, so replace {detailItem> with {list> in your dialog. Then, we can set the given binding context (from the selected item) to the dialog so that the relative bindings inside the dialog can be resolved:
dialog.setBindingContext(item.getBindingContext("list"), "list")
But that alone isn't enough. The dialog still won't display the selected data because it's not a descendant of the view and thus the "list" model is unknown to it.
One way to solve this problem is to add the dialog to the dependents aggregation of the view or any other control in the view. By this, the model will be propagated to the dialog. And as a bonus effect, it will be destroyed together when the principal control gets destroyed:
Special aggregation dependents is connected to the lifecycle management and databinding, but not rendered automatically and can be used for popups or other dependent controls or elements. This allows the definition of popup controls in declarative views and enables propagation of model and context information to them. [src]
Since all controls provide the aggregation <dependents>, you can also move the dialog definition from the controller to the view.

Add specific text in table binding value in sapui5 using sap.m.Table

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