Design Studio SDK: Data Bound Drop Down Box

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.

Available Properties

Scripting Functions

Events

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