Conditional form fields in admin

We should allow certain fields in the page editor to appear/disappear depending on prior selections made.

For instance, let’s say you are selecting the author of a blog post. You also have a team members model. You can ask:

Is the author a member of this website? (y/n)

If yes, the following field will be a page chooser panel for team member pages. If no, the following fields will allow you to directly input information about the author of the post.

(has this been requested before? Sorry if so, I couldn’t find it)

I think the challenge would be in making an API that doesn’t clutter up your real model fields with conditional form code. Perhaps we could have a ConditionalFieldPanel which takes in FieldPanels as arguments. But this should also work with StreamField so maybe we can’t do that. Perhaps have a separate mechanism for this entirely.

[joegarlick]

Cool, our use case isn’t for building forms on the front-end but for conditional logic for fields in the CMS admin for building more modular templates.

[develmaycare]

Plus one and a comment: I’ve done this (extensively) in Django by using Wagtail-inspired field “control” classes that specify options for toggle (boolean fields) and on select (choice fields). The control instance exports the necessary data-ui-toggle or data-ui-onselect as JSON, and tells the view to load some JavaScript that will parse and act upon this data.

Seems to me that FieldPanel could do exactly the same thing. Here are a couple of examples from my UI system:

# make EIN visible and required when a company is identified as an employer
controls = {
    'is_employer': ui.controls.BooleanControl(
        align="center",
        css_icon=True,
        toggle=ui.forms.Toggle("employer_identification_number", required=True, visible=True)
    ),
}

# make restock_fee, etc. visible when the return_policy is refund, refund-replace, or replace
controls = {
    'return_policy': ui.controls.CharControl(
        on_select=[
            ui.forms.OnSelect(
                [
                    "refund",
                    "refund-replace",
                    "replace",
                ],
                [
                    "restock_fee",
                    "return_policy_days",
                    "return_policy_statement",
                ],
                visible=True
            )
        ]
    ),
}

BooleanControl and CharControl (inspired by FieldPanel) know how to add data attributes to the the form field while Toggle and OnSelect tell the view what JavaScript files are needed to create the corresponding UI from the data. The model’s clean() method is used to enforce client side logic.

wagtailuiplus provided similar functionality using class names and a hook to load the JavaScript. But as of mid 2021, the author has said “there are no plans to update Wagtail UI Plus to the latest version of Wagtail”.