inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2026-09-09 18:03:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-2451] Reviewed docs for components (#3061)

Browse Source 
* [ADF-2451] Reviewed tasklist docs

* [ADF-2451] Reviewed docs for content node components

* [ADF-2451] Fixed tslint error

* [ADF-2463] Moved core components to subfolder (#3062)

* [ADF-2443] renaming getDifferentPageSize to getDefaultPageSize (#3060)

* [ADF-2443] renaming getDifferentPageSize to getDefaultPageSize

* [ADF-2443] fixed method call for demo shell

* Add data-automation-id to an error message displayed on the Tag Page. (#3064)

* Update upload-drag-area.component.md (#3067)

* [ADF-2443] fixed documentation (#3066)

* [ADF-2451] Reviewed tasklist docs

* [ADF-2451] Reviewed docs for content node components

* [ADF-2451] Fixed tslint error
This commit is contained in:
Andy Stark
2018-03-13 12:11:13 +00:00
committed by Eugenio Romano
parent c3e2588e35
commit d563dbbd77
7 changed files with 181 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/content-node-selector-panel.component.md
+24 -51
View File
@@ -1,11 +1,15 @@
---
Added: v2.1.0
Status: Active
Last reviewed: 2018-03-12
---
# Content Node Selector Panel component
Opens a [Content Node Selector](content-node-selector.component.md) in its own dialog window.
![Content Node Selector screenshot](docassets/images/ContentNodeSelector.png)
## Basic Usage
```html
@@ -21,60 +25,22 @@ Opens a [Content Node Selector](content-node-selector.component.md) in its own d
### Properties
| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| currentFolderId | string | null | Node ID of the folder currently listed |
| dropdownHideMyFiles | boolean | false | Hide the "My Files" option added to the site list by default. [See More](sites-dropdown.component.md) |
| dropdownSiteList | [SitePaging](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/SitePaging.md) | | custom site for site dropdown same as siteList. [See More](sites-dropdown.component.md#properties) |
| rowFilter | RowFilter | null | Custom row filter function. [See More](document-list.component.md#custom-row-filter) |
| imageResolver | ImageResolver | null | Custom image resolver function. [See More](document-list.component.md#custom-image-resolver) |
| pageSize | number | 10 | Number of items shown per page in the list |
| isSelectionValid | ValidationFunction | defaultValidation | Function used to decide if the selected node has permission to be the chosen. The defaultValidation always returns true. |
| breadcrumbTransform | (node) => any | null | Action to be performed to the chosen/folder node before building the breadcrumb UI. Can be useful in case a custom formatting is needed to the breadcrumb, so changing the node's path elements that help build the breadcrumb can be done through this function. |
#### Using breadcrumbTransform example
Before opening the Content Node Selector, you can add a breadcrumbTransform function to the ContentNodeSelectorComponentData to make changes to what is displayed on the breadcrumb. For example, something like this:
```
const data: ContentNodeSelectorComponentData = {
title: title,
actionName: action,
currentFolderId: contentEntry.parentId,
imageResolver: this.imageResolver.bind(this),
rowFilter : this.rowFilter.bind(this, contentEntry.id),
isSelectionValid: this.hasEntityCreatePermission.bind(this),
breadcrumbTransform: this.changeBreadcrumbPath.bind(this), // here is the transform function
select: select
};
this.openContentNodeDialog(data, 'adf-content-node-selector-dialog', '630px');
```
where the transform function could be something like this:
```
private changeBreadcrumbPath(node: MinimalNodeEntryEntity) {
if (node && node.path && node.path.elements) {
const elements = node.path.elements;
if (elements.length > 1) {
if (elements[1].name === 'Sites') {
elements.splice(1, 1);
}
}
}
return node;
}
```
and here is the display of the breadcrumb before and after transform:
![Content Node Selector breadcrumbTransfrom before/after screenshot](docassets/images/breadcrumbTransform.png)
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| currentFolderId | `string` | `null` | Node ID of the folder currently listed. |
| dropdownHideMyFiles | `boolean` | `false` | Hide the "My Files" option added to the site list by default. See the [Sites Dropdown component](sites-dropdown.component.md) for more information. |
| dropdownSiteList | `SitePaging` | `null` | Custom site for site dropdown same as siteList. See the [Sites Dropdown component](sites-dropdown.component.md) for more information. |
| rowFilter | `RowFilter` | `null` | Custom row filter function. See the [Document List component](document-list.component.md#custom-row-filter) for more information. |
| imageResolver | `ImageResolver` | `null` | Custom image resolver function. See the [Document List component](document-list.component.md#custom-row-filter) for more information. |
| pageSize | `number` | | Number of items shown per page in the list. |
| isSelectionValid | `ValidationFunction` | `defaultValidation` | Function used to decide if the selected node has permission to be selected. Default value is a function that always returns true. |
| breadcrumbTransform | `(node: any) => any` | | Transformation to be performed on the chosen/folder node before building the breadcrumb UI. Can be useful when custom formatting is needed for the breadcrumb. You can change the path elements from the node that are used to build the breadcrumb using this function. |
### Events
| Name | Description |
| ---- | ----------- |
| select | Emitted when the user has chosen an item |
| Name | Type | Description |
| ---- | ---- | ----------- |
| select | `EventEmitter<MinimalNodeEntryEntity[]>` | Emitted when the user has chosen an item. |
## Details
@@ -85,6 +51,13 @@ not manage the dialog window for you). Also, the
[Content Node Dialog service](content-node-dialog.service.md) has several methods that give you
finer control over the behavior of the dialog.
### Using the breadcrumbTransform function
The `breadcrumbTransform` property lets you modify the Node object that is used to generate the
list of breadcrumbs. You can use this, for example, to remove path elements that are not
relevant to the use case. See the [Breadcrumb component](breadcrumb.component.md) page for an
example of how to use this function.
## See also
- [Content Node Selector component](content-node-selector.component.md)