Modify an entity in sap.ui.table.Table - sapui5

I want to set a checkbox true in one certain row (In the background).
I use sap.ui.table.Table... Example: I have ten purchase orders and I want to write in an Input field a number ( EBELN) and when I press "Enter" a checkbox in the table ( in the row, where the number = EBELN) should be modify to "True" and the focus should also be on this row. How can I search with a parameter and especially how can I modify it ?
Edit:
View:
<Table id="tableItemsId" enableBusyIndicator="true" rows="{items>/results}"
selectionMode="None" visibleRowCount="12">
<toolbar>
<m:Toolbar>
<m:Input id="inEbeln"
placeholder="{i18n>Ebeln}" />
<m:Button text="{i18n>Ebeln}" press="onPress" />
</m:Toolbar>
</toolbar>
<columns>
<Column width="2rem">
<m:Label text="{i18n>Check}" />
<template>
<m:CheckBox
selected="{
path: '{items>Check}',
type: 'sap.ui.model.type.String'
}"
editable="false" />
</template>
</Column>
<Column width="6rem">
<m:Label text="{i18n>Ebeln}" />
<template>
<m:Text text="{items>Ebeln}" />
</template>
</Column>
onPress:
onPress : function(oEvent) {
var that = this;
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
// Here I want to modify the row in the table "tableItemsId", where Ebeln = "inEbeln"

I just created a small example. In the event handler it loops through all rows compares the entered value with value in the row and sets the checkbox accordingly:
onPress : function(event) {
// this gets the value of the input field
let value = this.byId("inEbeln").getValue();
if (!value || value.length === 0) {
return;
}
// loop through all rows and compare the entered value with the value in the row
let rows = this.byId("table").getRows();
for (let i = 0; i < rows.length; i += 1) {
let row = rows[i];
let cells = row.getCells();
// cells[0] contains the Checkbox
// cells[1] contains the Text with Ebeln
cells[0].setSelected(value === cells[1].getText());
}
}

Related

Select Hidden List Items with Growing=True

I've a sap.m.Table with growing(true) and growingThreshold set to 5 and MultiSelect mode. Say, at any moment, the number of records in my JSON model is more than 5 (say 20). Hence, it will always do lazy loading.
I've a button which needs to select all the elements in my model i.e, 20 items. So, on click handler of a button i say : - table.selectAll().
Now, I since only 5 items are shown in UI ( and in DOM), the UI5 library only selects which ever elements are shown.
console.log('How many items selected ?', oTable.getSelectedContexts(true).length ) // says 5. But it needs to be 20.
Question is - How do I select all items without loading them in UI ? Showing all elements to just select them does not make sense to me.
Now,
User will not click load more so many times to load all elements. There could be 100s of elements in real scenario. How to select all n elements in model ?
I do want to keep additional property in my model just to mark a item is selected or not ? Any suggestions are welcome.
User can select-all initially and then de-select few items which he doesnt mean. So, 20 items selected and say, removed first 2, so total no of selections should be 18. Any suggestions are welcome.
Code:
<ToggleButton text='Select All' press='onSelectAll'/>
<Button text='Submit' press='onSubmit' />
<Table noDataText="No Data" id="table0" items="{/}" mode='MultiSelect' growing='true' growingThreshold='5'>
<items>
<ColumnListItem type="Active">
<cells>
<Text text="{id}"/>
<Text text="{name}"/>
</cells>
</ColumnListItem>
</items>
<columns>
<Column id="column0">
<header>
<Label text="ID" id="label0"/>
</header>
</Column>
<Column id="column1">
<header>
<Label text="NAME" id="label1"/>
</header>
</Column>
</columns>
</Table>
Controller :
onInit: function () {
var aData = [];
for(var i =0;i< 20; i++) {
var element = {
id : 'I00' + i,
name: 'Clone-' + i
};
aData.push(element);
}
var oModel = new sap.ui.model.json.JSONModel(aData);
this.getView().setModel(oModel);
},
onSelectAll: function (oEvent) {
var oSource = oEvent.getSource();
var oTable = this.byId('table0');
if (oSource.getPressed()) {
oTable.selectAll();
} else {
oTable.removeSelections(true);
}
},
onSubmit: function() {
var oTable = this.byId('table0');
console.log('How many items selected ?', oTable.getSelectedContexts(true).length );
}

SAP UI5 table's column sorting is lost after table model is refreshed

I have a table (sap.ui.table) and all its column have sorting. In the table, one of the columns has a button for changing and saving the value of its cell. On saving, I want to update the table model with new data.
If I have sorted by PO number column, and the table refreshes, then the table is not again sorted in PO numbers, but it is reset to the stockroom name column sort which is default one.
How to ensure the sort that was applied to any of its column retains after model refresh?
XML.view
<table:Table id="abc"
rows="{ path: 'tableModel>/results', sorter: {path: 'FromStockroomName'}}" selectionMode="Single" selectionBehavior="RowOnly">
<table:columns>
<table:Column id="fromStk" sortProperty="FromStockroomName">
<Label text="From Stockroom"/>
<table:template>
<Text class="table-cell-text" text="{dataModel>FromStockroomName}"/>
</table:template>
</table:Column>
<table:Column sortProperty="OrderNumber">
<Label class="smartist-table-column-header" text="PO number"/>
<table:template>
<Link text="{dataModel>OrderNumber}" emphasized="true"/>
</table:template>
</table:Column>
<table:Column sortProperty="BackOrderedQty">
<Label text="B/O Qty"/>
<table:template>
<HBox>
<Button text="Reduce"
visible="{= !${dataModel>qobEditable}}" press="openBOText"/>
<Button text="Save" visible="{= ${dataModel>qobEditable}}" press="boQtySave"/>
<Input visible="{= ${dataModel>qobEditable}}"/>
</HBox>
</table:template>
</table:Column>
Controller.js
getAllBackOrderData: function () {
var filters = [
new Filter("CompanyID", FilterOperator.EQ, vc.company)
];
someService.getBackOrders(vc, filters).then(function (data) {
data.results = vc._sanitizeTableModel(data);
var backOrderModel = new JSONModel(data);
vc.getView().setModel(backOrderModel,"dataModel");
SpinnerUtils.stopSpinner(vc);
}).catch(function (error) {
...
}).then(function () {
SpinnerUtils.stopSpinner(vc);
});
**********************************************************************
_sanitizeTableModel: function (data) {
return data.results.map(function (order) {
order.qobEditable = false;
//need to add this
//order.previousBOQty = order.backOrder
return order;
})
},

Data Binding from TableSelectDialog to Form

I'm using TableSelectDialog to view some Carrier details. All I need is: If I select any item (row), then all the values from that row should get automatically populated to the form input fields.
In the attached image, if Carrier Name is selected from TableSelectDialog, then the remaining fields should be populated based on that value.
You can achieve the required functionality using the Binding context that you receive from the TableSelcect Dialog.
But for binding context to work properly, both form and the table select dialog should refer to the same Model.
Below is the working code:
VIEW.XML:
Has a Button to trigger the table select dialog.
Has a form.
<l:VerticalLayout class="sapUiContentPadding" width="100%">
<l:content>
<Button class="sapUiSmallMarginBottom" text="Show Table Select Dialog"
press="handleTableSelectDialogPress">
</Button>
<VBox class="sapUiSmallMargin">
<f:SimpleForm id="SimpleFormDisplay354">
<f:content>
<Label text="Supplier Name" />
<Text id="nameText" text="{SupplierName}" />
<Label text="Description" />
<Text text="{Description}" />
<Label text="ProductId" />
<Text text="{ProductId}" />
<Label text="Quantity" />
<Text id="countryText" text="{Quantity}" />
</f:content>
</f:SimpleForm>
</VBox>
</l:content>
</l:VerticalLayout>
Controller:
onInit: function () {
// set explored app's demo model on this sample
var oModel = new JSONModel(jQuery.sap.getModulePath("sap.ui.demo.mock", "/products.json"));
this.getView().setModel(oModel);
},
handleTableSelectDialogPress: function (oEvent) {
if (!this._oDialog) {
this._oDialog = sap.ui.xmlfragment("sap.m.sample.TableSelectDialog.Dialog", this);
}
this.getView().addDependent(this._oDialog);
// toggle compact style
this._oDialog.open();
},
handleClose: function (oEvent) {
var aContexts = oEvent.getParameter("selectedContexts");
if (aContexts && aContexts.length) {
// MessageToast.show("You have chosen " + aContexts.map(function(oContext) { return oContext.getObject().Name; }).join(", "));
this.byId('SimpleFormDisplay354').setBindingContext(aContexts[0]);
}
oEvent.getSource().getBinding("items").filter([]);
}
Now, we also have a Select dialog and on click of any Item we call method : handleClose
In handleClose, we obtain the clicked Item binding context and then tell the form : hey! refer to this context ( which is present in the model). Binding context has a path which tells the form from where to do the relative binding.
Please feel free to contact for more information.

How to set focus on an Input field in a sap.ui.table.Table

I want to set the focus on a input field in a row in the table. How can I read the Id of this row and set the focus?
for(var i = 0; i < rowCount; i++) {
var oEntry = this.getView().getModel("items").getProperty(
oTable.getContextByIndex(i).sPath);
if (oEntry.Field1 === sField1){
//Here I will set the focus in an Input field
}
}
Thanks
Edit:
<columns>
<Column width="2rem" sortProperty="Field">
<m:Label text="{i18n>Field}" />
<template>
<m:CheckBox
selected="{
path: 'items>Field',
type: 'sap.ui.model.type.String'
}"
editable="false" />
</template>
</Column>
<Column width="6rem">
<m:Label text="{i18n>Field1}" />
<template>
<m:Text text="{items>Field1}" />
</template>
</Column>
<Column width="6rem">
<m:Label text="{i18n>Field2}" />
<template>
<m:Input
value="{items>Field2}" />
</template>
</Column>
This are the columns of my table in the view: I want to get the focus on the line, where Field1 = s.Field1. How can I set the id in a special line ?
Edit 2.0:
XML View:
<Column width="6rem">
<m:Label text="{i18n>Field2}" />
<template>
<m:Input
id="input2" value="{items>Field2}"/>
</template>
</Column>
Controller:
for(var i = 0; i < rowCount; i++) {
var oEntry = this.getView().getModel("items").getProperty(
oTable.getContextByIndex(i).sPath);
if (oEntry.Field1 === sField1){
this.getView().byId("input2").focus();
}
}
this.getView().getModel("items").refresh(true);
You also could do something like following:
var oTable = this.getView().byId("idTable");
var aRows = oTable.getRows();
for (var i = 0; i < aRows.length; i++) {
if (aRows[i].getBindingContext().getObject().Field1 === sField1) {
var oCell = aRows[i].getCells()[2]; // select 3rd cell
oCell.focus(); // focus on the Input field
break;
}
}
You could try getting the view through its ID and then use the focus() function to set the focus to it.
For example,
var oInput = new sap.m.Input({id: "inputID"})
.addEventDelegate({
onAfterRendering: function(){
oInput.focus();
}
});
or if your input has an id, say "input1" then you can do this
this.getView().byId("input1").focus();
EDIT:
Assuming input is the element you want to ID then it's simple to do so,
<Column width="6rem">
<m:Label text="{i18n>Field2}" />
<template>
<m:Input
value="{items>Field2}"
id="input1" />
</template>
</Column>

How can I get row value for each sap.m.select element

<m:Table id="tableId"
inset="false"
mode="MultiSelect"
width = "100%"
fixedLayout="false"
border-collapse="collapse"
items="{
path: 'jsonViewModel>/results',
sorter: {
path: 'ProductId'
}
}">
<columns>
<Column
minScreenWidth="Desktop"
demandPopin="true">
<Text text="Product No" />
</Column>
<Column
minScreenWidth="Desktop"
demandPopin="true"
hAlign="Left">
<Text text="Model" />
</Column>...
</columns>
<items>
<ColumnListItem>
<cells>
<ObjectIdentifier
title="{jsonViewModel>ProductId}"/>
<Select id="selectId"
items="{
path: '/ModelList',
sorter: { path: 'Name' }
}">
<core:Item key="{modelId}" text="{Name}" />
</Select>...
</cells>
</ColumnListItem>
</items>
</Table>
First I have a jsonViewModel which is holding Products JSON array and also there is a ModelList service which gives me the list of models. So I should be able to fill some inputs(I didn't show other inputs cause I can retrive their values) and select model of products. But if I have 5 products I also have 5 select elements and I can't retrieve the select item for each rows(for each products). For example I can't retrieve the value with these codes in controller:
var oSelect = this.getView().byId("selectId");
var selectedItemObject = oSelect.getSelectedItem().getBindingContext().getObject();
var selectedModelName = selectedItemObject.Name;
Cause I have 5 select elements indeed and with these codes I can't retrieve every selected item object. Any help would be appreciated.
Cant we go through every row and then fetch the select control and then fetch the selectedItem? I mean,
var aItems = this.getView().byId("tableId").getItems();
for(var i =0;i<aItems.length;i++){
var aCells = aItems[i].getCells();
// I know select is at 0th cell, so I can use aCells[0].
var rowSelectedKey = aCells[0].getSelectedItem().getKey();
// once you have the selcetedKey, you can save them in a local array or // model and after the loop, you can work with them
}