suggestion to implement the Grouping, Filtering and Sorting of my table in sapui5 - sapui5

I am trying to implement Grouping, Filtering and Sorting on a table with which I bring some data.
I have been able to perform Grouping and Sorting without problems, but I have not been able to filter correctly.
This would be the code of the fragment that I used for Grouping, Filtering and Sorting:
<core:FragmentDefinition xmlns:core="sap.ui.core" xmlns="sap.m">
<ViewSettingsDialog confirm="onConfirm">
<sortItems>
<ViewSettingsItem selected="true" key="Xao" text="Tipo"/>
<ViewSettingsItem key="Xoccupant" text="Ocupante"/>
</sortItems>
<groupItems>
<ViewSettingsItem key="Xao" text="Tipo"/>
</groupItems>
<filterItems>
<ViewSettingsFilterItem key="Xao" text="Tipo" multiSelect="false" items="{/d/results/Xao}">
<items>
<ViewSettingsItem key="{Xao}" text="{Xao}"/>
</items>
</ViewSettingsFilterItem>
</filterItems>
</ViewSettingsDialog>
</core:FragmentDefinition>
On the part of the controller, this would be the code it occupies:
onPress: function () {
this._Dialog = sap.ui.xmlfragment("LogonPage.LogonPage.fragments.Dialog", this);
this._Dialog.open();
},
onClose: function () {
this._Dialog.close();
},
onTableSettings: function (oEvent) {
// Abra el cuadro de diálogo Configuración de tabla
this._oDialog = sap.ui.xmlfragment("LogonPage.LogonPage.fragments.SettingsDialog", this);
this._oDialog.open();
},
onConfirm: function (oEvent) {
var oView = this.getView();
var oTable = oView.byId("table0");
var mParams = oEvent.getParameters();
var oBinding = oTable.getBinding("items");
// apply grouping
var aSorters = [];
if (mParams.groupItem) {
var sPath = mParams.groupItem.getKey();
var bDescending = mParams.groupDescending;
var vGroup = function (oContext) {
var name = oContext.getProperty("Xao");
return {
key: name,
text: name
};
};
aSorters.push(new sap.ui.model.Sorter(sPath, bDescending, vGroup));
}
// apply sorter
var sPath = mParams.sortItem.getKey();
var bDescending = mParams.sortDescending;
aSorters.push(new sap.ui.model.Sorter(sPath, bDescending));
oBinding.sort(aSorters);
// apply filters
var aFilters = [];
var sQuery = oEvent.getParameter("query");
if (sQuery) {
aFilters.push(new Filter("Xao", FilterOperator.Contains, sQuery));
}
oBinding.filter(aFilters);
},
And this is the view of my table, what I want to filter is all that contains the Xao section of my table.
<Table inset="false" items="{/d/results}" id="table0" width="auto">
<items>
<ColumnListItem type="Active" id="item1">
<cells>
<Text text="{Xao}" id="text7"/>
<Text text="{Xoccupant}" id="text8"/>
<Text text="{ path: 'Validfrom', type: 'sap.ui.model.type.Date', formatOptions:
{ source: {
pattern: 'yyyyMMdd' },
pattern: 'dd/MM/yyyy' } }" id="text9"/>
<Text text="{ path: 'Validto', type: 'sap.ui.model.type.Date', formatOptions:
{ source: {
pattern: 'yyyyMMdd' }, pattern: 'dd/MM/yyyy' } }" id="text10"/>
</cells>
</ColumnListItem>
</items>
<columns>
<Column id="column0">
<header>
<Label text="Tipo" id="label0"/>
</header>
</Column>
<Column id="column1">
<header>
<Label text="Ocupante" id="label1"/>
</header>
</Column>
<Column id="column2">
<header>
<Label text="Fecha de Apartado" id="label2"/>
</header>
</Column>
<Column id="column3">
<header>
<Label text="Fecha de Finalización" id="label3"/>
</header>
</Column>
</columns>
</Table>
And here the code of the view, where I enable Grouping, Filtering and Sorting of my table
<headerToolbar>
<Toolbar id="toolbar3">
<Title text="Puestos de Trabajo"/>
<ToolbarSpacer/>
<Button press="onTableSettings" icon="sap-icon://drop-down-list" tooltip="Settings"/>
</Toolbar>
</headerToolbar>
Any ideas or suggestions to correctly filter my table?

