mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ADF-3745] Updates for doc review (#3963)
* [ADF-3745] Updates for doc review * [ADF-3745] Updated tutorial index * [ADF-3745] Updated document list doc page
This commit is contained in:
Andy Stark
committed by
Eugenio Romano
Eugenio Romano
parent
aab19708a2
commit
89fcdec5ef
@@ -28,7 +28,7 @@ for more information about installing and using the source code.
|
||||
| [Text mask component](text-mask.component.md) | Implements text field input masks. | [Source](../../lib/core/form/components/widgets/text/text-mask.component.ts) |
|
||||
| [Info drawer layout component](info-drawer-layout.component.md) | Displays a sidebar-style information panel. | [Source](../../lib/core/info-drawer/info-drawer-layout.component.ts) |
|
||||
| [Info drawer component](info-drawer.component.md) | Displays a sidebar-style information panel with tabs. | [Source](../../lib/core/info-drawer/info-drawer.component.ts) |
|
||||
| [Language menu component](language-menu.component.md) | Displays all the languages that are present in the "app.config.json" or the default one (EN). | [Source](../../lib/core/language-menu/language-menu.component.ts) |
|
||||
| [Language menu component](language-menu.component.md) | Displays all the languages that are present in "app.config.json" and the default (EN). | [Source](../../lib/core/language-menu/language-menu.component.ts) |
|
||||
| [Header component](header.component.md)  | Reusable header for Alfresco applications. | [Source](../../lib/core/layout/components/header/header.component.ts) |
|
||||
| [Sidebar action menu component](sidebar-action-menu.component.md) | Displays a sidebar-action menu information panel. | [Source](../../lib/core/layout/components/sidebar-action/sidebar-action-menu.component.ts) |
|
||||
| [Sidenav layout component](sidenav-layout.component.md) | Displays the standard three-region ADF application layout. | [Source](../../lib/core/layout/components/sidenav-layout/sidenav-layout.component.ts) |
|
||||
@@ -76,12 +76,12 @@ for more information about installing and using the source code.
|
||||
| Name | Description | Source link |
|
||||
| ---- | ----------- | ----------- |
|
||||
| [File size pipe](file-size.pipe.md) | Converts a number of bytes to the equivalent in KB, MB, etc. | [Source](../../lib/core/pipes/file-size.pipe.ts) |
|
||||
| [Full name pipe](full-name.pipe.md) | Joins the first and last name properties from a UserProcessModel object into a single string. | [Source](../../lib/core/pipes/full-name.pipe.ts) |
|
||||
| [Mime type icon pipe](mime-type-icon.pipe.md) | Retrieves an icon to represent a MIME type. | [Source](../../lib/core/pipes/mime-type-icon.pipe.ts) |
|
||||
| [Node name tooltip pipe](node-name-tooltip.pipe.md) | Formats the tooltip for a Node. | [Source](../../lib/core/pipes/node-name-tooltip.pipe.ts) |
|
||||
| [Text highlight pipe](text-highlight.pipe.md) | Adds highlighting to words or sections of text that match a search string. | [Source](../../lib/core/pipes/text-highlight.pipe.ts) |
|
||||
| [Time ago pipe](time-ago.pipe.md) | Converts a recent past date into a number of days ago. | [Source](../../lib/core/pipes/time-ago.pipe.ts) |
|
||||
| [User initial pipe](user-initial.pipe.md) | Takes the name fields of a UserProcessModel object and extracts and formats the initials. | [Source](../../lib/core/pipes/user-initial.pipe.ts) |
|
||||
| _Full name pipe_ | _Not currently documented_ | [Source](../../lib/core/pipes/full-name.pipe.ts) |
|
||||
|
||||
## Services
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2018-11-12
|
||||
---
|
||||
|
||||
# Data Column Component
|
||||
@@ -65,8 +66,9 @@ You can use `ngIf` directives to provide conditional visibility support for the
|
||||
|
||||
### Automatic column header translation
|
||||
|
||||
You can use i18n resource keys with [`DataColumn`](../../lib/core/datatable/data/data-column.model.ts) `title` property.
|
||||
The component will automatically check the corresponding i18n resources and fetch corresponding value.
|
||||
You can use i18n resource keys with the
|
||||
[`DataColumn`](../../lib/core/datatable/data/data-column.model.ts) `title` property.
|
||||
The component will automatically check the appropriate i18n resources and fetch the corresponding value.
|
||||
|
||||
```html
|
||||
<data-column
|
||||
@@ -75,7 +77,7 @@ The component will automatically check the corresponding i18n resources and fetc
|
||||
</data-column>
|
||||
```
|
||||
|
||||
This feature is optional. Regular text either plain or converted via the `translate` pipe will still be working as it was before.
|
||||
This feature is optional. Regular text (either plain or converted via the `translate` pipe) will still work as normal.
|
||||
|
||||
### Custom tooltips
|
||||
|
||||
@@ -123,7 +125,7 @@ Every cell in the DataTable component is bound to the dynamic data context conta
|
||||
| col | [`DataColumn`](../../lib/core/datatable/data/data-column.model.ts) | Current data column instance. |
|
||||
|
||||
You can use all three properties to gain full access to underlying data from within your custom templates.
|
||||
In order to wire HTML templates with the data context you will need defining a variable that is bound to `$implicit` like shown below:
|
||||
In order to wire HTML templates with the data context you will need to define a variable that is bound to `$implicit` as shown below:
|
||||
|
||||
```html
|
||||
<ng-template let-context="$implicit">
|
||||
@@ -131,22 +133,22 @@ In order to wire HTML templates with the data context you will need defining a v
|
||||
</ng-template>
|
||||
```
|
||||
|
||||
The format of naming is `let-VARIABLE_NAME="$implicit"` where `VARIABLE_NAME` is the name of the variable you want to bind template data context to.
|
||||
The name format is `let-VARIABLE_NAME="$implicit"` where `VARIABLE_NAME` is the name of the variable you want to bind the template data context to.
|
||||
|
||||
Getting a cell value from the underlying [`DataTableAdapter`](../../lib/core/datatable/data/datatable-adapter.ts):
|
||||
You can also get a cell value from the underlying [`DataTableAdapter`](../../lib/core/datatable/data/datatable-adapter.ts):
|
||||
|
||||
```ts
|
||||
context.data.getValue(entry.row, entry.col);
|
||||
```
|
||||
|
||||
You can retrieve all property values for underlying node, including nested properties (via property paths):
|
||||
You can retrieve all property values for the underlying node, including nested properties (via property paths):
|
||||
|
||||
```ts
|
||||
context.row.getValue('name')
|
||||
context.row.getValue('createdByUser.displayName')
|
||||
```
|
||||
|
||||
You may want using **row** api to get raw value access.
|
||||
You may want to use the **row** API to get access to the raw values.
|
||||
|
||||
<!-- {% raw %} -->
|
||||
|
||||
@@ -161,7 +163,7 @@ You may want using **row** api to get raw value access.
|
||||
|
||||
<!-- {% endraw %} -->
|
||||
|
||||
Use **data** api to get values with post-processing, like datetime/icon conversion.\_
|
||||
Use the **data** API to get values with post-processing (eg, datetime or icon conversion).
|
||||
|
||||
In the Example below we will prepend `Hi!` to each file and folder name in the list:
|
||||
|
||||
@@ -178,7 +180,7 @@ In the Example below we will prepend `Hi!` to each file and folder name in the l
|
||||
<!-- {% endraw %} -->
|
||||
|
||||
In the Example below we will integrate the [adf-tag-node-list](../content-services/tag-node-list.component.md) component
|
||||
with the document list.
|
||||
within the document list.
|
||||
|
||||
<!-- {% raw %} -->
|
||||
|
||||
@@ -254,7 +256,7 @@ You can hide columns on small screens using custom CSS rules:
|
||||
}
|
||||
```
|
||||
|
||||
Now you can declare columns and assign `desktop-only` class where needed:
|
||||
Now you can declare columns and assign the `desktop-only` class where needed:
|
||||
|
||||
```html
|
||||
<adf-document-list ...>
|
||||
@@ -295,13 +297,8 @@ Now you can declare columns and assign `desktop-only` class where needed:
|
||||
|
||||
|
||||
|
||||
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
|
||||
|
||||
<!-- seealso start -->
|
||||
|
||||
## See also
|
||||
|
||||
- [Document list component](../content-services/document-list.component.md)
|
||||
- [Datatable component](datatable.component.md)
|
||||
- [Task list component](../process-services/task-list.component.md)
|
||||
<!-- seealso end -->
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2018-09-13
|
||||
Last reviewed: 2018-11-12
|
||||
---
|
||||
|
||||
# DataTable component
|
||||
@@ -77,7 +77,7 @@ export class DataTableDemo {
|
||||
|
||||
### Setting the rows and column schema
|
||||
|
||||
You can set rows and columns to the [`ObjectDataTableAdapter`](../../lib/core/datatable/data/object-datatable-adapter.ts) like shown below:
|
||||
You can set rows and columns in the [`ObjectDataTableAdapter`](../../lib/core/datatable/data/object-datatable-adapter.ts) as shown below:
|
||||
|
||||
```ts
|
||||
import { ObjectDataTableAdapter } from '@alfresco/adf-core';
|
||||
@@ -120,7 +120,7 @@ export class DataTableDemo {
|
||||
</adf-datatable>
|
||||
```
|
||||
|
||||
You can also set rows and HTML-based schema declaration like shown below:
|
||||
You can also set rows and use an HTML-based schema declaration as shown below:
|
||||
|
||||
```ts
|
||||
import { ObjectDataTableAdapter } from '@alfresco/adf-core';
|
||||
@@ -154,7 +154,7 @@ export class DataTableDemo {
|
||||
</adf-datatable>
|
||||
```
|
||||
|
||||
You can also set rows to the [`ObjectDataTableAdapter`](../../lib/core/datatable/data/object-datatable-adapter.ts) and set columns as an input like shown below :
|
||||
You can also set rows to the [`ObjectDataTableAdapter`](../../lib/core/datatable/data/object-datatable-adapter.ts) and set columns as an input as shown below :
|
||||
|
||||
```ts
|
||||
import { ObjectDataTableAdapter } from '@alfresco/adf-core';
|
||||
|
||||
29
docs/core/full-name.pipe.md
Normal file
29
docs/core/full-name.pipe.md
Normal file
@@ -0,0 +1,29 @@
|
||||
---
|
||||
Added: v3.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2018-11-12
|
||||
---
|
||||
|
||||
# Full name pipe
|
||||
|
||||
Joins the first and last name properties from a [`UserProcessModel`](../core/user-process.model.md) object into a single string.
|
||||
|
||||
## Basic Usage
|
||||
|
||||
<!-- {% raw %} -->
|
||||
|
||||
```HTML
|
||||
<div>
|
||||
Project Leader: {{ user | fullName }}
|
||||
</div>
|
||||
```
|
||||
|
||||
<!-- {% endraw %} -->
|
||||
|
||||
## Details
|
||||
|
||||
The pipe offers a convenient way to extract the name from a [User process model](../core/user-process.model.md) object.
|
||||
|
||||
## See also
|
||||
|
||||
- [User initial pipe](user-initial.pipe.md)
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2018-11-12
|
||||
---
|
||||
|
||||
# User Initial pipe
|
||||
@@ -28,3 +29,7 @@ The first pipe parameter specifies an optional CSS class to add to the <div>
|
||||
element (eg, a background color is commonly used to emphasise initials). The
|
||||
second parameter is an optional delimiter to add between the initials.
|
||||
Both parameters default to empty strings.
|
||||
|
||||
## See also
|
||||
|
||||
- [Full name pipe](../core/full-name.pipe.md)
|
||||
|
||||
Reference in New Issue
Block a user