[ADF-1549] Initial files for new doc format (#2342)

This commit is contained in:
Andy Stark
2017-09-18 10:47:16 +01:00
committed by Eugenio Romano
parent 43277148b2
commit 7157d60ed0
42 changed files with 2815 additions and 6 deletions

610
docIndex.md Normal file
View File

@@ -0,0 +1,610 @@
# Component Docs Index
Below is an index of the documentation for each component library. The [User Guide](#user-guide)
section discusses particular techniques in depth. The other sections are references for the ADF
components. Items listed as **Documented** have descriptive documentation. For the **Undocumented** items,
the links lead to the appropriate code source file.
## Contents
- [User Guide](#user-guide)
- [ng2-activiti-analytics](#ng2-activiti-analytics)
- [ng2-activiti-diagrams](#ng2-activiti-diagrams)
- [ng2-activiti-form](#ng2-activiti-form)
- [ng2-activiti-processlist](#ng2-activiti-processlist)
- [ng2-activiti-tasklist](#ng2-activiti-tasklist)
- [ng2-alfresco-core](#ng2-alfresco-core)
- [ng2-alfresco-datatable](#ng2-alfresco-datatable)
- [ng2-alfresco-documentlist](#ng2-alfresco-documentlist)
- [ng2-alfresco-login](#ng2-alfresco-login)
- [ng2-alfresco-search](#ng2-alfresco-search)
- [ng2-alfresco-social](#ng2-alfresco-social)
- [ng2-alfresco-tag](#ng2-alfresco-tag)
- [ng2-alfresco-upload](#ng2-alfresco-upload)
- [ng2-alfresco-userinfo](#ng2-alfresco-userinfo)
- [ng2-alfresco-viewer](#ng2-alfresco-viewer)
- [ng2-alfresco-webscript](#ng2-alfresco-webscript)
## User guide
<!-- guide start -->
- [Form Extensibility and Customisation](docs/extensibility.md)
- [Form Stencils with Angular 2](docs/stencils.md)
- [Theming](docs/theming.md)
- [Walkthrough: adding indicators to highlight information about a node](docs/metadata-indicators.md)
<!-- guide end -->
[(Back to Contents)](#contents)
## ng2-activiti-analytics
Contains the Analytics component and other related items. See the library's
[README file](ng2-components/ng2-activiti-analytics/README.md)
for more information about installing and using the source code.
<!-- xxxng2-activiti-analytics start -->
**Documented**
- [Analytics component](ng2-components/ng2-activiti-analytics/README.md)
- [Analytics report list component](ng2-components/ng2-activiti-analytics/README.md)
- [Analytics generator component](ng2-components/ng2-activiti-analytics/README.md)
**Undocumented**
- [Analytics report heat map component](ng2-components/ng2-activiti-analytics/src/components/analytics-report-heat-map.component.ts)
- [Analytics report parameters component](ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.ts)
- [Checkbox widget](ng2-components/ng2-activiti-analytics/src/components/widgets/checkbox/checkbox.widget.ts)
- [Date range widget](ng2-components/ng2-activiti-analytics/src/components/widgets/date-range/date-range.widget.ts)
- [Dropdown widget](ng2-components/ng2-activiti-analytics/src/components/widgets/dropdown/dropdown.widget.ts)
- [Duration widget](ng2-components/ng2-activiti-analytics/src/components/widgets/duration/duration.widget.ts)
- [Number widget](ng2-components/ng2-activiti-analytics/src/components/widgets/number/number.widget.ts)
- [Widget component](ng2-components/ng2-activiti-analytics/src/components/widgets/widget.component.ts)
- [Analytics service](ng2-components/ng2-activiti-analytics/src/services/analytics.service.ts)
<!-- ng2-activiti-analytics end -->
[(Back to Contents)](#contents)
## ng2-activiti-diagrams
Contains the Diagram component and other related items. See the library's
[README file](ng2-components/ng2-activiti-diagrams/README.md)
for more information about installing and using the source code.
<!-- xxxng2-activiti-diagrams start -->
**Documented**
- [Diagram component](ng2-components/ng2-activiti-diagrams/README.md)
**Undocumented**
- [Diagram alfresco publish task component](ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-alfresco-publish-task.component.ts)
- [Diagram box publish task component](ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-box-publish-task.component.ts)
- [Diagram business rule task component](ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-business-rule-task.component.ts)
- [Diagram camel task component](ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-camel-task.component.ts)
- [Diagram container service task component](ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-container-service-task.component.ts)
- [Diagram google drive publish task component](ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-google-drive-publish-task.component.ts)
- [Diagram manual task component](ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-manual-task.component.ts)
- [Diagram mule task component](ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-mule-task.component.ts)
- [Diagram receive task component](ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-receive-task.component.ts)
- [Diagram rest call task component](ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-rest-call-task.component.ts)
- [Diagram script task component](ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-script-task.component.ts)
- [Diagram send task component](ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-send-task.component.ts)
- [Diagram service task component](ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-service-task.component.ts)
- [Diagram task component](ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-task.component.ts)
- [Diagram user task component](ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-user-task.component.ts)
- [Diagram boundary event component](ng2-components/ng2-activiti-diagrams/src/components/boundary-events/diagram-boundary-event.component.ts)
- [Diagram throw event component](ng2-components/ng2-activiti-diagrams/src/components/boundary-events/diagram-throw-event.component.ts)
- [Diagram sequence flow component](ng2-components/ng2-activiti-diagrams/src/components/diagram-sequence-flow.component.ts)
- [Diagram end event component](ng2-components/ng2-activiti-diagrams/src/components/events/diagram-end-event.component.ts)
- [Diagram event component](ng2-components/ng2-activiti-diagrams/src/components/events/diagram-event.component.ts)
- [Diagram start event component](ng2-components/ng2-activiti-diagrams/src/components/events/diagram-start-event.component.ts)
- [Diagram event gateway component](ng2-components/ng2-activiti-diagrams/src/components/gateways/diagram-event-gateway.component.ts)
- [Diagram exclusive gateway component](ng2-components/ng2-activiti-diagrams/src/components/gateways/diagram-exclusive-gateway.component.ts)
- [Diagram gateway component](ng2-components/ng2-activiti-diagrams/src/components/gateways/diagram-gateway.component.ts)
- [Diagram inclusive gateway component](ng2-components/ng2-activiti-diagrams/src/components/gateways/diagram-inclusive-gateway.component.ts)
- [Diagram parallel gateway component](ng2-components/ng2-activiti-diagrams/src/components/gateways/diagram-parallel-gateway.component.ts)
- [Diagram container icon event component](ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-container-icon-event.component.ts)
- [Diagram icon alfresco publish task component](ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-alfresco-publish-task.component.ts)
- [Diagram icon box publish task component](ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-box-publish-task.component.ts)
- [Diagram icon business rule task component](ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-business-rule-task.component.ts)
- [Diagram icon camel task component](ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-camel-task.component.ts)
- [Diagram icon error component](ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-error.component.ts)
- [Diagram icon google drive publish task component](ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-google-drive-publish-task.component.ts)
- [Diagram icon manual task component](ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-manual-task.component.ts)
- [Diagram icon message component](ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-message.component.ts)
- [Diagram icon mule task component](ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-mule-task.component.ts)
- [Diagram icon receive task component](ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-receive-task.component.ts)
- [Diagram icon rest call task component](ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-rest-call-task.component.ts)
- [Diagram icon script task component](ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-script-task.component.ts)
- [Diagram icon send task component](ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-send-task.component.ts)
- [Diagram icon service task component](ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-service-task.component.ts)
- [Diagram icon signal component](ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-signal.component.ts)
- [Diagram icon timer component](ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-timer.component.ts)
- [Diagram icon user task component](ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-user-task.component.ts)
- [Diagram intermediate catching event component](ng2-components/ng2-activiti-diagrams/src/components/intermediate-catching-events/diagram-intermediate-catching-event.component.ts)
- [Raphael icon alfresco publish component](ng2-components/ng2-activiti-diagrams/src/components/raphael/icons/raphael-icon-alfresco-publish.component.ts)
- [Raphael icon box publish component](ng2-components/ng2-activiti-diagrams/src/components/raphael/icons/raphael-icon-box-publish.component.ts)
- [Raphael icon business rule component](ng2-components/ng2-activiti-diagrams/src/components/raphael/icons/raphael-icon-business-rule.component.ts)
- [Raphael icon camel component](ng2-components/ng2-activiti-diagrams/src/components/raphael/icons/raphael-icon-camel.component.ts)
- [Raphael icon error component](ng2-components/ng2-activiti-diagrams/src/components/raphael/icons/raphael-icon-error.component.ts)
- [Raphael icon google drive publish component](ng2-components/ng2-activiti-diagrams/src/components/raphael/icons/raphael-icon-google-drive-publish.component.ts)
- [Raphael icon manual component](ng2-components/ng2-activiti-diagrams/src/components/raphael/icons/raphael-icon-manual.component.ts)
- [Raphael icon message component](ng2-components/ng2-activiti-diagrams/src/components/raphael/icons/raphael-icon-message.component.ts)
- [Raphael icon mule component](ng2-components/ng2-activiti-diagrams/src/components/raphael/icons/raphael-icon-mule.component.ts)
- [Raphael icon receive component](ng2-components/ng2-activiti-diagrams/src/components/raphael/icons/raphael-icon-receive.component.ts)
- [Raphael icon rest call component](ng2-components/ng2-activiti-diagrams/src/components/raphael/icons/raphael-icon-rest-call.component.ts)
- [Raphael icon script component](ng2-components/ng2-activiti-diagrams/src/components/raphael/icons/raphael-icon-script.component.ts)
- [Raphael icon send component](ng2-components/ng2-activiti-diagrams/src/components/raphael/icons/raphael-icon-send.component.ts)
- [Raphael icon service component](ng2-components/ng2-activiti-diagrams/src/components/raphael/icons/raphael-icon-service.component.ts)
- [Raphael icon signal component](ng2-components/ng2-activiti-diagrams/src/components/raphael/icons/raphael-icon-signal.component.ts)
- [Raphael icon timer component](ng2-components/ng2-activiti-diagrams/src/components/raphael/icons/raphael-icon-timer.component.ts)
- [Raphael icon user component](ng2-components/ng2-activiti-diagrams/src/components/raphael/icons/raphael-icon-user.component.ts)
- [Raphael circle component](ng2-components/ng2-activiti-diagrams/src/components/raphael/raphael-circle.component.ts)
- [Raphael cross component](ng2-components/ng2-activiti-diagrams/src/components/raphael/raphael-cross.component.ts)
- [Raphael flow arrow component](ng2-components/ng2-activiti-diagrams/src/components/raphael/raphael-flow-arrow.component.ts)
- [Raphael multiline text component](ng2-components/ng2-activiti-diagrams/src/components/raphael/raphael-multiline-text.component.ts)
- [Raphael pentagon component](ng2-components/ng2-activiti-diagrams/src/components/raphael/raphael-pentagon.component.ts)
- [Raphael plus component](ng2-components/ng2-activiti-diagrams/src/components/raphael/raphael-plus.component.ts)
- [Raphael rect component](ng2-components/ng2-activiti-diagrams/src/components/raphael/raphael-rect.component.ts)
- [Raphael rhombus component](ng2-components/ng2-activiti-diagrams/src/components/raphael/raphael-rhombus.component.ts)
- [Raphael text component](ng2-components/ng2-activiti-diagrams/src/components/raphael/raphael-text.component.ts)
- [Raphael service](ng2-components/ng2-activiti-diagrams/src/components/raphael/raphael.service.ts)
- [Diagram event subprocess component](ng2-components/ng2-activiti-diagrams/src/components/structural/diagram-event-subprocess.component.ts)
- [Diagram subprocess component](ng2-components/ng2-activiti-diagrams/src/components/structural/diagram-subprocess.component.ts)
- [Diagram lane component](ng2-components/ng2-activiti-diagrams/src/components/swimlanes/diagram-lane.component.ts)
- [Diagram lanes component](ng2-components/ng2-activiti-diagrams/src/components/swimlanes/diagram-lanes.component.ts)
- [Diagram pool component](ng2-components/ng2-activiti-diagrams/src/components/swimlanes/diagram-pool.component.ts)
- [Diagram pools component](ng2-components/ng2-activiti-diagrams/src/components/swimlanes/diagram-pools.component.ts)
- [Diagram tooltip component](ng2-components/ng2-activiti-diagrams/src/components/tooltip/diagram-tooltip.component.ts)
- [Chart model](ng2-components/ng2-activiti-diagrams/src/models/chart.model.ts)
- [Diagram model](ng2-components/ng2-activiti-diagrams/src/models/diagram.model.ts)
- [Report model](ng2-components/ng2-activiti-diagrams/src/models/report.model.ts)
- [Diagram color service](ng2-components/ng2-activiti-diagrams/src/services/diagram-color.service.ts)
- [Diagrams service](ng2-components/ng2-activiti-diagrams/src/services/diagrams.service.ts)
<!-- ng2-activiti-diagrams end -->
[(Back to Contents)](#contents)
## ng2-activiti-form
Contains the Form component and other related items. See the library's
[README file](ng2-components/ng2-activiti-form/README.md)
for more information about installing and using the source code.
<!-- xxxng2-activiti-form start -->
**Documented**
- [Form component](ng2-components/ng2-activiti-form/README.md)
- [Form list component](ng2-components/ng2-activiti-form/README.md)
- [Form service](ng2-components/ng2-activiti-form/README.md)
- [Content widget](ng2-components/ng2-activiti-form/README.md)
**Undocumented**
- [Form field component](ng2-components/ng2-activiti-form/src/components/form-field/form-field.component.ts)
- [Start form component](ng2-components/ng2-activiti-form/src/components/start-form.component.ts)
- [Amount widget](ng2-components/ng2-activiti-form/src/components/widgets/amount/amount.widget.ts)
- [Attach widget](ng2-components/ng2-activiti-form/src/components/widgets/attach/attach.widget.ts)
- [Checkbox widget](ng2-components/ng2-activiti-form/src/components/widgets/checkbox/checkbox.widget.ts)
- [Container widget](ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.model.ts)
- [Container widget](ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.ts)
- [Container column model](ng2-components/ng2-activiti-form/src/components/widgets/core/container-column.model.ts)
- [Container model](ng2-components/ng2-activiti-form/src/components/widgets/core/container.model.ts)
- [Content link model](ng2-components/ng2-activiti-form/src/components/widgets/core/content-link.model.ts)
- [Form field model](ng2-components/ng2-activiti-form/src/components/widgets/core/form-field.model.ts)
- [Form outcome event model](ng2-components/ng2-activiti-form/src/components/widgets/core/form-outcome-event.model.ts)
- [Form outcome model](ng2-components/ng2-activiti-form/src/components/widgets/core/form-outcome.model.ts)
- [Form widget model](ng2-components/ng2-activiti-form/src/components/widgets/core/form-widget.model.ts)
- [Form model](ng2-components/ng2-activiti-form/src/components/widgets/core/form.model.ts)
- [Group user model](ng2-components/ng2-activiti-form/src/components/widgets/core/group-user.model.ts)
- [Group model](ng2-components/ng2-activiti-form/src/components/widgets/core/group.model.ts)
- [Tab model](ng2-components/ng2-activiti-form/src/components/widgets/core/tab.model.ts)
- [Date widget](ng2-components/ng2-activiti-form/src/components/widgets/date/date.widget.ts)
- [Display text widget](ng2-components/ng2-activiti-form/src/components/widgets/display-text/display-text.widget.ts)
- [Document widget](ng2-components/ng2-activiti-form/src/components/widgets/document/document.widget.ts)
- [Dropdown widget](ng2-components/ng2-activiti-form/src/components/widgets/dropdown/dropdown.widget.ts)
- [Dynamic table widget](ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.model.ts)
- [Dynamic table widget](ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.ts)
- [Error component](ng2-components/ng2-activiti-form/src/components/widgets/error/error.component.ts)
- [Functional group widget](ng2-components/ng2-activiti-form/src/components/widgets/functional-group/functional-group.widget.ts)
- [Hyperlink widget](ng2-components/ng2-activiti-form/src/components/widgets/hyperlink/hyperlink.widget.ts)
- [Multiline text widget](ng2-components/ng2-activiti-form/src/components/widgets/multiline-text/multiline-text.widget.ts)
- [Number widget](ng2-components/ng2-activiti-form/src/components/widgets/number/number.widget.ts)
- [People widget](ng2-components/ng2-activiti-form/src/components/widgets/people/people.widget.ts)
- [Radio buttons widget](ng2-components/ng2-activiti-form/src/components/widgets/radio-buttons/radio-buttons.widget.ts)
- [Tabs widget](ng2-components/ng2-activiti-form/src/components/widgets/tabs/tabs.widget.ts)
- [Text mask component](ng2-components/ng2-activiti-form/src/components/widgets/text/text-mask.component.ts)
- [Text widget](ng2-components/ng2-activiti-form/src/components/widgets/text/text.widget.ts)
- [Typeahead widget](ng2-components/ng2-activiti-form/src/components/widgets/typeahead/typeahead.widget.ts)
- [Unknown widget](ng2-components/ng2-activiti-form/src/components/widgets/unknown/unknown.widget.ts)
- [Upload widget](ng2-components/ng2-activiti-form/src/components/widgets/upload/upload.widget.ts)
- [Widget component](ng2-components/ng2-activiti-form/src/components/widgets/widget.component.ts)
- [Form definition model](ng2-components/ng2-activiti-form/src/models/form-definition.model.ts)
- [Node metadata model](ng2-components/ng2-activiti-form/src/models/node-metadata.model.ts)
- [Task process variable model](ng2-components/ng2-activiti-form/src/models/task-process-variable.model.ts)
- [Widget visibility model](ng2-components/ng2-activiti-form/src/models/widget-visibility.model.ts)
- [Activiti alfresco service](ng2-components/ng2-activiti-form/src/services/activiti-alfresco.service.ts)
- [Ecm model service](ng2-components/ng2-activiti-form/src/services/ecm-model.service.ts)
- [Form rendering service](ng2-components/ng2-activiti-form/src/services/form-rendering.service.ts)
- [Node service](ng2-components/ng2-activiti-form/src/services/node.service.ts)
- [Widget visibility service](ng2-components/ng2-activiti-form/src/services/widget-visibility.service.ts)
<!-- ng2-activiti-form end -->
[(Back to Contents)](#contents)
## ng2-activiti-processlist
Contains the Processlist component and other related items. See the library's
[README file](ng2-components/ng2-activiti-processlist/README.md)
for more information about installing and using the source code.
<!-- xxxng2-activiti-processlist start -->
**Documented**
- [Processlist component](ng2-components/ng2-activiti-processlist/README.md)
- [Process filters component](ng2-components/ng2-activiti-processlist/README.md)
- [Start process component](ng2-components/ng2-activiti-processlist/README.md)
- [Process instance details component](ng2-components/ng2-activiti-processlist/README.md)
- [Process instance tasks component](ng2-components/ng2-activiti-processlist/README.md)
- [Process comments component](ng2-components/ng2-activiti-processlist/README.md)
- [Process attachment list component](ng2-components/ng2-activiti-processlist/README.md)
- [Create process attachment component](ng2-components/ng2-activiti-processlist/README.md)
- [Process audit directive](ng2-components/ng2-activiti-processlist/README.md)
**Undocumented**
- [Process instance header component](ng2-components/ng2-activiti-processlist/src/components/process-instance-header.component.ts)
- [Filter process model](ng2-components/ng2-activiti-processlist/src/models/filter-process.model.ts)
- [Process definition model](ng2-components/ng2-activiti-processlist/src/models/process-definition.model.ts)
- [Process instance filter model](ng2-components/ng2-activiti-processlist/src/models/process-instance-filter.model.ts)
- [Process instance variable model](ng2-components/ng2-activiti-processlist/src/models/process-instance-variable.model.ts)
- [Process instance model](ng2-components/ng2-activiti-processlist/src/models/process-instance.model.ts)
- [Process upload service](ng2-components/ng2-activiti-processlist/src/services/process-upload.service.ts)
- [Process service](ng2-components/ng2-activiti-processlist/src/services/process.service.ts)
<!-- ng2-activiti-processlist end -->
[(Back to Contents)](#contents)
## ng2-activiti-tasklist
Contains the Tasklist omponent and other related items. See the library's
[README file](ng2-components/ng2-activiti-tasklist/README.md)
for more information about installing and using the source code.
<!-- xxxng2-activiti-tasklist start -->
**Documented**
- [Tasklist component](ng2-components/ng2-activiti-tasklist/README.md)
- [Task details component](ng2-components/ng2-activiti-tasklist/README.md)
- [Apps list component](ng2-components/ng2-activiti-tasklist/README.md)
- [Task filters component](ng2-components/ng2-activiti-tasklist/README.md)
- [Checklist component](ng2-components/ng2-activiti-tasklist/README.md)
- [Task attachment list component](ng2-components/ng2-activiti-tasklist/README.md)
- [Create task attachment component](ng2-components/ng2-activiti-tasklist/README.md)
- [Task header component](ng2-components/ng2-activiti-tasklist/README.md)
- [People component](ng2-components/ng2-activiti-tasklist/README.md)
- [Comments component](ng2-components/ng2-activiti-tasklist/README.md)
- [People search component](ng2-components/ng2-activiti-tasklist/README.md)
- [Task audit directive](ng2-components/ng2-activiti-tasklist/README.md)
**Undocumented**
- [Comment list component](ng2-components/ng2-activiti-tasklist/src/components/comment-list.component.ts)
- [No task detail template directive](ng2-components/ng2-activiti-tasklist/src/components/no-task-detail-template.directive.ts)
- [People list component](ng2-components/ng2-activiti-tasklist/src/components/people-list.component.ts)
- [Start task component](ng2-components/ng2-activiti-tasklist/src/components/start-task.component.ts)
- [Comment model](ng2-components/ng2-activiti-tasklist/src/models/comment.model.ts)
- [Filter model](ng2-components/ng2-activiti-tasklist/src/models/filter.model.ts)
- [Form model](ng2-components/ng2-activiti-tasklist/src/models/form.model.ts)
- [Icon model](ng2-components/ng2-activiti-tasklist/src/models/icon.model.ts)
- [Start task model](ng2-components/ng2-activiti-tasklist/src/models/start-task.model.ts)
- [Task details model](ng2-components/ng2-activiti-tasklist/src/models/task-details.model.ts)
- [Task list model](ng2-components/ng2-activiti-tasklist/src/models/task-list.model.ts)
- [User event model](ng2-components/ng2-activiti-tasklist/src/models/user-event.model.ts)
- [User model](ng2-components/ng2-activiti-tasklist/src/models/user.model.ts)
- [People service](ng2-components/ng2-activiti-tasklist/src/services/people.service.ts)
- [Process upload service](ng2-components/ng2-activiti-tasklist/src/services/process-upload.service.ts)
- [Tasklist service](ng2-components/ng2-activiti-tasklist/src/services/tasklist.service.ts)
<!-- ng2-activiti-tasklist end -->
[(Back to Contents)](#contents)
## ng2-alfresco-core
Contains a variety of components, directives and other classes used throughout ADF. See the library's
[README file](ng2-components/ng2-alfresco-core/README.md)
for more information about installing and using the source code.
<!-- xxxng2-alfresco-core start -->
**Documented**
- [Toolbar component](ng2-components/ng2-alfresco-core/README.md)
- [Accordion component](ng2-components/ng2-alfresco-core/README.md)
- [Card view component](ng2-components/ng2-alfresco-core/README.md)
- [Node permission directive](ng2-components/ng2-alfresco-core/README.md)
- [Upload directive](ng2-components/ng2-alfresco-core/README.md)
- [Context menu directive](ng2-components/ng2-alfresco-core/README.md)
- [Alfresco api service](ng2-components/ng2-alfresco-core/README.md)
- [App config service](ng2-components/ng2-alfresco-core/README.md)
- [User preferences service](ng2-components/ng2-alfresco-core/README.md)
- [Authentication service](ng2-components/ng2-alfresco-core/README.md)
- [Notification service](ng2-components/ng2-alfresco-core/README.md)
- [Translation service](ng2-components/ng2-alfresco-core/README.md)
- [Renditions service](ng2-components/ng2-alfresco-core/README.md)
**Undocumented**
- [Accordion group component](ng2-components/ng2-alfresco-core/src/components/collapsable/accordion-group.component.ts)
- [Context menu holder component](ng2-components/ng2-alfresco-core/src/components/context-menu/context-menu-holder.component.ts)
- [Context menu service](ng2-components/ng2-alfresco-core/src/components/context-menu/context-menu.service.ts)
- [Data column list component](ng2-components/ng2-alfresco-core/src/components/data-column/data-column-list.component.ts)
- [Data column component](ng2-components/ng2-alfresco-core/src/components/data-column/data-column.component.ts)
- [Info drawer layout component](ng2-components/ng2-alfresco-core/src/components/info-drawer/info-drawer-layout.component.ts)
- [Info drawer component](ng2-components/ng2-alfresco-core/src/components/info-drawer/info-drawer.component.ts)
- [Mdl menu directive](ng2-components/ng2-alfresco-core/src/components/material/mdl-menu.directive.ts)
- [Mdl textfield directive](ng2-components/ng2-alfresco-core/src/components/material/mdl-textfield.directive.ts)
- [Mdl upgrade element directive](ng2-components/ng2-alfresco-core/src/components/material/mdl-upgrade-element.directive.ts)
- [Pagination component](ng2-components/ng2-alfresco-core/src/components/pagination/pagination.component.ts)
- [Toolbar divider component](ng2-components/ng2-alfresco-core/src/components/toolbar/toolbar-divider.component.ts)
- [Toolbar title component](ng2-components/ng2-alfresco-core/src/components/toolbar/toolbar-title.component.ts)
- [Card view content proxy directive](ng2-components/ng2-alfresco-core/src/components/view/card-view-content-proxy.directive.ts)
- [Card view dateitem component](ng2-components/ng2-alfresco-core/src/components/view/card-view-dateitem.component.ts)
- [Card view item dispatcher component](ng2-components/ng2-alfresco-core/src/components/view/card-view-item-dispatcher.component.ts)
- [Card view mapitem component](ng2-components/ng2-alfresco-core/src/components/view/card-view-mapitem.component.ts)
- [Card view textitem component](ng2-components/ng2-alfresco-core/src/components/view/card-view-textitem.component.ts)
- [Highlight directive](ng2-components/ng2-alfresco-core/src/directives/highlight.directive.ts)
- [Card view baseitem model](ng2-components/ng2-alfresco-core/src/models/card-view-baseitem.model.ts)
- [Card view dateitem model](ng2-components/ng2-alfresco-core/src/models/card-view-dateitem.model.ts)
- [Card view mapitem model](ng2-components/ng2-alfresco-core/src/models/card-view-mapitem.model.ts)
- [Card view textitem model](ng2-components/ng2-alfresco-core/src/models/card-view-textitem.model.ts)
- [Component model](ng2-components/ng2-alfresco-core/src/models/component.model.ts)
- [File model](ng2-components/ng2-alfresco-core/src/models/file.model.ts)
- [Product version model](ng2-components/ng2-alfresco-core/src/models/product-version.model.ts)
- [Site model](ng2-components/ng2-alfresco-core/src/models/site.model.ts)
- [Alfresco content service](ng2-components/ng2-alfresco-core/src/services/alfresco-content.service.ts)
- [Alfresco settings service](ng2-components/ng2-alfresco-core/src/services/alfresco-settings.service.ts)
- [Auth guard bpm service](ng2-components/ng2-alfresco-core/src/services/auth-guard-bpm.service.ts)
- [Auth guard ecm service](ng2-components/ng2-alfresco-core/src/services/auth-guard-ecm.service.ts)
- [Auth guard service](ng2-components/ng2-alfresco-core/src/services/auth-guard.service.ts)
- [Card view update service](ng2-components/ng2-alfresco-core/src/services/card-view-update.service.ts)
- [Content service](ng2-components/ng2-alfresco-core/src/services/content.service.ts)
- [Cookie service](ng2-components/ng2-alfresco-core/src/services/cookie.service.ts)
- [Deleted nodes api service](ng2-components/ng2-alfresco-core/src/services/deleted-nodes-api.service.ts)
- [Discovery api service](ng2-components/ng2-alfresco-core/src/services/discovery-api.service.ts)
- [Favorites api service](ng2-components/ng2-alfresco-core/src/services/favorites-api.service.ts)
- [Highlight transform service](ng2-components/ng2-alfresco-core/src/services/highlight-transform.service.ts)
- [Log service](ng2-components/ng2-alfresco-core/src/services/log.service.ts)
- [Nodes api service](ng2-components/ng2-alfresco-core/src/services/nodes-api.service.ts)
- [People api service](ng2-components/ng2-alfresco-core/src/services/people-api.service.ts)
- [Search api service](ng2-components/ng2-alfresco-core/src/services/search-api.service.ts)
- [Search service](ng2-components/ng2-alfresco-core/src/services/search.service.ts)
- [Shared links api service](ng2-components/ng2-alfresco-core/src/services/shared-links-api.service.ts)
- [Sites api service](ng2-components/ng2-alfresco-core/src/services/sites-api.service.ts)
- [Storage service](ng2-components/ng2-alfresco-core/src/services/storage.service.ts)
- [Thumbnail service](ng2-components/ng2-alfresco-core/src/services/thumbnail.service.ts)
- [Translate loader service](ng2-components/ng2-alfresco-core/src/services/translate-loader.service.ts)
- [Upload service](ng2-components/ng2-alfresco-core/src/services/upload.service.ts)
<!-- ng2-alfresco-core end -->
[(Back to Contents)](#contents)
## ng2-alfresco-datatable
Contains the Datatable component and other related items. See the library's
[README file](ng2-components/ng2-alfresco-datatable/README.md)
for more information about installing and using the source code.
<!-- xxxng2-alfresco-datatable start -->
**Documented**
- [Datatable component](ng2-components/ng2-alfresco-datatable/README.md)
- [Pagination component](ng2-components/ng2-alfresco-datatable/README.md)
**Undocumented**
- [Datatable cell component](ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable-cell.component.ts)
- [Date cell component](ng2-components/ng2-alfresco-datatable/src/components/datatable/date-cell.component.ts)
- [Empty list component](ng2-components/ng2-alfresco-datatable/src/components/datatable/empty-list.component.ts)
- [Filesize cell component](ng2-components/ng2-alfresco-datatable/src/components/datatable/filesize-cell.component.ts)
- [Location cell component](ng2-components/ng2-alfresco-datatable/src/components/datatable/location-cell.component.ts)
- [Loading template directive](ng2-components/ng2-alfresco-datatable/src/directives/loading-template.directive.ts)
- [No content template directive](ng2-components/ng2-alfresco-datatable/src/directives/no-content-template.directive.ts)
<!-- ng2-alfresco-datatable end -->
[(Back to Contents)](#contents)
## ng2-alfresco-documentlist
Contains the Document List component and other related items. See the library's
[README file](ng2-components/ng2-alfresco-documentlist/README.md)
for more information about installing and using the source code.
<!-- ng2-alfresco-documentlist start -->
**Documented**
- [Breadcrumb component](docs/breadcrumb.component.md)
- [Document list component](docs/document-list.component.md)
- [Sites dropdown component](docs/sites-dropdown.component.md)
**Undocumented**
- [Dropdown breadcrumb component](ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/dropdown-breadcrumb.component.ts)
- [Content action list component](ng2-components/ng2-alfresco-documentlist/src/components/content-action/content-action-list.component.ts)
- [Content action component](ng2-components/ng2-alfresco-documentlist/src/components/content-action/content-action.component.ts)
- [Content column list component](ng2-components/ng2-alfresco-documentlist/src/components/content-column/content-column-list.component.ts)
- [Content column component](ng2-components/ng2-alfresco-documentlist/src/components/content-column/content-column.component.ts)
- [Content node selector component](ng2-components/ng2-alfresco-documentlist/src/components/content-node-selector/content-node-selector.component.ts)
- [Empty folder content directive](ng2-components/ng2-alfresco-documentlist/src/components/empty-folder/empty-folder-content.directive.ts)
- [Content action model](ng2-components/ng2-alfresco-documentlist/src/models/content-action.model.ts)
- [Document library model](ng2-components/ng2-alfresco-documentlist/src/models/document-library.model.ts)
- [Permissions style model](ng2-components/ng2-alfresco-documentlist/src/models/permissions-style.model.ts)
- [Permissions model](ng2-components/ng2-alfresco-documentlist/src/models/permissions.model.ts)
- [Document actions service](ng2-components/ng2-alfresco-documentlist/src/services/document-actions.service.ts)
- [Document list service](ng2-components/ng2-alfresco-documentlist/src/services/document-list.service.ts)
- [Folder actions service](ng2-components/ng2-alfresco-documentlist/src/services/folder-actions.service.ts)
- [Node actions service](ng2-components/ng2-alfresco-documentlist/src/services/node-actions.service.ts)
<!-- ng2-alfresco-documentlist end -->
[(Back to Contents)](#contents)
### ng2-alfresco-login
Contains the Login component and other related items. See the library's
[README file](ng2-components/ng2-alfresco-login/README.md)
for more information about installing and using the source code.
<!-- xxxng2-alfresco-login start -->
**Documented**
- [Login component](ng2-components/ng2-alfresco-login/README.md)
**Undocumented**
- [Login footer directive](ng2-components/ng2-alfresco-login/src/directives/login-footer.directive.ts)
- [Login header directive](ng2-components/ng2-alfresco-login/src/directives/login-header.directive.ts)
- [Form submit event model](ng2-components/ng2-alfresco-login/src/models/form-submit-event.model.ts)
<!-- ng2-alfresco-login end -->
[(Back to Contents)](#contents)
## ng2-alfresco-search
Contains the Search component and other related items. See the library's
[README file](ng2-components/ng2-alfresco-search/README.md)
for more information about installing and using the source code.
<!-- xxxng2-alfresco-search start -->
**Documented**
- [Search control component](ng2-components/ng2-alfresco-search/README.md)
- [Search component](ng2-components/ng2-alfresco-search/README.md)
**Undocumented**
- [Search autocomplete component](ng2-components/ng2-alfresco-search/src/components/search-autocomplete.component.ts)
<!-- ng2-alfresco-search end -->
[(Back to Contents)](#contents)
## ng2-alfresco-social
Contains components for adding likes and ratings to items. See the library's
[README file](ng2-components/ng2-alfresco-social/README.md)
for more information about installing and using the source code.
<!-- xxxng2-alfresco-social start -->
**Documented**
- [Like component](ng2-components/ng2-alfresco-social/README.md)
- [Rating component](ng2-components/ng2-alfresco-social/README.md)
**Undocumented**
- [Rating service](ng2-components/ng2-alfresco-social/src/services/rating.service.ts)
<!-- ng2-alfresco-social end -->
[(Back to Contents)](#contents)
## ng2-alfresco-tag
Contains components for adding tags to documents. See the library's
[README file](ng2-components/ng2-alfresco-tag/README.md)
for more information about installing and using the source code.
<!-- xxxng2-alfresco-tag start -->
**Documented**
- [Tag actions component](ng2-components/ng2-alfresco-tag/README.md)
- [Tag list component](ng2-components/ng2-alfresco-tag/README.md)
- [Tag node list component](ng2-components/ng2-alfresco-tag/README.md)
**Undocumented**
- [Tag service](ng2-components/ng2-alfresco-tag/src/services/tag.service.ts)
<!-- ng2-alfresco-tag end -->
[(Back to Contents)](#contents)
## ng2-alfresco-upload
Contains components for uploading files to Content Services. See the library's
[README file](ng2-components/ng2-alfresco-upload/README.md)
for more information about installing and using the source code.
<!-- xxxng2-alfresco-upload start -->
**Documented**
- [Upload button component](ng2-components/ng2-alfresco-upload/README.md)
- [Upload drag area component](ng2-components/ng2-alfresco-upload/README.md)
- [File uploading dialog component](ng2-components/ng2-alfresco-upload/README.md)
- [Upload service](ng2-components/ng2-alfresco-upload/README.md)
**Undocumented**
- [File uploading list row component](ng2-components/ng2-alfresco-upload/src/components/file-uploading-list-row.component.ts)
- [File uploading list component](ng2-components/ng2-alfresco-upload/src/components/file-uploading-list.component.ts)
- [File draggable directive](ng2-components/ng2-alfresco-upload/src/directives/file-draggable.directive.ts)
- [Permissions model](ng2-components/ng2-alfresco-upload/src/models/permissions.model.ts)
<!-- ng2-alfresco-upload end -->
[(Back to Contents)](#contents)
## ng2-alfresco-userinfo
Contains the User Info component and other related items. See the library's
[README file](ng2-components/ng2-alfresco-userinfo/README.md)
for more information about installing and using the source code.
<!-- xxxng2-alfresco-userinfo start -->
**Documented**
- [User info component](ng2-components/ng2-alfresco-userinfo/README.md)
**Undocumented**
- [Bpm user model](ng2-components/ng2-alfresco-userinfo/src/models/bpm-user.model.ts)
- [Ecm company model](ng2-components/ng2-alfresco-userinfo/src/models/ecm-company.model.ts)
- [Ecm user model](ng2-components/ng2-alfresco-userinfo/src/models/ecm-user.model.ts)
- [Bpm user service](ng2-components/ng2-alfresco-userinfo/src/services/bpm-user.service.ts)
- [Ecm user service](ng2-components/ng2-alfresco-userinfo/src/services/ecm-user.service.ts)
<!-- ng2-alfresco-userinfo end -->
[(Back to Contents)](#contents)
## ng2-alfresco-viewer
Contains the Viewer component and other related items. See the library's
[README file](ng2-components/ng2-alfresco-viewer/README.md)
for more information about installing and using the source code.
<!-- xxxng2-alfresco-viewer start -->
**Documented**
- [Viewer component](ng2-components/ng2-alfresco-viewer/README.md)
**Undocumented**
- [ImgViewer component](ng2-components/ng2-alfresco-viewer/src/components/imgViewer.component.ts)
- [MediaPlayer component](ng2-components/ng2-alfresco-viewer/src/components/mediaPlayer.component.ts)
- [NotSupportedFormat component](ng2-components/ng2-alfresco-viewer/src/components/notSupportedFormat.component.ts)
- [PdfViewer component](ng2-components/ng2-alfresco-viewer/src/components/pdfViewer.component.ts)
- [TxtViewer component](ng2-components/ng2-alfresco-viewer/src/components/txtViewer.component.ts)
- [Pdf view component](ng2-components/ng2-alfresco-viewer/src/components/viewer-dialog/pdf-view/pdf-view.component.ts)
- [Viewer dialog component](ng2-components/ng2-alfresco-viewer/src/components/viewer-dialog/viewer-dialog.component.ts)
- [Extension viewer directive](ng2-components/ng2-alfresco-viewer/src/directives/extension-viewer.directive.ts)
- [Viewer service](ng2-components/ng2-alfresco-viewer/src/services/viewer.service.ts)
<!-- ng2-alfresco-viewer end -->
[(Back to Contents)](#contents)
## ng2-alfresco-webscript
Contains the Webscript component. See the library's
[README file](ng2-components/ng2-alfresco-webscript/README.md)
for more information about installing and using the source code.
<!-- xxxng2-alfresco-webscript start -->
**Documented**
- [Webscript component](ng2-components/ng2-alfresco-webscript/README.md)
<!-- ng2-alfresco-webscript end -->

Binary file not shown.

After

Width:  |  Height:  |  Size: 55 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 80 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 58 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 55 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 54 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 133 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 173 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 58 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 53 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 77 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 90 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 90 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 54 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 84 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 41 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 63 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 192 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 90 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 94 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 119 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 83 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 100 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 74 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 79 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 44 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 37 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 136 KiB

View File

@@ -0,0 +1,41 @@
# Breadcrumb Component
Indicates the current position within a navigation hierarchy.
![Breadcrumb](../docassets/images/breadcrumb.png)
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
<!-- toc -->
- [Basic Usage](#basic-usage)
* [Properties](#properties)
* [Events](#events)
<!-- tocstop -->
<!-- markdown-toc end -->
## Basic Usage
```html
<adf-breadcrumb
[target]="documentList"
[folderNode]="documentList.folderNode">
</adf-breadcrumb>
```
### Properties
| Name | Type | Description |
| --- | --- | --- |
| target | DocumentListComponent | (optional) DocumentList component to operate with. Upon clicks will instruct the given component to update. |
| folderNode | [MinimalNodeEntryEntity](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodeMinimalEntry.md) | Active node, builds UI based on `folderNode.path.elements` collection. |
| root | string | (optional) Name of the root element of the breadcrumb. You can use this property to rename "Company Home" to "Personal Files" for example. You can use i18n resource key for the property value. |
| rootId | string | (optional) The id of the root element. You can use this property to set a custom element the breadcrumb should start with. |
### Events
| Name | Returned Type | Description |
| --- | --- | --- |
| navigate | [PathElementEntity](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/PathElementEntity.md) | emitted when user clicks on a breadcrumb |

View File

@@ -0,0 +1,141 @@
# DataColumn Component
Defines column properties for DataTable, Tasklist, Document List and other components.
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
<!-- toc -->
- [Basic Usage](#basic-usage)
* [Properties](#properties)
- [Details](#details)
* [Automatic column header translation](#automatic-column-header-translation)
* [Custom tooltips](#custom-tooltips)
* [Column Templates](#column-templates)
<!-- tocstop -->
<!-- markdown-toc end -->
## Basic Usage
```html
<adf-datatable [data]="data">
<data-columns>
<data-column key="icon" type="image" [sortable]="false"></data-column>
<data-column key="id" title="Id"></data-column>
<data-column key="createdOn" title="Created"></data-column>
<data-column key="name" title="Name" class="full-width name-column"></data-column>
<data-column key="createdBy.name" title="Created By"></data-column>
</data-columns>
</adf-datatable>
```
### Properties
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| key | string | | Data source key, can be either column/property key like `title` or property path like `createdBy.name` |
| type | string | text | Value type for the column. Possible settings are 'text', 'image', 'date', 'fileSize' and 'location'. |
| format | string | | Value format (if supported by components), for example format of the date |
| sortable | boolean | true | Toggles ability to sort by this column, for example by clicking the column header |
| title | string | | Display title of the column, typically used for column headers. You can use the i18n resouce key to get it translated automatically. |
| template | `TemplateRef` | | Custom column template |
| sr-title | string | | Screen reader title, used for accessibility purposes |
| class | string | | Additional CSS class to be applied to column (header and cells) |
| formatTooltip | Function | | Custom tooltip formatter function. |
## Details
### Automatic column header translation
You can use i18n resource keys with DataColumn `title` property.
The component will automatically check the corresponding i18n resources and fetch corresponding value.
```html
<data-column
key="name"
title="MY.RESOURCE.KEY">
</data-column>
```
This feature is optional. Regular text either plain or converted via the `translate` pipe will still be working as it was before.
### Custom tooltips
You can create custom tooltips for the table cells by providing a `formatTooltip` property with a tooltip formatter function when declaring a data column.
```html
<data-column
title="Name"
key="name"
[formatTooltip]="getNodeNameTooltip"
class="full-width ellipsis-cell">
</data-column>
```
And the code in this case will be similar to the following:
```ts
import { DataColumn, DataRow } from 'ng2-alfresco-datatable';
@Component({...})
export class MyComponent {
...
getNodeNameTooltip(row: DataRow, col: DataColumn): string {
if (row) {
return row.getValue('name');
}
return null;
}
}
```
To disable the tooltip your function can return `null` or an empty string.
### Column Templates
It is possible to assign a custom column template like the following:
```html
<adf-datatable ...>
<data-columns>
<data-column title="Version" key="properties.cm:versionLabel">
<template let-value="value">
<span>V. {{value}}</span>
</template>
</data-column>
</data-columns>
</adf-datatable>
```
Example above shows access to the underlying cell value by binding `value` property to the underlying context `value`:
```html
<template let-value="value">
```
Alternatively you can get access to the entire data context using the following syntax:
```html
<template let-entry="$implicit">
```
That means you are going to create local variable `entry` that is bound to the data context via Angular's special `$implicit` keyword.
```html
<template let-entry="$implicit">
<span>V. {{entry.data.getValue(entry.row, entry.col)}}</span>
</template>
```
In the second case `entry` variable is holding a reference to the following data context:
```ts
{
data: DataTableAdapter,
row: DataRow,
col: DataColumn
}
```

File diff suppressed because it is too large Load Diff

255
docs/extensibility.md Normal file
View File

@@ -0,0 +1,255 @@
# Form Extensibility and Customisation
_Note: it is assumed you are familiar with Alfresco Activiti form definition structure._
- How components and widgets are rendered on a Form
- Replacing default form widgets with custom components
- Replacing custom stencils with custom components
## How components and widgets are rendered on a Form
All form field editors (aka widgets) on a Form are rendered by means of `FormFieldComponent`
that takes an instance of a `FormFieldModel`:
```html
<form-field [field]="field"></form-field>
```
This component depends on `FormRenderingService` service to map `FormFieldModel` to UI component
based on field type or metadata information.
### Component type resolvers
`FormRenderingService` maps field types to corresponding instances exposing `ComponentTypeResolver` interface:
```ts
export interface ComponentTypeResolver {
(field: FormFieldModel): Type<{}>;
}
```
Typically a `ComponentTypeResolver` is a function that takes `FormFieldModel` and returns corresponding component type.
It can be either a predefined component type or a dynamically evaluated based on field properties and metadata.
#### Static component mapping
You can (re)map fields like in the following:
```ts
let customResolver: ComponentTypeResolver = () => CustomWidgetComponent;
formRenderingService.setComponentTypeResolver('text', customResolver, true);
```
or simply:
```ts
formRenderingService.setComponentTypeResolver('text', () => CustomWidgetComponent, true);
```
#### Dynamic component mapping
Alternatively your resolver may return different component types based on `FormFieldModel` state and condition:
```ts
let customResolver: ComponentTypeResolver = (field: FormFieldModel): Type<{}> => {
if (field) {
let params = field.params;
}
return UnknownWidgetComponent;
};
formRenderingService.setComponentTypeResolver('text', customResolver, true);
```
### Default component mappings
Stencil Name | Field Type | Component Type |
| --- | --- | --- |
| Text | text | TextWidgetComponent |
| Number | integer | NumberWidgetComponent |
| Multi-line text | multi-line-text | MultilineTextWidgetComponentComponent |
| Checkbox | boolean | CheckboxWidgetComponent |
| Dropdown | dropdown | DropdownWidgetComponent |
| Date | date | DateWidgetComponent |
| Amount | amount | AmountWidgetComponent |
| Radio buttons | radio-buttons | RadioButtonsWidgetComponent |
| Hyperlink | hyperlink | HyperlinkWidgetComponent |
| Display value | readonly | DisplayValueWidgetComponent |
| Display text | readonly-text | DisplayTextWidgetComponentComponent |
| Typeahead | typeahead | TypeaheadWidgetComponent |
| People | people | PeopleWidgetComponent |
| Group of people | functional-group | FunctionalGroupWidgetComponent |
| Dynamic table | dynamic-table | DynamicTableWidgetComponent |
| N/A | container | ContainerWidgetComponent (layout component) |
| Header | group | ContainerWidgetComponent |
| Attach | upload | AttachWidgetComponent or UploadWidgetComponent (based on metadata) |
| N/A | N/A | UnknownWidgetComponent |
## Replacing default form widgets with custom components
This is a short walkthrough on replacing a standard `Text` widget with a custom component for all Alfresco Activiti forms
rendered within `<activiti-form>` component.
First let's create a simple Alfresco Activiti form with `Text` widgets:
![default text widget](../docassets/images/text-default-widget.png)
Every custom widget must inherit `WidgetComponent` class in order to function properly:
```ts
import { Component } from '@angular/core';
import { WidgetComponent } from 'ng2-activiti-form';
@Component({
selector: 'custom-editor',
template: `
<div style="color: red">Look, I'm a custom editor!</div>
`
})
export class CustomEditorComponent extends WidgetComponent {}
```
Now you will need to add it to the application module or any custom module that is imported into the application one:
```ts
import { NgModule } from '@angular/core';
import { CustomEditorComponent } from './custom-editor.component';
@NgModule({
declarations: [ CustomEditorComponent ],
exports: [ CustomEditorComponent ],
entryComponents: [ CustomEditorComponent ]
})
export class CustomEditorsModule {}
```
Every custom widget should be added into all three module collections: `declarations`, `exports` and `entryComponents`.
If you decided to store custom widgets in a separate dedicated module (and optionally as separate redistributable library)
don't forget to import it into your main application one:
```ts
@NgModule({
imports: [
// ...
CustomEditorsModule
// ...
],
providers: [],
bootstrap: [ AppComponent ]
})
export class AppModule {}
```
Now you can import `FormRenderingService` in any of your Views and override default mapping similar to the following:
```ts
import { Component } from '@angular/core';
import { CustomEditorComponent } from './custom-editor.component';
@Component({...})
export class MyView {
constructor(formRenderingService: FormRenderingService) {
formRenderingService.setComponentTypeResolver('text', () => CustomEditorComponent, true);
}
}
```
At runtime it should look similar to the following:
![custom text widget](../docassets/images/text-custom-widget.png)
## Replacing custom stencils with custom components
This is a short walkthrough on rendering custom Alfresco Activiti stencils by means of custom Angular 2 components.
### Creating custom stencil
First let's create a basic stencil and call it `Custom Stencil 01`:
![custom stencil](../docassets/images/activiti-stencil-01.png)
_Note the `internal identifier` value as it will become a `field type` value when corresponding form is rendered._
Next put some simple html layout for `Form runtime template` and `Form editor template` fields:
```html
<div style="color: blue">Custom activiti stencil</div>
```
Now you are ready to design a test form based on your custom stencil:
![custom stencil form](../docassets/images/activiti-stencil-02.png)
Once wired with a new task it should look like the following within Alfresco Activiti web application:
![custom stencil task](../docassets/images/activiti-stencil-03.png)
### Creating custom widget
If you load previously created task into ADF `<activiti-form>` component you will see something like the following:
![adf stencil](../docassets/images/adf-stencil-01.png)
Let's create an Angular 2 component to render missing content:
```ts
import { Component } from '@angular/core';
import { WidgetComponent } from 'ng2-activiti-form';
@Component({
selector: 'custom-stencil-01',
template: `<div style="color: green">ADF version of custom Activiti stencil</div>`
})
export class CustomStencil01 extends WidgetComponent {}
```
Put it inside custom module:
```ts
import { NgModule } from '@angular/core';
import { CustomStencil01 } from './custom-stencil-01.component';
@NgModule({
declarations: [ CustomStencil01 ],
exports: [ CustomStencil01 ],
entryComponents: [ CustomStencil01 ]
})
export class CustomEditorsModule {}
```
And import into your Application Module
```ts
@NgModule({
imports: [
// ...
CustomEditorsModule
// ...
],
providers: [],
bootstrap: [ AppComponent ]
})
export class AppModule {}
```
Now you can import `FormRenderingService` in any of your Views and provide new mapping:
```ts
import { Component } from '@angular/core';
import { CustomStencil01 } from './custom-stencil-01.component';
@Component({...})
export class MyView {
constructor(formRenderingService: FormRenderingService) {
formRenderingService.setComponentTypeResolver('custom_stencil_01', () => CustomStencil01, true);
}
}
```
At runtime you should now see your custom Angular 2 component rendered in place of the stencils:
![adf stencil runtime](../docassets/images/adf-stencil-02.png)

132
docs/metadata-indicators.md Normal file
View File

@@ -0,0 +1,132 @@
# Walkthrough: adding indicators to clearly highlight information about a node
Every node object in the document list holds metadata information.
All metadata is stored inside `properties` property.
Here's an example of basic image-related metadata fetched from the server:
![](../docassets/images/metadata-01.png)
## Custom column template
```html
<alfresco-document-list ...>
<data-columns>
<data-column key="properties" [sortable]="false">
<template let-value="value">
<adf-metadata-icons [metadata]="value">
</adf-metadata-icons>
</template>
</data-column>
...
</data-columns>
</alfresco-document-list>
```
We are going to declare a column and bind its value to the entire `properties` object of the underlying node. The column will be using our custom `<adf-metadata-icons>` component to display icons based on metadata state.
## MetadataIconsComponent component
Let's create a simple `MetadataIconsComponent` component with a selector set to `adf-metadata-icons` as shown below:
```ts
import { Component, Input } from '@angular/core';
@Component({
selector: 'adf-metadata-icons',
template: `
<div *ngIf="metadata">
<!-- render UI based on metadata -->
</div>
`
})
export class MetadataIconsComponent {
@Input()
metadata: any;
}
```
The component will expose a `metadata` property we can use from the outside and eventually bind data to similar to the following:
```html
<adf-metadata-icons [metadata]="nodeMetadata"></adf-metadata-icons>
```
As you have seen earlier the DataColumn binds to `properties` property of the node, and maps the runtime value as the `value` local variable within the template.
Next we propagate the `value` reference to the `<adf-metadata-icons>` component as `metadata` property.
```html
<data-column key="properties" [sortable]="false">
<template let-value="value">
<adf-metadata-icons [metadata]="value"></adf-metadata-icons>
</template>
</data-column>
```
So once rendered our component will automatically have access to entire set of node metadata. Let's build some visualization of the `cm:versionLabel` property.
For demonstration purposes we are going to display several icons if underlying node has version `2.0`, and just a plain text version value for all other versions.
```html
<div *ngIf="metadata">
<ng-container *ngIf="metadata['cm:versionLabel'] === '2.0'">
<md-icon>portrait</md-icon>
<md-icon>photo_filter</md-icon>
<md-icon>rotate_90_degrees_ccw</md-icon>
</ng-container>
<div *ngIf="metadata['cm:versionLabel'] !== '2.0'">
{{metadata['cm:versionLabel']}}
</div>
</div>
```
Note: For a list of the icons that can be used with `<md-icon>` component please refer to this resource: [material.io/icons](https://material.io/icons/)
## Testing component
You will need to enable `versioning` feature for the Document List to be able to upload multiple versions of the file instead of renaming duplicates.
Drag and drop any image file to upload it and ensure it has `1.0` displayed in the column:
![](../docassets/images/metadata-02.png)
Now drop the same file again to upload a new version of the file.
You should now see icons instead of version label.
![](../docassets/images/metadata-03.png)
You can see on the screenshot above that only files with version `2.0` got extra icons.
## Conclusion
The full source code of the component can be found below:
```ts
import { Component, Input } from '@angular/core';
@Component({
selector: 'adf-metadata-icons',
template: `
<div *ngIf="metadata">
<ng-container *ngIf="metadata['cm:versionLabel'] === '2.0'">
<md-icon>portrait</md-icon>
<md-icon>photo_filter</md-icon>
<md-icon>rotate_90_degrees_ccw</md-icon>
</ng-container>
<div *ngIf="metadata['cm:versionLabel'] !== '2.0'">
{{metadata['cm:versionLabel']}}
</div>
</div>
`
})
export class MetadataIconsComponent {
@Input()
metadata: any;
}
```
You can use this idea to build more complex indication experience based on the actual metadata state.

View File

@@ -0,0 +1,30 @@
# Sites Dropdown component
Displays a dropdown menu to show and interact with the sites of the current user.
![Dropdown sites](../docassets/images/document-list-dropdown-list.png)
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
<!-- toc -->
- [Basic Usage](#basic-usage)
* [Events](#events)
<!-- tocstop -->
<!-- markdown-toc end -->
## Basic Usage
```html
<adf-sites-dropdown
(change)="getSiteContent($event)">
</adf-sites-dropdown>
```
### Events
| Name | Returned Type | Description |
| --- | --- | --- |
| change | [SiteModel](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-alfresco-core/src/models/site.model.ts) | emitted when user selects a site. When default option is selected an empty model is emitted |

144
docs/stencils.md Normal file
View File

@@ -0,0 +1,144 @@
# Form Stencils with Angular 2
Form component provides basic support for custom stencils created with Activiti stencil editor.
## Installing
Configuring support for stencils requires the following configuration for your `index.html` file:
```html
<!-- Stencils integration -->
<script src="node_modules/ng2-activiti-form/stencils/runtime.ng1.js"></script>
<script src="node_modules/ng2-activiti-form/stencils/runtime.adf.js"></script>
<script src="http://<activiti-app-root>/app/rest/script-files/controllers"></script>
```
Where `<activiti-app-root>` should be replaced with a valid url pointing to your Activiti installation, for example:
```html
<script src="http://localhost:9999/activiti-app/app/rest/script-files/controllers"></script>
```
- `/app/rest/script-files/controllers`
provides all stencil controllers stored within Activiti
- `runtime.ng1.js`
provides a compatibility layer for controllers created with Angular 1
(this is to avoid runtime errors when loading Angular 1 code into `<activiti-form>` component)
- `runtime.adf.js`
provides API for stencil management and registration,
i.e. mapping html templates with corresponding controller classes
## Creating new stencil
Create a new stencil and add a new item called `ng2 component 01`.
The internal identifier in this case should be `ng2_component_01`.
This value will be used as field type when form gets rendered.
## Form runtime template
This should be a valid Angular 2 component template that you want to render in `<activiti-form>` component:
```html
<div>
<div>Angular2 Component</div>
<div>Created by: {{name}}</div>
</div>
```
## Form editor template
This can be any html layout to be rendered as a component placeholder in Activiti Form Designer.
```html
<div>
<div style="color: blue">
Angular2 Component 01
</div>
</div>
```
## Custom component controller
This field should contain JavaScript code for Angular 2 component class.
_Note: If you are using TypeScript then you should be putting transpiled JavaScript code here,
you can try official [TypeScript playground](http://www.typescriptlang.org/play/)
to see how TS code gets transpiled into JS._
### JavaScript code
```js
var SampleClass1 = (function () {
function SampleClass1() {
this.name = 'Denys';
console.log('ng2_component_01 ctor');
}
SampleClass1.prototype.ngOnInit = function () {
console.log('OnInit called');
};
return SampleClass1;
}());
```
### TypeScript code
The TypeScript version of the code above is:
```ts
import { OnInit } from '@angular/core';
class SampleClass1 implements OnInit {
constructor() {
console.log('ctor called');
}
ngOnInit() {
console.log('OnInit called');
}
}
```
### Mapping template with component class
In order to map **form runtime template** with the corresponding component class
you will need to register both parts with `adf.registerComponent(identifier, class)` api:
```js
if (adf) {
adf.registerComponent('ng2_component_01', SampleClass1);
}
```
### Final result
```js
var SampleClass1 = (function () {
function SampleClass1() {
this.name = 'Denys';
console.log('ng2_component_01 ctor');
}
SampleClass1.prototype.ngOnInit = function () {
console.log('OnInit called');
};
return SampleClass1;
}());
if (adf) {
adf.registerComponent('ng2_component_01', SampleClass1);
}
```
## Runtime result
When rendered on the form this stencil item should look like the following:
```html
Angular2 Component
Created by: Denys
```
ADF Form component will automatically assemble and compile a valid Angular 2 component on the fly.

6
docs/summary.json Normal file
View File

@@ -0,0 +1,6 @@
[
{ "title": "Form Extensibility and Customisation", "file": "extensibility.md" },
{ "title": "Form Stencils with Angular 2", "file": "stencils.md" },
{ "title": "Theming", "file": "theming.md" },
{ "title": "Walkthrough: adding indicators to highlight information about a node", "file": "metadata-indicators.md" }
]

View File

@@ -1,9 +1,10 @@
# Theming your Alfresco ADF app
### Using a pre-built theme
Alfresco ADF comes prepackaged with several pre-built theme css files. These theme files also
## Using a pre-built theme
Angular Material comes prepackaged with several pre-built theme css files. These theme files also
include all of the styles for core (styles common to all components), so you only have to include a
single css file for Alfresco ADF in your app.
single css file for Angular Material in your app.
You can include a theme file directly into your application from
`ng2-alfresco-core/prebuilt-themes`
@@ -29,7 +30,7 @@ Or you can add it directly in your index.html
<link href="node_modules/ng2-alfresco-core/prebuilt-themes/adf-blue-orange.css" rel="stylesheet">
```
### Defining a custom theme
## Defining a custom theme
When you want more customization than a pre-built theme offers, you can create your own theme file. You need to include the packages only what you really use in your application.
@@ -76,10 +77,11 @@ $theme: mat-light-theme($primary, $accent, $warn);
Notes: if you are using the Generator or the demo shell you need only to change the`/app/theme.scss` with your set of colors
#### Multiple themes
### Multiple themes
You can create multiple themes for your application:
##### Example of defining multiple themes:
#### Example of defining multiple themes
```scss
@import '~@angular/material/theming';

View File

@@ -1,5 +1,10 @@
# Alfresco Angular Components
**NOTE:** We are in the process of transferring docs from the component library
README files to a new system. This file lists all the docs currently in the
READMEs but the complete index for the docs can now be found in the
[Component Docs Index](../docIndex.md).
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
<!-- toc -->

View File

@@ -0,0 +1,134 @@
var fs = require('fs');
var path = require('path');
var angFilenameRegex = /([a-zA-Z0-9\-]+)\.((component)|(directive)|(model)|(service)|(widget))\.ts/;
var indexFileName = '../docIndex.md';
var summaryFileName = path.resolve('..', 'docs', 'summary.json');
function searchFolderRecursive(folderPath) {
var items = fs.readdirSync(path.resolve(folderPath));
for (var i = 0; i < items.length; i++) {
var itemPath = path.resolve(folderPath, items[i]);
var info = fs.statSync(itemPath);
if (info.isFile() && (items[i].match(angFilenameRegex))) {
var nameNoSuffix = path.basename(items[i], '.ts');//items[i].substring(0, items[i].length - 4);
if(nameNoSuffix in docDict) {
itemsWithDocs.push(itemPath);
} else {
itemsWithoutDocs.push(itemPath);
}
} else if (info.isDirectory()) {
searchFolderRecursive(itemPath);
}
}
}
function getDocFolderItems(docFolderPath) {
var result = {};
var items = fs.readdirSync(path.resolve(docFolderPath));
for (var i = 0; i < items.length; i++) {
if (items[i].endsWith('.md')) {
var nameNoSuffix = path.basename(items[i], '.md');
result[nameNoSuffix] = 1;
}
}
return result;
}
function tidyName(name) {
var result = name.replace(/-/g, " ");
result = result.substr(0, 1).toUpperCase() + result.substr(1);
return result;
}
function makeSummaryIndex() {
var summaryJson = fs.readFileSync(summaryFileName, 'utf8');
var summary = JSON.parse(summaryJson);
var result = '';
for (var i = 0; i < summary.length; i++) {
var item = summary[i];
result += '- [' + item.title + '](docs/' + item.file + ')\n';
}
return result;
}
var docDict = getDocFolderItems(path.resolve('..', 'docs'));
var rootItems = fs.readdirSync(path.resolve('.'));
var libs = {}
for (var i = 0; i < rootItems.length; i++) {
var itemPath = path.resolve(rootItems[i]);
var info = fs.statSync(itemPath);
if (info.isDirectory() && rootItems[i].match(/ng2-/)) {
libs[rootItems[i]] =[ [], [] ];
var itemsWithDocs = libs[rootItems[i]][0];
var itemsWithoutDocs = libs[rootItems[i]][1];
searchFolderRecursive(path.resolve(itemPath, 'src'));
}
}
var indexFileText = fs.readFileSync(indexFileName, 'utf8');
var libNames = Object.keys(libs);
for (var i = 0; i < libNames.length; i++) {
var listItems = [];
var libName = libNames[i];
var libData = libs[libName];
if (libData[0].length > 0) {
listItems.push('**Documented**\n');
for (var j = 0; j < libData[0].length; j++) {
var libFilePath = libData[0][j];
var libFileName = path.basename(libFilePath, '.ts');
var nameSections = libFileName.split('.');
var visibleName = tidyName(nameSections[0]) + ' ' + nameSections[1];
var mdListItem = '- [' + visibleName + '](docs/' + libFileName + '.md)';
listItems.push(mdListItem);
}
}
if (libData[1].length > 0) {
listItems.push('\n**Undocumented**\n');
for (var j = 0; j < libData[1].length; j++) {
var libFilePath = libData[1][j].replace(/\\/g, '/');
var libFileName = path.basename(libFilePath, '.ts');
var nameSections = libFileName.split('.');
var visibleName = tidyName(nameSections[0]) + ' ' + nameSections[1];
var relPath = libFilePath.substr(libFilePath.indexOf('/ng2-') + 1);
var mdListItem = '- [' + visibleName + '](' + relPath + ')';
listItems.push(mdListItem);
}
}
var libText = listItems.join('\n');
var libStartMarker = '<!-- ' + libName + ' start -->';
var libEndMarker = '<!-- ' + libName + ' end -->';
var contentRegex = new RegExp('(?:' + libStartMarker + ')([\\s\\S]*)(?:' + libEndMarker + ')');
indexFileText = indexFileText.replace(contentRegex, libStartMarker + '\n' + libText + '\n' + libEndMarker);
}
var guideStartMarker = '<!-- guide start -->';
var guideEndMarker = '<!-- guide end -->';
var contentRegex = new RegExp('(?:' + guideStartMarker + ')([\\s\\S]*)(?:' + guideEndMarker + ')');
indexFileText = indexFileText.replace(contentRegex, guideStartMarker + '\n' + makeSummaryIndex() + '\n' + guideEndMarker);
fs.writeFileSync(indexFileName, indexFileText, 'utf-8');

View File

@@ -17,6 +17,7 @@
"toc": "markdown-toc -i ng2-alfresco-core/README.md && markdown-toc -i ng2-alfresco-datatable/README.md && markdown-toc -i ng2-activiti-diagrams/README.md && markdown-toc -i ng2-activiti-analytics/README.md && markdown-toc -i ng2-activiti-form/README.md && markdown-toc -i ng2-activiti-tasklist/README.md && markdown-toc -i ng2-activiti-processlist/README.md && markdown-toc -i ng2-alfresco-documentlist/README.md && markdown-toc -i ng2-alfresco-login/README.md && markdown-toc -i ng2-alfresco-search/README.md && markdown-toc -i ng2-alfresco-tag/README.md && markdown-toc -i ng2-alfresco-upload/README.md && markdown-toc -i ng2-alfresco-viewer/README.md && markdown-toc -i ng2-alfresco-webscript/README.md && markdown-toc -i ng2-alfresco-webscript/README.md && markdown-toc -i ng2-alfresco-userinfo/README.md && markdown-toc -i ng2-alfresco-social/README.md && markdown-toc -i README.md",
"markdownlint": "markdownlint ng2-alfresco-core/README.md && markdownlint ng2-alfresco-datatable/README.md && markdownlint ng2-activiti-diagrams/README.md && markdownlint ng2-activiti-analytics/README.md && markdownlint ng2-activiti-form/README.md && markdownlint ng2-activiti-tasklist/README.md && markdownlint ng2-activiti-processlist/README.md && markdownlint ng2-alfresco-documentlist/README.md && markdownlint ng2-alfresco-login/README.md && markdownlint ng2-alfresco-search/README.md && markdownlint ng2-alfresco-tag/README.md && markdownlint ng2-alfresco-upload/README.md && markdownlint ng2-alfresco-viewer/README.md && markdownlint ng2-alfresco-webscript/README.md && markdownlint ng2-alfresco-webscript/README.md && markdownlint ng2-alfresco-userinfo/README.md && markdownlint ng2-alfresco-social/README.md && markdownlint README.md",
"doc": "npm run toc && npm run markdownlint && npm run webpack -- --config config/webpack.doc.js --progress --profile --bail",
"docindex": "node config/buildFullDocIndex.js",
"tslint": "",
"prepublish": "",
"tsc": "",