Check your onConfirm function in the controller - the code for the filtering looks more like code for a search field. You have to process the filters coming from the event: https://sapui5.hana.ondemand.com/#/api/sap.m.ViewSettingsDialog%23events/confirm
For you this will contain only filters for your Xao field but my recommendatio is set a breakpoint in the function and analyse the oEvent.getParameters() structure.

Related

How to drag and drop rows of a table

In my view.xml file:
<html:div class="container-fluid">
<html:div class="row">
<Table id="ConnectorModuleTable"
items="{
path: '/datalist'}">
<columns>
<Column ><Text text="Connector Module"/></Column>
<Column ><Text text="Setting A"/></Column>
<Column ><Text text="Setting B"/></Column>
<Column ><Text text="Custom Pin"/></Column>
<Column ><Text text="Actions"/></Column>
</columns>
<items>
<ColumnListItem>
<cells>
<Text text="{Connectormodule}" wrapping="false" />
<Text text="{settingA}" wrapping="false" />
<Text text="{settingB}" wrapping="false" />
<Text text="{settingB}" wrapping="false" />
</cells>
</ColumnListItem>
</items>
</Table>
</html:div>
</html:div>
I am trying to drag and drop the rows of this table
I have referred the link from docs showing for list as:
Documentation example link here
The same I have applied with the table in controller as :
attachDragAndDrop: function () {
var oList = this.byId("MyTable");
oList.addDragDropConfig(new DragInfo({
sourceAggregation: "items"
}));
oList.addDragDropConfig(new DropInfo({
targetAggregation: "items",
dropPosition: "Between",
dropLayout: "Vertical",
drop: this.onDrop.bind(this)
}));
},
onDrop: function (oInfo) {
var oDragged = oInfo.getParameter("draggedControl"),
oDropped = oInfo.getParameter("droppedControl"),
sInsertPosition = oInfo.getParameter("dropPosition"),
oDraggedParent = oDragged.getParent(),
oDroppedParent = oDropped.getParent(),
oDragModel = oDraggedParent.getModel(),
oDropModel = oDroppedParent.getModel(),
oDragModelData = oDragModel.getData(),
oDropModelData = oDropModel.getData(),
iDragPosition = oDraggedParent.indexOfItem(oDragged),
iDropPosition = oDroppedParent.indexOfItem(oDropped);
// remove the item
var oItem = oDragModelData[iDragPosition];
oDragModelData.splice(iDragPosition, 1);
if (oDragModel === oDropModel && iDragPosition < iDropPosition) {
iDropPosition--;
}
// insert the control in target aggregation
if (sInsertPosition === "Before") {
oDropModelData.splice(iDropPosition, 0, oItem);
} else {
oDropModelData.splice(iDropPosition + 1, 0, oItem);
}
if (oDragModel !== oDropModel) {
oDragModel.setData(oDragModelData);
oDropModel.setData(oDropModelData);
} else {
oDropModel.setData(oDropModelData);
}
},
initData: function (datalist) {
this.byId("MyTable").setModel(new JSONModel([
datalist
]));
}
Here datalist has all rows data in JSON (for ref)
But this did n't work , any help or guiding links are appreciated
I used the following view with your onDrop() and it worked.
Can you describe, what is not working?
<Table id="MyTable" items="{/}">
<columns>
<Column ><Text text="Connector Module"/></Column>
<Column ><Text text="Setting A"/></Column>
<Column ><Text text="Setting B"/></Column>
</columns>
<dragDropConfig>
<dnd:DragDropInfo
sourceAggregation="items"
targetAggregation="items"
dropPosition="Between"
drop=".onDrop"/>
</dragDropConfig>
<items>
<ColumnListItem>
<cells>
<Text text="{Connectormodule}" wrapping="false" />
<Text text="{settingA}" wrapping="false" />
<Text text="{settingB}" wrapping="false" />
<Text text="{settingB}" wrapping="false" />
</cells>
</ColumnListItem>
</items>
</Table>
Can you see data in the original table?
Setting of the model is incorrect: the JSONModel constructor needs an object rather than an array as listed in your initData function. It seems like a binding problem to me...
I just tried to modify your code as follows and everithing works fine:
onDrop: function (oInfo) {
var oDragged = oInfo.getParameter("draggedControl"),
oDropped = oInfo.getParameter("droppedControl"),
sInsertPosition = oInfo.getParameter("dropPosition"),
oDraggedParent = oDragged.getParent(),
oDroppedParent = oDropped.getParent(),
oDragModel = oDraggedParent.getModel(),
oDropModel = oDroppedParent.getModel(),
oDragModelData = oDragModel.getData(),
oDropModelData = oDropModel.getData(),
iDragPosition = oDraggedParent.indexOfItem(oDragged),
iDropPosition = oDroppedParent.indexOfItem(oDropped);
// remove the item
var oItem = oDragModelData.datalist[iDragPosition];
oDragModelData.datalist.splice(iDragPosition, 1);
if (oDragModel === oDropModel && iDragPosition < iDropPosition) {
iDropPosition--;
}
// insert the control in target aggregation
if (sInsertPosition === "Before") {
oDropModelData.datalist.splice(iDropPosition, 0, oItem);
} else {
oDropModelData.datalist.splice(iDropPosition + 1, 0, oItem);
}
if (oDragModel !== oDropModel) {
oDragModel.setData(oDragModelData);
oDropModel.setData(oDropModelData);
} else {
oDropModel.setData(oDropModelData);
}
},
initData: function (datalist) {
//just an example
var oData = {
datalist: [{
Connectormodule: "one",
settingA: "one",
settingB: "one"
}, {
Connectormodule: "two",
settingA: "two",
settingB: "two"
}, {
Connectormodule: "three",
settingA: "three",
settingB: "three"
}]
};
var oModel = new sap.ui.model.json.JSONModel(oData);
this.byId("ConnectorModuleTable").setModel(oModel);
},

