diff --git a/src/assets/attachments/blog/2023/006-flexible-component-library.png b/src/assets/attachments/blog/2023/006-flexible-component-library.png new file mode 100644 index 00000000..baabee27 Binary files /dev/null and b/src/assets/attachments/blog/2023/006-flexible-component-library.png differ diff --git a/src/assets/attachments/blog/2023/006-iframe.png b/src/assets/attachments/blog/2023/006-iframe.png new file mode 100644 index 00000000..3c2d8880 Binary files /dev/null and b/src/assets/attachments/blog/2023/006-iframe.png differ diff --git a/src/assets/attachments/blog/2023/006-searchable-select.png b/src/assets/attachments/blog/2023/006-searchable-select.png new file mode 100644 index 00000000..37119efd Binary files /dev/null and b/src/assets/attachments/blog/2023/006-searchable-select.png differ diff --git a/src/blog/2023/006-form-js-1.5.md b/src/blog/2023/006-form-js-1.5.md new file mode 100644 index 00000000..72480fff --- /dev/null +++ b/src/blog/2023/006-form-js-1.5.md @@ -0,0 +1,145 @@ +--- + +title: Empowering complex forms with form-js@1.x +description: "Recapping our recent form-js releases: form layouting, flexible data binding, and FEEL expression properties to simplify complex form development" +preview_image: http://bpmn.io/assets/attachments/blog/2023/006-group-path.png +layout: blogpost.hbs +slug: 2023-form-js-1.5-recent-developments +author: +- Niklas Kiefer +- Valentin Serra +published: 2023-10-10 18:00 + +releases: + - 'form-js@1.0.0' + - 'form-js@1.5.0' + +--- + +

+ Hey folks, it's been a while since our last formal form-js updates blog post, so we'd like to take this opportunity to bring everybody up to speed with all the powerful developments and features we've brought to our form builder. +

