I want to figure out a way to take a <fieldset> collection (ex. customer's addresses), from a form ui component, and disable it due to a certain value of a field like a select drop down. The purpose of this is that I want to add a filter system, and depending on what kind of filter it will need, I will or will not need multiple filters for a query.

Ex. Product filter will just need a SKU, but a Search filter can have brand, categories, and other factors to complete a query.

Drop down element

<field name="type">
    <argument name="data" xsi:type="array">
        <item name="options" xsi:type="object">Vendor\Module\Model\Source\Frontdeal\TypeOptions</item>
        <item name="config" xsi:type="array">
            <item name="label" xsi:type="string">Type</item>
            <item name="visible" xsi:type="boolean">true</item>

            <item name="component" xsi:type="string">Vendor_Module/js/form/frontdeal/type-switcher</item>
            <item name="elementTmpl" xsi:type="string">Vendor_Module/form/frontdeal/type-select</item>

            <item name="dataType" xsi:type="string">number</item>
            <item name="formElement" xsi:type="string">select</item>
            <item name="source" xsi:type="string">basic</item>
            <item name="validation" xsi:type="array">
                <item name="required-entry" xsi:type="boolean">true</item>

Fieldset element

<fieldset name="filters">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="is_collection" xsi:type="boolean">true</item>
            <item name="label" xsi:type="string" translate="true">Filters</item>
            <item name="removeMessage" xsi:type="string" translate="true">Are you sure you want to delete this filter?</item>


I would had tried Javascript to disable it, using simple jQuery hide() and show() with selected elements, but there was no feasible way to remove the tab button on the left sidebar of the form page plus I think it would be a messy way of doing it.

I have to imagine there has to be a way to do this with UI Components, or something I must of missed with Javascript.

Fabricated Example of Situation 1 Fabricated Example of Situation 2

Your Answer

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

Browse other questions tagged or ask your own question.