Craft 4 - Upgrading Plugin to support Condition Fields

Question

I've got a plugin that uses field layouts.

I was asked about Craft 4 Conditional Field support so I went away to investigate. From what I gathered so far, the toggling of conditional fields happens when a revision/draft is saved. I can see POST requests sent off to a controller action but I'm not sure how the Entry page itself is then updated without a page refresh. HTMX maybe? Also how does Craft reinitialize all the CP JavaScript to add event listeners for newly added field types?

The plugin in question uses its own "Event" class type, so it doesn't use Craft's Elements, so revisions/drafts are not supported and since revisions/draft is limited to Elements Entry, I currently can't add my "Event" class unless I do a major refactor.

So my first two questions are:

1. How is the entry fields updated without a page refresh?
2. How does Craft reinitialize all the CP JavaScript to add event listeners for newly added field types?

I attempted to toggle fields by using AJAX and calling a controller action to get the field layout, create the form and render the fields HTML. Then return this HTML back to the edit page and inject the HTML into the page using some more Javascript. Finally attach the event listeners again. However this approach doesn't work well for the more complex field types such as Tables, ColorInputs, Matrix etc as non of the event listeners attached seem to work. The DOM is not aware of the updated fields on the page and/or Craft has already done something fancy.

3rd question:

So how can I add Craft 4's conditional field support to a plugin? I can't find any useful documentation on Conditional fields that can help with updating plugins.

Thanks Sean

Answer 1

This is a very high-level question, and this is more of an advice than a real answer, but:

I think you're probably going to have a rough time recreating Craft 4's native editing experience w/ conditional fields, for something that isn't even an element and in a completely custom edit page. The conditional fields specifically, rely on the autosaving drafts feature; this is why conditionals in global sets won't re-render until the global set is manually saved, as drafts aren't currently supported for global sets.

Without knowing anything about your plugin's current "Events" implementation, my gut feeling is that the best/simplest (and most future proof) approach will probably be to migrate them to a custom element type that uses Craft 4's unified element editor, which provides support for auto-saving drafts and conditional fields, preview, slideouts etc. basically "for free".

Unfortunately the docs on implementing custom element types appear out of date for Craft 4 yet (as of June 2022). There's some good info on the unified element editor in the original PR though, as well as in the upgrade guide (already linked above).