Why does my searchfield work on one table but not at another one?

i got some wired problems..
<core:FragmentDefinition xmlns="sap.ui.table" xmlns:dnd="sap.ui.core.dnd" xmlns:mvc="sap.ui.core.mvc" xmlns:core="sap.ui.core"
xmlns:m="sap.m">
<m:Dialog id="AuftragDialog" title="Aufträge">
<!-- <m:beginButton>
<m:Button text="Fertig" press=".onSaveAufträge"/>
</m:beginButton> -->
<m:endButton>
<m:Button text="Zurück" press=".onCancelAufträge"/>
</m:endButton>
<m:content>
<m:HBox renderType="Bare">
<Table id="table1" selectionMode="MultiToggle" rows="{ path: 'Hallo>/results' }" visibleRowCount="10">
<extension>
<m:OverflowToolbar>
<m:Title text="Alle Aufträge"/>
<m:ToolbarSpacer/>
<m:SearchField id="allOrder" liveChange="onFilterAllOrder">
<m:layoutData><m:OverflowToolbarLayoutData minWidth="25%" maxWidth="30%" /></m:layoutData>
</m:SearchField>
</m:OverflowToolbar>
</extension>
<columns>
<Column >
<m:Text text="Auftrags Nummer"/>
<template>
<m:Text text="{Hallo>Aufnr}" wrapping="false"/>
</template>
</Column>
<Column filterProperty="Ktext">
<m:Text text="Auftrag"/>
<template>
<m:Text text="{Hallo>Ktext}" wrapping="false"/>
</template>
</Column>
</columns>
<dragDropConfig>
<dnd:DragInfo groupName="moveToTable2" sourceAggregation="rows" dragStart="onDragStart"/>
<dnd:DropInfo groupName="moveToTable1" drop="onDropTable1"/>
</dragDropConfig>
</Table>
<m:VBox justifyContent="Center" class="sapUiTinyMarginBeginEnd">
<m:Button class="sapUiTinyMarginBottom" icon="sap-icon://navigation-right-arrow" tooltip="Move to selected" press="moveToTable2"/>
<m:Button icon="sap-icon://navigation-left-arrow" tooltip="Move to available" press="moveToTable1"/>
</m:VBox>
<Table id="table2" selectionMode="MultiToggle" rows="{/ZAUFK_VARSet}" visibleRowCount="10" noData="Bitte wählen sie Ihre Aufträge aus.">
<extension>
<m:OverflowToolbar>
<m:Title text="Selektierte Aufträge"/>
<m:ToolbarSpacer/>
<m:SearchField id="selectedOrder" liveChange="onFilterSelectedOrder">
<m:layoutData><m:OverflowToolbarLayoutData minWidth="25%" maxWidth="30%" /></m:layoutData>
</m:SearchField>
</m:OverflowToolbar>
</extension>
<columns>
<Column>
<m:Text text="Auftrags Nummer"/>
<template>
<m:Text text="{Aufnr}" wrapping="false" />
</template>
</Column>
<Column filterProperty="Ktext">
<m:Text text="Auftrag"/>
<template>
<m:Text text="{Ktext}" wrapping="false" />
</template>
</Column>
</columns>
<dragDropConfig>
<dnd:DragInfo groupName="moveToTable1" sourceAggregation="rows" dragStart="onDragStart"/>
<dnd:DropInfo groupName="moveToTable2" targetAggregation="rows" dropPosition="Between" drop="onDropTable2"/>
<dnd:DragDropInfo sourceAggregation="rows" targetAggregation="rows" dropPosition="Between" dragStart="onDragStart" drop="onDropTable2"/>
</dragDropConfig>
</Table>
</m:HBox>
</m:content>
</m:Dialog>
thats my fragment.. on table1 there is a Searchfield and it works.. like it should.
on my second table on table2 this does not work..
and i dont really know why.. the one is a json model the other not.. maybe thats why?
controller
onFilterAllOrder: function (oEvent) {
var oTable = this.byId("table1");
var searchText = oEvent.getParameters().newValue;
var filters = [];
if (searchText.trim() != '') {
var filter1 = new sap.ui.model.Filter({
path: "Ktext",
operator: sap.ui.model.FilterOperator.Contains,
value1: searchText
});
filters = [filter1];
var finalFilter = new sap.ui.model.Filter({
filters: filters,
and: false
});
oTable.getBinding("rows").filter(finalFilter, sap.ui.model.FilterType.Application);
} else {
oTable.getBinding("rows").filter([], sap.ui.model.FilterType.Application);
}
},
onFilterSelectedOrder: function (oEvent) {
var oTable = this.byId("table2");
var searchText = oEvent.getParameters().newValue;
var filters = [];
if (searchText.trim() != '') {
var filter1 = new sap.ui.model.Filter({
path: "Ktext",
operator: sap.ui.model.FilterOperator.Contains,
value1: searchText
});
filters = [filter1];
var finalFilter = new sap.ui.model.Filter({
filters: filters,
and: false
});
oTable.getBinding("rows").filter(finalFilter, sap.ui.model.FilterType.Application);
} else {
oTable.getBinding("rows").filter([], sap.ui.model.FilterType.Application);
}
}
so maybe i dont see something? or make some mistakes? so i try everything.. but nothing work.. i mean it should be the same as the one before but somehow it dont work...
If the latter is a OData model, the filtering would be done against the service if you have not set the operation mode to client. In this case, a request against the backend is made and if that service does ignore $filter, you'll see no change.
Check the network tab and look if a request is made.

