After the question by Jean-François 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