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

Added information about missed options of the UI button and added the Source files section #5050

Merged
merged 4 commits into from
Jul 29, 2019
Merged

Added information about missed options of the UI button and added the Source files section #5050

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6e376c2
Added information about missed UI button options and added the Source…
Jul 26, 2019
16e6474
Added information about missed UI Columns options and added the Sourc…
Jul 26, 2019
cf01539
Added information about missed option of UI LinkColumn component and …
Jul 26, 2019
3a166ea
Merge branch 'master' into adjust-ui-button-component-documentation
jeff-matthews Jul 29, 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
112 changes: 24 additions & 88 deletions guides/v2.2/ui_comp_guide/components/ui-button.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,94 +7,30 @@ The Button component allows user to perform a list of predefined actions by clic

## Configuration options

<table>
<tr>
<th>Option </th>
<th>Description</th>
<th>Type</th>
<th>Default</th>
</tr>
<tr>
<td><code>component</code></td>
<td>The path to the component’s JS constructor in terms of RequireJS.</td>
<td>String</td>
<td><code>Magento_Ui/js/form/components/button</code></td>
</tr>
<tr>
<td><code>additionalClasses</code></td>
<td>Sets custom classes to the component's DOM block.</td>
<td>Object</td>
<td><code>{}</code></td>
</tr>
<tr>
<td><code>disabled</code></td>
<td>Initial component's state. When set to <code>true</code>, users can't take action on the element.</td>
<td>Boolean</td>
<td><code>false</code></td>
</tr>
<tr>
<td><code>displayAsLink</code></td>
<td>Show the button as a link.</td>
<td>Boolean</td>
<td><code>false</code></td>
</tr>
<tr>
<td><code>elementTmpl</code></td>
<td>The path to the child component’s <code>.html</code> template.</td>
<td>String</td>
<td><code>''</code></td>
</tr>
<tr>
<td><code>template</code></td>
<td>Path to the general <code>.html</code> template for a button.</td>
<td>String</td>
<td><code>''</code></td>
</tr>
<tr>
<td><code>title</code></td>
<td>Button title.</td>
<td>String</td>
<td><code>''</code></td>
</tr>
<tr>
<td><code>visible</code></td>
<td>Initial component's visibility. When set to <code>false</code>, the <code>"display: none</code> CSS style is added to the component's DOM block.</td>
<td>Boolean</td>
<td><code>true</code></td>
</tr>
<tr>
<td><code>actions</code></td>
<td>A list of actions that are performed when user clicks on the element.</td>
<td><code>ButtonAction[]</code></td>
<td>-</td>
</tr>
</table>
| Option | Description | Type | Default |
| --- | --- | --- | --- |
| `component` | The path to the component’s JS constructor in terms of RequireJS. | String | `Magento_Ui/js/form/components/button` |
| `additionalClasses` | Sets custom classes to the component's DOM block. | Object | `{}` |
| `buttonClasses` | Sets custom classes to the [HTML](https://glossary.magento.com/html) `<button>` element. | Object | `{}` |
| `disabled` | Initial component's state. When set to `true`, users can't take action on the element. | Boolean | `false` |
| `displayAsLink` | Show the button as a link. | Boolean | `false` |
| `elementTmpl` | The path to the child component’s `.html` template. | String | `ui/form/element/button` |
| `template` | Path to the general `.html` template for a button. | String | `ui/form/components/button/simple` |
| `title` | Button title. | String | `''` |
| `displayArea` | Display area of the component. | String | `outsideGroup` |
| `visible` | Initial component's visibility. When set to `false`, the `"display: none"` CSS style is added to the component's DOM block. | Boolean | `true` |
| `actions` | A list of actions that are performed when user clicks on the element. | `ButtonAction[]` | - |

### ButtonAction interface

<table>
<tr>
<th>Option</th>
<th>Description</th>
<th>Type</th>
<th>Required</th>
</tr>
<tr>
<td><code>targetName</code></td>
<td>Reference to component.</td>
<td>String</td>
<td>Required</td>
</tr>
<tr>
<td><code>actionName</code></td>
<td>Name of the component's method to be invoked.</td>
<td>String</td>
<td>Required</td>
</tr>
<tr>
<td><code>params</code></td>
<td>A list of arguments that will be passed to the method.</td>
<td>Array</td>
<td>Optional</td>
</tr>
</table>
Option | Description | Type | Required |
--- | --- | --- | --- |
`targetName` | Reference to component. | String | Required |
`actionName` | Name of the component's method to be invoked. | String | Required |
`params` | A list of arguments that will be passed to the method. | Array | Optional |

## Source files

Extends [`UiElement`]({{ page.baseurl }}/ui_comp_guide/concepts/ui_comp_uielement_concept.html):

- [`Magento/Ui/view/base/web/js/form/components/button.js`]({{ site.mage2bloburl }}/{{ page.guide_version }}/app/code/Magento/Ui/view/base/web/js/form/components/button.js)
209 changes: 23 additions & 186 deletions guides/v2.2/ui_comp_guide/components/ui-columns.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,192 +7,29 @@ The Columns component is a collection of columns. It renders the `<table>` eleme

## Configuration options

<table>
<tr>
<th>
Option
</th>
<th>
Description
</th>
<th>
Type
</th>
<th>
Default
</th>
</tr>
<tr>
<td>
<code>displayMode</code>
</td>
<td>
Initial display mode.
</td>
<td>
String
</td>
<td>
<code>'grid'</code>
</td>
</tr>
<tr>
<td>
<code>displayModes</code>
</td>
<td>
List of available display modes.
</td>
<td>
{<br />
[name: string]: <a href="#displaymode">DisplayMode</a><br />
}
</td>
<td>
<code>{<br />
value: 'grid',<br />
label: 'Grid',<br />
template: 'ui/grid/listing'<br />
}</code>
</td>
</tr>
<tr>
<td>
<code>dndConfig</code>
</td>
<td>
Configuration of the <a href="{{ page.baseurl }}/ui_comp_guide/components/ui-draganddrop.html">DragAndDrop
component</a>.
</td>
<td>
Object
</td>
<td>
Specified in the <a href="{{ page.baseurl }}/ui_comp_guide/components/ui-draganddrop.html">
DragAndDrop component configuration</a>.
</td>
</tr>
<tr>
<td>
<code>stickyTmpl</code>
</td>
<td>
Path to the <code>.html</code> template used for the <a href="{{ page.baseurl }}/ui_comp_guide/components/ui-toolbar.html">
Toolbar component</a> when it receives a fixed position.
</td>
<td>
String
</td>
<td>
<code>ui/grid/sticky/listing</code>
</td>
</tr>
<tr>
<td>
<code>template</code>
</td>
<td>
Path to the component’s <code>.html</code> template.
</td>
<td>
String
</td>
<td>
<code>ui/grid/listing</code>
</td>
</tr>
<tr>
<td>
<code>editorConfig</code>
</td>
<td>
Configuration of the InlineEditing
component.
</td>
<td>
Object
</td>
<td>
Specified in the <a href="{{ page.baseurl }}/ui_comp_guide/components/ui-insertlisting.html">
InlineEditing component configuration</a>.
</td>
</tr>
<tr>
<td>
<code>viewSwitcherTmpl</code>
</td>
<td>
Path to the .html template for rendering the list of
available display modes. By default this list is not
displayed.
</td>
<td>
String
</td>
<td>
<code>ui/grid/view-switcher</code>
</td>
</tr>
</table>
| Option | Description | Type | Default |
| --- | --- | --- | --- |
| `component` | The path to the component’s `.js` file. | String | `Magento_Ui/js/grid/listing` |
| `displayMode` | Initial display mode. | String | `'grid'` |
| `displayModes` | List of available display modes. | {<br />[name: string]: [DisplayMode](#displaymode)<br />} | `{grid: {value: 'grid',label: 'Grid',template: '${ $.template }'},list: {value: 'list',label: 'List',template: '${ $.listTemplate }'}}` |
| `dndConfig` | Configuration of the [DragAndDrop component]({{ page.baseurl }}/ui_comp_guide/components/ui-draganddrop.html). | Object | Specified in the [DragAndDrop component configuration]({{ page.baseurl }}/ui_comp_guide/components/ui-draganddrop.html). |
| `stickyTmpl` | Path to the `.html` template used for the [Toolbar component]({{ page.baseurl }}/ui_comp_guide/components/ui-toolbar.html) when it receives a fixed position. | String | `ui/grid/sticky/listing` |
| `template` | Path to the component’s `.html` template. | String | `ui/grid/listing` |
| `editorConfig` | Configuration of the InlineEditing component. | Object | Specified in the [InlineEditing component configuration]({{ page.baseurl }}/ui_comp_guide/components/ui-insertlisting.html). |
| `viewSwitcherTmpl` | Path to the .html template for rendering the list of available display modes. By default this list is not displayed. | String | `ui/grid/view-switcher` |
| `componentType` | The type of component. | String | `columns` |
| `resizeConfig` | Configurations of [`Resize`]({{ site.mage2bloburl }}/{{ page.guide_version }}/app/code/Magento/Ui/view/base/web/js/grid/resize.js) component. | Object | `{name: '${ $.name }_resize',columnsProvider: '${ $.name }',component: 'Magento_Ui/js/grid/resize',enabled: false}` |

### DisplayMode interface {#displaymode}

<table>
<tr>
<th>
Option
</th>
<th>
Description
</th>
<th>
Type
</th>
<th>
Required
</th>
</tr>
<tr>
<td>
<code>label</code>
</td>
<td>
Label for the list of available modes.
</td>
<td>
String
</td>
<td>
Optional
</td>
</tr>
<tr>
<td>
<code>template</code>
</td>
<td>
Path to the <code>.html</code> template used to render
listing in the selected mode.
</td>
<td>
String
</td>
<td>
Optional
</td>
</tr>
<tr>
<td>
<code>value</code>
</td>
<td>
Mode's identifier.
</td>
<td>
String
</td>
<td>
Optional
</td>
</tr>
</table>
| Option | Description | Type | Required |
| --- | --- | --- | --- |
| `label` | Label for the list of available modes. | String | Optional |
| `template` | Path to the `.html` template used to render listing in the selected mode. | String | Optional |
| `value` | Mode's identifier. | String | Optional |

## Source files

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

- [`Magento/Ui/view/base/web/js/grid/listing.js`]({{ site.mage2bloburl }}/{{ page.guide_version }}/app/code/Magento/Ui/view/base/web/js/grid/listing.js)
23 changes: 9 additions & 14 deletions guides/v2.2/ui_comp_guide/components/ui-linkcolumn.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,17 +11,12 @@ Constructor: [app/code/Magento/Ui/view/base/web/js/grid/columns/link.js]({{ site

## LinkColumn configuration

<table>
<tr>
<th>Option</th>
<th>Description</th>
<th>Type</th>
<th>Default</th>
</tr>
<tr>
<td><code>link</code></td>
<td>The key in a field's record object that contains the link value.</td>
<td>String</td>
<td><code>link</code></td>
</tr>
</table>
| Option | Description | Type | Default |
| --- | --- | --- | --- |
| `link` | The key in a field's record object that contains the link value. | String | `link` |
| `bodyTmpl` | Path to the template that is used to render a column's field in the table's body. | String | `ui/grid/cells/link` |

## Source files

Extends [Column component]({{ page.baseurl }}/ui_comp_guide/components/ui-column.html)
- [`app/code/Magento/Ui/view/base/web/js/grid/columns/link.js`]({{ site.mage2bloburl }}/{{ page.guide_version }}/app/code/Magento/Ui/view/base/web/js/grid/columns/link.js)