Picker

API Reference: UI.Picker

Picker is a UI View that allows you to create a list from which the user can pick a single item. There are several usages for Picker.

  • add as a child View to layout

  • show Picker as a dialog, by calling the show() method

Using with Show

Following example below is showing the picker when user press to a button. Label text is updated after user press Done OR OK buttons.

JavaScript
JavaScript
const Page = require("sf-core/ui/page");
const extend = require("js-base/core/extend");
const Button = require('sf-core/ui/button');
const Label = require('sf-core/ui/label');
const Picker = require("sf-core/ui/picker");
const items = [ //Text values of the picker
"item 1",
"item 2",
"item 3",
"item 4",
"item 5"
];
var Page1 = extend(Page)(
function(_super) {
_super(this, {
onShow: function(params) {
Application.statusBar.visible = false;
this.headerBar.visible = false;
}
});
var index = 0;
const lblSelection = new Label({
text: "",
marginTop: 100,
height: 30
});
this.layout.addChild(lblSelection);
const btnPick = new Button({
marginTop: 30,
text: "Pick item",
onPress: btnPickOnPress.bind(this),
height: 70
});
this.layout.addChild(btnPick);
function btnPickOnPress() {
console.log(`Showing the picker with index ${index}`);
const itemPicker = new Picker({
items: items,
currentIndex: index //restores previous selection
});
itemPicker.show(okCallback, cancelCallback);
}
function okCallback(params) {
console.log('ok clicked');
index = params.index;
lblSelection.text = items[params.index];
}
function cancelCallback() {
console.log('cancel clicked');
}
}
);
module.exports = Page1;

Using as a view

It is also possible to add the picker inside the page layout as a view. It has usages such as in forms or multiple pickers at the same time. In that case, the developer needs to add the Cancel & OK buttons manually.

In the example below, the user is setting the expiration date for the credit card.

JavaScript
JavaScript
const Page = require("sf-core/ui/page");
const extend = require("js-base/core/extend");
const Button = require('sf-core/ui/button');
const Label = require('sf-core/ui/label');
const Picker = require("sf-core/ui/picker");
const Dialog = require("sf-core/ui/dialog");
const FlexLayout = require("sf-core/ui/flexlayout");
const Color = require('sf-core/ui/color');
const System = require('sf-core/device/system');
const Screen = require('sf-core/device/screen');
const View = require('sf-core/ui/view');
const TextAlignment = require('sf-core/ui/textalignment');
const defaultBlue = "iOS" ? Color.create("#007AFF") : Color.create("#00BFFF");
const borderColor = Color.create("#c7c7c7");
const MONTHS = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"];
const YEARS = ["2018", "2019", "2020", "2021", "2022", "2023"];
var Page1 = extend(Page)(
function(_super) {
_super(this, {
onShow: function(params) {
Application.statusBar.visible = false;
this.headerBar.visible = false;
}
});
const lblExpirationDate = new Label({
text: "Expire",
marginTop: 100,
height: 30,
onTouchEnded: showExpirationPicker,
textAlignment: TextAlignment.MIDCENTER
});
this.layout.addChild(lblExpirationDate);
const pickerDialog = new Dialog();
Object.assign(pickerDialog.layout, {
backgroundColor: Color.create(80, 0, 0, 0),
alignItems: FlexLayout.AlignItems.CENTER,
justifyContent: FlexLayout.JustifyContent.CENTER
});
const flPickerDialog = new FlexLayout({
height: 250,
width: System.OS === "iOS" ?
300 : Screen.width - 40,
backgroundColor: Color.WHITE,
borderRadius: System.OS === "iOS" ? 10 : 0,
borderColor: borderColor,
borderWidth: System.OS === "iOS" ? 1: 0
});
pickerDialog.layout.addChild(flPickerDialog);
const flColumns = new FlexLayout({
flexDirection: FlexLayout.FlexDirection.ROW,
flexGrow: 1,
marginBottom: 15
});
flPickerDialog.addChild(flColumns);
const dialogLeft = new FlexLayout({
flexGrow: 1
});
flColumns.addChild(dialogLeft);
const lblMonth = new Label({
text: "Month",
height: 30,
textAlignment: TextAlignment.MIDCENTER
});
dialogLeft.addChild(lblMonth);
const monthPicker = new Picker({
items: MONTHS,
flexGrow: 1
});
dialogLeft.addChild(monthPicker);
const dialogRight = new FlexLayout({
flexGrow: 1
});
flColumns.addChild(dialogRight);
const lblYear = new Label({
text: "Year",
height: 30,
textAlignment: TextAlignment.MIDCENTER
});
dialogRight.addChild(lblYear);
const yearPicker = new Picker({
items: YEARS,
flexGrow: 1
});
dialogRight.addChild(yearPicker);
const lineButtons = new View({
height: 1,
backgroundColor: borderColor
});
System.OS === "iOS" && flPickerDialog.addChild(lineButtons);
const flDialogButtons = new FlexLayout({
height: 40,
flexDirection: System.OS === "iOS" ?
FlexLayout.FlexDirection.ROW : FlexLayout.FlexDirection.ROW_REVERSE
});
flPickerDialog.addChild(flDialogButtons);
const btnOK = new Button({
text: System.OS === "iOS" ? "Done" : "OK",
backgroundColor: Color.TRANSPARENT,
textColor: defaultBlue,
flexGrow: System.OS === "iOS" ? 1 : NaN,
onPress: okCallback
});
flDialogButtons.addChild(btnOK);
const btnCancel = new Button({
text: "Cancel",
backgroundColor: Color.TRANSPARENT,
textColor: defaultBlue,
flexGrow: System.OS === "iOS" ? 1 : NaN,
onPress: cancelCallback
});
flDialogButtons.addChild(btnCancel);
pickerDialog.layout.applyLayout();
function showExpirationPicker() {
pickerDialog.show();
}
function okCallback(params) {
lblExpirationDate.text = `${MONTHS[monthPicker.currentIndex]}/${YEARS[yearPicker.currentIndex]}`;
pickerDialog.hide();
}
function cancelCallback() {
pickerDialog.hide();
}
}
);
module.exports = Page1;