Openui5: Data binding not supported for sap.ui.model.Filter value1/value2 properties
UI5 Version 1.22.3 (built at , last change)
User Agent Chrome/36.0.1985.143
Reproducable example: http://jsbin.com/nehato/2/edit?js,output
See also: http://stackoverflow.com/questions/25387580/not-possible-to-set-filter-value-using-data-binding
Steps to reproduce:
If I use a filter where the filter value value1 is specified by data binding:
new sap.ui.model.Filter({
path : "division",
operator : sap.ui.model.FilterOperator.EQ,
value1 : "{/someProperty}"
})
then the dropdown does not render any items
However, if I hardcode a value at property value1:
new sap.ui.model.Filter({
path : "division",
operator : sap.ui.model.FilterOperator.EQ,
value1 : "Test"
})
then the filter works as expected.
Possible root-cause:
As Allen Zhang discovered in the aforementioned Stackoverflow topic, the Filter's properties oValue1 and oValue2 do not parse any data binding path:
/**
* Provides a JS filter function for the given filter
* @name sap.ui.model.ClientListBinding#getFilterFunction
* @function
*/
ClientListBinding.prototype.getFilterFunction = function(oFilter){
if (oFilter.fnTest) {
return oFilter.fnTest;
}
var oValue1 = this.normalizeFilterValue(oFilter.oValue1),
oValue2 = this.normalizeFilterValue(oFilter.oValue2);
//etc...
(Source code here: https://openui5.hana.ondemand.com/resources/sap/ui/model/ClientListBinding-dbg.js)
Reasoning why it _should_ work with databinding
Imagine you have a table, and one of the columns shows a dropdown box for each entry in the table. The entries in the dropdown box have to be filtered based on a value in the current table row (for instance, each row in the table has a client field, and the dropdown should only list the projects for that corresponding client:
In code:
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({
text: "Projects"
}),
template: new sap.ui.commons.DropdownBox({
selectedKey: "{tablemodel>project}",
items: {
path: "metadatamodel>/allprojects",
template: new sap.ui.core.ListItem({
text: "{metadatamodel>projectDescription}",
key: "{metadatamodel>projectKey}"
}),
filters: [new sap.ui.model.Filter("projectClient", sap.ui.model.FilterOperator.EQ, "{tablemodel>client}")]
}
})
}))
_Explanation_
- The table records contain, among others, a field
clientandproject - The dropdown template control in the table column is bound to a property
allprojectswhich contains an array of objects{projectKey : "zzz", projectDescription : "zzz", projectClient : "someClient"} - The dropdown template has a filter, which filters the dropdown's model property
projectClientbased on the corresponding table model array item's propertyclient
qualiture
All 24 comments
Hello qualiture,
we will discuss this enhancement and get back to you as soon as we have a result.
Thanks for detailing out this point and reporting it to us.
Cheers,
Michael
UI5 Development
Michadelic
on 22 Aug 2014
I am in UI5 training right now, and when we got to the filter slides, this was the first thing I thought of and immediately Google'd to see if it were possible. I agree this is an important feature.
peder
on 14 Apr 2015
Hello Michadelic,
Do you have a solution for this problem? I need to implement the same functionality and it still doesn't work.
m5555
on 15 Apr 2015
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8' />
<title>Dynamic Filter in XML view using HandleBars</title>
<script id='sap-ui-bootstrap' type='text/javascript' src='/sapui5/resources/sap-ui-core.js' data-sap-ui-theme='sap_bluecrystal' data-sap-ui-libs='sap.ui.commons' data-sap-ui-xx-bindingSyntax="complex"></script>
<!-- Table definition -->
<script id="view1" type="text/x-handlebars-template">
<mvc:View controllerName="sap.m.sample.Table.Table" xmlns:l="sap.ui.layout" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m">
<Table id="idProductsTable" inset="false" items="{
path: '/ProductCollection',
sorter: {
path: 'Name'
},
filters:[{
path: 'Category',
operator: 'EQ',
value1: '{{dynamicFilter ProductCollection}}'
}]
}">
<headerToolbar>
<Toolbar>
<Label text="Products"></Label>
</Toolbar>
</headerToolbar>
<columns>
<Column width="12em">
<Text text="Product" />
</Column>
<Column minScreenWidth="Tablet" demandPopin="true">
<Text text="Supplier" />
</Column>
<Column minScreenWidth="Tablet" demandPopin="true" hAlign="Right">
<Text text="Dimensions" />
</Column>
<Column hAlign="Right">
<Text text="Price" />
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<ObjectIdentifier title="{Name}" text="{ProductId}" class="sapMTableContentMargin" />
<Text text="{SupplierName}" />
<Text text="{Width} x {Depth} x {Height} {DimUnit}" />
<ObjectNumber number="{Price}" unit="{CurrencyCode}" />
</cells>
</ColumnListItem>
</items>
</Table>
</mvc:View>
</script>
<script>
var d1 = new $.Deferred();
var url = "../../../sapui5-sdk-dist/test-resources/sap/ui/demokit/explored/products.json";
var oModel = new sap.ui.model.json.JSONModel(url);
oModel.attachRequestCompleted(function (oEvent) {
d1.resolve(oEvent.getSource().getData());
});
$.when(d1).done(function (data) {
jQuery.sap.require("sap.ui.thirdparty.handlebars");
Handlebars.registerHelper('dynamicFilter', function (data) {
debugger;
return data[1].Category;
});
var templateSrc = jQuery('#view1').html();
var template = Handlebars.compile(templateSrc);
var viewSrc = template(data);
sap.ui.controller("sap.m.sample.Table.Table", {
onInit: function () {
this.getView().setModel(oModel);
}
});
var myView = sap.ui.xmlview({
viewContent: viewSrc
});
myView.placeAt('content');
});
</script>
</head>
<body class='sapUiBody'>
<div id='content'></div>
</body>
</html>
connecttobn
on 5 May 2015
Hi team,
As it's almost a year ago, can you maybe provide an update (or possible workaround)?
I also tried if expression binding would be possible, but for array data bound to a dropdown it won't work it seems
qualiture
on 25 Jun 2015
With new XML expression support, I think this issue needs new attention. Simply put, there needs to be at least some trivial mechanism for linking Select lists together.
peder
on 30 Jun 2015
Hello guys, the feature is now on the product backlog of SAPUI5. We will definitely implement it but we do not have a concrete timeline yet. I marked this as "contributions welcome", you are invited to create a pull request and add the feature if you want to speed up this request.
If you would like to contribute, please contact us for further details, the implementation needs to consider internal details and special cases for two way binding in UI5.
Cheers,
Michael
Michadelic
on 3 Jul 2015
Hello @Michadelic
I would like to contribute on this, let me know how we can go ahead.
Cheers,
Rottwei.
Rottwei
on 8 Jul 2015
+1 for this
lewis-smith
on 6 Jan 2016
Is there any update on this?
I would love to contribute to this feature.
Let me know how I can get started.
gklsndr
on 7 Jan 2016
Is there any upate on that ? Would make it a lot easier when using filters in XML View.
Is there currently any working work around to achieve dynamic filters and XML Views ?
devroyalEU
on 13 Jun 2016
Is there any feature update yet? Or a "workaround" for this?
matzeeable
on 22 Aug 2016
Hello @Michadelic @qualiture
We have a similar requirement. is this feature now supported in SAPUI5 XML views with data-binding?
Please advice.
SHR3YAS
on 9 Sep 2016
Hi @peder , @Michadelic , @Rottwei what's the status on this, can someone confirm ?.
tdniksfsap1
on 1 Feb 2017
Also for me this is a bigger open issue with only 'not so nice' workarounds. Is it possible to prioritize this request?
timostark
on 1 Feb 2017
Can you at least provide status update #SAP
timothymuchena
on 16 Feb 2017
@Michadelic @qualiture I've implemented a quick solution for this, more as a way for me to start getting the hang of working in UI5 libraries than anything else. I'm happy to continue working on it if there is some supportive feedback. The changes are in this branch and include the following:
- Additions to the
updateBindingsmethod ofsap.ui.base.ManagedObject. - A sample,
sap.m.sample.ListFilterBinding, that can be accessed in the Explored app samples forsap.m.List(name: "List - Dynamic Filter Binding in View").
In short, this is how it works:
value1is checked to see if it is wrapped in "{}" - if so, a binding must be processed.value1is parsed and the resulting binding info (model and path) stored as a property of the filter.- If the model is available, the binding info is used to create a binding and it is also stored as a property of the filter; if the model is not yet available, the managed object's
modelContextChangeevent is used to try again later. - Once the binding is stored in the filter, the value is fetched and the filter applied.
(As a first stab I've just done value1, not value2).
This means the sap.m.List items aggregation can be set like this
items="{
path: '/ProductCollection',
filters: [
{path: 'Category', operator: 'EQ', value1: '{ViewControl>/Category}'}
]
}"
and the filter will be reprocessed when ViewControl>/Category is changed.
In the sample I've used sap.m.Select in the list toolbar like this
<Select
forceSelection="false"
selectedKey="{ViewControl>/Category}"
items="{/ProductCollectionStats/Filters/0/values}">
<core:Item key="{text}" text="{text}"/>
</Select>
This is working for me with both JSON and OData list bindings, but I haven't done a lot of testing.
I'm not very familiar with the inner workings of the UI5 libraries, so I might very well have missed many important considerations - any feedback is welcome!
Two things that "feel" potentially incorrect, is:
- all the code is directly in
ManagedObject.prototype.updateBindings, whereas there may be more suitable classes and methods to use. - additional properties (binding info and binding) are added to Filter, but no methods (getters, setters, etc.) to work with these are implemented.
rikusv
on 30 Mar 2017
@rikusv @qualiture It's been quite a while that this feature request had been brought up. Thanks for all your input and we apologize for the delays. Now we started to review the topic with our binding experts, again. Unfortunately, we don't see to address it properly and suggest to keep using more explicit coding, typically in the controller.
Some reasons why we no longer consider an implementation (even that we had plans to do so back then): In order to benefit from the existing data binding capabilities one would turn the rather simple Filter objects into ManagedObjects (instead of reimplementing relevant parts in a redundant way). Only the comprehensive feature set of ManagedObject would allow to address reasonably powerful binding expressions in a dynamic filter. Just to use limited binding features wouldn't cover some expected, real-life scenarios, e.g. referring to another model within the binding expression. Thus, one would need to have full lifecycle support for model creation, binding updates, etc. How and when to process different binding updates isn't straightforward. Such implicit behavior could trigger some awkward update effects in (non-trivial) apps.
Therefore, in many real app scenarios we still advise to keep having more control about (re-)applying an updated filter or a set of filters, respectively. We suggest to go for the typical coding, albeit less elegant than the proposed dynamic filter declaration. As an example along those lines:
- if model isn't available yet, attach to modelContextChange event in control
- use bindProperty() to create bindings for the filter values
- attach to change event of those bindings
- in handler (re-)create filter objects with those values
- (re-)apply those filter objects on the binding to be filtered
Hope that helps, and the more explicit coding also comes with some benefits (such as more control and less implicit update flows).
ecker
on 4 Aug 2017
I am facing the same challenge. I need to keep the dropdown box in the table and the values should be filtered based on the value in another column. When I give the static value in the filter , it is working but with binding it is giving the blank. Please let me know if there is some work around. I checked the event for click on the dropdown , that too is not available. I am using sap.m.Select UI control. I feel this is very important feature which has to be supported.
RameshShrestha
on 17 Oct 2017
Hello, I am facing the same problem. I need to use filters with variable, static solution is working but does not suit me because my table depends on dynamic data. Is there a solution like this etc.?
rows="{path: '/TABLE', parameters : {expand : 'TABLE1'}, filters: [{ path: 'TABLE_ID', operator: 'EQ', value1: '{data>/recordId}' }] }"
zygimantus
on 25 Nov 2018
Was this feature implemented?
rphtiwari
on 18 Feb 2020
Any update on this.
sureshreddyrcr
on 12 Mar 2020
any solution? I have the same problem
I have the filter like this:
filters: [{path: 'PERNR_EMI_PERNR_EMI', operator: 'EQ', value1: '{userapi> / name}'}],
but it doesn't load the data in the table.
when i remove the filter the table loads the data without problem.
geetings from Colombia
AndresBPaz
on 18 Jun 2020
The solution described by @ecker still works and still is the only one.
codeworrior
on 18 Jun 2020
Related issues
pubmikeb
·
19Comments
hschaefer123
·
14Comments
cmastrandrea
·
14Comments
endrx
·
18Comments
mjza
·
15Comments
Most helpful comment
Is there any feature update yet? Or a "workaround" for this?