Hello SAP Community,
We are building a custom data source using the new Data Source SDK in Design Studio 1.4.
We need end users to be able to filter results displayed in components that are pulling data from our custom data source. We cannot use Analytic Components such as the Dimension Filter or Filter Panel as these do not support custom data sources.
This leaves the Basic Components such as Dropdown Box and Checkbox Group as a way to give filtering / drill down options to the end user.
We were surprised to see that these components cannot be bound to any data source (custom or built-in!) We have found a few examples of workarounds on the web.
Firstly, using 'manual' population. This is where you use Design Studio scripting to push the values into the Dropdown Box. There are two methods available, .addItem(value, text) and .setItems(ValueTextList).
The obvious way is to populate the entire dropdown is with .setItems(ValueTextList), where ValueTextList is a specially formatted collection of items to pop into the dropdown. The way to retrieve the specially formatted ValueTextList from a data source is to use the .getMemberList(...) method found on the data source. Unfortunately, this method does not exist on custom data sources.
We have tried to create our own script contribution that returns a ValueTextList. There is no documentation on the ValueTextList class. We have done some network sniffing, and the best guess we have has resulted in us trying variations of the following:
ValueTextList getValueTextList() {* return {"items":[{"item":{"key":"Austin","val_0":"Austin"}},{"item":{"key":"Boston","val_0":"Boston"}}]};
*}We have had no success with this.
So we moved on to the .addItem(...) method which only adds one item at a time. This requires the Design Studio application designer to type up a fairly complex forEach script for each and every filter. For example:
var customValueTextList = ["value1|text2", "value2|text2"];
var value = "";
var text = "";
customValueTextList.forEach(function(element, index) { var valueTextPair = element.split("|"); valueTextPair.forEach(function(element, index) { if ( index == 0 ) { value = element; } else { text = element; } }); DROPDOWN_1.addItem(value, text);
});In the example above, we could have our custom data source return the customValueTextList array.
This is not very pleasing as it is so 'complex' when you consider that with the .setItems() and .getMemberList() combination you can do it in one line.
There are things we can do to help the designer. We can create utility functions with global scripts, and we can even have custom data source script contributions where you pass in the dropdown box as a parameter, and it populates the items.
All of this is messy and unpleasing.
The final alternative is to use the SCN Community SDK Package, which contains a Data-bound Dropdown box. At least this in theory makes it easier for the designer to populate the component without resorting to tortured scripting. We haven't tried this option yet, but we will be very shortly! We would also look to add a Data-bound Checkbox Group to the community SDK if we went this route.
The requirement is simple. We need end-users to be able to filter the data in a Design Studio application. However, everywhere we look, we are met with blockages. We cannot use the built in filter controls. The basic selector components cannot be data bound. The easiest way to populate a dropdown using a script requires a method and/or class that are not available in custom data sources (.getMemberList() and ValueTextList).
The workarounds require awkward scripting, or community provided controls.
The questions for this discuss are:
- Is there really no way implement .getMemberList() on custom data sources?
- Is there really no way to create a ValueTextList?
- Have we missed some neat trick to easily populate selector components such as the Dropdown box?
Sorry for the long post, but we wanted to be clear :-)
Thanks a lot,
Mark Bain.
