PocketBlocks Docs
English
English
  • Overview
  • Installation
  • Build apps
    • Create a new app
    • App editor
    • Event handlers
    • Write JavaScript
      • Write JavaScript in {{ }}
      • JavaScript query
      • Transformers
      • Temporary state
      • Data responder
      • Built-in JavaScript functions
      • Use third-party libraries
    • Component guides
      • Option lists
      • List View
      • Drawer
      • Image
      • Charts and graphs
      • File upload
      • Custom component
      • Use Markdown
    • Module
    • Design app UI
      • Style, theme, and usability
      • Design an efficient and user-friendly form
    • Navigation
    • Keyboard shortcuts
    • Version and release management
  • Build plugins
    • Develop UI component plugins
  • Workspace management
    • Authentication
    • Members and groups
    • Permissions for resources
    • Custom branding
  • Miscellaneous
    • Where are the Data Sources/Query Library?
    • Embedding Apps
Powered by GitBook
On this page
  • Properties
  • Manual mode
  • Mapped mode
  1. Build apps
  2. Component guides

Option lists

PreviousComponent guidesNextList View

Last updated 1 year ago

A drop menu ensures easy and error-free user input by offering a list of possible options. PocketBlocks supports implementing option lists using components such as Select and Multiselect. You can configure an option list either manually or by mapping data from your data sources.

Properties

Each option list has four properties.

  • Label: the displayed text of the option to users

  • Value: the unique identifier of the option

  • Disabled: disable the option (the default value is false)

  • Hidden: hide the option (the default value is false)

When more than one option in one list uses the same value, only the first option is valid and thus displayed.

Manual mode

Under Basic > Manual, click + Add to create a new option. Select an option to manually configure it. You can click ··· to Duplicate or Delete an option and drag ⋮⋮ to arrange its position.

Check the value of the selected option under Components in the data browser. For example, when New York is selected, you can find the string value "1" for locationSelect.

Manual mode is recommended for these scenarios:

  • Manually manageable and enumerable.

  • Used by only one component.

  • Data doesn't come from data sources.

Mapped mode

When you have option list data that comes from data sources, transformers or temporary state, you can use Mapped Mode. Under Basic > Mapped, input your data source array in Data box using JavaScript (JS) code. A list of options will be automatically mapped from this array. For example, access university information via {{university.data}}. Each item in the result array contains country, web_pages, alpha_two_code, and name.

You can reference the value of any filed of an option through item and its index i, starting from 0. In the following example, the Label of each option is the name of the university, the Value is the web_page, and those containing an opening parenthesis ( in their names are disabled. The default value is set to the web_pages of the first item using {{university.data[0].web_pages}}. Note that the default value of an option list should be an element from the Value array but not the Label array.

Check the value of the selected option under Components in the data browser. For example, when "Ahi Evran University" is selected, its string value [\"http://www.ahievran.edu.tr/\"] is displayed.