+ + + +Our focus these past few quarters have been to enable more complex use-cases for form-js via more flexible customizations, and broader adoption of FEEL expressions, new components and entirely new capabilities like layouting. As always, you may try out the new features [on our demo](https://demo.bpmn.io/form) or using the [Camunda form playground](https://github.com/camunda/form-playground). + +## Form layouting + +Resizable form fields allow you to adjust the horizontal size of your components, as well as bringing multiple components into the same row. + +
+ + +

+ Resize form fields to fit the layout. +

+
+ +With the addition of groups, you can now organize form components both visually and logically. In combination with component resizing, this gives you a lot of control over where your fields end up and allows you to create visually appealing form layouts + +
+ + +

+ Create groups to organize form components logically. +

+
+ +The spacer component enables you to create white space between form components, making it possible to place them more freely. They may also be used as placeholders for conditionally hidden fields to maintain your form structure. + +
+ + +

+ Use spacers to align form components to the right. +

+
+ +And just for good measure, we also added a separator component that makes it possible to visually separate form components. + +
+ + +

+ Use separators to visually distinguish form components. +

+
+ +## Flexible data binding + +We significantly enhanced the data binding capabilities of form-js. You can now use nested keys to bind structured data to form components. + +
+ + +

+ Use nested form keys to bind structured data. +

+
+ +You can also specify a data path on the group component, which will route all of the child components down a certain binding path. + +
+ + +

+ Keep your data nicely organized without configuration overheads. +

+
+ +## Controllable and reusable forms via FEEL expression properties + +Most real world use cases aren't as simple as just data entry. We see the need for more fine-grained control over the form's behaviours and interaction, as well as being able to re-use the same form based on slight differences in input data. + +Our direction with this is leveraging FEEL, the expression language [standardized by the OMG](http://www.omg.org/spec/DMN/) and [feelers](https://github.com/bpmn-io/feelers), our own templating language built on top of it. Read-only settings, labels, descriptions, field options, validations, and most of our new component properties will now be configurable via expressions for a dynamic and powerful form building experience. + +
+ + +

+ FEEL expressions let you control properties dynamically. +

+
+ +## More components, more use cases + +You should have already noticed that we made some changes to our component palette, in exchange for a scalable and searchable alternative. This highlights the direction where we are taking the library. We want to offer a toolkit which is sufficient for the majority of use-cases out of the box. + +There are certain limitations to this however, we understand that we cannot provide everybody with the flexibility they need, and hence in a true bpmn-io fashion we've opened up the library to component extensions, which are outlined in the following [blog post](https://bpmn.io/blog/posts/2023-custom-form-components). + +
+ + +

+ Find the component you want easily. +

+
+ +Aside from the visual polishing, selects have received a new configuration which allows them to be searchable. It works similarly to our taglist, but handles single-selection cases. + +
+ + +

+ Handle large dataset selection without scrolling endlessly. +

+
+ +A fresh new arrival to our component suite with 1.5 is the iframe component, allowing you to embed other webpages inside of your forms, be it portfolios, documents, ect.. We have decided to ship these with restricted access for now, but do plan to allow you to configure security parameters in the future to grant the iframes more permissions. + +
+ + +

+ Be sure to understand the security implications before using iframes. +

+
+ +## Wrapping Up + +This is just the tip of the iceberg, if you want to have a full overview of the changes, feel free to browse through our [full changelog](https://github.com/bpmn-io/form-js/blob/master/packages/form-js/CHANGELOG.md#140). + +Did we miss anything? Did you spot a bug, or would you like to suggest an improvement? Reach out to us via [our forums](https://forum.bpmn.io/), tweet us [@bpmn_io](https://twitter.com/bpmn_io), or file an issue you found in [the form-js issue tracker](https://github.com/bpmn-io/form-js/issues). + +Get the latest Forms modeling toolkit pre-packaged or as source code via [npm](https://www.npmjs.com/package/@bpmn-io/form-js) or [unpkg](https://unpkg.com/@bpmn-io/form-js). \ No newline at end of file diff --git a/src/blog/2023/006-form-js-1.x.md b/src/blog/2023/006-form-js-1.x.md deleted file mode 100644 index c68f8339..00000000 --- a/src/blog/2023/006-form-js-1.x.md +++ /dev/null @@ -1,121 +0,0 @@ ---- - -title: Empowering complex forms with form-js@1.x -description: "Introducing recent form-js@1.x versions: These releases offer improved layouting, dynamic data binding, and FEEL expression properties to simplify complex form development." -preview_image: http://bpmn.io/assets/attachments/blog/2023/006-group-path.png -layout: blogpost.hbs -slug: 2023-form-js-1-complex-form-development -author: -- Niklas Kiefer -published: 2023-10-10 18:00 - -releases: - - 'form-js@1.0.0' - - 'form-js@1.5.0' - ---- - -

- We are excited to inform about the latest [form-js@1.x releases](https://github.com/bpmn-io/form-js). - These releases significantly improve the development of complex forms by enhancing layouting, dynamic data binding, and utilizing FEEL expression properties. -

- - - -We dedicate the theme to helping you build complex and reusable forms with ease. Try out the new features [on our demo](https://demo.bpmn.io/form) or using the [Camunda form playground](https://github.com/camunda/form-playground). - -## New layouting capabilities - -With the addition of group components, you can now organize form components seamlessly. You can add and arrange other form components into the group, like in the parent form. - -
- - -

- Create groups to organize form components logically. -

-
- -Resizable form fields allow you to adjust the size of form components, creating visually appealing form layouts. - -
- - -

- Resize form fields to fit the layout. -

-
- -Additionally, introducing the spacer component enables you to create white space between form components, making it possible to place them more freely. - -
- - -

- Use spacers to align form components to the right. -

-
- -Finally, we also added a separator component that makes it possible to visually separate form components. - -
- - -

- Use separators to visually distinguish form components. -

-
- -## New data binding capabilities - -We significantly enhance the data binding capabilities of form-js. You can now use nested keys to bind structured data to form components. - -
- - -

- Use nested form keys to bind structured data. -

-
- -You can also specify a data path to a group component, which helps to provide more context to the group and its form components. - -
- - -

- Specify a data path to a group to provide more context. -

-
- -Without manual work, dynamic lists enable the effortless generation of repetitive sets of form components, such as data tables or ordered lists. - -
- - -

- Dynamic lists allow to model repetitive lists of form components. -

-
- -## Controllable and reusable forms via expression properties - -By leveraging FEEL - the expression language [standardized by the OMG](http://www.omg.org/spec/DMN/) - and [FEEL templating](https://github.com/bpmn-io/feelers), you can streamline the development process and ensure consistency across a wide range of forms, making complex form creation more efficient and reusable. - -As part of these releases and moving forward, we allow you to define more properties via FEEL expression and templates, including read-only settings, labels, descriptions, multi-select options, and minimum and maximum validation. - -
- - -

- FEEL expressions let you control properties dynamically. -

-
- -## Wrapping Up - -Read through the [full changelog](https://github.com/bpmn-io/form-js/blob/master/packages/form-js/CHANGELOG.md#140) to learn about all issues that we addressed with `form-js@1.x`. - -Did we miss anything? Did you spot a bug, or would you like to suggest an improvement? Reach out to us via [our forums](https://forum.bpmn.io/), tweet us [@bpmn_io](https://twitter.com/bpmn_io), or file an issue you found in [the form-js issue tracker](https://github.com/bpmn-io/form-js/issues). - -Get the latest Forms modeling toolkit pre-packaged or as source code via [npm](https://www.npmjs.com/package/@bpmn-io/form-js) or [unpkg](https://unpkg.com/@bpmn-io/form-js). \ No newline at end of file