How to use linking properties of UI components to trigger 'disabled' on input based on checkbox 'value'?
From documentation, there are few ways to use export / import / links / listens to trigger disabled value of one input based on the value of another. I've tried few combinations but only thing I achieved is disabling field. How do I link monday_status value to trigger monday_open disabled flag?
XML:
<field name="monday_status">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
...
<item name="dataScope" xsi:type="string">monday_status</item>
<item name="default" xsi:type="number">1</item>
<item name="links" xsi:type="array">
<item name="disabled" xsi:type="string">value</item>
</item>
</item>
</argument>
</field>
<field name="monday_open">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
...
<item name="formElement" xsi:type="string">select</item>
<item name="dataScope" xsi:type="string">monday_open</item>
<item name="links" xsi:type="array">
<item name="disabled" xsi:type="string">disabled</item>
</item>
</item>
</argument>
</field>
I've removed redundant code.
1 Answer 1
If the monday_status is the checkbox, you could link its check status to monday_open enable/disable status with this code:
<field name="monday_status">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="formElement" xsi:type="string">checkbox</item>
<item name="dataScope" xsi:type="string">monday_status</item>
<item name="default" xsi:type="number">1</item>
<!-- here the correct linking property -->
<item name="exports" xsi:type="array">
<item name="checked" xsi:type="string">${$.parentName}.monday_open:disabled</item>
</item>
</item>
</argument>
</field>
<field name="monday_open">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
...
<item name="formElement" xsi:type="string">select</item>
<item name="dataScope" xsi:type="string">monday_open</item>
<!-- remove your linking property from this components -->
</item>
</argument>
</field>