Select Hidden List Items with Growing=True - sapui5

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

Related

getItems() method for table returns up to 20 rows

I have a report table that is populated in three different ways, depending on selection filters. At the end of the called report I use the "updateFinished" event to loop through the table entries, paint them zebra style and paint last summary line pink.
SAPUI5 Application version is 1.44.12
this.oStsTable = this.getView().byId("statusReportTable");
this.oStsTable.attachEventOnce("updateFinished", function(oEv) {
var aItems = oEv.getSource().getItems();
if (aItems && aItems.length > 0) {
for (var i = 0; i < aItems.length; i++) {
if (i === aItems.length - 1) {
aItems[i].addStyleClass("pinkBackground");
} else {
var even = i % 2;
if (even !== 0 && i < aItems.length) {
aItems[i].addStyleClass("cyanBackground");
}
}
}
}
});
this.byId("statusReportTable").getBinding("items").filter(oTableSearchState);
With the data available, I get back 3 datasets. 7 for case 1, 7 for case 2 and 23 for case 3. With the first two cases everything is OK. Problem is with case 3 (23 records). Debugging on the back-end, I see 23. When table appears, I see again 23. But the getItems() method within "updateFinished" event sees only 20 (!). As result of it (yes, guessed right), line 20 goes pink and the remaining lines without color as loop exits.
Rings any bells?
If you are only trying to add a zebra style with a different color in the last row, I recommend doing that only with CSS in your app like below.
table tr:nth-child(even) {
background-color: green;
}
table tr:nth-child(odd) {
background-color: red;
}
table tr:last-of-type {
background-color: yellow;
}
If you only need to alternate the row colors on your sap.m.Table then I would recommend you to set the property alternateRowColors to true.
<Table id="idProductsTable"
alternateRowColors="true"
items="{ path: '/ProductCollection' }">
<headerToolbar>
<Toolbar>
<Title text="Products"/>
</Toolbar>
</headerToolbar>
<columns>
<Column>
<Text text="Product" />
</Column>
<Column>
<Text text="Supplier" />
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<ObjectIdentifier title="{Name}" text="{ProductId}"/>
<Text text="{SupplierName}" />
</cells>
</ColumnListItem>
</items>
</Table>
Note: This property can only be used with the Belize and Belize Deep themes. Alternate row coloring is not available for the High Contrast Black/White themes.
Find the properties for sap.m.Table here.

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.

Modify an entity in sap.ui.table.Table

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

Get bound values from pressed List Item in UI5 controller

I'm a beginner to SAP Fiori (UI5) and trying to retrieve a value from a table made with sap.m.Table in SAP Web IDE. But I don't succeed. Anybody hints on how to get there?
<Table id="table0" items="{/Entity1_Set}">
<ColumnListItem detailPress=".onShowHello" type="DetailAndActive">
<Text id="text5" maxLines="0" text="{Id}" />
<Text id="text6" maxLines="0" text="{field1}" />
<Text id="text7" maxLines="0" text="{field2}" />
<Text id="text8" maxLines="0" text="Euro"/>
</ColumnListItem>
<columns>
<Column id="column0">
<Label id="label0" text="Floor"/>
</Column>
</columns>
</Table>
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/m/MessageToast",
], function(Controller, MessageToast) {
"use strict";
return Controller.extend("QuickStartApplication.controller.View1", {
onShowHello: function(){
MessageToast.show("Hello World!");
},
});
});
In the "hello world"-MessageToast, I would like to display values of the fields in my table.
You can pass parameters in the function, which is called during an event.
Please see also https://sapui5.hana.ondemand.com/#docs/api/symbols/sap.m.ListItemBase.html#event:detailPress
Using these parameters, you can access the bound data.
Please see the following code on how to read the binding context of the ColumnListItem:
detailPress : function(oEventParams){
var oListItem = oEventParams.getSource();
var oBindingContext = oListItem.getBindingContext(); var sSomePropertyValue = oBindingContext.getProperty("<nameOfProperty>"); }
Using .getProperty, you can access your field values.

Get selected item from sap.m.Select from a sapui5 table column

I am using sap.m.Table, where I have 3 columns, as sap.m.text, sap.m.setect and the last one is button.
My model code
var oModel = new sap.ui.model.odata.OData("url");
sap.ui.getCore().setModel(oModel ,"data");
Table view code(cells)
var oTemplate = new sap.m.ColumnListItem({
cells : [
new sap.m.Text({
text: "{data>Address}"
}),
new sap.m.Select({
id:"sel",
items: {
path: "data>/OPERATORS", // this is a diffent table
template: new sap.ui.core.Item({
text: "{data>firstName} {data>lastName}"
})
},
forceSelection: false
}),
new sap.m.Button({
text : "Start",
press : [oController.onPressStart, oController]
})
]
});
oTable.bindItems("data>/ORDR", oTemplate); //differnt table
Working fine, getting all required data on the specific table.(Notice first column is coming from ORDR table and second one is coming from OPERATORS table).
Now on button click I wanted the specific row data. My code as follows -
onPressStart : function(oEvent){
var obj = oEvent.getSource().getBindingContext("data").getObject();
},
"obj" gives me ORDR table row objects(where I pressed the button).
Now I also want the value I will select on the dropdown box. How to get it.
Please suggest, Thank you
JSbin Link - http://jsbin.com/quhomoloqo/edit?html,console,output
See this working example:
Please note how (for the sake of this question) created two models:
One named 'orig' which holds your original OPERATOR and ODRD data, and
one named 'data' which holds a copy of the OPERATOR data, with an added Address property.
See the view code on how the two models are used (the new one for the table, the old one for populating the dropdown)
sap.ui.controller("view1.initial", {
onInit : function(oEvent) {
},
onAfterRendering : function() {
// your original model
var oModel = new sap.ui.model.json.JSONModel();
var oData = {
"ODRD":[
{"Address":"UK"},
{"Address":"US"}
],
"OPERATORS":[
{"firstName":"a","lastName":"b"},
{"firstName":"c","lastName":"d"}
]
};
oModel.setData(oData);
this.getView().setModel(oModel, "orig");
// the model you actually need
var oNewModel = new sap.ui.model.json.JSONModel();
var oNewData = oData.OPERATORS.map(function(result) {
return {
firstName : result.firstName,
lastName : result.lastName,
keyToAddress : null
}
})
oNewModel.setData({
"OPERATORS" : oNewData
});
this.getView().setModel(oNewModel, "data");
},
showData : function(oEvent) {
alert(JSON.stringify(oEvent.getSource().getBindingContext("data").getObject()));
}
});
sap.ui.xmlview("main", {
viewContent: jQuery("#view1").html()
})
.placeAt("uiArea");
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-libs="sap.m"></script>
<div id="uiArea"></div>
<script id="view1" type="ui5/xmlview">
<mvc:View
controllerName="view1.initial"
xmlns="sap.m"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc" >
<Table id="tbl" items="{data>/OPERATORS}">
<columns>
<Column>
<Text text="First" />
</Column>
<Column>
<Text text="Last" />
</Column>
<Column>
<Text text="ODRD" />
</Column>
<Column>
<Text text="" />
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<Input value="{data>firstName}" />
<Input value="{data>lastName}" />
<Select items="{orig>/ODRD}" selectedKey="{data>keyToAddress}">
<items>
<core:ListItem key="{orig>Address}" text="{orig>Address}" />
</items>
</Select>
<Button text="Show data" press="showData" />
</cells>
</ColumnListItem>
</items>
</Table>
</mvc:View>
</script>