SelectablePicker

API Reference: UI.SelectablePicker

SelectablePicker is a UI Component that allows you to create a list from which the user can pick a single or multiple item/items.

Single SelectablePicker

Following the example below is showing the single SelectablePicker. When the user clicks ok/done button, label section will be updated with the selected items.

JavaScript
JavaScript
const Page = require("sf-core/ui/page");
const extend = require("js-base/core/extend");
const FlexLayout = require('sf-core/ui/flexlayout');
const Color = require('sf-core/ui/color');
const Button = require('sf-core/ui/button');
const SelectablePicker = require("sf-core/ui/selectablepicker");
const items = [
"item 1",
"item 2",
"item 3",
"item 4",
"item 5"
];
var Page1 = extend(Page)(
function(_super) {
_super(this, {
onShow: function(params) {
this.headerBar.visible = false; //For Android
}
});
this.layout.flexDirection = FlexLayout.FlexDirection.ROW;
this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
this.layout.alignItems = FlexLayout.AlignItems.CENTER;
var myButton = new Button({
width: 150,
height: 50,
text: "Show Picker",
textColor:Color.BLACK,
backgroundColor: Color.create("#00A1F1"),
onPress: function() {
showPicker();
}
});
this.layout.addChild(myButton);
}
);
function showPicker() {
var mySelectablePicker = new SelectablePicker({
items: items,
multiSelectEnabled: false,
checkedItems: 2
});
var doneCallback = function(params) {
console.log('Selected index: ' + params.items);
};
var cancelCallback = function() {
console.log('Cancel Clicked!');
};
mySelectablePicker.onSelected = function(index , selected){
console.log("onSelected callback triggered. index: " + index + " selected: " + selected);
};
mySelectablePicker.show(doneCallback,cancelCallback);
}
module.exports = Page1;

: Color.create("#00A1F1"),
onPress: function() {
showPicker();
}
});
this.layout.addChild(myButton);
}
);
function showPicker() {
var mySelectablePicker = new SelectablePicker({
items: items,
multiSelectEnabled: false,
checkedItems: 2
});
var doneCallback = function(params) {
console.log('Selected index: ' + params.items);
};
var cancelCallback = function() {
console.log('Cancel Clicked!');
};
mySelectablePicker.onSelected = function(index , selected){
console.log("onSelected callback triggered. index: " + index + " selected: " + selected);
};
mySelectablePicker.show(doneCallback,cancelCallback);
}
module.exports = Page1;

Multiple SelectablePicker

Following the example below is showing the multiple SelectablePicker. In multiple SelectablePicker, you must set multiSelectEnabled property in the constructor and you can not set this property on run-time. Otherwise, SelectablePicker may not work properly. If you want to set checkedItem property, the array of index must same size with given items array. When the user clicks ok/done button, label section will be updated with the selected items

Multiple Selectable Picker
Multiple Selectable Picker
const Page = require("sf-core/ui/page");
const extend = require("js-base/core/extend");
const FlexLayout = require('sf-core/ui/flexlayout');
const Color = require('sf-core/ui/color');
const Button = require('sf-core/ui/button');
const SelectablePicker = require("sf-core/ui/selectablepicker");
const items = [
"item 1",
"item 2",
"item 3",
"item 4",
"item 5"
];
var Page1 = extend(Page)(
function(_super) {
_super(this, {
onShow: function(params) {
this.headerBar.visible = false; //For Android
}
});
this.layout.flexDirection = FlexLayout.FlexDirection.ROW;
this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
this.layout.alignItems = FlexLayout.AlignItems.CENTER;
var myButton = new Button({
width: 150,
height: 50,
text: "Show Picker",
textColor:Color.BLACK,
backgroundColor: Color.create("#00A1F1"),
onPress: function() {
showPicker();
}
});
this.layout.addChild(myButton);
}
);
function showPicker() {
var mySelectablePicker = new SelectablePicker({
items: items,
multiSelectEnabled: true,
checkedItems: [3,2]
});
var doneCallback = function(params) {
console.log('Selected index: ' + params.items);
};
var cancelCallback = function() {
console.log('Cancel Clicked!');
};
mySelectablePicker.onSelected = function(index , selected){
console.log("onSelected callback triggered. index: " + index + " selected: " + selected);
};
mySelectablePicker.show(doneCallback,cancelCallback);
}
module.exports = Page1;

SelectablePicker selected/unselected color

You can not change selected/unselected color directly. If you want to change this color, follow the instructions:

  • Under the /workspace/themes/defaultTheme/styles, there is a file named __applicationAndroidStyle.json. Copy this file.

  • Paste under the /workspace/themes/baseTheme/styles/defaults.

  • Now you can change selected/unselected color by changing colorAccent key in the __applicationAndroidStyle.json that you copied

Changing the value of colorAccent will change also the color of cancel/done buttons of SelectablePicker, if you did not set cancel/done button color.