How can I control dataScope?
If you want to control whole name of POST key (like prefix[name]
) on Field level then you'll interested in discard autocomposing it.
First of all how it composed? When a Field placed in chain Form1 > Fieldset1 > Fieldset2 > Field
, then Field gets POST key Form1[Fieldset1][Fieldset2][Field]
.
If you want to omit Fieldset1 from chain then you configure its dataScope
as empty sting. Examples:
Fieldset1.dataScope = ""
-> POST key is Form1[Fieldset2][Field]
.
Fieldset1.dataScope = ""
Fieldset2.dataScope = ""
-> POST key is Form1[Field]
.
Form1.dataScope = "data"
Fieldset1.dataScope = ""
Fieldset2.dataScope = ""
-> POST key is Field
.
Form1.dataScope = "data.prefix"
Fieldset1.dataScope = ""
Fieldset2.dataScope = ""
-> POST key is prefix[Field]
.
Form1.dataScope = "data"
Fieldset1.dataScope = ""
Fieldset2.dataScope = ""
Field.dataScope = "prefix.field2"
-> POST key is prefix[field2]
.
What does dataScope affect?
You should remember that dataScope
is not a POST key. It's a keychain from DataProvider object. In xml configuration there is <dataSource/>
tag. This tag configures who is provider data for form. Client side app produces DataProvider object and link every Field's value with some DataProvider's key. So string dataScope
just point to some DataProvider's key.
If you want to control Form's POST object it means that you want to control DataProvider's data structure also.
I made it work as the way I wanted. Just added text field with WYSIWYG enabled.
<field name="description">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">wysiwyg</item>
<item name="source" xsi:type="string">job</item>
<item name="label" xsi:type="string">Job Description</item>
<item name="template" xsi:type="string">ui/form/field</item>
<item name="wysiwyg" xsi:type="boolean">true</item>
<item name="dataScope" xsi:type="string">description</item>
<item name="sortOrder" xsi:type="number">130</item>
<item name="rows" xsi:type="number">8</item>
<item name="validation" xsi:type="array">
<item name="required-entry" xsi:type="boolean">true</item>
</item>
</item>
</argument>
</field>
Best Answer
First you will have to Create ’custom_form.xml’ in folder ‘Vendor/Module/view/adminhtml/ui_component’.
Within the form define your main field as mentioned below
I have defined a select type drop down field with two options labelled “Dependent Field 1” and “Dependent Field 1”. Now to show and hide the fields according to the selected option type all you need to add is the just after the settings tag. We need to add rules to the switcher config which defines which component will be displayed on selection from the main field.
– define the registry key where the dependent field component is saved in the registry. Here custom_form is the name of the form and custom_form_details is the field set name. – a callable method available in the component. If you use a custom component, you can call that method.
After adding the switcher you need to define your dependent fields
6 text Dependent Field 2 input dependent2 dependent2 trueonce defined the output will look like this!
Hope this will help you guys!!
Happy Coding!!