1

I am looking for a way to hide several dynamic rows columns (the same way setVisibilityColumn() method in dynamic-rows.js does) on checkbox value being changed. Checkbox is located on adminside custom options table, in option row like here: Custom Options The columns I want to hide are both in option and value rows ("TO HIDE #") Currently I have made a component for checkbox and listen to onChecked event but I don't know how exactly should I access the dynamic rows to hide those columns.

0

Create a ui component for each depended field and:

  • link component's visible property with the checkbox's checked property
  • update component's visibility on initialization

UI Component for the TO HIDE #1 and TO HIDE #2 fields will be:

define([
  'Magento_Ui/js/form/element/abstract',
], function (Abstract) {

  return Abstract.extend({
    defaults: {
      imports: {
        visible: '${ $.parentName }.checkbox:checked',
      }
    },

    initialize: function () {
      this._super();
      this.visible(this.visible());
    }
  });
});

UI Component for the TO HIDE #3 and TO HIDE #4 fields will be:

define([
  'Magento_Ui/js/form/element/abstract'
], function (Element) {
  'use strict';

  return Element.extend({

    defaults: {
      imports: {
        visible: '${ $.parentName.replace(/\\.values\\.[\\d]+/, \'\') }.container_common.checkbox:checked',
      }
    },

    initialize: function () {
      this._super();
      this.visible(this.visible());
    }

  });
});

Related links:

  1. UI Components’ properties used for linking
  2. Template Literals in UI Components
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.