Negation in the imports link (UI component)

Question

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?

Answer 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.

Answer 2

Instead of <link name="visible">${$.parentName}.general.specific_limits:checked</link>

just do <link name="visible">!${$.parentName}.general.specific_limits:checked</link>

works as intended