Skip to main content

@collection

The @collection decorator can be used in a ConditionBlock to mark a property that is a reference to a Collection.Item of a Collection.Provider that is defined in a related NodeBlock. For example, let's say you have a dropdown block that has a collection of dropdown options and a condition block that verifies if a certain option from that dropdown is selected. The option you want to verify in the ConditionBlock originates from the dropdown Collection.Provider in the NodeBlock. This decorator helps to specify this connection.

info

When this decorator is applied to a property, the property automatically becomes part of the form definition. This means you don't need to apply the @definition decorator that is normally used to indicate that a property is part of the form definition.

Decorator type​

Property ℹ️

Applies to​

Decorator signature​

@collection(reference: string, mode?: "rw" | "r" | "w")

Decorator parameters​

NameTypeOptionalDescription
referencestringNoSpecifies the property name of the Collection.Provider in the NodeBlock prefixed with a #
mode"rw" | "r" | "w"YesSpecifies the operation mode for the property in the form definition. It can be one of the following values:
- rw: Reads and writes the property from/to the definition (this is the default mode);
- r: Only reads the property from the definition;
- w: Only writes the property to the definition.

Example​

import { tripetto, affects, collection, ConditionBlock } from "@tripetto/builder";

@tripetto({
  type: "condition",
  identifier: "dropdown-condition",
  context: DropdownBlock,
  label: "Dropdown condition",
  icon: "data:image/svg+xml;base64,PHN2ZyAvPg=="
})
class DropdownConditionBlock extends ConditionBlock {
  // In this example there is a `NodeBlock` with the name `DropdownBlock`. It has
  // a property `options` which is a collection of `DropdownOption` instances.
  @collection("#options")
  @affects("#name")
  option: DropdownOption | undefined;

  get name() {
    return this.option ? this.option.name : "Nothing selected";
  }
}