Reusable Custom Actions

You can create custom actions, which can then be reused. Let's assume that we want to create a app.GetYear action that retrieves the year from a DateField value:

compiler.registerComponent("app.GetYear", {
  component: "Set",
  schema: {
    component: "Form",
    fields: [
      {
        name: "date",
        component: "DateField",
        required: true
      }
    ]
  },

  // Omitting the "name" here allows the value
  // to be passed to the next action via
  // "{{arguments}}"
  //
  // name: "",

  value: {
    $year: {
      $toDate: "{{date}}"
    }
  }
});

We can then use this custom action in a chain of actions:

const form = compiler.newComponent({
  component: "Form",
  fields: [
    {
      name: "date",
      component: "DateField",
      label: "Date"
    },
    {
      name: "year",
      component: "IntegerField",
      label: "Year"
    }
  ],
  listeners: [
    {
      event: "fields.date.value",
      actions: [
        {
          component: "app.GetYear",
          date: "{{fields.date.value}}"
        },
        {
          component: "Set",
          name: "fields.year.value",

          // {{arguments}} is the output of app.GetYear
          value: "{{arguments}}"
        }
      ]
    }
  ]
});