The release of form-js@1.6 didn't take long, but its impact on handling array data is a game changer. This update introduces two powerful components: Tables for elegant tabular data display and dynamic lists for crafting flexible, repeatable, and editable form sections. We designed these components to allow working with complex data arrangements without altering the familiar workflow of the form builder.
In our continuous effort over recent months, we wanted to build a powerful way to deal with arrays of data. Our goal was to enable the handling of arrays of any data structures, giving you complete control over your data outputs. We settled on a flexible solution while maintaining the ease and familiarity of the current form builder interactions.
Dynamic Lists, the Flexible Solution to Array Data
Our new dynamic list component brings flexibility to form-js, enabling users to dynamically add or remove repetitions of a form section while handling all the data mapping for you out of the box.
Add or remove entries of the list with a single click.
Customize the behavior of your dynamic list: Decide whether adding and removing items should be possible, how many default items to render, how many items to show uncollapsed, and more. We give you quite a lot of control in configuring this component.
For example, if you want to use dynamic lists as a read-only array data renderer, simply disable the ability to add/remove entries on the dynamic list, make all the child fields read-only, and voilà.
Use the component however you like. It opens up many avenues for creative use cases.
The best part is that you still get all the features you expect from simple elements in your dynamic list repetitions. You may now use the this variable within FEEL expressions to refer to the local 'scope' of a dynamic list's rendered element. This allows you to do things like templating, conditional hiding and so on.
Conditionally hide or show on a row-by-row basis within a dynamic list.
So, while simple on the surface, the dynamic list is the final piece of the puzzle for most complex form use cases. Now with just a few configurations, you get to manage collections of data of any structure in your forms.
But what if you're dealing with much larger data sets that you want to render, browse through, and use as a reference within your form?
Tables Displaying Structured Data at Scale
The new table component allows you to work with large amounts of data in a clean and structured manner. It supports sorting and pagination, giving you plenty of control.
Efficiently manage tabular data with the new Table Component.
Using dynamic bindings for table headers, you can render your tables entirely from input data definitions. This gives you a lot of programmatic control over the final appearance.
The tables component is there. What else do you need?
Our Focus for 1.7
The library has grown a lot in recent times. We've made a lot of experimental calls and built a lot of new things from scratch. Adding many features quickly, we introduced some performance slowdowns, among other things. It's time to take a step off the gas and clean things up. We've already taken some measures in 1.6 in terms of performance, introducing text field debouncing and removing some redundant FEEL calls.
With the upcoming 1.7 version, we plan to focus on polishing existing features, fixing any issues we're aware of, eliminating architectural pains in the code base, and further improve form rendering performance.
Wrapping Up
In this post we introduced dynamic lists and tables, two powerful components for data handling in form-js. To discover all the enhancements shipped with the form-js 1.6 release, check out the changelog.
We are always looking for feedback, so if you've spotted a bug or have an improvement to suggest reach out to us via our forums, follow us on Mastodon, or file any 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 
.