Custom Properties in form-js

We're happy to announce the latest release of form-js, our form builder and renderer. This release introduces custom properties for form fields.

With this form-js release, you can specify custom properties for form fields. You define these properties through the properties panel, and the form editor will export them with the form definition file.

Using Custom Properties

You can use custom properties to extend forms in several ways; the classic example is to enrich the form schema before rendering the form.

The following shows how to pre-populate the options of a select field dynamically based on a custom property called externalData:

const { components } = schema;

for (let i = 0; i < components.length; i++) {

  const field = components[i];
  const {
    properties,
    id,
    type
  } = field;

  if (type === "select" && properties && properties.externalData) {

    // use custom property "externalData" to get external API endpoint
    const endpoint = properties.externalData;
    const res = await preloadData(endpoint, "GET");

    // map API response to field values
    field.values = res.map(option => ({
      value: option.id,
      label: option.name
    }))

  }

}

// render form with enriched schema
form.importSchema(schema);

Let's say we want to populate the options of a "Customer" select field with active customers. Using the snippet above, this can be achieved by having an externalData property, which value is the API endpoint to be used to retrieve this data.

 const schema = {
     ...
    components: [
      {
        label: "Customer",
        type: "select",
        id: "Field_1",
        key: "costumer",
        values: [],
        properties: {
          externalData: "https://mycompany/active-customers"
        }
      }
    ]
    ...
};

Checkout the full example here.

Try out the new feature on our demo or using the form-js playground.

Wrapping Up

Read through the full changelog to learn about all issues that we addressed with form-js@0.7.0.

Did we miss anything? Did you spot a bug, or would you like to suggest an improvement? Reach out to us via our forums, toot us on Mastodon or file an issue you found in the form-js issue tracker.

Get the latest Forms modeling toolkit pre-packaged or as source code via npm or unpkg.

Are you passionate about JavaScript, modeling, and the web?
Join Camunda and build modeling tools people .