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

Commit b4a39f7

Browse files
doboothdobooth
authored
Merge pull request #4503 from speedy008/devdoc-frontend-2
Add brief detail of Ui component related to frontend and Adminhtml area
2 parents 10df1c3 + 566dc91 commit b4a39f7

File tree

3 files changed

+72
-0
lines changed

3 files changed

+72
-0
lines changed

‎guides/v2.1/ui_comp_guide/bk-ui_comps.md

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,30 @@ A particular instance of a UI component is defined primarily by the following:
103103
3. [Backend/PHP modifiers]({{ page.baseurl }}/ui_comp_guide/concepts/ui_comp_modifier_concept.html).
104104
4. Configuration inside the JavaScript classes.
105105

106+
## UI component used in the frontend design area
107+
108+
* Configured through layout XML.
109+
110+
* The `jsLayout` argument is used to specify information.
111+
112+
```xml
113+
<block name="block-name" template="Magento_Module::path_to_template.phtml">
114+
<arguments>
115+
<argument name="jsLayout" xsi:type="array">
116+
<item name="components" xsi:type="array">
117+
...
118+
</item>
119+
</argument>
120+
</arguments>
121+
</block>
122+
```
123+
124+
## UI component used in the Adminhtml area
125+
126+
* Configured through dedicated XML file (view/.../ui_component/[ui_component_name.xml])
127+
128+
* Included in layout XML with uiComponent tag
129+
106130
## Things to remember when working with UI components
107131

108132
**UI components have different settings**

‎guides/v2.2/ui_comp_guide/bk-ui_comps.md

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,30 @@ A particular instance of a UI component is defined primarily by the following:
103103
3. [Backend/PHP modifiers]({{ page.baseurl }}/ui_comp_guide/concepts/ui_comp_modifier_concept.html).
104104
4. Configuration inside the JavaScript classes.
105105

106+
## UI component used in the frontend design area
107+
108+
* Configured through layout XML.
109+
110+
* The `jsLayout` argument is used to specify information.
111+
112+
```xml
113+
<block name="block-name" template="Magento_Module::path_to_template.phtml">
114+
<arguments>
115+
<argument name="jsLayout" xsi:type="array">
116+
<item name="components" xsi:type="array">
117+
...
118+
</item>
119+
</argument>
120+
</arguments>
121+
</block>
122+
```
123+
124+
## UI component used in the Adminhtml area
125+
126+
* Configured through dedicated XML file (view/.../ui_component/[ui_component_name.xml])
127+
128+
* Included in layout XML with uiComponent tag
129+
106130
## Things to remember when working with UI components
107131

108132
**UI components have different settings**

‎guides/v2.3/ui_comp_guide/bk-ui_comps.md

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,30 @@ A particular instance of a UI component is defined primarily by the following:
105105
3. [Backend/PHP modifiers]({{ page.baseurl }}/ui_comp_guide/concepts/ui_comp_modifier_concept.html).
106106
4. Configuration inside the JavaScript classes.
107107

108+
## UI component used in the frontend design area
109+
110+
* Configured through layout XML.
111+
112+
* The `jsLayout` argument is used to specify information.
113+
114+
```xml
115+
<block name="block-name" template="Magento_Module::path_to_template.phtml">
116+
<arguments>
117+
<argument name="jsLayout" xsi:type="array">
118+
<item name="components" xsi:type="array">
119+
...
120+
</item>
121+
</argument>
122+
</arguments>
123+
</block>
124+
```
125+
126+
## UI component used in the Adminhtml area
127+
128+
* Configured through dedicated XML file (view/.../ui_component/[ui_component_name.xml])
129+
130+
* Included in layout XML with uiComponent tag
131+
108132
## Things to remember when working with UI components
109133

110134
**UI components have different settings**

0 commit comments

Comments
 (0)