4

I've got the fieldset component in my custom UI-form:

<fieldset name="default">
    <settings>
        <label>Default</label>
        <collapsible>true</collapsible>
        <level>1</level>
        <imports>
            <link name="visible">${ $.parentName}.general.specific_limits:checked</link>
        </imports>
    </settings>
//....

but I can't understand how to convert the link condition (visible) in the imports part. I need a condition like "checkbox is not checked", but if I add something like ${ $.parentName}.general.specific_limits:checked == false script does not work at all: any checkbox state converting to true. How to convert this kind of data using standard js operators?

1

I had the same question and thanks to the help of some great M2 devs found a solution.

So if you change the import link from "visible" to a function name in the component, then you can change the visibility in the custom function based on the value it is importing

I will show an example

// vendor/stackoverflow/natedemo/view/adminhtml/web/js/form/components/fieldset/testing.js
define([
    'underscore',
    'Magento_Ui/js/form/components/fieldset'
], function(_, Fieldset){
    /**
     * Only show the fieldset when the checked value is false
     */
    return Fieldset.extend({
        /**
         * Toggle whether or not the fieldset should show
         * @param elem
         */
        isNotChecked: function (isChecked) {
            if (!isChecked) {
                this.visible(true);
            } else {
                this.visible(false);
            }
        }
    });
});

Need to define your fieldset to use the custom component

// vendor/stackoverflow/natedemo/view/adminhtml/ui_component/custom_ui.xml
<?xml version="1.0" encoding="UTF-8"?>
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
...
<fieldset name="default" component="Stackoverflow_Natedemo/js/form/components/fieldset/testing">
    <settings>
        <label>Default</label>
        <collapsible>true</collapsible>
        <level>1</level>
        <imports>
            <!-- using the isNotChecked function here is where the magic happens -->
            <link name="isNotChecked">${ $.parentName}.general.specific_limits:checked</link>
        </imports>
    </settings>
    ...
</fieldset>
...
</form>

This might be a bit of a longwinded answer for the question, but hopefully it will also work as a small documentation for importing using a component's function.

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.