Design Studio SDK: Float Button for Quick Member Selection

[Karol-K]

After the question by jean-franois.drouet in Design Studio SDK: Calendar Selector Component blog about a possibility of month selection I have taken into consideration 3 options for making this scenario happen.

1. build your own button area by placing many buttons (this is always possible)

2. using existing controls (like SCN Design Studio SDK: Segmented Button Component)

3. any other easy way to make it.

Scenario

Selecting of months is one scenario where a quick access can be beneficial, but selection of any members would be also nice to have. Some scenarios can be already covered by Segmented Button, but it has one part which is not helping in this scenario - it is basically only horizontal and does not react on overflow.

So, this is how the "Float Button" was created.

Technical Background

Technically, it is a array of buttons (simple or toggle) which is floating over the reserved space. It means, as soon the width is not enough, next button is places below the row and opening next row. Like those examples (list of cities):

Effect

each city represents one button, the width is set to "-1", so the button adjusts to word width.

Code

to make a simple example, I use the bing your own data source and data iterator. of course, you can also use "getMembers()" method to fill in the content. (this is also the reason for the key replacement, as there is no real key in this data set)

var rows = DATAITERATOR_1.getRows();

var allKeys = ";";

rows.forEach(function(element, index) {

    var key = element.getDimensionValueKey("City");

    key = Convert.replaceAll(key, " ", "_");

    var text = element.getDimensionValueText("City");

   

    if(allKeys.indexOf(key + ";") == -1) {

    allKeys = allKeys + key + ";";

    FLOATBUTTON_3.addButton(key, text, "", -1, false);

    }

});

In addition, for better layout you can put also hard coded width on each button to create it in strict rows and columns (like the requested months + years):

Effect

I use array and realdate object to dynamically fill in the control on startup script. The buttons have fixed width, therefore the layout looks nice.

Script

REALDATE_1.initializeWithInternalDate(APPLICATION.getInfo().dateNowInternalFormat);

var year = 9999;

ARRAY_1.eaches(1, 12, 1).forEach(function(element, index) {

   var month = REALDATE_1.getMonthName();

   var monthNum = REALDATE_1.getMonth();

  

   REALDATE_1.rollMonths(1);

   APPLICATION.log("Month: " + month);

   if(index == 0) {

     year = REALDATE_1.getYear();

      FLOATBUTTON_1.addButton("M"+monthNum, month, "", 80, true);

   } else {

      FLOATBUTTON_1.addButton("M"+monthNum, month, "", 80, false);

   }

});

FLOATBUTTON_2.addButton("Y"+(year-2), ""+(year-2), "", 60, false);

FLOATBUTTON_2.addButton("Y"+(year-1), ""+(year-1), "", 60, false);

FLOATBUTTON_2.addButton("Y"+(year-0), ""+(year-0), "", 60, true);

FLOATBUTTON_2.addButton("Y"+(year+1), ""+(year+1), "", 60, false);

Usage

With this specification, you can simply create easy to use quick filters in given space.

Events & Spec

The button has selection event, press event and in the specification you can also use multi select. If you use single select, you can use toggle mechanism (pressed button is marked) or just a button w/o marking selection.

Help / API Specification

Go directly to the help site and find the component: http://org-scn-design-studio-community.github.io/sdkinstall/web/components/index.html

Download & Use

This component is available on the community package, as in SCN Design Studio SDK Development Community

Example as BIAPP:

NAME: SDK_FLOATBUTTON

org-scn-design-studio-community/applications · GitHub

Any thoughts?

feel free to add as usual...

Enhancements Ideas?

in this case it is just a start of development...

if you have good ideas (to those who would like to contribute but cannot code...) - place an "issue" with tag "enhancement" under Issues · org-scn-design-studio-community/sdkpackage · GitHub