Skip to main content

getEditorItems

Description​

Returns the default configuration of editor fields based on the provided settings

Usage​

getEditorItems(config?: {
  rollups?: boolean,
  resources?: boolean,
  splitTasks?: boolean,
  criticalPath?: { type: "strict" | "flexible" },
  deadlines?: boolean,
  inactiveTasks?: boolean,
  schedule?: { auto?: boolean, resourceCalendars?: boolean },
  summary?: {
    autoProgress?: boolean,
    autoConvert?: boolean
  }
}): IEditorItem[];

Parameters​

  • config (optional) — an object with the next parameters:
    • rollups (optional) — adds Rollup checkbox field to the General tab of the editor | PRO feature
    • resources (optional) — adds Resources tab to the editor that allows assigning and unassigning resources for the task | PRO feature
    • splitTasks (optional) — adds Segments tab to the editor that allows managing task segments | PRO feature
    • criticalPath (optional) — adds the Constraint field to the Scheduling tab of the editor | PRO feature
    • deadlines (optional) — adds the Deadline field to the Scheduling tab of the editor | PRO feature
    • inactiveTasks (optional) — adds the Inactive checkbox to the Scheduling tab of the editor | PRO feature
    • schedule (optional) — if auto is set, adds the Constraint field and the Manual checkbox to the Scheduling tab of the editor; if resourceCalendars is set, adds the Skip resource calendars checkbox to the Scheduling tab | PRO feature
    • summary (optional) — configuration options for summary tasks | PRO feature
      • autoProgress (optional) — if false, disables the Progress field for summary tasks; if true, the progress is calculated automatically
      • autoConvert (optional) — if false, removes the option that allows converting a regular task into a summary task; if true, tasks with child items are automatically converted into summary tasks

Returns​

Returns an array of editor-form field configuration objects. Conditional fields are included only when their config property is provided. If no parameter is defined, only default config is returned.

[
  {
    key: "text",
    comp: "text",
    label: "Name",
    config: { placeholder: "Add task name" }
  },
  {
    key: "details",
    comp: "textarea",
    label: "Description",
    config: { placeholder: "Add description" }
  },
  { key: "type", comp: "select", label: "Type" },
  { key: "start", comp: "date", label: "Start date" },
  { key: "end", comp: "date", label: "End date" },
  {
    key: "duration",
    comp: "counter",
    label: "Duration",
    config: { min: 1 }
  },
  {
    key: "progress",
    comp: "slider",
    label: "Progress",
    config: { min: 1, max: 100 }
  },
  { key: "links", comp: "links", label: "" },

  // appears only if config.schedule.auto is set
  {
    key: "manual",
    comp: "checkbox",
    label: "Manual",
    batch: "scheduling",
    // a task object from the tasks array, hidden for split task segments
    isHidden: (task) => boolean
  },
  // appears only if config.inactiveTasks is true
  {
    key: "inactive",
    comp: "checkbox",
    label: "Inactive",
    batch: "scheduling",
    // a task object from the tasks array, hidden for split task segments
    isHidden: (task) => boolean 
  },
  // appears only if config.schedule.resourceCalendars is set
  {
    key: "skipResourceCalendars",
    comp: "checkbox",
    label: "Skip resource calendars",
    batch: "scheduling",
    // a task object from the tasks array, hidden for summary tasks and split task segments
    isHidden: (task) => boolean
  },
  // appears only if config.deadlines is true
  {
    key: "deadline",
    comp: "date",
    label: "Deadline",
    batch: "scheduling",
    config: { format: "%d-%m-%Y", clear: true }
  },
  // appears only if config.rollups is true
  {
    key: "rollup",
    comp: "checkbox",
    label: "Rollup",
  },
  // appears only if config.resources is true
  {
    key: "resources",
    comp: "resources",
    batch: "resources",
  },
  // appears only if config.splitTasks is true
  {
    key: "segments",
    comp: "segments",
    batch: "segments",
    // a task object from the tasks array
    isHidden: (task) => boolean,
  },
  // appears only if config.schedule.auto or config.criticalPath is set
  {
    key: "constraint",
    comp: "constraint",
    label: "Constraint",
    batch: "scheduling",
    // the date format of its date picker
    config: { format: "%d-%m-%Y" },
    // a task object from the tasks array, hidden for summary tasks and split task segments
    isHidden: (task) => boolean
  },
]

The Deadline and Constraint fields and the Manual, Inactive, and Skip resource calendars checkboxes use batch: "scheduling". This places them inside the Scheduling tab, which getEditorButtons adds to the editor.

Example​

The Editor builds its default fields on its own. Use the getEditorItems helper when you need a custom set of fields: call the helper to get the default fields for your configuration, adjust the array as needed, and pass it to the editor's items property.

In the example, we will create a custom field for assigning a person to a task. To begin with, let's create the Combo control.

UsersCustomCombo.svelte
<script>
  import { Combo } from "@svar-ui/svelte-core";

  // the editor passes the current value, the field options and the change handler
  let { value, options, onchange } = $props();
</script>

<Combo {options} {value} {onchange} clear placeholder="Assign to the person" />

Before the component can be used as a comp value, register it with registerEditorItem under the name you are going to refer to. In the example below, it is registered as "custom-combo" and takes the place of the built-in Type field, while the grid gets a matching Assigned column.

EditorCustomControls.svelte
<script>
  import { Gantt, Editor, registerEditorItem, getEditorItems } from "@svar-ui/svelte-gantt";
  import UsersCustomCombo from "../UsersCustomCombo.svelte";
  import { getData, users } from "../data";

  // make the component available to the editor under the "custom-combo" name
  registerEditorItem("custom-combo", UsersCustomCombo);

  // get the default set of fields
  const defaultEditorItems = getEditorItems();

  // copy it so the default config stays untouched
  const items = defaultEditorItems.map(item => ({ ...item }));

  // replace the "type" field with a field built on the registered component
  items.splice(
    defaultEditorItems.findIndex(d => d.key === "type"),
    1,
    {
      key: "assigned",
      comp: "custom-combo",
      label: "Assigned",
      options: users,
    }
  );

  const data = getData();
  let api = $state();

  // show the assigned person in the grid as well
  const columns = [
    { id: "text", header: "Task name", flexgrow: 1 },
    {
      id: "assigned",
      header: "Assigned",
      width: 160,
      template: v => users.find(u => u.id === v)?.label || "",
    },
    { id: "start", header: "Start Date", width: 100 },
  ];
</script>

<Gantt
  bind:this={api}
  tasks={data.tasks}
  links={data.links}
  scales={data.scales}
  {columns}
/>
<Editor {api} {items} />

Related sample:

Related articles: