Select Field (Form)

The select field (type: "select") displays a drop-down list in the modal form() dialog that lets you select one of the available options.

Since version 3.17, the modal form supports a hierarchy of options. The syntax is compatible with the Scheduler component resources property.

Select Field Properties

• type ("select") - specifies the form field type
• name (string) - the field name that will be displayed above the text box
• id (string) - the path that specifies the source/target property of the data object
• options (array) - list of options
• disabled (boolean) - makes the dropdown list field disabled (inaccessible and read-only); optional
• disableParents (boolean) - set to true to prevent option parents to be selected
• cssClass (string) - additional CSS class that will be applied to the form field; optional
• onValidate (function) - a callback function used to validate the field value; optional

The options array items have the following structure:

• name (string) - item name that will be displayed in the dropdown list
• id (string | number) - value associated with the item
• children (array) - a list of child options that will be displayed indented under the parent item; optional

Example

import {Modal} from "@daypilot/modal";

// ...

async function select() {
  const resources = [
    { name: "Resource A", id: "A" },
    { name: "Resource B", id: "B" },
    { name: "Resource C", id: "C" },
  ];

  const form = [
    {
      name: "Resource",
      id: "resource",
      options: resources,
      type: "select",
    },
  ];

  const data = {
    resource: "B",
  };

  const modal = await Modal.form(form, data);
  console.log(modal.result);
}

Example that uses a hierarchy of options:

import {Modal} from "@daypilot/modal";

// ...

async function selectHierarchy() {
  const form = [
    {
      name: "Resource", 
      id: "resource", 
      type: "select", 
      disableParents: true, 
      options: [
        {
          name: "Resource Alpha", id: "resource-alpha", children: [
            {name: "Child 1", id: "child1"},
            {name: "Child 2", id: "child2"},
          ]
        },
        {
          name: "Resource Beta", id: "resource-beta", children: [
            {name: "Child 3", id: "child3"},
            {name: "Child 4", id: "child4"},
          ]
        },
      ]
    },
  ];

  const data = {
    tree: "child2"
  };

  const modal = await Modal.form(form, data);
  console.log(modal);
};