Variable traitsConst

Type Declaration

• BufferedChanges: RichTraitRef

  Makes an element have the option for buffering changes locally.

  Elements with this trait will:

  • Automatically receive options for setting the write mode (direct or buffered),
  • apply all Data Variable changes locally and
  • allow them to be manually committed or discarded.

  Since

  1.0.0

  Example

  Example Usage

  const ns = createNamespace({ name: 'com.my-company' });
  const element = createElement(ns, {
    name: 'My Page With Buffer',
    description: 'Page that allows controlling Retro Encabulators',
    traits: [traits.Page, traits.BufferedChanges],
    propsSchema: createPropsSchema().initial({}),
    Component() {
      return <div>My Page Content</div>;
    },
  });
  Copy

  See

  BufferedChangesTrait

• Control: RichTraitRef

  Makes an element appear and behave as a HELIO Control.

  Elements with this trait will:

  • be made available as controls that can be added to Dashboard and Parameter Pages,
  • automatically receive editable props like Title and Icon,
  • render with the correct widget wrapper and
  • be selectable in the HELIO IDE.

  Since

  1.0.0

  Example

  Example Usage

  const ns = createNamespace({ name: 'com.my-company' });
  const element = createElement(ns, {
    name: 'My Custom Control',
    description: 'Control that allows controlling Retro Encabulators',
    traits: [traits.Control],
    propsSchema: createPropsSchema().initial({}),
    Component() {
      return <div>My Control Content</div>;
    },
  });
  Copy

  See

  ControlTrait

• Page: RichTraitRef

  Makes an element appear and behave as a HELIO Page.

  Elements with this trait will:

  • be made available as elements that can be added to an HMI, Page Groups and Tab Groups,
  • automatically receive editable props like Title and Icon,
  • render with the correct page wrapper,
  • be made available in menus and
  • be selectable in the HELIO IDE.

  Since

  1.0.0

  Example

  Example Usage

  const ns = createNamespace({ name: 'com.my-company' });
  const element = createElement(ns, {
    name: 'My Custom Page',
    description: 'Page that allows controlling Retro Encabulators',
    traits: [traits.Page],
    propsSchema: createPropsSchema().initial({}),
    Component() {
      return <div>My Page Content</div>;
    },
  });
  Copy

  See

  PageTrait

• Widget: RichTraitRef

  Makes an element appear and behave as a HELIO Widget.

  Elements with this trait will:

  • be made available as elements that can be added to Dashboard Pages,
  • automatically receive editable props like Title and Icon,
  • render with the correct widget wrapper and
  • be selectable in the HELIO IDE.

  Since

  1.0.0

  Example

  Example Usage

  const ns = createNamespace({ name: 'com.my-company' });
  const element = createElement(ns, {
    name: 'My Custom Widget',
    description: 'Widget that allows controlling Retro Encabulators',
    traits: [traits.Widget],
    propsSchema: createPropsSchema().initial({}),
    Component() {
      return <div>My Widget Content</div>;
    },
  });
  Copy

  See

  WidgetTrait