Zend certified PHP/Magento developer

Inject UI component(s) via ajax into adminhtml form

I’ve build a regular adminhtml form via UI component(s) including multiple fieldsets, input and select fields. All working like they should.

Now I’ve created a so called ‘Event’ select field within fieldset #1, who is responsible for hiding and displaying containers within fieldset #2. These containers correspond with the options within the select. This way they can be selected based on the option(s) value. Using this construction enables me to bundle specific fields who belong to the selected ‘Event’ select option.

This mechanism is required but create two problems;

  1. Hidden ‘required’ fields are still required when you remove it’s parent container from the fieldset/form
  2. When the Events, containers and fields, including there own Source Models, start to grow… this form will become unnecessary heavy to load

Now I’m planning to load the Event container when selected. This way the UI component only loads the Source Model when required. If you switch, the previous container will be destroyed and a new one injected into the form.

This creates two questions;

  1. How to generate a UI component on the fly from within a Controller Action
  2. How to inject these component after a ajax-load

Just to be clear… everything is in place to make this possible. The only thing I need is an example who can answer those two questions.

define([
  'jquery',
  'uiComponent'
], function ($, Component) {
  'use strict';
  return Component.extend({
    defaults: {
      imports: {
        toggleEventContainer: '{event option}:value'
      }
    },

    /*
     * @param event
     * @return {exports}
     */
    toggleEventContainer: function (event)
    {
      // Ajax load here...
      return this;
    }
  });
});

Thanks in advance!