Skip to content

Implementing formio-builder FormBuilder - #6455

Draft
robinmolen wants to merge 5 commits into
mainfrom
feature/offb-271-implementing-OF-form-builder
Draft

Implementing formio-builder FormBuilder#6455
robinmolen wants to merge 5 commits into
mainfrom
feature/offb-271-implementing-OF-form-builder

Conversation

@robinmolen

Copy link
Copy Markdown
Contributor

Closes open-formulieren/formio-builder#271

Depends on a new formio-builder release, containing the FormBuilder component

Changes

Implements the new FormBuilder component of the formio-builder project, as replacement for the Formio FormBuilder.

The formio-builder and Formio FormBuilder's will be used alongside each other. Using the new USE_OF_FORM_DESIGNER feature flag the admin can decide to use the formio-builder variant, or to stick to the Formio implementation.
To make this duo-support easy-ish to maintain, the shared logic in form-creation-form.js has been updated.

At some point the Formio implementation, and feature flag, will be completely removed.

Checklist

Check off the items that are completed or not relevant.

  • Impact on features

    • Checked copying a form
    • Checked import/export of a form
    • Config checks in the configuration overview admin page
    • Checked new model fields are usable in the admin
    • Problem detection in the admin email digest is handled
    • Checked Form Definition builder in the admin
  • Dockerfile/scripts

    • Updated the Dockerfile with the necessary scripts from the ./bin folder
  • Commit hygiene

    • Commit messages refer to the relevant Github issue
    • Commit messages explain the "why" of change, not the how
  • Documentation

    • Added documentation which describes the changes

@robinmolen
robinmolen force-pushed the feature/offb-271-implementing-OF-form-builder branch from 491cde2 to 92d79e8 Compare July 15, 2026 08:46
Comment thread src/openforms/conf/base.py Outdated
"USE_OF_FORM_DESIGNER": [
{
"condition": "boolean",
"value": config("USE_OF_FORM_DESIGNER", default=False),

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
"value": config("USE_OF_FORM_DESIGNER", default=False),
"value": config("USE_OF_FORM_DESIGNER", default=True),

let's please enable this by default, the feature flag is only there to be able to revert "just in case"

Comment on lines +69 to +79
const componentsWithSimilarKeys = componentNamespace
.filter(component => component.key.startsWith(componentKey))
.map(component => component.key);
let index = 0;
let uniqueKey = componentKey;

while (componentsWithSimilarKeys.includes(uniqueKey)) {
index++;
uniqueKey = `${componentKey}${index}`;
}
return uniqueKey;

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

form_design/utils.js has a getUniqueKey that does something similar. Lets use that function for this part

@robinmolen
robinmolen force-pushed the feature/offb-271-implementing-OF-form-builder branch from 92d79e8 to e499bba Compare August 5, 2026 12:58
@codecov

codecov Bot commented Aug 5, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.23%. Comparing base (f764df3) to head (3cd19cf).

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #6455   +/-   ##
=======================================
  Coverage   97.23%   97.23%           
=======================================
  Files         861      861           
  Lines       33168    33168           
  Branches     3006     3006           
=======================================
  Hits        32251    32251           
  Misses        606      606           
  Partials      311      311           

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

…ed` implementation

Made the expected data from the FormBuilder explicit in the onComponentMutated method.
This also allows us to supply the onComponentMutated from other sources, without having to mimic the shape of the Formio FormBuilder callbacks.
…ormBuilder component

Using the `USE_OF_FORM_DESIGNER` feature flag, the Open Forms admin will either use the Formio or our own formio-builder FormBuilder implementation.
…der Form Designer.

The label elements in the backend don't have the same padding as the labels in the formio-builder environment. To compensate for this lack of spacing, the location of the floating action buttons needs to be updated.

Additionally, the backend applies padding and margin to ul element, breaking the UI for the components list.
@sergei-maertens
sergei-maertens force-pushed the feature/offb-271-implementing-OF-form-builder branch from e499bba to 3cd19cf Compare August 7, 2026 14:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Form-designer - integrate into backend project

2 participants