mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-19 17:14:57 +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
Eugenio Romano
parent
aab19708a2
commit
89fcdec5ef
@ -77,7 +77,7 @@ for more information about installing and using the source code.
|
||||
| [Text mask component](core/text-mask.component.md) | Implements text field input masks. | [Source](../lib/core/form/components/widgets/text/text-mask.component.ts) |
|
||||
| [Info drawer layout component](core/info-drawer-layout.component.md) | Displays a sidebar-style information panel. | [Source](../lib/core/info-drawer/info-drawer-layout.component.ts) |
|
||||
| [Info drawer component](core/info-drawer.component.md) | Displays a sidebar-style information panel with tabs. | [Source](../lib/core/info-drawer/info-drawer.component.ts) |
|
||||
| [Language menu component](core/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](core/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](core/header.component.md)  | Reusable header for Alfresco applications. | [Source](../lib/core/layout/components/header/header.component.ts) |
|
||||
| [Sidebar action menu component](core/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](core/sidenav-layout.component.md) | Displays the standard three-region ADF application layout. | [Source](../lib/core/layout/components/sidenav-layout/sidenav-layout.component.ts) |
|
||||
@ -125,12 +125,12 @@ for more information about installing and using the source code.
|
||||
| Name | Description | Source link |
|
||||
| ---- | ----------- | ----------- |
|
||||
| [File size pipe](core/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](core/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](core/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](core/node-name-tooltip.pipe.md) | Formats the tooltip for a Node. | [Source](../lib/core/pipes/node-name-tooltip.pipe.ts) |
|
||||
| [Text highlight pipe](core/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](core/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](core/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
|
||||
|
||||
@ -236,7 +236,7 @@ for more information about installing and using the source code.
|
||||
| [Tag actions component](content-services/tag-actions.component.md) | Shows available actions for tags. | [Source](../lib/content-services/tag/tag-actions.component.ts) |
|
||||
| [Tag list component](content-services/tag-list.component.md) | Shows tags for an item. | [Source](../lib/content-services/tag/tag-list.component.ts) |
|
||||
| [Tag node list component](content-services/tag-node-list.component.md) | Shows tags for a node. | [Source](../lib/content-services/tag/tag-node-list.component.ts) |
|
||||
| [Tree view component](content-services/tree-view.component.md) | Allow a user to show the folder and subfolders of a node in a tree view | [Source](../lib/content-services/tree-view/components/tree-view.component.ts) |
|
||||
| [Tree view component](content-services/tree-view.component.md) | Shows the folder and subfolders of a node as a tree view. | [Source](../lib/content-services/tree-view/components/tree-view.component.ts) |
|
||||
| [File uploading dialog component](content-services/file-uploading-dialog.component.md) | Shows a dialog listing all the files uploaded with the Upload Button or Drag Area components. | [Source](../lib/content-services/upload/components/file-uploading-dialog.component.ts) |
|
||||
| [Upload button component](content-services/upload-button.component.md) | Activates a file upload. | [Source](../lib/content-services/upload/components/upload-button.component.ts) |
|
||||
| [Upload drag area component](content-services/upload-drag-area.component.md) | Adds a drag and drop area to upload files to ACS. | [Source](../lib/content-services/upload/components/upload-drag-area.component.ts) |
|
||||
@ -278,7 +278,6 @@ for more information about installing and using the source code.
|
||||
| [Search query builder service](content-services/search-query-builder.service.md) | Stores information from all the custom search and faceted search widgets, compiles and runs the final search query. | [Source](../lib/content-services/search/search-query-builder.service.ts) |
|
||||
| [Rating service](content-services/rating.service.md) | Manages ratings for items in Content Services. | [Source](../lib/content-services/social/services/rating.service.ts) |
|
||||
| [Tag service](content-services/tag.service.md) | Manages tags in Content Services. | [Source](../lib/content-services/tag/services/tag.service.ts) |
|
||||
| _Tree view service_ | _Not currently documented_ | [Source](../lib/content-services/tree-view/services/tree-view.service.ts) |
|
||||
|
||||
<!--content-services end-->
|
||||
|
||||
|
||||
@ -23,29 +23,29 @@ for more information about installing and using the source code.
|
||||
| [Add permission panel component](add-permission-panel.component.md) | Searches for people or groups to add to the current node permissions. | [Source](../../lib/content-services/permission-manager/components/add-permission/add-permission-panel.component.ts) |
|
||||
| [Add permission component](add-permission.component.md) | Searches for people or groups to add to the current node permissions. | [Source](../../lib/content-services/permission-manager/components/add-permission/add-permission.component.ts) |
|
||||
| [Permission list component](permission-list.component.md) | Shows node permissions as a table. | [Source](../../lib/content-services/permission-manager/components/permission-list/permission-list.component.ts) |
|
||||
| [Search check list component](search-check-list.component.md) | Implements a checklist [widget](../../e2e/pages/adf/process_services/widgets/widget.ts) for the [Search Filter component](../content-services/search-filter.component.md). | [Source](../../lib/content-services/search/components/search-check-list/search-check-list.component.ts) |
|
||||
| [Search check list component](search-check-list.component.md) | Implements a checklist widget for the Search Filter component. | [Source](../../lib/content-services/search/components/search-check-list/search-check-list.component.ts) |
|
||||
| [Search chip list component](search-chip-list.component.md) | Displays search criteria as a set of "chips". | [Source](../../lib/content-services/search/components/search-chip-list/search-chip-list.component.ts) |
|
||||
| [Search control component](search-control.component.md) | Displays a input text which shows find-as-you-type suggestions. | [Source](../../lib/content-services/search/components/search-control.component.ts) |
|
||||
| [Search date range component](search-date-range.component.md) | Implements a date range [widget](../../e2e/pages/adf/process_services/widgets/widget.ts) for the [Search Filter component](../content-services/search-filter.component.md). | [Source](../../lib/content-services/search/components/search-date-range/search-date-range.component.ts) |
|
||||
| [Search date range component](search-date-range.component.md) | Implements a date range widget for the Search Filter component. | [Source](../../lib/content-services/search/components/search-date-range/search-date-range.component.ts) |
|
||||
| [Search filter component](search-filter.component.md) | Represents a main container component for custom search and faceted search settings. | [Source](../../lib/content-services/search/components/search-filter/search-filter.component.ts) |
|
||||
| [Search number range component](search-number-range.component.md) | Implements a number range [widget](../../e2e/pages/adf/process_services/widgets/widget.ts) for the [Search Filter component](../content-services/search-filter.component.md). | [Source](../../lib/content-services/search/components/search-number-range/search-number-range.component.ts) |
|
||||
| [Search radio component](search-radio.component.md) | Implements a radio button list [widget](../../e2e/pages/adf/process_services/widgets/widget.ts) for the [Search Filter component](../content-services/search-filter.component.md). | [Source](../../lib/content-services/search/components/search-radio/search-radio.component.ts) |
|
||||
| [Search slider component](search-slider.component.md) | Implements a numeric slider [widget](../../e2e/pages/adf/process_services/widgets/widget.ts) for the [Search Filter component](../content-services/search-filter.component.md). | [Source](../../lib/content-services/search/components/search-slider/search-slider.component.ts) |
|
||||
| [Search number range component](search-number-range.component.md) | Implements a number range widget for the Search Filter component. | [Source](../../lib/content-services/search/components/search-number-range/search-number-range.component.ts) |
|
||||
| [Search radio component](search-radio.component.md) | Implements a radio button list widget for the Search Filter component. | [Source](../../lib/content-services/search/components/search-radio/search-radio.component.ts) |
|
||||
| [Search slider component](search-slider.component.md) | Implements a numeric slider widget for the Search Filter component. | [Source](../../lib/content-services/search/components/search-slider/search-slider.component.ts) |
|
||||
| [Search sorting picker component](search-sorting-picker.component.md) | Provides an ability to select one of the predefined sorting definitions for search results: | [Source](../../lib/content-services/search/components/search-sorting-picker/search-sorting-picker.component.ts) |
|
||||
| [Search text component](search-text.component.md) | Implements a text input [widget](../../e2e/pages/adf/process_services/widgets/widget.ts) for the [Search Filter component](../content-services/search-filter.component.md). | [Source](../../lib/content-services/search/components/search-text/search-text.component.ts) |
|
||||
| [Search component](search.component.md) | Searches items for supplied search terms. | [Source](../../lib/content-services/search/components/search.component.ts) |
|
||||
| [Search text component](search-text.component.md) | Implements a text input widget for the Search Filter component. | [Source](../../lib/content-services/search/components/search-text/search-text.component.ts) |
|
||||
| [Search component](search.component.md) | Searches items for supplied search terms. | [Source](../../lib/content-services/search/components/search.component.ts) |
|
||||
| [Sites dropdown component](sites-dropdown.component.md) | Displays a dropdown menu to show and interact with the sites of the current user. | [Source](../../lib/content-services/site-dropdown/sites-dropdown.component.ts) |
|
||||
| [Like component](like.component.md) | Allows a user to add "likes" to an item. | [Source](../../lib/content-services/social/like.component.ts) |
|
||||
| [Rating component](rating.component.md) | Allows a user to add ratings to an item. | [Source](../../lib/content-services/social/rating.component.ts) |
|
||||
| [Tag actions component](tag-actions.component.md) | Shows available actions for tags. | [Source](../../lib/content-services/tag/tag-actions.component.ts) |
|
||||
| [Tag list component](tag-list.component.md) | Shows tags for an item. | [Source](../../lib/content-services/tag/tag-list.component.ts) |
|
||||
| [Tag node list component](tag-node-list.component.md) | Shows tags for a node. | [Source](../../lib/content-services/tag/tag-node-list.component.ts) |
|
||||
| [Tree view component](tree-view.component.md) | Allow a user to show the folder and subfolders of a node in a tree view | [Source](../../lib/content-services/tree-view/components/tree-view.component.ts) |
|
||||
| [Tree view component](tree-view.component.md) | Shows the folder and subfolders of a node as a tree view. | [Source](../../lib/content-services/tree-view/components/tree-view.component.ts) |
|
||||
| [File uploading dialog component](file-uploading-dialog.component.md) | Shows a dialog listing all the files uploaded with the Upload Button or Drag Area components. | [Source](../../lib/content-services/upload/components/file-uploading-dialog.component.ts) |
|
||||
| [Upload button component](upload-button.component.md) | Activates a file upload. | [Source](../../lib/content-services/upload/components/upload-button.component.ts) |
|
||||
| [Upload drag area component](upload-drag-area.component.md) | Adds a drag and drop area to upload files to ACS. | [Source](../../lib/content-services/upload/components/upload-drag-area.component.ts) |
|
||||
| [Upload version button component](upload-version-button.component.md)  | Activates a file version upload. | [Source](../../lib/content-services/upload/components/upload-version-button.component.ts) |
|
||||
| [Version list component](version-list.component.md)  | Displays the version history of a node in a [Version Manager component](../content-services/version-manager.component.md). | [Source](../../lib/content-services/version-manager/version-list.component.ts) |
|
||||
| [Version list component](version-list.component.md)  | Displays the version history of a node in a Version Manager component. | [Source](../../lib/content-services/version-manager/version-list.component.ts) |
|
||||
| [Version manager component](version-manager.component.md)  | Displays the version history of a node with the ability to upload a new version. | [Source](../../lib/content-services/version-manager/version-manager.component.ts) |
|
||||
| [Webscript component](webscript.component.md) | Provides access to Webscript features. | [Source](../../lib/content-services/webscript/webscript.component.ts) |
|
||||
|
||||
@ -73,16 +73,15 @@ for more information about installing and using the source code.
|
||||
| ---- | ----------- | ----------- |
|
||||
| [Content node dialog service](content-node-dialog.service.md) | Displays and manages dialogs for selecting content to open, copy or upload. | [Source](../../lib/content-services/content-node-selector/content-node-dialog.service.ts) |
|
||||
| [Custom resources service](custom-resources.service.md) | Manages Document List information that is specific to a user. | [Source](../../lib/content-services/document-list/services/custom-resources.service.ts) |
|
||||
| [Document actions service](document-actions.service.md) | Implements the document menu actions for the [Document List component](../content-services/document-list.component.md). | [Source](../../lib/content-services/document-list/services/document-actions.service.ts) |
|
||||
| [Document list service](document-list.service.md) | Implements node operations used by the [Document List component](../content-services/document-list.component.md). | [Source](../../lib/content-services/document-list/services/document-list.service.ts) |
|
||||
| [Folder actions service](folder-actions.service.md) | Implements the folder menu actions for the [Document List component](../content-services/document-list.component.md). | [Source](../../lib/content-services/document-list/services/folder-actions.service.ts) |
|
||||
| [Document actions service](document-actions.service.md) | Implements the document menu actions for the Document List component. | [Source](../../lib/content-services/document-list/services/document-actions.service.ts) |
|
||||
| [Document list service](document-list.service.md) | Implements node operations used by the Document List component. | [Source](../../lib/content-services/document-list/services/document-list.service.ts) |
|
||||
| [Folder actions service](folder-actions.service.md) | Implements the folder menu actions for the Document List component. | [Source](../../lib/content-services/document-list/services/folder-actions.service.ts) |
|
||||
| [Node permission dialog service](node-permission-dialog.service.md) | Displays dialogs to let the user set node permissions. | [Source](../../lib/content-services/permission-manager/services/node-permission-dialog.service.ts) |
|
||||
| [Node permission service](node-permission.service.md) | Manages role permissions for content nodes. | [Source](../../lib/content-services/permission-manager/services/node-permission.service.ts) |
|
||||
| [Search filter service](search-filter.service.md) | Registers widgets for use with the [Search Filter component](../content-services/search-filter.component.md). | [Source](../../lib/content-services/search/components/search-filter/search-filter.service.ts) |
|
||||
| [Search filter service](search-filter.service.md) | Registers widgets for use with the Search Filter component. | [Source](../../lib/content-services/search/components/search-filter/search-filter.service.ts) |
|
||||
| [Search query builder service](search-query-builder.service.md) | Stores information from all the custom search and faceted search widgets, compiles and runs the final search query. | [Source](../../lib/content-services/search/search-query-builder.service.ts) |
|
||||
| [Rating service](rating.service.md) | Manages ratings for items in Content Services. | [Source](../../lib/content-services/social/services/rating.service.ts) |
|
||||
| [Tag service](tag.service.md) | Manages tags in Content Services. | [Source](../../lib/content-services/tag/services/tag.service.ts) |
|
||||
| _[Tree view service](../../lib/content-services/tree-view/services/tree-view.service.ts)_ | _Not currently documented_ | [Source](../../lib/content-services/tree-view/services/tree-view.service.ts) |
|
||||
|
||||
<!--content-services end-->
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2018-04-13
|
||||
Last reviewed: 2018-11-12
|
||||
---
|
||||
|
||||
# Document List component
|
||||
@ -54,7 +54,7 @@ Displays the documents from a repository.
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| allowDropFiles | `boolean` | false | Toggle file drop support for rows (see [Upload Directive](../core/upload.directive.md) for further details |
|
||||
| allowDropFiles | `boolean` | false | Toggle file drop support for rows (see [Upload Directive](../core/upload.directive.md) for further details) |
|
||||
| contentActions | `boolean` | false | Toggles content actions for each row |
|
||||
| contentActionsPosition | `string` | "right" | Position of the content actions dropdown menu. Can be set to "left" or "right". |
|
||||
| contextMenuActions | `boolean` | false | Toggles context menus for each row |
|
||||
@ -64,7 +64,7 @@ Displays the documents from a repository.
|
||||
| enableInfiniteScrolling | `boolean` | false | (**Deprecated:** 2.3.0) Set document list to work in infinite scrolling mode |
|
||||
| folderNode | [`MinimalNodeEntryEntity`](../content-services/document-library.model.md) | null | (**Deprecated:** 2.3.0 - use currentFolderId or node) Currently displayed folder node |
|
||||
| imageResolver | `any \| null` | null | Custom image resolver |
|
||||
| includeFields | `string[]` | | Include additional information about the node in the server request.for example: association, isLink, isLocked and others. |
|
||||
| includeFields | `string[]` | | Include additional information about the node in the server request. For example: association, isLink, isLocked and others. |
|
||||
| loading | `boolean` | false | Toggles the loading state and animated spinners for the component. Used in combination with `navigate=false` to perform custom navigation and loading state indication. |
|
||||
| locationFormat | `string` | "/" | The default route for all the location-based columns (if declared). |
|
||||
| maxItems | `number` | | Default value is stored into user preference settings use it only if you are not using the pagination |
|
||||
@ -72,7 +72,7 @@ Displays the documents from a repository.
|
||||
| navigate | `boolean` | true | Toggles navigation to folder content or file preview |
|
||||
| navigationMode | `string` | | User interaction for folder navigation or file preview. Valid values are "click" and "dblclick". Default value: "dblclick" |
|
||||
| node | [`NodePaging`](../../lib/content-services/document-list/models/document-library.model.ts) | null | The Document list will show all the nodes contained in the [NodePaging](../../lib/content-services/document-list/models/document-library.model.ts) entity |
|
||||
| permissionsStyle | [`PermissionStyleModel`](../../lib/content-services/document-list/models/permissions-style.model.ts)`[]` | \[] | Define a set of CSS styles styles to apply depending on the permission of the user on that node. See the [Permission Style model](../../lib/content-services/document-list/models/permissions-style.model.ts) page for further details and examples. |
|
||||
| permissionsStyle | [`PermissionStyleModel`](../../lib/content-services/document-list/models/permissions-style.model.ts)`[]` | \[] | Define a set of CSS styles to apply depending on the permission of the user on that node. See the [Permission Style model](../../lib/content-services/document-list/models/permissions-style.model.ts) page for further details and examples. |
|
||||
| rowFilter | `any \| null` | null | Custom row filter |
|
||||
| rowStyle | `string` | | The inline style to apply to every row. See the Angular NgStyle docs for more details and usage examples. |
|
||||
| rowStyleClass | `string` | | The CSS class to apply to every row |
|
||||
@ -569,7 +569,7 @@ This column displays a clickable location link pointing to the parent path of th
|
||||
|
||||
**Important note**:
|
||||
|
||||
_For granular permissions, the Location Column may or may not the render link location_
|
||||
_For granular permissions, the Location Column may or may not render the link location_
|
||||
|
||||
You would normally use this with custom navigation or when displaying content from sources like:
|
||||
|
||||
|
||||
@ -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)
|
||||
|
||||
BIN
docs/docassets/images/app-started.jpg
Normal file
BIN
docs/docassets/images/app-started.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
BIN
docs/docassets/images/login-customized-step-1.jpg
Normal file
BIN
docs/docassets/images/login-customized-step-1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
BIN
docs/docassets/images/login-customized.jpg
Normal file
BIN
docs/docassets/images/login-customized.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
BIN
docs/docassets/images/login.jpg
Normal file
BIN
docs/docassets/images/login.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
BIN
docs/docassets/images/yeoman-alfresco-adf-app.jpg
Normal file
BIN
docs/docassets/images/yeoman-alfresco-adf-app.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
@ -14,12 +14,12 @@ The tutorials are graded as follows:
|
||||
|
||||
| Name | Level | Abstract |
|
||||
| -- | -- | -- |
|
||||
| [**Preparing the development environment**](preparing-environment.md) | Beginner | Here you will find the prerequisites for all the tutorials and descriptions of the entire documentation. This document contains the development environment description, along with the details of the suggested versions for each tool, library and module. |
|
||||
| [**Creating your first ADF application**](creating-your-first-adf-application.md) | Basic | This tutorial shows you how to set up your development environment and create an ADF application. |
|
||||
| [**Creating your ADF application using Yeoman**](creating-the-app-using-yeoman.md) | Basic | In this tutorial you are going to see how to create an ADF application from scratch, using the [Yeoman scaffolding tool](http://yeoman.io/). This is a "getting started" task that should enable you to start developing your own ADF application. |
|
||||
| [**Creating your Alfresco JavaScript application**](creating-javascript-app-using-alfresco-js-api.md) | Basic | In this tutorial you will learn how to create an application in JavaScript from scratch to interact with Alfresco. This is a "getting started" task that should enable you to start developing your own JavaScript application on top of Alfresco Content Services or Alfresco Process Services. |
|
||||
| [**Adding a new component**](new-component.md) | Basic | By definition, a _component_ controls a patch of screen called a _view_. For example, individual components define and control menus, tabs, forms, buttons and every simple or complex portion ofan application's layout. In this tutorial, you will learn how to create a component using [Angular CLI](https://cli.angular.io/) within an existing application. |
|
||||
| [**Adding a new view**](new-view.md) | Beginner | Every application developed in Angular is a single page application where the concepts of _view_ and _routing_ play a key role in the user experience. Being a single page application, the navigation between the different layouts (called _views_) is enabled through the _routing_. In this tutorial you will learn how to create a new view in your application and how to access it using a defined endpoint. |
|
||||
| [**Using components**](using-components.md) | Beginner | There are three different ways to use, extend and configure an ADF component: configuration properties, event listeners, and content projection / HTML extensions. In this tutorial you will see a practical example of each approach using the [Login component](../core/login.component.md). |
|
||||
| [**Using ADF Components**](using-components.md) | Basic | In this tutorial you will learn how to extend, use and configure ADF Components. |
|
||||
| [**Basic theming**](basic-theming.md) | Beginner | As detailed in the [user guide page about theming](../user-guide/theming.md), you can easily customize the [Cascading Style Sheets](https://en.wikipedia.org/wiki/Cascading_Style_Sheets) used by an ADF application. In this tutorial you will see how to modify the CSS, using a step-by-step approach. The focus of this tutorial is [ADF apps built using Yeoman](./creating-the-app-using-yeoman.md), but you can use the same principles to customize the themes in any ADF application. |
|
||||
| [**Customizing the Login component**](customising-login.md) | Intermediate | In this tutorial you will learn how to customize the [`Login` component](https://alfresco.github.io/adf-component-catalog/components/LoginComponent.html) following the [technical documentation](https://alfresco.github.io/adf-component-catalog/components/LoginComponent.html). The task will be very simple. See the documentation for further details about customizing this component, along with examples. |
|
||||
| [**Working with a Data Table**](working-with-data-table.md) | Intermediate | In this tutorial you will learn how to populate a [`DataTable` component](https://alfresco.github.io/adf-component-catalog/components/DataTableComponent.html) with custom data from a generic back-end service or third party API. As an example we are going to use data from one of the available services on Alfresco Content Services. However, the procedure is much the same if want to use an Alfresco Process Services endpoint or a third party API. |
|
||||
|
||||
99
docs/tutorials/creating-your-first-adf-application.md
Normal file
99
docs/tutorials/creating-your-first-adf-application.md
Normal file
@ -0,0 +1,99 @@
|
||||
---
|
||||
Level: Basic
|
||||
---
|
||||
|
||||
# Creating your first ADF application
|
||||
|
||||
This tutorial shows you how to set up your development environment and create an ADF application.
|
||||
|
||||
In order to get up and running with ADF development, you will need to install a few prerequisites: `node.js`, `Yeoman` and a code editor.
|
||||
Once you have the prerequisites installed, you need to create the application using the ADF Yeoman generator, then configure your ADF application to point to your Alfresco Content Services repository.
|
||||
|
||||
## Install node.js
|
||||
|
||||
You need the latest `node.js` `8.x` release, which you can download from [https://nodejs.org/en/](https://nodejs.org/en/). Choose the installer for your OS and follow the install instructions. Once completed, open a terminal and verify the installation with the following command:
|
||||
|
||||
node -v
|
||||
|
||||
Node `10.x` should work too, but we have had a few reports that it might not work out of the box for everyone.
|
||||
|
||||
**TIP**: If you are planning to do extensive development with ADF, `node.js` and Angular, you might consider installing a version manager for `node.js` such as [n](https://github.com/tj/n) or [nvm](https://github.com/creationix/nvm/). This tool will allow you to have multiple `node.js` versions installed at the same time, and easily switch between versions.
|
||||
|
||||
## Installing a code editor
|
||||
|
||||
All Angular development will be done using [Typescript](https://www.typescriptlang.org). With this in mind, it a great thing to have tools that make development a little easier, but really any text editor will do just fine.
|
||||
|
||||
We recommend [Visual Studio Code](http://code.visualstudio.com) - it's a free, lightweight and *very* powerful tool from Microsoft that works well with Angular development and has a [big ecosystem of plugins](https://marketplace.visualstudio.com/VSCode) to make the developer experience even better.
|
||||
|
||||
Other recommendations include IntelliJ IDEA or WebStorm from [JetBrains](https://www.jetbrains.com) *but note that the community edition does not support [Typescript](https://www.typescriptlang.org).*
|
||||
|
||||
|
||||
## Install ADF Yeoman generator
|
||||
|
||||
**Note:** If you're on Linux or macOS you might need to run these commands with `sudo`
|
||||
|
||||
|
||||
|
||||
|
||||
You need to ensure you have `Yeoman` installed by running `yo --version`. If this is not in your system you should run:
|
||||
|
||||
npm install -g yo
|
||||
|
||||
Now install the latest version of the `generator-alfresco-adf-app`:
|
||||
|
||||
npm install -g generator-alfresco-adf-app
|
||||
|
||||
|
||||
## Create your first ADF application
|
||||
|
||||
Now that we have all the prerequisites in order, it's time to generate an application:
|
||||
|
||||
yo alfresco-adf-app
|
||||
|
||||
Enter a name and choose `Content Services` as the application blueprint, then enter `Y` to install the dependencies.
|
||||
|
||||
The `Yeoman` generator will now create a new project and install all dependencies required for your application.
|
||||
|
||||
## Configure ADF to work with Alfresco Content Services
|
||||
|
||||
The next step is to open up the newly-created project in your code editor, and open the file `proxy.conf.json`. Change the `target` property in this file so it points to your Alfresco Content Services URL and port. Please refer to your installation guide to find this URL, or if you're running an online trial you will find the information in the email.
|
||||
|
||||
Modify `"target": "http://localhost:8080",` so that it matches your URL and save the file.
|
||||
|
||||
Please note that you do not need `/alfresco` at the end of the target URL. Let's say you've launched Alfresco Content Services 6.1 using [Docker Compose](https://docs.alfresco.com/6.0/tasks/deploy-docker-compose.html). Your Alfresco Content Services repository might be available at `http://localhost:8082/alfresco`. In this case you will want the `proxy.conf.json` file to look like this:
|
||||
|
||||
```json
|
||||
{
|
||||
"/alfresco": {
|
||||
"target": "http://localhost:8082",
|
||||
"secure": false,
|
||||
"changeOrigin": true
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Start the application
|
||||
|
||||
To run the project, open a terminal and run
|
||||
|
||||
npm start
|
||||
|
||||
A browser will automatically open up at `http://localhost:4200`.
|
||||
|
||||
|
||||
|
||||
Click the key icon in the side navigation and you can now log in!
|
||||
|
||||
*Note:* If you're running an online trial you can find your login credentials in the welcome email.
|
||||
|
||||
Take a few minutes to explore your application. You have the basic features: Browsing the repository, uploading and previewing documents.
|
||||
|
||||
|
||||
# Next step
|
||||
|
||||
Congratulations! You're now ready to start developing your first ADF application!
|
||||
|
||||
In the next tutorial you will explore how you can extend, use and configure ADF Components by customizing the login screen.
|
||||
|
||||
* [Extend, use and configure ADF Components](customising-login.md)
|
||||
|
||||
@ -1,148 +1,174 @@
|
||||
---
|
||||
Level: Beginner
|
||||
Level: Basic
|
||||
---
|
||||
|
||||
# Using components
|
||||
# Using ADF Components
|
||||
|
||||
There are three different ways to use, extend and configure an ADF component: configuration properties, event listeners, and content projection / HTML extensions. In this tutorial you will see a practical example of each approach using the [Login component](../core/login.component.md).
|
||||
In this tutorial you will learn how to extend, use and configure ADF Components.
|
||||
|
||||
The ADF documentation is always a good starting point when you plan to use a component. In general,
|
||||
there are three different ways to use, extend and configure an ADF component:
|
||||
|
||||
|
||||
1. Configuration properties.
|
||||
2. Event listeners.
|
||||
3. Content projection / HTML extensions.
|
||||
We will be customizing the [Login component](../core/login.component.md) as an example, where we will remove the `Remember me`, `Need Help?` and `Register` links in the footer and setup an event listener that displays an alert when the login form is submitted. We will finish off by setting up a custom footer.
|
||||
|
||||
## Configuration properties
|
||||
The final result will look like this:
|
||||
|
||||
Angular components can easily be configured via properties in the HTML template. In this example we will
|
||||
work with the "Remember me" checkbox and "Need Help?" and "Register" links in the footer of the [Login component](../core/login.component.md).
|
||||
|
||||
|
||||
To prepare for the task, make sure you have your ADF application up and running by executing `npm start`
|
||||
in a terminal from the root folder of the project. Access the login page using your browser and edit the [`login.component`](../core/login.component.md)`.html` file stored in the `src/app/.../login` folder. The content of the [`login.component`](../core/login.component.md)`.html` file should look like the following:
|
||||
We have carefully picked these three customizations because they cover the three fundamental ways you can ways to use, extend and configure ADF Components:
|
||||
|
||||
1. Configuration Properties
|
||||
2. Event Listeners
|
||||
3. HTML Extensions / _Content Projection_
|
||||
|
||||
You should always consult the documentation for the component you are looking to use. For this exercise it would be useful to open a browser window with the [Login Component](../core/login.component.md)
|
||||
documentation.
|
||||
|
||||
Let's do a practical example with each approach.
|
||||
|
||||
## Configuration Properties
|
||||
|
||||
Angular components can easily be configured via properties in the HTML template. In this example we will remove the `Remember me`, `Need Help?` and `Register` links in the footer.
|
||||
|
||||
Make sure you have the application running from the [previous tutorial](creating-your-first-adf-application.md).
|
||||
|
||||
Open the project in a code editor. It's best to open the entire folder so it will be easier to switch between files.
|
||||
|
||||
Open the `src/app/login/login.component.html` file. The contents will look like this:
|
||||
|
||||
```html
|
||||
<adf-login
|
||||
copyrightText="© 2017 - 2018 Alfresco Software, Inc. All rights reserved."
|
||||
providers="ECM"
|
||||
...
|
||||
>
|
||||
copyrightText="© 2017 Alfresco Software, Inc. All Rights Reserved."
|
||||
successRoute="/documentlist">
|
||||
</adf-login>
|
||||
```
|
||||
|
||||
Looking at the documentation, you can see that the `<adf-login/>` component has a lot of different
|
||||
properties. As an example we will toggle `showRememberMe` and `showLoginActions` (all set to `true`
|
||||
by default). If you haven't specified any values for these properties in the source code then set them both
|
||||
to `false` using the syntax shown in the example below. If you have specified values in the source code then
|
||||
set them to the opposite value in the HTML template (set them to `true` if they are `false` in the source
|
||||
and vice versa).
|
||||
Looking at the documentation, we can see that the `<adf-login/>` component has a lot of different properties. The ones we are interested in are `showRememberMe` and `showLoginActions`. These are set to `true` by default, but we can easily change them like this:
|
||||
|
||||
```html
|
||||
<adf-login
|
||||
copyrightText="© 2017 - 2018 Alfresco Software, Inc. All rights reserved."
|
||||
providers="ECM"
|
||||
[showRememberMe]="..."
|
||||
[showLoginActions]="..."
|
||||
...
|
||||
>
|
||||
[showRememberMe]="false"
|
||||
[showLoginActions]="false"
|
||||
copyrightText="© 2017 Alfresco Software, Inc. All Rights Reserved."
|
||||
successRoute="/documentlist">
|
||||
</adf-login>
|
||||
```
|
||||
|
||||
After saving the HTML template, you will see the login page updated with a different layout matching the
|
||||
new property values.
|
||||
Save the file. The browser will automatically reload once the file is saved. The result will look like this:
|
||||
|
||||
**Note:** The two new properties are specified with `[]` around them. There are three ways to configure a
|
||||
property:
|
||||
|
||||
|
||||
1. `[property]=""` This sets the property using an expression or another property from the Typescript
|
||||
controller. Use this syntax for boolean expressions or variables.
|
||||
2. `property=""` This value will be passed as raw text.
|
||||
3. `[(property)]` This is called _banana in a box_ and is used for two way binding.
|
||||
**Note:** The two new properties are specified with `[]` around them. There are three ways to configure a component property:
|
||||
|
||||
## Event listeners
|
||||
1. `[property]=""` This will be an expression or property from the typescript controller. Use this for boolean expressions or variables
|
||||
2. `property=""` This will be passed in as raw text
|
||||
3. `[(property)]` This is called _banana in a box_ and is used for two way binding
|
||||
|
||||
Now that you've successfully configured properties on the `<adf-login/>` component, it's time to look at events.
|
||||
## Event Listeners
|
||||
|
||||
Looking now at the events section of the
|
||||
[Login component documentation](https://alfresco.github.io/adf-component-catalog/components/LoginComponent.html)
|
||||
we can see that it emits three events: `success`, `error` and `executeSubmit`.
|
||||
Now that we've successfully configured properties on the `<adf-login/>` component, it's time to look at events.
|
||||
|
||||
We can subscribe to these events and have our custom code executed when they are emitted. We will
|
||||
hook into the `executeSubmit` event and show a simple `alert()` when the form is submitted.
|
||||
Again, looking at the [Login Component](../core/login.component.md)
|
||||
docs, we can see that it emits three events: `success`, `error` and `executeSubmit`.
|
||||
|
||||
Back in the [`login.component`](../core/login.component.md)`.html` file, add `(success)="mySuccessMethod($event)"` to the `<adf-login/>` component (the position is not relevant).
|
||||
We can subscribe to these events and have our custom code executed when these events are emitted. Let's hook into the `executeSubmit` and do a simple `alert()` when the form is submitted.
|
||||
|
||||
Open `src/app/login/login.component.html` and add `(success)="mySuccessMethod($event)"` to the `<adf-login/>` component:
|
||||
|
||||
```html
|
||||
<adf-login
|
||||
...
|
||||
(executeSubmit)="myExecuteSubmitMethod($event)"
|
||||
>
|
||||
[showRememberMe]="false"
|
||||
[showLoginActions]="false"
|
||||
(success)="mySuccessMethod($event)"
|
||||
copyrightText="© 2017 Alfresco Software, Inc. All Rights Reserved."
|
||||
successRoute="/documentlist">
|
||||
</adf-login>
|
||||
```
|
||||
|
||||
Next, implement `myExecuteSubmitMethod` in the Typescript class that defines the component. Edit
|
||||
the [`login.component`](../core/login.component.md)`.ts` file stored in the same `src/app/.../login` folder and add the implementation
|
||||
of `myExecuteSubmitMethod` as follows:
|
||||
Next we need to implement `mySuccessMethod` in the typescript. Open `src/app/login/login.component.ts` and add a new method:
|
||||
|
||||
```ts
|
||||
// Add this!
|
||||
mySuccessMethod(event: any) {
|
||||
alert('Form was submitted!');
|
||||
console.log(event);
|
||||
}
|
||||
```
|
||||
|
||||
The complete file should now look like this:
|
||||
|
||||
```ts
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
...
|
||||
selector: 'app-login',
|
||||
templateUrl: './login.component.html',
|
||||
styleUrls: ['./login.component.css']
|
||||
})
|
||||
export class LoginComponent {
|
||||
|
||||
...
|
||||
|
||||
// Add this!
|
||||
myExecuteSubmitMethod(event: any) {
|
||||
mySuccessMethod(event: any) {
|
||||
alert('Form was submitted!');
|
||||
console.log(event);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
After saving both files, the [login component](../core/login.component.md) will be refreshed in your browser. Enter random values for
|
||||
the username and password and you should see the alert after pressing the submit button. Looking in the
|
||||
console of the browser, you'll see the `event` data containing all the details of the form.
|
||||
Save the files, go to the [login component,](../core/login.component.md) enter a valid username and password and you should now see an alert. Looking in the console in the browser, you'll see the event data. Here we get all the details for the form.
|
||||
|
||||
**Bonus objective:** Add a custom logo and background to the login view using the relevant properties
|
||||
described in the documentation.
|
||||
## Content Projection / HTMl Extensions
|
||||
|
||||
## Content projection / HTML extensions
|
||||
The last way a component can be configured or extended is through an approach called Content Projection. This allows components to put placeholders in their template, allowing developers to "project" their own code or components into pre-defined locations within the component.
|
||||
|
||||
The final way to configure or extend a component is through an approach called _Content projection_. This
|
||||
involves adding placeholders to a component template, allowing developers to "project" their own code or
|
||||
components into pre-defined locations within the component.
|
||||
|
||||
In regular HTML, elements can be nested. For example:
|
||||
In normal HTML, elements can be nested, for example:
|
||||
|
||||
```html
|
||||
<div>
|
||||
<p>
|
||||
<b>Here we have some bold text</b>
|
||||
</p>
|
||||
<p>
|
||||
<b>Here we have some bold text</b>
|
||||
</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
We can use the same approach with ADF components to inject custom code or entire components into another
|
||||
component. The documentation shows which targets are available. For example, the `<adf-login/>` component
|
||||
supports two targets: `login-header` and `login-footer`. Let's add a simple "Hello World" message in the
|
||||
footer. Edit the template [`login.component`](../core/login.component.md)`.html` and add a new tag _inside_ the `<adf-login/>` tag:
|
||||
We can use the same approach with ADF Components to inject custom code or whole components into the ADF component.
|
||||
|
||||
The documentation gives information about which targets are in place. Components that support content
|
||||
project have a
|
||||
[Transclusions](../user-guide/transclusion.md)
|
||||
section in the doc page with all the relevant details.
|
||||
|
||||
The `<adf-login/>` component supports two targets: `login-header` and `login-footer`.
|
||||
|
||||
Let's add a simple Hello World message in the footer. Open the template `src/app/login/login.component.html` and add a new tag _inside_ the `<adf-login/>` HTML tag:
|
||||
|
||||
```html
|
||||
<adf-login
|
||||
...
|
||||
>
|
||||
<login-footer>
|
||||
<ng-template>
|
||||
Hello World!
|
||||
</ng-template>
|
||||
</login-footer>
|
||||
[showRememberMe]="false"
|
||||
[showLoginActions]="false"
|
||||
(executeSubmit)="myExecuteSubmitMethod($event)"
|
||||
copyrightText="© 2017 Alfresco Software, Inc. All Rights Reserved."
|
||||
successRoute="/documentlist">
|
||||
<login-footer>
|
||||
<ng-template>
|
||||
Hello World!
|
||||
</ng-template>
|
||||
</login-footer>
|
||||
</adf-login>
|
||||
```
|
||||
|
||||
Make sure that you place the `<login-footer/>` tag _inside_ the `<adf-login/>` tag. Inside the
|
||||
`<login-footer/>` or `<login-header/>` tags you can put anything you want, as long as you wrap it inside
|
||||
an `<ng-template/>` tag. You can also add custom or 3rd party components.
|
||||
Be careful that you place the `<login-footer/>` tag _inside_ the `<adf-login/>` tag.
|
||||
|
||||
When you are done, save the template and you should see a "Hello World!" message in the footer of your
|
||||
login page when the browser refreshes.
|
||||
Inside the `<login-footer/>` or `<login-header/>` tags we can put anything we want, as long as we wrap it inside an `<ng-template/>` tag. We can also source in custom or 3rd party components.
|
||||
|
||||
### Bonus objective: Add a custom logo and background to the login screen
|
||||
|
||||
Are you up for a challenge? Explore the [Login component](../core/login.component.md)
|
||||
docs to find out how you can change the logo and background image!
|
||||
|
||||
# Next steps
|
||||
|
||||
We have a number of tutorials for you to explore. Here are a few suggested ones to try next:
|
||||
|
||||
- [Basic theming](basic-theming.md)
|
||||
- [Create a new page](new-view.md)
|
||||
- [Adding a new component](new-component.md)
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
{ "title": "Walkthrough - adding indicators to highlight information about a node", "file": "metadata-indicators.md" },
|
||||
{ "title": "Tutorials", "file": "tutorialIndex.md",
|
||||
"children": [
|
||||
{ "title": "Preparing the development environment", "file": "preparing-environment.md"},
|
||||
{ "title": "Creating your first ADF application", "file": "creating-your-first-adf-application.md"},
|
||||
{ "title": "Creating your ADF application using Yeoman", "file": "creating-the-app-using-yeoman.md"},
|
||||
{ "title": "Creating your JavaScript application using alfresco-js-api", "file": "creating-javascript-app-using-alfresco-js-api.md"},
|
||||
{ "title": "Adding a new component", "file": "new-component.md"},
|
||||
|
||||
@ -60,7 +60,7 @@ export class DocumentListComponent implements OnInit, OnChanges, OnDestroy, Afte
|
||||
@ContentChild(DataColumnListComponent)
|
||||
columnList: DataColumnListComponent;
|
||||
|
||||
/** Include additional information about the node in the server request.for example: association, isLink, isLocked and others. */
|
||||
/** Include additional information about the node in the server request. For example: association, isLink, isLocked and others. */
|
||||
@Input()
|
||||
includeFields: string[];
|
||||
|
||||
@ -68,7 +68,7 @@ export class DocumentListComponent implements OnInit, OnChanges, OnDestroy, Afte
|
||||
@Input()
|
||||
display: string = DisplayMode.List;
|
||||
|
||||
/** Define a set of CSS styles styles to apply depending on the permission
|
||||
/** Define a set of CSS styles to apply depending on the permission
|
||||
* of the user on that node. See the Permission Style model
|
||||
* page for further details and examples.
|
||||
*/
|
||||
@ -123,7 +123,7 @@ export class DocumentListComponent implements OnInit, OnChanges, OnDestroy, Afte
|
||||
@Input()
|
||||
emptyFolderImageUrl: string = './assets/images/empty_doc_lib.svg';
|
||||
|
||||
/** Toggle file drop support for rows (see Upload Directive for further details */
|
||||
/** Toggle file drop support for rows (see Upload Directive for further details) */
|
||||
@Input()
|
||||
allowDropFiles: boolean = false;
|
||||
|
||||
|
||||
@ -115,6 +115,7 @@
|
||||
"view-util",
|
||||
"clipboard",
|
||||
"external-alfresco",
|
||||
"content-node-share"
|
||||
"content-node-share",
|
||||
"tree-view"
|
||||
]
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user