Skip to content

[6.x] Forms 2: Logic Tree#14811

Merged
duncanmcclean merged 120 commits into
forms-2from
forms-2-logic-tree
Jul 6, 2026
Merged

[6.x] Forms 2: Logic Tree#14811
duncanmcclean merged 120 commits into
forms-2from
forms-2-logic-tree

Conversation

@jaygeorge

@jaygeorge jaygeorge commented Jun 11, 2026

Copy link
Copy Markdown
Contributor

This pull request implements a tree view for the form Logic tab — a visual, column-per-page overview of a form's pages, sections and fields, with drag-and-drop reordering and inline editing of each field's (or page's) logic.

This PR also refactors the Logic page to share the form builder's nested form-fields data model, so both tabs serialise fields through a single path.

Tree view

A new List / Tree toggle sits on the Logic tab (the chosen view is remembered per user).

The tree renders one column per page, with:

  • Sections shown as labelled groups, each with its own field list
  • Field rows with fieldtype icons, plus reference/imported-field indicators
  • Conditional connectors drawn from a field to its destination page (including multi-page "leaps"), using CSS anchor positioning
  • An Expanded / Collapsed density toggle (matching the Edit tab)

Fieldset imports appear as a single grouped node, mirroring how they're treated in the form builder.

Editing logic

Clicking a field or page opens a resizable panel beneath the tree (using the Splitter component) to edit its logic without leaving the view:

  • Field → its show/hide conditions
  • Page → its routing rules

Pressing escape deselects. The final page and imported fields aren't selectable, since they can't hold logic.

Reordering

Fields — and whole fieldset imports — can be dragged to reorder them within a section, between sections, and across pages. The new order is persisted on save.

Shared data model

Previously the Logic page kept its own flattened representation of a form's fields and a bespoke merge on save. This PR reworks it to hold the same nested formFields structure as the form builder and round-trip it through the shared FormFieldTransformer.

The toVue / fromVue conversion now lives in the ManagesFormFields trait, used by both the builder and logic controllers. As a result FormLogicController sheds its bespoke serialisation/merge code, and reordering, imported fields and referenced-field logic (stored under config) all round-trip consistently between the two tabs.

Screenshot

CleanShot 2026-07-06 at 15 40 17

Related: #14909

jaygeorge added 30 commits June 8, 2026 11:27
@duncanmcclean duncanmcclean merged commit 243b695 into forms-2 Jul 6, 2026
22 checks passed
@duncanmcclean duncanmcclean deleted the forms-2-logic-tree branch July 6, 2026 14:41
@duncanmcclean

Copy link
Copy Markdown
Member

Thanks, Jay!

I've refactored some things behind the scenes to make things more consistent w/ the form builder, added the ability to reorder fields and utilised the Splitter component for editing logic.

When you're back, you might want to tweak the design of the splitter/logic box. I just went with what Claude generated but not sure that's necessarily what we want. Up to you! 😄

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.

2 participants