I have created a table with a drop-down control (sap.m.ComboBox). I am adding rows dynamically using JSONModel. Here is the logic to bind my table:
My Table bind logic.
Now, I am trying to get values from the table:
var oTable = this.getView().byId("mytable");
var data = oTable.getModel();
var len = oTable._iBindingLength; // Get total Line Items in table
for (var i = 0; i < len; i++) {
var _val1 = data.oData[i].item1;
var _val2 = data.oData[i].item2;
// my value logic here
}
But this is bringing all the values instead of just selected value from my drop-down control.
If you want to get selected key from the ComboBox (drop-down), bind the appropriate model data to its property selectedKey. Once the user selects something, the selected key will be stored in the model thanks to the two-way data binding.
<m:ComboBox width="100%"
selectedKey="{foo/selectedKey}"
items="{
path: 'foo/items',
templateShareable: false
}"
>
<core:Item key="{key}" text="{text}"/>
</m:ComboBox>
I've updated my example from your previous question: https://plnkr.co/edit/8YvXxk?p=preview
The model data is automatically updated when the user selects something from the drop-down:
Related
I have a sap/ui/comp/smarttable/SmartTable which receives data of one EntitySet (MAINSet). The table has 5 columns. I added three extra columns manually where I put data from another EntitySet (DetailSet) when a specific button is pressed. I do that manually by iterating throw the table and setting the properties like this:
table.getModel().setProperty(sPath + "/EXAMPLE", EXAMPLE);
Filtering works fine for all the properties of the MAINSet. But filtering properties which I retrieve from the DETAILSet does not work with the following logic:
var oBinding = this.getView().byId("table0").getBinding("items");
var aFilter = [];
var sQuery = oEvent.getParameter("query");
if (sQuery) {
aFilter.push(new Filter("EXAMPLE", FilterOperator.Contains , sQuery));
}
oBinding.filter(aFilter);
Is there any way I can filter the SmartTable for the data received from the DETAILSet?
In sap.ui.table.Table I have input field in one column. It will get nearly 300 records of data from back-end and binded in other columns.
User manually enters in the input field. Further, when he clicks on submit button I have to take all values from all input as array. Please give suggestions.
You can do it using data binding of table, as invoking getRows() on Table control to access Input fields of each row would not help in this case;it only returns only currently visible rows and you have around 300 records to access.
Here is the solution:
Get all data from back-end in JSONModel.
Add one property say inputValue to each item in model's data by iterating over it.
Bind this model to table and use inputValue property in table's template to bind column containing Input fields.
As JSONModel supports two-way binding, all the values which user has entered in an Input fields are available in your model.
And, lastly iterate over model's data to get inputValue for each row.
Above steps in action:
Step 1 and 2:
setModelForTable: function() {
var oModel = sap.ui.model.json.JSONModel( < URLToLoadJSON > );
var length = oModel.getData().results.length;
for (var i = 0; i < length; i++) {
var path = "/results/" + i + "/inputValue";
oModel.setProperty(path, "");
}
}
Step 3:
Now, that you have model with inputValue property in all the items of data, set the model on table; which will show all the Input fields in columns empty initially and will update the corresponding model entry as user modifies it.
<t:Column>
<t:label>
<Text text="User Input" />
</t:label>
<t:template>
<Input value="{inputValue}" />
</t:template>
</t:Column>
Finally, get all entered values in array.
var length = oModel.getData().results.length;
var aInputvalues = []
for (var i = 0; i < length; i++) {
var path = "/results/" + i + "/inputValue";
aInputvalues.push(oModel.getProperty(path));
}
I had the case which is a bit similar and I did it in the following way. Will work if you really do not need records which are not changed.
have a variable to store [] of changed records
Attach change to input field
on change push changed record to a variable
var source = event.getSource();
source.getModel().getProperty(source.getBindingContext().getPath());
or the value of the input field.
event.getSource().getValue();
In case you have a record Id you can just push this ID and input value.
4. on submit iterate through an []
I have a sap.ui.Table.TreeTable in sapui5 and want to bind the first column to item and want to display the array of items in second column of each row.
var table = [
{item:1, items:[{sceondItem:1},{sceondItem:2},{sceondItem:3}]},
{item:2, items:[{sceondItem:1},{sceondItem:2},{sceondItem:3}]}
];
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({"modelData":table});
table.setModel(oModel);
table.bindRows("/modelData");
This may be a basic question, but it's my first, so please be kind :-).
I have a sap.m.table with two models, one model with transaction data (trxModel) and another model that is used to display a sap.m.select list (reasonCodeModel). The table model is set to trxModel.
The selected value key from the dropdown needs to update a value (ReasonCodeID) in the trxModel when a value from the reason code list is selected.
I can retrieve the selected key in the change event as so
var selKey = evt.getParameter("selectedItem").getKey();
Is there a simple way to find the trxModel relevant model path from the table row Select list value I've just modified? Or is it possible to bind the ReasonCodeID from the trxModel to the ReasonCodeID field in the reasonCodeModel?
Just an extra piece of info, The current row is selected and is accessible
var selItem = dtlTable.getSelectedItem();
2nd question and I guess could be kind of related, is there a way of getting the table model path based on the selected item (highlighted row) of the table? And vice a versa?
More details on Select & Table binding.
var tabTemplate = new sap.m.ColumnListItem(
{
::
new sap.m.Select(
"idReasonCodeSelect",
{
enabled : false,
change : function(evt) {
oS4View.getController().changeReasonCodeSel(evt);
}
}
),
Bind the resource code Select to the Table
// bind the reason codes to the reason code model
sap.ui.getCore().byId("idReasonCodeSelect").setModel(
oReasonCodeModel);
sap.ui.getCore().byId("idReasonCodeSelect").bindAggregation("items", "/results",
new sap.ui.core.Item({
key : "{ReasCodeID}",
text : "{ReasCodeDesc}"
}));
Per Qualiture comment, how do I bind the Select key to the table model ReasonCodeID value?
I found an approach to tackle the first part of my question above
From the change function on the Select, I can find the path of the table model using the following.
var path = evt.getSource().getParent().getBindingContext().sPath;
2nd Update:
On the selectionChange event on the table, there's a couple of options to find the associated model path or model content.
// find the model path
oModelPath = selItem.getBindingContext().getPath();
// model values
oItem = oEvent.getParameter("listItem").getBindingContext().getObject();
So my only remaining issue, While I loop through the table model results (trxModel) and I want the Select List (using setSelectedKey) to reflect the ReasonCodeID value in the trxModel.
Can you please show me how to allow editing of cells within SAPUI5 table? I am using JSON model.
look at this examples in the SDK Table.html, both of the examples show how to set a json model, set the json model as a data source of a table control, how to bind rows of the json to rows of the table, and how to bind the values to cells, once you change the cells values the new value will be reflect in the model
var employeeData = [
{lastName: "Dente", name: "Al"},
{lastName: "Friese", name: "Andy"},
{lastName: "Mann", name: "Anita"},
{lastName: "Schutt", name: "Doris}
];
//create the JSON model and set your data
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({ Employees: employeeData });
//create table
var oTable = new sap.ui.table.Table();
//add a column for lastname and bind the value to an editable textview
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Last Name"}),
template: new sap.ui.commons.TextView().bindProperty("text", "lastName"),
});
//add a column for name and bind the value to an editable textview
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "First Name"}),
template: new sap.ui.commons.TextField().bindProperty("value", "name"),
}));
oTable.setModel(oModel);
oTable.bindRows("/Employees);
First your table template objects have to be editable. For a textfield either use the setEditable(true), bindProperty('editable',true) or directly in the construtor new TextField({editalbe:true}).
If it is editable ensure you have switched on two way binding in your model. For JSON models this is the default I think. Also ensure, that there are no formatters involved, because these will destroy two way binding.
The you can check in your debugger, if the changes on the UI are transfered to the model. In general this works fine and from this point it is up to you what to do with the model (send it to some oData save service).
I had the same issue with a table that had to be editable when the value was zero and non-editable when it was greater than zero.
Value1 is my dinamic value.
Value2 is zero
<Input type="Number" editable="{parts:[{path : 'Value1'}, {path : 'Value2'}], formatter:'sap.ui.app.model.formatter.CantEditable'}"/>
Inside the formatter i defined a function called CantEditable like this.
jQuery.sap.declare("sap.ui.app.model.formatter");
sap.ui.app.model.formatter =
{
function1: (Value1, Value2)
{
//If value 1 > Value 2 return editable
if (Value1>Value2)
{
return false;
}
else
{
return true;
}
};
Since its binded to the value of these two variables. Whenever my value one changes, the editable function will check if it meets the requeriments of the function. Then it will change the value of the editable property.
My sap.m.Table demo here:
http://plnkr.co/edit/qifky6plPEzFtlpyV2vb?p=preview
I am using data-sap-ui-theme="sap_belize", you can change it to sap_bluecrystal.
The basic idea is using editable property of sap.m.Input, and enabled property of sap.m.Select.
I opened an issue of ui5 to discuss this problem: https://github.com/SAP/openui5/issues/1646