Design Studio SDK: Data Bound Drop Down Box
Tags:
Purpose
Design Studio provides a Drop Down Box which must be always manually filled. As there were many questions if it is possible to have a "data bound" drop down box, i have made a try to code it via SDK. here is the result.
Implementatation & Learnings
No implementation w/o learnings ;-)
In this component I have introduced new concept (for me) from SAPUI5 - model with bindings. By this, I create a model which is automatically updating the drop down box - a lot of code is saved by this.
here some code:
// initilaization method:
this._content = [];
// set the model
this._oModel = new sap.ui.model.json.JSONModel();
sap.ui.getCore().setModel(this._oModel);
// bind all properties
this.bindProperty("tooltip", "/tooltip");
this.bindProperty("editable", "/editable");
this.setModel(this._oModel);
// create a list item template for the entries
var oItemTemplate = new sap.ui.core.ListItem();
oItemTemplate.bindProperty("text", "t");
oItemTemplate.bindProperty("key", "k");
this.bindItems("/items", oItemTemplate);
// after update method
// create an empty array
this._content = [];
// push content
this._content.push({k:"-N/A-", t:"Default Selection"});
for (var i = 0; i < lElementsToRenderArray.length; i++) {
var element = lElementsToRenderArray[i];
this._content.push({k:element.key, t:element.text});
};
this._content.push({k:"-CLEAR-", t:"Clear..."});
// define model
this._oModel.setData({
items: this._content,
editable: true,
tooltip: "t"});
the value of this procedure is, it is enough to update the array, as this is bound on the model and that is all. next step would be to find a way to directly pass the array from the ZTL or the function which I use for data collection to avoid too many loops (but not too much for one implementation)
Visualization (animated gif, click to animate)
this examlpe is based on 1 data source, one is filling all members w/o sorting on value (default sort is on key) and the second is selecting the top and bottoms.
For detailed events, you need to check the example app.
What is In?
you can bind the drop down on any data source (I tested on basic drill downs) and you can choose which dimension should be read out the result set.
Important: current SDK does only pass result set to the component, therefore you can only "filter down", so restrict more current result set. This means, technically you have to select a column with measures, but I read only the available members.
- data bound to a column
- option of making it for Top X or Bottom X or Both (Top/Flop)
- option to pause update (just use the event "onDataUpdated" to pause after initial load)
Data Binding
After you have assigned data source, open the data selection dialog and choose one column, or row with measures, like in other data bound components.
Styles | ||
<no styles for now> | ups, forgot to put some |
Available Properties
Property Name | Description |
---|---|
selectedDimension | the dimension which you would like to select and display its members |
topBottom | should only Top X, Botom X or Both be selected |
sorting | "By Value" or "Default" |
maxNumber | how many members should be selected |
Scripting Functions
Scripts | Short Description |
---|---|
String getSelectedKey () | returns the selected key |
String getSelectedText () | returns the text of selected key |
void pauseRefresh() | pause refresh, do not fetch new content |
void allowRefresh() | refresh again data |
void setDimension() | set the dimension by script (technical dimension name) |
String getDimension() | returns the assigned dimension |
Events
Event | Short Description |
---|---|
onSelectionChanged | Event triggered when selection has changed |
onClear | what should happen when "Clear..:" item is selected? |
onDataChanged | when data have been loaded, you can use it to pause update |
Example ApplicationAn Application with example can be downloaded at the BIAPP Repository (name SDK_DATADROPDOWN):
- KarolKalisz/DesignStudioBiAppRepository · GitHub
- or take it as newest ZIP: Releases · KarolKalisz/DesignStudioBiAppRepository · GitHub
Runnable Content
- See Karol's SDK Data Bound Components for instructions.
Source Code & Licensing
This component is for free use. It is under the Open Source Apache Version 2.0 License.
Important Maintenance Notice (... as I am SAP Employee)
The component is NOT delivered under SAP maintenance license.
You cannot claim any Support on this component from SAP!
The components are created on "private" basis - you can use them as is. I can modify, correct or improve - but there is no obligation to do it. Of course I will try to correct bugs or improve the component as long I can.
Have Fun!
for other components see: Karol's SDK Components or Karol's SDK Data Bound Components