edit-select

Overview

To get started, see the introductory guide on editable object-table cells.

This editable cell type allows users to pick a value from a predetermined set of options. It is different to edit-typeahead in that it uses the underlying operating system select native UX to provide options.

Basic Example

main.view.xml

<object-table ...>
    <column display="{field}">
        <edit-select options="$:getColorOptions()" value="$object.favorite_color" on-change="$:updateFavoriteColor($object, newValue, oldValue)" />
    </column>
</object-table>

main.js

function getColorOptions() {
    return ["Red", "Purple", "Blue", "Green", "Yellow"];
}

function updateFavoriteColor(obj, newValue, oldValue) {
    obj.favorite_color = newValue;
    obj.save();
}

Standard Attributes

on-change

See edit-text > on-change

options

Required

Default: unset

Specifies an array of options to list when the user activates the edit-select cell.

There are three possible ways to provide options to edit-select:

1. Simple array (set)

This function is useful if the options represent the underlying data (display value == key value)

function getOptions(){
    return [ "apple", "pear", "orange" ]
}

2. Simple object (map)

This function is useful when the key and display values differ (display value != key value)

JS

function getOptions(){
    return {
        a: 'Apple',
        p: 'Pear',
        o: 'Orange'
    }
}

3. Advanced array (collection)

An advanced array enables one to build up a collection of objects dynamically. Having data in this format makes it easy to use 3rd party libraries such as Lodash or native map, filter or reduce functions.

JS

function getOptions(){
    return [
        { key: "a", value: "Apple" },
        { key: "p", value: "Pear" },
        { key: "o", value: "Orange" },
    ]
}

4. Row $object

Since JourneyApps Runtime version 4.90.4 you can pass the table row ($object) to the options attribute. This is useful if you want to generate dynamic options based on the specific object.

<column heading="Fruit">
  <edit-select options="$:getOptions($object)" value="$:getValue($object)" />
</column>

JS

function getOptions(obj) {
  // Do something with obj
  if(obj.status == 'new') {
    // Check if obj is still warranty
    if(inWarranty(obj)) {
      return ['Contact Support', 'Return']
    }
    return ['Log first service']
  }

  return ['Diagnose', 'Service', 'Scrap']
}

value

See edit-text > value

Advanced Attributes

disabled

See edit-text > disabled