Blog

News from the bpmn.io project

Conditional Rendering, New Components & Expression Properties in form-js

Published by Roman Kostka on Wednesday, 04 January 2023.

form-js0.10.0

We are excited to announce the latest form-js@0.10 release. This release significantly improves the capabilities of our form builder & renderer.

The release introduces new form components such as an image view, multiline text, and date time, in order to support all basic data types and form needs. It also adds the ability to add a prefix and/or suffix adornment to selected components. Form-js now also supports decimal numbers.

Another highlight is that you are now able to hide components based on conditions. If you use the Camunda form playground, you get a live preview of your form with the ability to validate it.

The whole release is dedicated to helping you to build more flexible forms with awesome usability. Try out the new features on https://demo.bpmn.io/form/s/start.

Image View

The new image view component lets you display images based on a link, data URI or variables.

Display an image from any source using the image view component.

Date and Time

The date and time component allows your users to display and select a date, time, or both. It is fully accessible from the keyboard.

The new date and time picker is designed for maximum convenience, whether accessed with the mouse or keyboard.

Prefix and Suffix Adornments

With the new prefix and suffix adornments you are able to enrich your components with additional information, and provide guidance for your users.

Adornments provide guidance for users in a more convenient way than labels or hints.

Decimal Numbers

The number component now supports decimals. You are able to define the maximum precision and valid increments of your number values.

Decimal number inputs are crucial for many form applications.

Hiding Components Based on FEEL Expressions

You are now able to hide form components based on variables and conditions. This means you can create forms that are truly dynamic and adapt to your specific needs. Plus, we've made sure to use FEEL—the expression language standardized by the OMG—so your form's expressions are easy to read and write, and fully interoperable. We've also invested in the feel-editor, a tool that helps you create and edit FEEL expressions with syntax highlighting, validation, and auto-completion, built on top of CodeMirror. Get ready to create forms that are truly flexible and adaptable!

FEEL & Conditional Rendering makes it easy to hide components based on easy-to-write, yet powerful rules.

FEEL Expressions for Text Views

The text view component now supports FEEL expressions to display additional context via form variables and other form fields. Format your text using markdown or basic HTML.

You can reference the value of other form components to display in the text view component.

Validate and Preview Mode

With the new validate and preview mode you are provided with a live preview of your form. Furthermore you get access to the data input and output section which allows you to immediately validate your form with data.

The form preview is shown next to the form editor, allowing to immediately validate a form and its rules.

Try out the new features on our demo or using the Camunda form playground.

Wrapping Up

Read through the full changelog to learn about all issues that we addressed with form-js@0.10.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 heart.