Version: 7.2.0

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.

note

The components in the example are added from the code for better showcase purposes. To learn more about the subject you can refer to:

Adding Component From Code

As a best practice, Smartface recommends using the WYSIWYG editor in order to add components and styles to your page or library. To learn how to use UI Editor better, please refer to this documentation

UI Editor Basics

import PageSampleDesign from "generated/pages/pageSample";
import { Route, Router } from "@smartface/router";
import { styleableComponentMixin } from '@smartface/styling-context'; 
import Label from "@smartface/native/ui/label";
import Button from "@smartface/native/ui/button";
import Picker from "@smartface/native/ui/picker";
import Screen from "@smartface/native/device/screen";

class StyleableButton extends styleableComponentMixin(Button) {}
class StyleableLabel extends styleableComponentMixin(Label) {}

//You should create new Page from UI-Editor and extend with it.
export default class Sample extends PageSampleDesign {
    items: string[] = [
        //Text values of the picker
        "item 1",
        "item 2",
        "item 3",
        "item 4",
        "item 5",
      ];
      index: number = 0;
      lblSelection: StyleableLabel;
      btnPick: StyleableButton;
      itemPicker: Picker;
  constructor(private router?: Router, private route?: Route) {
    super({});
  }

  // The page design has been made from the code for better
  // showcase purposes. As a best practice, remove this and
  // use WYSIWYG editor to style your pages.
  centerizeTheChildrenLayout() {
    this.dispatch({
        type: "updateUserStyle",
        userStyle: {
            flexProps: {
              flexDirection: 'ROW',
              justifyContent: 'CENTER',
              alignItems: 'CENTER'
            }
        }
    })
  }

  btnPickOnPress(): void {
    console.log(`Showing the picker with index ${++this.index}`);
    //@ts-ignore
    this.itemPicker.show(
      this.okCallback.bind(this),
      this.cancelCallback.bind(this)
    );
  }

  okCallback(params: { index: number }) {
    console.log("ok clicked");
    this.index = params.index;
    this.lblSelection.text = this.items[params.index];

    return params;
  }

  cancelCallback(): void {
    console.log("cancel clicked");
  }

  onShow() {
    super.onShow();
    const { headerBar } = this;
  }

  onLoad() {
    super.onLoad();
    this.centerizeTheChildrenLayout();

    this.itemPicker = new Picker({
        items: this.items,
        currentIndex: this.index, //restores previous selection
      });
    
      this.lblSelection = new StyleableLabel({
        text: "",
      });
      this.addChild(this.lblSelection, "lblSelection", ".sf-label", {
        marginTop: 100,
        height: 30,
        width: 100,
        marginBottom: null,
      });
    
      this.btnPick = new StyleableButton({
        text: "Pick item",
        onPress: this.btnPickOnPress.bind(this),
      });
    
      this.addChild(this.btnPick, "btnPick", ".sf-button", {
        marginTop: 30,
        width: Screen.width - (this.layout.paddingLeft + this.layout.paddingRight),
        height: 70,
      });
  }
}

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.