SAPUI5: Refreshing table contents after oData.read

Im building an application with two textboxes, a button and a table. On pressing the button, an array of filters is composed from the contents of the textboxes and sent to my oData service in a read request. Right now, when one record is returned (as it shows in the console), the table will not be updated. What am I missing?
This is the table:
<Table id="PLTab" items="{/ORDSET}">
<headerToolbar>
<Toolbar>
<Title text="Planned Orders" level="H2" />
</Toolbar>
</headerToolbar>
<columns>
<Column>
<Text text="Product" />
</Column>
<Column>
<Text text="Planned Order" />
</Column>
<Column>
<Text text="Production Planner" />
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<ObjectIdentifier title="{Maktx}" text="{Matnr}" />
<Text text="{Ordno}" />
<Text text="{Name}" />
</cells>
</ColumnListItem>
</items>
</Table>
And this is the relevant part of the controller:
onInit: function() {
var oModel = this.getOwnerComponent().getModel("path");
oModel.refresh(true);
this.getView().setModel(oModel);
},
openOrders: function(oEvent) {
var PLFilters = [];
PLFilters.push(new sap.ui.model.Filter({
path: "Matnr",
operator: sap.ui.model.FilterOperator.EQ,
value1: this.getView().byId("Product").getValue()
}));
PLFilters.push(new sap.ui.model.Filter({
path: "Locno",
operator: sap.ui.model.FilterOperator.EQ,
value1: this.getView().byId("Location").getValue()
}));
var oModel = this.getOwnerComponent().getModel("path");
oModel.read("/ORDSET", {
filters: PLFilters,
success: function(oData, oResponse) {
console.log(oData);
}
});
}
Thanks & regards,
Max
var oModel = this.getOwnerComponent().getModel("path");
You use the model named "path" to read data, but in your XML View you use the default model (unnamed).
Try to change to
var oModel = this.getOwnerComponent().getModel();

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>

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
}