Showing parts of ajax-enabled forms in Dialog and using submit buttons in Dialog to change the form?

Question

I'd like to achieve the following (d10):

In a form a list of custom drupal plugins will be displayed. Each of those plugins has a settings form array depending on its type that will be merged into the form as part of the list of plugins.

Users can add plugins by clicking an ajax-enabled add-button that shows a dialog popup with buttons for each plugin. This is similar to what paragraphs does when setting it to show an add button for each paragraph type - but in a popup/dialog.

When clicking an add button I'd like the corresponding plugin to be added to the list in the form via ajax including its settings form - without a page reload.

The problem I'm facing is this: Drupal uses jqueryui's dialog which renders its content outside of the form tag which prevents any submit buttons in the dialog from working since there is no form wrapper and no form_id, build_id,... hidden fields.

I checked what drupal core does in the block configuration and views forms. It seems like the core devs tried to find ways to achieve something similar but used page reloads (like when adding blocks) or made all changes semi-persistent (view configuration) which requires to store all changes in some kind of draft state.

Both ways to handle this seem like workarounds and create their own set of issues ux-wise and technically.

Am I missing some clever and simple way to implement something like this?

Answer 1

After some more digging I found that the paragraphs module allows the option to show the add paragraph type buttons in a popup / dialog and then adds the form for the newly added paragraph, which is exactly what I wanted to do.

What they are doing is this:

• Create a container for all contents of the popup inside the form and add the js-hide class to hide it.
• Add a js behavior that listens on the click event of the add button that creates a deep clone of the popup container dom elements from inside the form and uses the copy as content for the popup.
• Also the behavior listens to the click event of each add button and simply closes the popup.
• Add regular #ajax settings to the add buttons including a callback. The cloned buttons in the popup trigger the exact same event handlers as the ones in the form, allowing to use all the regular ajax form techniques.

See paragraphs/js/paragraphs.modal.js and paragraphs/src/Plugin/Field/Widget/FieldWidget/InlineParagraphsWidget.php for how they do it.

Maybe this helps someone at some point save time :)