Limit entity reference options base on taxonomy tag

Question

I have three content types. Building, Department and Person. I connect this contents whit entity reference base on Content types. The problem is that I have a lot of persons and a lot of departments and also multiple buildings. How can I limit selection in edit mode, that I can add persons in department only from particular building wher the department is placed? My first try was to add taxonomy term (building A) to person and department placed in building A and then try to filter this in view but without a success because for building B I will need to create new Content type and add different view for same content structure. I could create Content Type "Person building A" and then filter by content type but this does not seems like a good solution.

Answer 1

I did something like this recently myself.

Your Person content type should have two entity reference fields, one to a Building, and a second to a Department. A Department also has an entity reference to Building.

Use a hook_form_alter to target the Person form. In that function get a list of the Departments and their Building references, and attach it to the form along with a reference to a custom Javascript library. (Note that you'll have to use the proper machine name for your content types and fields.)

$departments = \Drupal::entityTypeManager()->getStorage('node')->loadByProperties(['type' => 'department']);

$department_data = array_map(function($department){
    return $department->field_ref_building->target_id;
}, $departments);

$form['#attached']['drupalSettings']['dept_bldg_info'] = $department_data;

$form['#attached']['library'][] = 'my_module/my_module.library_name';

The library file will look something like this:

Drupal.behaviors.chartInfoHierarchicalSelect = {
  attach: function (context, settings) {
    // Apply to the HTML page context & the person forms.
    if (context.location || context.id == 'node-person-edit-form'|| context.id == 'node-person-form') {
      let building_inputs = jQuery('[name$="[field_ref_building]"]'),
        department_inputs = jQuery('[name="[field_ref_department]"]');

      building_inputs.each(function () {
        // Ensure initial load has proper limits.
        updateDepartments(jQuery(this));
        // Update on change.
        jQuery(this).change(function () {
            updateDepartments(jQuery(this))
        });
      });

      function updateDepartments(building_input) {
        var selected_building = building_input.val();

        department_inputs.each(function () {
          var opt_val = jQuery(this).val();
          if (opt_val != '_none' && drupalSettings.dept_bldg_info[opt_val] == selected_building) {
            jQuery(this).prop('disabled', false);
          }
          else {
            jQuery(this).prop('disabled', true);
            jQuery(this).prop('selected', false);
          }
        });
      }
    }
  }
};

Then when you select a building, you should see the appropriate departments get enabled/disabled.