Skip to content
This repository was archived by the owner on Nov 19, 2024. It is now read-only.

Updating Fieldset UiComponent documentation #6045

Merged
merged 5 commits into from
Nov 21, 2019
Merged

Updating Fieldset UiComponent documentation #6045

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
efa3811
Adding the Fieldset UiComponent additional information
eduard13 Nov 20, 2019
0afa1fb
Updating the example
eduard13 Nov 20, 2019
196b2b9
Minor adjustments
eduard13 Nov 21, 2019
2bdcf6e
Update ui-fieldset.md
keharper Nov 21, 2019
8e91f05
Merge branch 'master' into ui-fieldset-comp
keharper Nov 21, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added common/images/ui_comps/fieldset-component-result.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
40 changes: 40 additions & 0 deletions guides/v2.2/ui_comp_guide/components/ui-fieldset.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,48 @@ The Fieldset component implements a container for visually-grouped form elements
| Title | Type | Default | Description |
| ------------- | ------- | ------- | --------------------------------------------------------------------------------- |
| `collapsible` | Boolean | `false` | Enables/disables the collapsible functionality. |
| `label` | String | | Caption for the fieldset. |
| `opened` | Boolean | `false` | Initial collapsible state. Applied when the collapsible functionality is enabled. |

## Examples

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please, add another subheader that explains the following example. Refer the following PR as an example.

Thank you

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @rogyar, the subheader has been added.
Thank you.

### Integrate the Fieldset component with the Form component

The following example adds a new main fieldset that contains a collapsible fieldset into the [Form]({{ page.baseurl }}/ui_comp_guide/components/ui-form.html) component:

```xml
<form>
<fieldset name="main_fieldset">
<settings>
<label translate="true">Other Settings</label>
</settings>
<fieldset name="fieldset_group">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string" translate="true">Information</item>
<item name="collapsible" xsi:type="boolean">true</item>
<item name="opened" xsi:type="boolean">true</item>
</item>
</argument>
<field name="my_field">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string" translate="true">My Field</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
</item>
</argument>
</field>
</fieldset>
</fieldset>
</form>
```

#### Result

![Checkbox UiComponent]({{ site.baseurl }}/common/images/ui_comps/fieldset-component-result.png)

## Source files

Extends [`uiCollection`]({{ page.baseurl }}/ui_comp_guide/concepts/ui_comp_uicollection_concept.html) and `collapsible`:
Expand Down