inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-4391] Doc review for 3.2 (#4601)

Browse Source 
* [ADF-4391] Reviewed new clipboard class docs

* [ADF-4391] Reviewed new proc cloud class docs

* [ADF-4391] Reviewed new datatable doc additions
This commit is contained in:
Andy Stark
2019-04-12 16:18:43 +01:00
committed by Eugenio Romano
parent 16aaa0f0b3
commit 921fdc00df
16 changed files with 256 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
docs/core/components/data-column.component.md
View File

@@ -2,7 +2,7 @@
Title: Data Column Component
Added: v2.0.0
Status: Active
Last reviewed: 2018-11-12
Last reviewed: 2019-04-12
---
# [Data Column Component](../../../lib/core/data-column/data-column.component.ts "Defined in data-column.component.ts")
@@ -20,6 +20,7 @@ Defines column properties for DataTable, Tasklist, Document List and other compo
- [Custom tooltips](#custom-tooltips)
- [Column Template](#column-template)
- [Styling Techniques](#styling-techniques)
- [Using the `copyContent` option](#using-the-copycontent-option)
- [See also](#see-also)
## Basic Usage
@@ -42,6 +43,7 @@ Defines column properties for DataTable, Tasklist, Document List and other compo
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| copyContent | `boolean` | | Enables/disables a [Clipboard directive](../../core/directives/clipboard.directive.md) to allow copying of cell contents. |
| cssClass | `string` | | Additional CSS class to be applied to column (header and cells). |
| format | `string` | | Value format (if supported by the parent component), for example format of the date. |
| formatTooltip | `Function` | | Custom tooltip formatter function. |
@@ -49,7 +51,7 @@ Defines column properties for DataTable, Tasklist, Document List and other compo
| sortable | `boolean` | true | Toggles ability to sort by this column, for example by clicking the column header. |
| srTitle | `string` | | Title to be used for screen readers. |
| title | `string` | "" | Display title of the column, typically used for column headers. You can use the i18n resource key to get it translated automatically. |
| type | `string` | "text" | Value type for the column. Possible settings are 'text', 'image', 'date', 'fileSize', 'location' and 'json'. |
| type | `string` | "text" | Value type for the column. Possible settings are 'text', 'image', 'date', 'fileSize', 'location', and 'json'. |
## Details
@@ -298,6 +300,34 @@ Now you can declare columns and assign the `desktop-only` class where needed:
![Responsive Mobile](../../docassets/images/responsive-mobile.png)
### Using the `copyContent` option
When the `copyContent` property is true, a
Clipboard directive
is added to each cell in the column. This lets the user copy the cell content
to the clipboard with a mouse click.
See the [Clipboard Directive](../directives/clipboard.directive.md) page for full details of the directive.
Example of using `copyContent` from a JSON config file:
```json
[
{"type": "text", "key": "id", "title": "Id", "copyContent": "true"},
{"type": "text", "key": "name", "title": "name"},
]
```
HTML `<data-column>` element example:
```html
<adf-tasklist ...>
<data-columns>
<data-column [copyContent]="true" key="id" title="Id"></data-column>
...
</data-columns>
</adf-tasklist>
```
## See also
- [Document list component](../../content-services/components/document-list.component.md)

30
docs/core/components/datatable.component.md
View File

@@ -2,7 +2,7 @@
Title: DataTable component
Added: v2.0.0
Status: Active
Last reviewed: 2019-03-20
Last reviewed: 2019-04-12
---
# [DataTable component](../../../lib/core/datatable/components/datatable/datatable.component.ts "Defined in datatable.component.ts")
@@ -311,7 +311,7 @@ together in the same datatable.
| ---- | ---- | ------------- | ----------- |
| actions | `boolean` | false | Toggles the data actions column. |
| actionsPosition | `string` | "right" | Position of the actions dropdown menu. Can be "left" or "right". |
| allowDropFiles | `boolean` | false | Toggles file drop support for rows (see [Upload directive](../directives/upload.directive.md) for further details). |
| allowDropFiles | `boolean` | false | Toggles file drop support for rows (see [Upload directive](upload.directive.md) for further details). |
| columns | `any[]` | \[] | The columns that the datatable will show. |
| contextMenu | `boolean` | false | Toggles custom context menu for the component. |
| data | [`DataTableAdapter`](../../../lib/core/datatable/data/datatable-adapter.ts) | | Data source for the table |
@@ -625,7 +625,8 @@ widths according to your needs:
#### No-growing cells
As mentioned before, in the beginning, all cells have the same width. You can prevent cells from growing by using the `adf-no-grow-cell` class.
As mentioned before, all cells initially have the same width. You can prevent cells from
growing by using the `adf-no-grow-cell` class.
```js
{
@@ -636,7 +637,7 @@ As mentioned before, in the beginning, all cells have the same width. You can pr
}
```
Notice that this class is compatible with `adf-ellipsis-cell` and for that reason it has a `min-width` of `100px`. You can override this property in your custom class to better suit your needs.
Note that this class is compatible with `adf-ellipsis-cell` and for that reason it has a `min-width` of `100px`. You can override this property in your custom class to better suit your needs.
![](../../docassets/images/datatable-no-grow-cell.png)
@@ -680,27 +681,6 @@ the total height of all rows exceeds the fixed height of the parent element.
</div>
```
### CopyClipboardDirective example
See the [Copy Content Directive ](../directives/clipboard.directive.md) page for full details of the directive
Json config file:
```json
[
{"type": "text", "key": "id", "title": "Id", "copyContent": "true"},
{"type": "text", "key": "name", "title": "name"},
]
```
HTML data-columns
```html
<adf-tasklist ...>
<data-columns>
<data-column [copyContent]="true" key="id" title="Id"></data-column>
<data-column key="created" title="Created" class="hidden"></data-column>
</data-columns>
</adf-tasklist>
```
Once set up, the sticky header behaves as shown in the image below:
![](../../docassets/images/datatable-sticky-header.png)

23
docs/core/components/json-cell.component.md
View File

@@ -1,12 +1,13 @@
---
Title: JsonCell component
Added: v2.0.0
Title: Json Cell component
Added: v3.2.0
Status: Active
Last reviewed: 2019-04-12
---
# [JsonCellComponent](../../../lib/core/datatable/components/datatable/json-cell.component.ts "Defined in empty-list.component.ts")
# [Json Cell Component](../../../lib/core/datatable/components/datatable/json-cell.component.ts "Defined in json-cell.component.ts")
Show Json formated value inside datatable component.
Shows a JSON-formatted value inside a datatable component.
## Basic Usage
@@ -18,7 +19,7 @@ Show Json formated value inside datatable component.
</adf-datatable>
```
You can specify the cell inside configuration file
You can specify the cell inside the `app.config.json` file:
```javascript
"adf-cloud-process-list": {
@@ -40,14 +41,16 @@ You can specify the cell inside configuration file
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| data | [`DataTableAdapter`](../../../lib/core/datatable/data/datatable-adapter.ts) | `null` | Data adapter instance. |
| column | [`DataColumn`](../../../lib/core/datatable/data/data-column.model.ts) | `null` | Data that defines the column |
| row | [`DataRow`](../../../lib/core/datatable/data/data-row.model.ts) | | Data that defines the row |
| column | [`DataColumn`](../../../lib/core/datatable/data/data-column.model.ts) | | Data that defines the column. |
| copyContent | `boolean` | | Enables/disables a [Clipboard directive](../../core/directives/clipboard.directive.md) to allow copying of the cell's content. |
| data | [`DataTableAdapter`](../../../lib/core/datatable/data/datatable-adapter.ts) | | Data table adapter instance. |
| row | [`DataRow`](../../../lib/core/datatable/data/data-row.model.ts) | | Data that defines the row. |
| tooltip | `string` | | Text for the cell's tooltip. |
## Details
This component provides a custom display to show a [Datatable component](datatable.component.md) cell
This component provides a custom display to show JSON data in a
[Datatable component](datatable.component.md) cell
## See also