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

Merge UI component PRs #6041

Merged
merged 7 commits into from
Nov 20, 2019
Merged

Merge UI component PRs #6041

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
8919b8b
Update Paging UI component documentation (#6039)
serhiyzhovnir Nov 20, 2019
fb49589
Update DragAndDrop UI component documentation (#6038)
serhiyzhovnir Nov 20, 2019
75f1dd7
Update date column UI component documentation (#6037)
serhiyzhovnir Nov 20, 2019
4e02e94
Update ui columns documentation (#6036)
serhiyzhovnir Nov 20, 2019
3c36264
Update UI column component documentation (#6034)
serhiyzhovnir Nov 20, 2019
ef8ae58
Merge branch 'master' into kh_small-changes
keharper Nov 20, 2019
97e0bee
fixed linting error
keharper Nov 20, 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/ui-column-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.
Binary file added common/images/ui_comps/ui-columns-list-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.
Binary file added common/images/ui_comps/ui-columns-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.
Binary file added common/images/ui_comps/ui-date-column-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.
Binary file added common/images/ui_comps/ui-draganddrop-columns-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.
Binary file added common/images/ui_comps/ui-paging-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.
175 changes: 51 additions & 124 deletions guides/v2.2/ui_comp_guide/components/ui-column.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,136 +7,63 @@ The Column component implements a basic column in [Listing]({{ page.baseurl }}/u

## 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 <code>.js</code> file in terms of RequireJS.</td>
<td>String</td>
<td><code>Magento_Ui/js/grid/columns/column</code></td>
</tr>
<tr>
<td><code>bodyTmpl</code></td>
<td>Path to the template used for rendering column's fields in the table's body.</td>
<td>String</td>
<td><code>ui/grid/cells/text</code></td>
</tr>
<tr>
<td><code>controlVisibility</code></td>
<td>Whether a user can control column's visibility handled by the <a href="{{ page.baseurl }}/ui_comp_guide/components/ui-columnscontrols.html">ColumnsControls component</a>.</td>
<td>Boolean</td>
<td><code>true</code></td>
</tr>
<tr>
<td><code>disableAction</code></td>
<td>Disables the action set in the <code>templates.fieldAction</code> property.</td>
<td>Boolean</td>
<td><code>false</code></td>
</tr>
<tr>
<td><code>draggable</code></td>
<td>Defines if a user can change column's position in the table by grabbing column's header and dragging it across the table.</td>
<td>Boolean</td>
<td><code>true</code></td>
</tr>
<tr>
<td><code>editor</code></td>
<td />
<td>String | Object</td>
<td />
</tr>
<tr>
<td><code>fieldClass</code></td>
<td>Additional CSS classes added to the column's field elements.</td>
<td>{[name: String]: Boolean}</td>
<td><code>''</code></td>
</tr>
<tr>
<td><code>filter</code></td>
<td>Reference to one of the available filter types defined in the <a href="{{ page.baseurl }}/ui_comp_guide/components/ui-filters.html">Filters component</a>. If the value represents an object containing the <code>filterType</code> field, this object is considered as an extension of the referenced filter element. If there's no such field in the value object, it is considered as a definition of a custom filter element.</td>
<td>String | Object</td>
<td />
</tr>
<tr>
<td><code>headerTmpl</code></td>
<td>Path to the <code>.html</code> template for the column's header.</td>
<td>String</td>
<td><code>ui/grid/columns/text</code></td>
</tr>
<tr>
<td><code>label</code></td>
<td>The column label displayed in the header.</td>
<td>String</td>
<td>''</td>
</tr>
<tr>
<td><code>sortable</code></td>
<td>Whether column's fields can be used to sort records in a table.</td>
<td>Boolean</td>
<td><code>true</code></td>
</tr>
<tr>
<td><code>sorting</code></td>
<td>Column's sorting order. Can be ascending (<code>asc</code>), descending (<code>desc</code>) or none (<code>false</code>). Setting <code>sorting</code> to <code>false</code> does not disable sorting, which is defined by the <code>sortable</code> option.</td>
<td><code>asc</code> | <code>desc</code> | Boolean</td>
<td><code>false</code></td>
</tr>
<tr>
<td><code>statefull</code></td>
<td>Defined in the parent <a href="{{ page.baseurl }}/ui_comp_guide/concepts/ui_comp_uielement_concept.html">uiElement class</a>.</td>
<td />
<td><code>{visible: true, sorting: true}</code></td>
</tr>
<tr>
<td><code>templates.fieldAction</code></td>
<td>The action performed on the column's field click.</td>
<td><a href="#column_action">ColumnAction</a></td>
<td>-</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>
</table>
| Option | Description | Type | Default |
| --- | --- | --- | --- |
| `component` | The path to the component's `.js` file in terms of RequireJS. | String | `Magento_Ui/js/grid/columns/column` |
| `bodyTmpl` | Path to the template used for rendering column's fields in the table's body. | String | `ui/grid/cells/text` |
| `controlVisibility` | Whether a user can control column's visibility handled by the [ColumnsControls component]({{ page.baseurl }}/ui_comp_guide/components/ui-columnscontrols.html). | Boolean | `true` |
| `disableAction` | Disables the action set in the `templates.fieldAction` property. | Boolean | `false` |
| `draggable` | Defines if a user can change column's position in the table by grabbing column's header and dragging it across the table. | Boolean | `true` |
| `editor` | | String \| Object | |
| `fieldClass` | Additional CSS classes added to the column's field elements. | {[name: String]: Boolean} | `''` |
| `filter` | Reference to one of the available filter types defined in the [Filters component]({{ page.baseurl }}/ui_comp_guide/components/ui-filters.html). If the value represents an object containing the `filterType` field, this object is considered as an extension of the referenced filter element. If there's no such field in the value object, it is considered as a definition of a custom filter element. | String \| Object | `-` |
| `headerTmpl` | Path to the `.html` template for the column's header. | String | `ui/grid/columns/text` |
| `label` | The column label displayed in the header. | String | `''` |
| `sortable` | Whether column's fields can be used to sort records in a table. | Boolean | `true` |
| `sorting` | Column's sorting order. Can be ascending (`asc`), descending (`desc`) or none (`false`). Setting `sorting` to `false` does not disable sorting, which is defined by the `sortable` option. | String \| Boolean | `false` |
| `statefull` | Defined in the parent [uiElement class]({{ page.baseurl }}/ui_comp_guide/concepts/ui_comp_uielement_concept.html). | Object | `{visible: true, sorting: true}` |
| `templates.fieldAction` | The action performed on the column's field click. | [ColumnAction](#column_action) | `-` |
| `visible` | Initial component's visibility. When set to `false`, the `display: none` CSS style is added to the component's DOM block. | Boolean | `true` |

### ColumnAction interface {#column_action}

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

## Source files

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

- [`Magento/Ui/view/base/web/js/grid/columns/column.js`]({{ site.mage2bloburl }}/{{ page.guide_version }}/app/code/Magento/Ui/view/base/web/js/grid/columns/column.js)
- [`Magento/Ui/view/base/web/templates/grid/cells/text.html`]({{ site.mage2bloburl }}/{{ page.guide_version }}/app/code/Magento/Ui/view/base/web/templates/grid/cells/text.html)

## Examples

### Integrate Column component with Listing component

This is an example of how the Column component integrates with the [Listing]({{ page.baseurl }}/ui_comp_guide/components/ui-listing-grid.html) component:

```xml
<listing>
...
<columns>
...
<column name="column" sortOrder="10">
<settings>
<filter>text</filter>
<dataType>text</dataType>
<label translate="true">Column</label>
</settings>
</column>
...
</columns>
...
</listing>
```

#### Result

![Column Component Example]({{ site.baseurl }}/common/images/ui_comps/ui-column-result.png)
106 changes: 105 additions & 1 deletion 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 @@ -16,7 +16,7 @@ The Columns component is a collection of columns. It renders the `<table>` eleme
| `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` |
| `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}` |

Expand All @@ -33,3 +33,107 @@ The Columns component is a collection of columns. It renders the `<table>` eleme
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)
- [`Magento/Ui/view/base/web/templates/list/listing.html`]({{ site.mage2bloburl }}/{{ page.guide_version }}/app/code/Magento/Ui/view/base/web/templates/list/listing.html)

## Examples

### Integrate the Columns component as a grid (default) with the Listing component

This is an example of how the Columns component integrates with the [Listing]({{ page.baseurl }}/ui_comp_guide/components/ui-listing-grid.html) component:

```xml
<listing>
...
<columns name="columns_example">
<column name="column1" sortOrder="10">
<settings>
<filter>text</filter>
<dataType>text</dataType>
<label translate="true">Column 1</label>
<default>1</default>
</settings>
</column>
<column name="column2" sortOrder="13">
<settings>
<filter>text</filter>
<dataType>text</dataType>
<label translate="true">Column 2</label>
<default>2</default>
</settings>
</column>
<column name="column3" sortOrder="14">
<settings>
<filter>text</filter>
<dataType>text</dataType>
<label translate="true">Column 3</label>
<default>3</default>
</settings>
</column>
<column name="column4" sortOrder="15">
<settings>
<filter>text</filter>
<dataType>text</dataType>
<label translate="true">Column 4</label>
<default>4</default>
</settings>
</column>
</columns>
...
</listing>
```

#### Result

![Columns Component Example]({{ site.baseurl }}/common/images/ui_comps/ui-columns-result.png)

### Integrate the Columns component as a list with the Listing component

This is an example of how the Columns component with the list display mode integrates with the [Listing]({{ page.baseurl }}/ui_comp_guide/components/ui-listing-grid.html) component:

```xml
<listing>
...
<columns name="columns_list_example">
<settings>
<displayMode>list</displayMode>
</settings>
<column name="column1" sortOrder="10">
<settings>
<filter>text</filter>
<dataType>text</dataType>
<label translate="true">Column 1</label>
<default>1</default>
</settings>
</column>
<column name="column2" sortOrder="13">
<settings>
<filter>text</filter>
<dataType>text</dataType>
<label translate="true">Column 2</label>
<default>2</default>
</settings>
</column>
<column name="column3" sortOrder="14">
<settings>
<filter>text</filter>
<dataType>text</dataType>
<label translate="true">Column 3</label>
<default>3</default>
</settings>
</column>
<column name="column4" sortOrder="15">
<settings>
<filter>text</filter>
<dataType>text</dataType>
<label translate="true">Column 4</label>
<default>4</default>
</settings>
</column>
</columns>
...
</listing>
```

#### Result

![Columns List Component Example]({{ site.baseurl }}/common/images/ui_comps/ui-columns-list-result.png)
55 changes: 40 additions & 15 deletions guides/v2.2/ui_comp_guide/components/ui-datecolumn.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,23 +7,48 @@ The DateColumn component implements a table column that displays dates.

## Configuration options

<table>
<tr>
<th>Option</th>
<th>Description</th>
<th>Type</th>
<th>Default</th>
</tr>
<tr>
<td><code>dateFormat</code></td>
<td>Date format for the displayed column's values.</td>
<td>String</td>
<td><code>MMM d, YYYY h:mm:ss A</code></td>
</tr>
</table>
| Option | Description | Type | Default |
| --- | --- | --- | --- |
| `dateFormat` | Date format for the displayed column's values. | String | `MMM d, YYYY h:mm:ss A` |
Copy link
Contributor

Choose a reason for hiding this comment

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

Is the format of the default value correct?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I noticed that too, but the original PR was just converting the table from HTML to markdown here, so I let it go. But since you called it out, I checked, and the answer is yes.

    return Column.extend({
        defaults: {
            dateFormat: 'MMM d, YYYY h:mm:ss A',
            calendarConfig: []
        },


## Source files

Extends [`Column`]({{ page.baseurl }}/ui_comp_guide/components/ui-column.html):

- [`app/code/Magento/Ui/view/base/web/js/grid/columns/date.js`]({{ site.mage2bloburl }}/{{ page.guide_version }}/app/code/Magento/Ui/view/base/web/js/grid/columns/date.js)
- [`app/code/Magento/Ui/view/base/web/js/grid/columns/date.js`]({{ site.mage2bloburl }}/{{ page.guide_version }}/app/code/Magento/Ui/view/base/web/js/grid/columns/date.js)

## Examples

### Integrate the DateColumn component with the Listing component

This is an example of how the DateColumn component integrates with the [Listing]({{ page.baseurl }}/ui_comp_guide/components/ui-listing-grid.html) component:

```xml
<listing>
...
<columns>
<column name="date_column_example_1" class="Magento\Ui\Component\Listing\Columns\Date" component="Magento_Ui/js/grid/columns/date">
<settings>
<filter>dateRange</filter>
<dataType>date</dataType>
<dataType>date</dataType>
<label translate="true">Date Column Example 1</label>
</settings>
</column>
<column name="date_column_example_2" class="Magento\Ui\Component\Listing\Columns\Date" component="Magento_Ui/js/grid/columns/date">
<settings>
<filter>dateRange</filter>
<dataType>date</dataType>
<dateFormat>yyyy-MM-dd hh:mm:ss</dateFormat>
<label translate="true">Date Column Example 2</label>
</settings>
</column>
...
</columns>
...
</listing>
```

### Result

![DateColumn Component Example]({{ site.baseurl }}/common/images/ui_comps/ui-date-column-result.png)
Loading