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

2.4.0 (#3522)

Browse Source 
* [ADF-2914] support for number range patterns (#3282)

* support for number range patterns

* fix memory leak for tag actions

* [ADF-2824] Reviewed docs for core and content services (#3290)

* [ADF-2824] Reviewed card view docs

* [ADF-2824] Reviewed doc for core and content services

* [ADF-2824] Added class name exception to prop script

* [ADF-2843] added tooltip for create new folder and edit folder icons … (#3286)

* [ADF-2843] added tooltip for create new folder and edit folder icons from Content Service

* [ADF-2843] added translation for tooltip

* Update content-metadata.component.md

* [ADF_NOISSUE] Fix styling and sidenav layout fixes (#3291)

* Fix styling and sidenav layout fixes

* Revert packagr conflicting mods

* [ADF-2905] Added JSDocs for process services (#3292)

* [ADF-2905] Added JSDocs for process services

* [ADF-2905] Added missing return value in tasklist service

* [ADF-2916] number range form validator added (#3279)

* number range form validator added

* tests added

* [ADF-2626] added preserved state functionality for sidenav component (#3278)

* [ADF-2626] added preserved state functionality for sidenav component

* [ADF-2626] changed logic for preserving the sidenav component state

* [ADF-2626] added missing curly brace }

* [ADF-2626] small changes on logic based on pr comments

* [ADF-2843] added tooltip for create folder and edit folder icons from Content Services

* Revert "[ADF-2843] added tooltip for create folder and edit folder icons from Content Services"

This reverts commit d5a7abb65b.

* [ADF-2626] changed casting

* [ADF-2626] updated documentation with event

* [ADF-2626] removed app-config pipe because it was not being used

* [ADF-2328] filtering support for facets and categories (#3293)

* filtering support for facets and categories

* fix tests

* update variable names

* [ADF-2973] Angular pipe to get application configuration settings (#3301)

* app config pipe

* update docs

* [ADF-2849] Search Date Range - Set the format of the date from config (#3288)

* format date chosen from the datePicker's calendar

* format date on focusout event

* fix tests & some code refactoring

* more validation messages

* unit tests

* fix typecast error

* move "dateFormat" to be part of the "date range" widget settings block

* fix error on Moment

"...Type 'moment.Moment' is not assignable to type 'moment.Moment'. Two different types with this name exist, but they are unrelated.
          Property 'isLocal' is missing in type 'Moment'..."

* moment - use old version

* change script - use recent version of moment

* Added the working-with-nodes-api-service tutorial. (#3295)

* [ADF-2826] added a check for duplicate permission add (#3265)

* [ADF-2556] first step to create add people or group to permissions

* [ADF-2556] creating a dialog with user results

* [ADF-2556]
integrated service for add and remove permission from node

* [ADF-2556] fixed behaviour and style for add user group

* [ADF-2556] added some refactoring for dialog service

* [ADF-2556] refactoring the dependencies of the components

* [ADF-2556] added some fix and a new key for dialog

* [ADF-2556] start adding test for node permission service

* [ADF-2556] added test for add permission panel component

* [ADf-2556] adding tests for new add permission component

* [ADF-2556] fixed tests and added documentation

* [ADF-2556] fixed documentation for add-node components

* [ADF-2556] added peer review changes

* [ADF-2826] added a check for duplicate permission add

* [ADF-2826] removed fdescribe

* [ADF-2826] applied peer review changes

* [ADF-2930] general purpose "Empty Page" component (#3296)

* empty content component

* fix selector name

* style fixes

* cleanup code

* docs for empty content

* update docs

* update docs

* use typography for icon

* layout fixes for Login (ported from ACA)

* fix aot crash

* fix tslint error and add and block if tslint give error in the pipeline

* [ADF-2892] Sidenav now prevents closing itself when ESC key is pressed (#3302)

* [ADF-2892] Sidenav now closes when clicking outside of it

* [ADF-2892] Sidevan now prevents closing itself when ESC key is pressed

* Fix for a technical bug, which prevents the proper usage of the expanded output event. (#3304)

* [ADF-NO-PRIVATE] renoved private property which breaks AOT (#3305)

* [ADF-2975] New input for File Upload Button component (#3299)

* new nodeType input

* unit tests

* content type fix

* remove package-lock.json files

* [ADF-2699] added localisation for time ago pipe (#3298)

* [ADF-2699] added localisation to the time-ago pipe

* [ADF-2699] added lang to time ago pipe

* [ADF-2699] added localisation for time ago pipe

* [ADF-2699] removed fdescribe

* [ADF-2699] removed comments

* [ADF-2699] removed useless default values

* fix css scope for search filter

* fix aot error

* fix ID show rancher script update

* Addition to the preparation of the environment. (#3306)

* Added the working-with-nodes-api-service tutorial.

* Added the 'Alfresco Example Content Application' paragraph to the 'Preparing the development environment' tutorial.

* [ADF-2843] added tooltips for all the buttons in toolbar (#3297)

* [ADF-2843] added tooltip for create new folder and edit folder icons from Content Service

* [ADF-2843] added translation for tooltip

* [ADF-2843] added tooltips for all the buttons in toolbar

* [ADF-2843] discard package-lock

* [ADF-2832] discard changes to package-lock

* [ADF-2843] discarded changes from package-lock

* [ADF-2843] added tooltip for list view button

* [ADF-2912] added group everyone as constant result for add permissions (#3266)

* [ADF-2556] first step to create add people or group to permissions

* [ADF-2556] creating a dialog with user results

* [ADF-2556]
integrated service for add and remove permission from node

* [ADF-2556] fixed behaviour and style for add user group

* [ADF-2556] added some refactoring for dialog service

* [ADF-2556] refactoring the dependencies of the components

* [ADF-2556] added some fix and a new key for dialog

* [ADF-2556] start adding test for node permission service

* [ADF-2556] added test for add permission panel component

* [ADf-2556] adding tests for new add permission component

* [ADF-2556] fixed tests and added documentation

* [ADF-2556] fixed documentation for add-node components

* [ADF-2556] added peer review changes

* [ADF-2912] added group everyone as constant result for add permissions

* [ADF-2912] readded jsdoc

* fix search filter styles (#3313)

* [ADF-2978] added a check when locally set permission is undefined (#3307)

* [ADF-2969] Moved doc tools to new tools folder (#3314)

* [ADF-2969] Moved doc tools to new tools folder

* [ADF-2969] Added files missing from schematic

* [ADF-2969] Added missing files to schematic

* [ADF-2813] set default sorting (#3311)

* [ADF-2891] decoupled search service love (#3312)

* Added the tutorial 'Creating your JavaScript application using alfresco-js-api'. (#3310)

* Added the working-with-nodes-api-service tutorial.

* Added the 'Alfresco Example Content Application' paragraph to the 'Preparing the development environment' tutorial.

* Added the tutorial 'Creating your JavaScript application using alfresco-js-api'.

* Added the image of the tutorial.

* Typo in 'creating-javascript-app-using-alfresco-js-api.md'

Typo in 'Prerequisites'.

* Typos in 'creating-javascript-app-using-alfresco-js-api.md'

Two small typos.

* Wrong sentence in 'creating-javascript-app-using-alfresco-js-api.md'

...into Angular applications, but it is "framework agnostic".

* Typo on 'creating-javascript-app-using-alfresco-js-api.md'.

...and Angular...

* [ADF-2888] UX doesn't respect the Sidenav specifiactions (#3303)

* [ADF-2771] Sidebar action menu component - UX review

* Add a input property to set the width of sidebar-action-menu.

* [ADF-2888]  UX doesn't respect the Sidenav specifiactions

* Add a input property to set the width of sidebar-action-menu.

* remove search configuration enforcement (#3315)

* [ADF-2986] try to pick the start value from local storage before the standard default (#3318)

* [ADF-2912] group everyone is always visible even for no search result (#3316)

* [ADF-2826] fixed wrong parsing for error message (#3317)

* [ADF-2739] Improved breadcrumb logic (#3287)

* [ADF-2739] Long names in breadcrumb fixed

* [ADF-2739] Updated styles

* [ADF-2739] Fixing @mixin for breadcrumb

* [ADF-2739] Waiting for changes in demo-shell

* [ADF-2739] Fixed @mixin

* [ADF-2739] Fixed issue related to breadcrumb position

* [ADF-2739] Improved ngOnChanges call for breadcrumb

* [ADF-2739] Fixed issues with lint

* [ADF-2739] Removed comment in dropdown breadcrumb component file

* [ADF-2739] Changed recalculateNodes method from public to protected

* pipeline-update (#3309)

* deploy PR script

* [ADF-2967] fixed create new task navigation (#3322)

* [ADF-2967] fixed create new task navigation

* [ADF-2967] removed extra variables

* [ADF-2967] removed unused methods

* [ADF-2961] support for protocol substition in app config files (#3324)

* support for protocol substition in app config files

* Update app-config.service.spec.ts

* Update app-config.service.spec.ts

* [ADF-2925] Required and invalid validators added (#3277)

* test added

* tests clean

* test added

* tslint clean

* test name changed

* update tests

* Added the tutorial 'Working with the Nodes API Service'. (#3319)

* [ADF-2979] Updated props script to avoid copying missing JSDocs (#3327)

* [ADF-2979] Updated tools to ignore blank JSDocs for inputs/outputs

* [ADF-2979] Bug fixes for handling missing tables, etc

* [ADF-2989] updated documentation with multiple node example (#3328)

* [ADF-2503] conditional visibility for content actions (#3325)

* conditional visibility for content actions

* fix typo

* workaround for "target: all"

* [ADF-2821] move module sidebar action menu (#3321)

* move module sidebar action menu

* fix core import test

* remove sidebar module

* skip error

* skiperror old versions

* [ADF-2995] Permissions - Consumer should be able to upload a new version for his file on a private site (#3326)

* check node permission instead of parent

* tests

* Fix sidenav action icons (#3331)

* Only the username form control should be emitted (#3333)

* about component (#3337)

* [ADF-2563] Improve versioning functionality (#3335)

* change input with textarea

* update file version use now the update content API

* provide way to test read only mode version list

* fix test

* test fix

* [ADF-2997] The meaning of the range fields is not clear (#3338)

* [ADF-2997] restrict 'to' field not to allow dates in the future

* [ADF-2997] more clear labels for start and end date fields

the translation team will decide what will be the best values for the date fields

* [ADF-3000] Update the documentation by adding the steps of date format custom configuration. (#3339)

* [ADF-3028] i18n support for title service (#3342)

* i18n support for title service

* cleanup tests

* update tests

* fixed constraint for viewer name width (#3343)

* (demo shell) login css fixes (#3344)

* [ADF-1997] override custom form widgets by default (#3346)

* override custom form widgets by default

* update tests

* [ADF-2979] Updated doc tools to avoid erasing MD docs with blank JSDocs in services (#3347)

* [ADF-2979] Update to ignore blank JSDocs for method signature

* [ADF-2979] Finished adding blank JSDoc check for services

* [ADF-2131] Search sorting (#3334)

* sorting configuration

* detect primary sorting and use with document list

* search results sorting

* docs update

* unit tests and code updates

* update code

* update code

* generic sorting picker, test updates

* ability to switch off client side sorting

* update docs for document list

* [ADF-2884] Task List - Custom apps display all tasks (#3329)

* [ADF-2884] Handled filterParam input change
Changed component selector

* [ADF-2884] Modified/Added tests

* [ADF-2884] Deprecated old selectors

* [ADF-2884] Added deprecated version

* [ADF-2884] Improved filter finding condition

* update project permissions change

* [ADF-2984] Show date invalid message on search date range picker (#3323)

* [ADF-2984] Show date invalid message on search date range picker

* [ADF-2984] test that required format is displayed when date input is invalid

* [ADF-2984] More space above buttons

* dummy commit

* restore deleted breadcrumb code

* [ADF-2753] New error component (#3336)

* [ADF-1938] Overflowing text in reports section fidex

* [ADF-1938] Long names in report section now fit

* [ADF-1938] Reverted changes in container widget

* [ADF-2753] New error component created

* [ADF-2753] Unit test for Error Content Component

* Deleting unused files

* Deleting unused files

* Deleting unused files

* [ADF-2753] Documentation added

* [ADF-2753] Fixed minor bugs

* [ADF-2753] Authentication not needed to view error

* add error handler

* tslint fix

* router app component

* remove unused import

* fix import modules

* limit to 404

* destroy fixture after any test

* misspelling error

* breadcrumb bug fixes (#3348)

* [ADF-2726] fixed save content for external repository (#3341)

* [ADF-2726] start fixing the show of files loaded from CS

* [ADF-2726] start fixing the show of files loaded from CS

* [ADF-2726] fixed save content for external repository|

* [ADF-2726] fixed save content for external repository|

* [ADF-2726] reeanabled and fixed the tests

* [ADF-2726] reeanabled and fixed the tests

* [ADF-2726] added tests for attach file widget and activiti alfresco service

* [ADF-2726] added tests for attach file widget and activiti alfresco service

* [ADF-2726] fixed test

* fix like test

* fix typo in the resource key (#3352)

* fix failing tests replace ajax with spy

* remove fdescribe

* [ADF-3040] Replaced doc template engine to fix whitespace issues (#3356)

* replace jasmine ajax with spy in rating tests

* fix breadcrumb align in object picker (#3353)

* fix no content node display (#3351)

* Broken links and missing images for two tutorials. (#3357)

* Broken links and missing images for two tutorials.

* Replaced .html with .md extensions

Replaced .html with .md extensions.

* Typo in Prerequi(si)tes

Typo in Prerequi(si)tes.

* [ADF-2988] fix logo change (#3362)

* [ADF-3055] fix bug with page size for facet fields (#3359)

* fix bug with page size for facet fields

* move page size to a constant

* move const inside the scope

* test fixes

* [ADF-2923] button type added (#3358)

* button type added

* remove unnecessary code

* [ADF-2608] added a fix to handle selection on slow connection problem (#3350)

* [ADF-2608] added a fix to handle selection on slow connection problem

* [ADF-2608] fixed test for datatable

* Added an import command to the 'Adding a new view' tutorial. (#3366)

* remove redundant logic (#3361)

* [ADF-2679] Reviewed latest tutorial content (#3371)

* [ADF-2679] Initial review of new tutorial content

* [ADF-2679] Reviewed the latest tutorials

* [ADF-2679] Initial review of new tutorial content

* [ADF-2679] Reviewed the latest tutorials

* [ADF-2832] Demo-shell, Fix Task filter dropdown menu alignment (#3294)

* [ADF-2832] changed height to auto for task filter dropdown header

* [ADF-2832] change selector with classes

* [ADF-2832] changed selector

* [ADF-2832] removed unnecessary css

* [ADF-2832] added class and changed selector

* [ADF-2832] added adf-prefix

* [ADF-2927] search filter enhancements (#3365)

* search filter enhancements

* reset button for facet queries

* update code and tests

* remove unused type

* restore code missing after rebase

* [ADF-2764] Updated doc files with latest script features (#3368)

* [ADF-2764] Updated doc files with latest script features

* [ADF-2764] Rebuilt full index instead of just content services index

* [ADF-2985] Demo shell - Provide an easy way to test the security issue (#3354)

* Provide an easy way to test the security issue

* use logService

* first part random test fix (#3376)

fixing random test executions first part

* fix form radio test

* [ADF-3065] TaskList component - Deprecate the processDefinitionKey (#3369)

* Deprecate the processDefinitionKey property.
remove unused tasklist code. It was needed with the old pagination component

* Remove nosense test

* Use adf version

* [ADF-2999] readded form validation icon (#3367)

* [ADF-2999] readded form validation icon

* [ADF-2999] fixed broken test

* Added the tutorial 'Basic theming'. (#3378)

* [ADF-2854] Fix demoshell task/process filter and routing (#3360)

* Fix demoshell task/process filter and routing

* Use the correct js api model

* Fix unit test

* search filter now remembers original user query (#3384)

* [ADF-2319] added a check for delete checklist button (#3382)

* [ADF-2238] removed created by property (#3380)

* [ADF-2238] removed created by property

* [ADF-2238] added a condition to avoid checklist delete for completed task

* Revert "[ADF-2238] added a condition to avoid checklist delete for completed task"

This reverts commit fc2227ea04.

* bold font for checked boxes (#3381)

* [ADF-2774] fixed message bus, background and language dropdowns that were hidden by the toolbar (#3379)

* [ADF-2764] Applied new doc tool features to core library (#3383)

* [ADF-2824] Added and reviewed some content services docs (#3385)

* revert changes (#3387)

* Added the 'Content metadata component' tutorial. (#3386)

* update package settings and lock file (#3389)

* minor layout fix for search facet buttons

* [ADF-2857] fixed message for date and date time widget (#3370)

* [ADF-2764] Updated process services docs with latest features (#3390)

* [ADF-2977] made language change persistenr (#3373)

* [ADF-3041] TaskList Component - Empty State issue. (#3345)

* [DW-635] Empty State Component

* [DW-635] Empty State Component

* [DW-635] Empty state Issue

* [DW-635] Use empty state component and custom empty directive

* [ADF-3041] Documentation for TaskList Component - Empty State issue.

* [ADF-3088] move sorting picker to a separate module (#3396)

* move sorting picker to a separate module

* update translation mock

* [ADF-3087] Clarified section about adding/replacing keys in i18n guide (#3392)

* [ADF-3087] Clarified section about adding/replacing keys

* [ADF-3087] Corrected information in i18n and translation service docs

* [ADF-3068] ADF Sidenav/Toolbar - Ux background colour review (#3401)

* [ADF-2824] Reviewed docs for new components in 2.4 (#3400)

* [ADF-3042] Use the custom date adapter from adf-core on Search Date Range widget (#3394)

-fix localization
-fix tests
-show parse error

* [ADF-3053] breadcrumb fixes (#3406)

* translate breadcrumb root in demo shell

* optional "max items" feature and style fixes

* should not be restricted by default

* style updates

* toolbar and breadcrumb layout fixes

* breadcrumb demo and testing page

* full toolbar scenario

* fix translation issue with the dropdown and custom root

* a11y fixes

* fix issue with duplicate id, remove unused attribute

* [ADF-2627] Icons-only mode for Info Drawer (#3398)

* tab with icon

* docs

* test

* add option without login docker publish

* fix publish script

* move docker push outside login

* fix random test failing part 2 (#3395)

* fix random failing test core search/comment/auth/user

* fix node delete directive

* fix lint issues

* node restore fix

* fix comment test

* remove fdescribe

* fix tests and tslint

* fix upload test

* unsubscribe success event task test

* copy comment object during test

* use the data pipe performance improvement and standard usage

* uncomment random test

* fix comment date random failing test

* disposable unsubscribe

* fix start process

* remove fdescribe

* change start process test and remove commented code

* fix error event check double click

* clone object form test

* refactor date time test

* fix service mock

* fix test dropdown and context

* git hook lint

* fix language test

* unsubscribe documentlist event test

* fix disposable error

* fix console log service error document list

* unusbscribe search test

* clear input field

* remove wrong test

* [ADF-2754] People Widget - Refactoring style and logic (#3349)

* observable logic added

* tests added & bug fixed

* onkeyup removed

* isValidUser method removed

* tslint fix

* test added

* comments fixed

* check if input value is string

* remove console log err from document list test

* [ADF-3082] Task Filter - Custom Task filters don't work (#3402)

* [ADF-3082] Custom Task filters don't work.

* Added an sorting input to the datatable.
* Updated documentation for the recent changes.
* Added testcases for the recent changes.

* [ADF-3082] Custom Task filters don't work

* Added a sorting input to the datatable
* Added testcases to the recent changes.
* Updated doc for the recent changes.

* * Refactored task/process list dataSort.

* * Refactored process/task list datasort method

* remove console log error from version list and content node selector test stubbing necessary method

* [ADF-3041] - Task List Empty State Issue (#3408)

* fix demo shell gallery view switch (#3413)

* [ADF-2541] reset datatable selection when rows are changed from code (#3410)

* reset selection when rows are replaced from code

* code fixes

* unit test updates

* visualise selection count for testing purposes

* make row selection api public

* remove question mark from the event name

* remove pdfviewer thumbnail console log test error

* fix conflict link creation id (#3412)

*  [ADF-2753] Error Component throwing default error fixed (#3364)

* [ADF-1938] Overflowing text in reports section fidex

* [ADF-1938] Long names in report section now fit

* [ADF-1938] Reverted changes in container widget

* [ADF-2753] New error component created

* [ADF-2753] Unit test for Error Content Component

* Deleting unused files

* Deleting unused files

* Deleting unused files

* [ADF-2753] Documentation added

* [ADF-2753] Error Component throwing default error fixed

* [ADF-2753] White space removed

* [ADF-2753] Removed unnecessary files and updated trnaslation file

* [ADF-2753] Changed link for button in error component

* [ADF-2753] Updated doc file

* [ADF-2753] Removed fdescribe

* [ADF-2753] Improved code coverage

* fix error AppTitle service test log

* fix gallery view demo shell route

* [ADF-3095] ability to intercept, pause and resume upload process (#3416)

* prevent and resume upload process

* upload fixes and confirmation dialog demo

* ability to toggle the upload confirmation demo

* fix tests

* unit tests

* docs update

* remove deprecation

* fix test name

* [ADF-2698] Date and time Widget - UTC vs local time issue (#3393)

* [ADF-2698] Date and time Widget - UTC vs local time issue

* [ADF-2698] add unit test to check that the format for min and max values is correct

* [ADF-2698] test behavior

* [ADF-3102] added lazy loading for tab content to fix animations (#3418)

* [ADF-2764] Fixed union type display glitches in property tables (#3419)

* [ADF-2764] Test commit to fix handling of union types in Github docs

* [ADF-2764] Fixed union type error in component docs

* [ADF-2593] z-index fix for search bar (#3409)

* [ADF-2593]

* [ADF-2593] Removed unnecessary style attributes

* [ADF-3111] pagination is not showed when automation test are running (#3420)

* [ADF-3108] Search - facetQueries panel renders when not defined in configuration (#3417)

* show facetQueries based on configuration definition

* tests

* FacetQueries is defined

* [ADF-3039] Task List - Enanchement (#3404)

* * Created DataColumnSchemaAssembler component to get column schema from html and app.config.json
* Removed column related  method  from tasklist.

* * Removed data property from the tasklist component
* Using rows input property instead of data input property of the datatable

* *  Renamed  DataColumnSchemaAssembler to DataTableSchema
* Refactored DataTableSchema component

* * Changed schem property into an  input schemaColumns property  in dataTable component

* * Added selectFirstRow input property to select a first row of datatable
* Removed unnecessary method from tasklist component

* * Added test case for the recent changes
* Added mock object for the tasklist spec

* * Added testcases for recent changes in the datatable component

* * Updated datatable and tasklist document for the recent changes

* * Refactored process-service and task list component
* Updated datatable document.

* [ADF-3039] Task List - Enanchement
* Changed schemaColumn name to columns
* Updated datatable documentation.
*  data input Annotated  with @deprecated in the tasklist component

* * Added an sorting input to the datatable.
* Updated datatable and tasklist documentation
* Added method to get current sorting order.

* * After rebasing

* * Revert  sorting changes

* * After rebase

* * fixed conflicts

* * Fixed failing testcase after rebased.

* update toolbar docs (#3423)

* Add custom data holder for CardViewItems (#3422)

* [ADF-3115] a11y fixes (#3424)

* a11y fixes for search input

* a11y fixes for pagination

* a11y fixes for content actions

* [ADF-3118] translation support for notification service (snackbars) (#3427)

* translation support for snackbar

* unit tests

* [ADF-2438] fixed thumbnails height (#3407)

* [ADF-2438] calculate thumbnail height

* [ADF-2438] send height to parent element

* [ADF-2438] add width to css

* [ADF-2438] moved height and width logic to parent component

* [ADF-2438] added height and width logic to parent component

* [ADF-2438] fixed failing test

* demo translation for search radio

* [ADF-2710] removed default shared link creation at the opening (#3430)

* [ADF-2999] added a way to test the validation icon on demo shell (#3431)

* [ADF-2754] People component tests fixed and style improvement (#3414)

* tests fixed and style

* show people test fixed

* error message test fixed

* [ADF-3131] fix selection order for DT/DL (#3433)

* fix selection order for DT/DL

* remove fit

* [ADF-3066] ProcessList Component - Empty State issue. (#3434)

* [ADF-3093] Added style checking tool for en.json translation file (#3428)

* [ADF-3093] Started li18nt VS Code extension

* [ADF-3093] Started work on UI style lint tool for VSCode

* [ADF-3093] Added UI style rules up to sg0006

* [ADF-3093] Added remaining style rules

* [ADF-3093] Added docs and command line tool

* [ADF-3093] Removed Microsoft notices and updated licences to Apache-2.0

* [ADF-3133] Fixed inconsistency in doc example (#3436)

* [ADF-2753] Fixed routing and second button showing up (#3421)

* [ADF-1938] Overflowing text in reports section fidex

* [ADF-1938] Long names in report section now fit

* [ADF-1938] Reverted changes in container widget

* [ADF-2753] New error component created

* [ADF-2753] Unit test for Error Content Component

* Deleting unused files

* Deleting unused files

* Deleting unused files

* [ADF-2753] Documentation added

* [ADF-2753] Removed unnecessary files and updated trnaslation file

* []

* [ADF-2753] Fixed routing and second button showing up

* [ADF-2753] Fixed typo

* [ADF-2753] Fixed view loading before variables

* [ADF-2753] Missing whitespace

* [ADF-2753] Added test for route params

* [ADF-2753] Changed getData function name to getTranslations

* [ADF-fix date widget test] Fixing a randomly failing test (#3439)

* group uploaded files into single batch, IE fixes (#3438)

* [ADF-3067] App-list Empty State. (#3432)

* extend demo shell upload example to button

* [ADF-2764] Added new type linker features and applied them to core docs (#3442)

* [ADF-2764] Added basic support for composite and external types

* [ADF-2764] Added new type linker features and applied to core docs

* notification service demo and testing area (#3443)

* notification service demo and testing area

* fix typo

* fix viewer title style (#3445)

* [ADF-3132] TaskList empty state doesn't respect the specification (#3440)

* [ADF-3134] fix increasing search calls issue (#3444)

* [ADF-2764] Applied new type linker features to content services docs (#3446)

* [ADF-3062] dual api support for Favorites (#3447)

* dual api support for Favorites

* unit test

* ADF-2974] New Buttons Menu component version (#3429)

* [ADF-2974] Buttons injected from parent html component

* [ADF-2974] New version of buttons menu component

* [ADF-2974] Updated unit tests

* [ADF-2974] Updated documentation

* [ADF-2974] Removed unused variable

* [ADF-2974] Fixed failing test at analytics report parameters

* [ADF-2974] Removed fdescribe

* [ADF-2974] Moved mock inside testing file for buttons menu component

* extend breadcrumb testing page (demo shell)

* [ADF-3142] Added missing info about 'remember me' in login docs (#3448)

* [ADF-3120] fixed sorting for tasklist and process list (#3435)

* [ADF-3120] fixed sorting for tasklist and process list

* [ADF-3120] removed commented code

* [ADF-3120] fixing another randomly failing test

* [ADF-2764] Applied new type linker features to proc services docs (#3449)

* (demo shell) fix memory leak with search results

* [ADF-2795] SSO implicitflow (#3332)

* Enable OAUTH2

* Create SSO services

* SSO improvements

* Rollback sso login change

* Add SSO configuration from Setting component

* Refactoring

* Remove login ECM/BPM toggle and move use the userpreference instead of store

* fix host setting unit test

* Fix unit test missing instance

* use the Js api oauth

* add logout component and clean sso not used class

* fix dependencies cicle

* add translation settings

* fix style setting page

* clean

* JS APi should receive the oauth config from the userPreference and not from the config file

* change login if SSO is present

* missing spaces

* add sso test in login component

* add logout directive new properties test

* Improve host setting and remove library reference

* fix login test

* Remove unused code

* Fix authentication unit test

* fix authguard unit test

* fix csrf check login component

* fix unit test core and demo shell

* remove

* simple filtering for datatable (#3453)

* [ADF-3150] Moved all doc tool config settings to doctool.config.json (#3455)

* [ADF-3150] Moved undoc stoplist to doc config file

* [ADF-3150] Moved config to doctools.config.json and removed obsolete scripts

* fixes for memory leaks and multiple subscriptions (#3456)

* fix content action memory leaks

* memory leak fixes for demo shell

* [no-issue] error image resolver mimetype should not be part of datatable (#3415)

* move error image custom logic form datatable to documentlist

* change travis

* [fix-test-log] added optional function to data row interface

* [no-issue] fixed datatable tests

* [no-issue] fixing tests

* [ADF-2859] conditional evaluation of disabled state for content actions (#3450)

* react on [disabled] binding changes

* [disabled] binding updates for context menu items

* evaluating disabled state with a function

* unit test

* restore original description

* remove irrelevant test

* fix tests

* fix test

* remove not used events in demo shell host setting components

* [ADF-3156] App config default ALL (BPM and ECM) provider (#3460)

* Use as default provider ALL (BPM and ECM)

* Default host OAUTH

* removing wrong fdescribe (#3461)

* [ADF-3123] removed default choice for the first radio button (#3462)

* Fix host component (#3463)

* [ADF-2824] Doc review and minor changes to review checker tool (#3466)

* restore historical selection order (#3467)

* restore historical selection order

* fix test

* [ADF-2859] fixes for the conditional visibility and disabled states (#3465)

* fixes for the conditional visibility and disabled states

* update docs

* cleanup code

* remove unused code

* [LOC-61] i18n 2.4.0 (#3468)

* i18n 2.4.0

* missing part

* revert development config

* [ADF-3144] Error component displayed when closing file viewer in process tab (#3469)

* [ADF-3173] [Task List] - Empty list message is not translated (#3471)

* Added a missing translation keys.

* Fix dropdown panel in viewer toolbar  because of z-index (#3472)

* [ADF-3162] Setting component - Should be able to render the providers passed as input (#3464)

* Be able to change the available providers values

* Add deprecated tag

* add default providers

* Fix empty OAuth and selected providers
Improve the documentation

* Fix BPM guard to check SSO condition

* Add the oauthConfig again

* SSO or Basic otpion auth setting change

* fix host settings sso/basic
add login documentation

* remove test string

* fix auth guard test

* dispose upload emitter test events

* remove space

* exclude failing test

* Update ADF packages version 2.4.0-beta13 (#3475)

* [ADF-2824] Reviewed search docs for 2.4 (#3477)

* [ADF-2824] Moved search widget docs into separate pages

* [ADF-2824] Separated search widget page and added search filter service docs

* [ADF-2824] Updated new search docs with doc tools

* Remove unused field (#3480)

* Fix default SSO config not filled in (#3479)

* [ADF-3175] renabling upload on single target folder row (#3473)

* [ADF-3191] Not able to login only to BPM or ECM (#3478)

* disable random test

* host setting component reset JS-API

* reload api after user prefrence change

* remove replicate reset

* missing semicolon

* deprecate provider property

* remove trailing space

* check new value before to set

* [ADF-3198] Updated index files + minor doc updates (#3482)

* [ADF-3200] custom Extension filter - file with different extension is uploaded with drag and drop

* [ADF-3181] Auth Guard - redirect by string url (#3474)

* redirect by string url

* auth guard tests fix

* revise

* [ADF-3196] fixed task selection and double click (#3484)

* [ADF-3191] Fix userprefrence oauth2 (#3488)

* remove user preference setting save

* fix host setting test

* remove userPreferences test

* fix title service test

* remove unused imports

* restore input align

* fix service import in test tag rating

* [ADF-3210] Typo People Search (#3487)

* remove vscode changes

* [ADF-3196] [Task list / Process list] - The 'Task details' are not diplayed for the selected Task (#3483)

* [ADF-3196] [Task list / Process list] - The 'Task details' are not displayed for the selected Task

* * After rebase

* [ADF-3176] Fixed permissionsissue when editing metadata (#3476)

* [ADF-3217] reset previous search settings (#3490)

* reset previous search settings

* unit test

* remove fit

* [ADF-3196] fixed selection of first tasklist element (#3491)

* [ADF-3196] [Task list / Process list] - The 'Task details' are not displayed for the selected Task

* * After rebase

* [ADF-3196] fixed selection for fist element

* [ADF-3212] Upload version buttons wrapping fixed (#3492)

* Update ADF packages version 2.4.0-beta14 (#3493)

* demo shell host setting component login redirect after setting

* remove old auth test not  valid anymore

* fix translations (#3497)

* [ADF-3203] Fixed doc tools bugs from Linux run and added verbose option (#3496)

* [ADF-3912] Setting Component - Return as default BASIC authType (#3495)

* Return as default BASIC authType

* remove the commented line

* [ADF-3190] Fix rerendering issue with content-meta-data (#3494)

* Fix rerendering issue with content-meta-data

* Fix indentation

* [ADF-3198] Index and tutorial content review (#3500)

* [ADF-3198] Fixed glitches in doc index files and tools

* [ADF-3198] Reviewed new tutorial content and fixed index glitches

* [ADF-3198] Fixed host settings component brief description

* [ADF-3223] Restore message directive files fix (#3499)

* fix restore notification

* improve path specification property

* fix lint and document issues

* fix test

* remove unused import

* [ADF-3226] remove Double behaviour setting allow download and comment (#3502)

* fix restore notification

* improve path specification property

* fix lint and document issues

* fix test

* remove unused import

* remove double behavior allowComments and allowDonload can be set only thorough input property

* [ADF-3233] fixed demo shell filtering for files on drag&drop] (#3504)

* [ADF-3232] fixing retrieving for ecm user via site service (#3506)

* [ADF-3176] file content reload fixed (#3501)

* file content reload fixed

* refactoring & layout fix

* resolve indentation problems

* missing semicolon

* [ADF-3224] move ticket store logic in js-api (#3505)

* move ticket store logic in js-api

* remove space

* fix test

* fix tests

* [ADF-3212] Fixed permission issues when updating version (#3503)

* [ADF-3213] Fixed permission issues when updating version

* [ADF-3212] fixed test for PR

* allowableOperations include viewer get node

* update demo shell with metadata demo

* undo ADF-3176 changes

* fix login oauth cookie problem (#3508)

* fix login don't check the cookie in oauth2

* fix test

* check boolean storage

* fix provider check

* clean local storage before auth test

* fix missing pdf viewer update when scale is the same (#3510)

* [ADF-3239] Fixed deprecated property descriptions (#3509)

* [ADF-3239] Changed deprecated properties to include full description

* [ADF-3239] Updated deprecated properties of affected doc files

* [ADF-3239] Fixed badly formatted doc comment in tasklist

* [ADF-3229] people widget list reseted if empty input (#3507)

* list reseted when input is empty

* test added

* [ADF-3242] removed filter for string in example log component (#3511)

* [ADF-3242] removed filter for string in example log component

* [ADF-3242] added try catch for circular dependency objects

* [ADF-3242] added try catch and removed error message

* invalidate session in host setting internal component instead to logout

* remove unused import

* use i18n key for "Permission" label

* [ADF-3198] Final doc checks for release (#3513)

* [ADF-3198] Doc link check for release

* [ADF-3198] Updated main index doc page

* remove invalidation session because is concern of the js-api

* check 401 and redirect demo shell (#3516)

* [ADF-3248] fixed readonly status for people widget (#3512)

* [ADF-3248] fixed readonly status for people widget

* [ADF-3248] fixed test people widget

* [ADF-3248] added readonly test

* [ADF-3251] Authentication Service - Check if used loggedin based on the provider (#3515)

* check if loggedin based on the provider

* Fix unit tests

* remove 404 check in demo shell

* [ADF-3262] Remove avoidable css style from task/process list component (#3518)

* [ADF-3230] Changes to stop doc tools from updating files unnecessarily (#3519)

* [ADF-3230] Added basic change detector to doc tools

* [ADF-3230] Updates to type linker to fix before/after inconsistencies

* [ADF-3230] Fixed comparison error caused by adjacent text blocks

* [ADF-3230] Added basic change detector to doc tools

* [ADF-3230] Updates to type linker to fix before/after inconsistencies

* [ADF-3230] Fixed comparison error caused by adjacent text blocks

* [ADF-3230] Modified props tool to remove spaces from union types

* [ADF-3230] Made ToC tool before/after state consistent

* [ADF-3265] Updated index script to remove brief desc links (#3520)

* bump 2.4.0 version
This commit is contained in:
Eugenio Romano
2018-06-25 11:24:26 +01:00
committed by GitHub
parent c3db1c2ff8
commit f9658e2879
1054 changed files with 70758 additions and 16578 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
docs/tutorials/README.md
View File

@@ -14,7 +14,15 @@ The tutorials are graded as follows:
| Name | Level | Abstract |
| -- | -- | -- |
| [**Preparing the development environment**](preparing-environment.md) | Beginner | In this content is shared all the prerequisites valid for all the tutorials and descriptions of the entire documentation. This content contains the development environment description, along with the details of the suggested versions for each tools, library or module. |
| [**Adding a new component**](new-component.md) | | By definition a _component_ controls a patch of screen called a view. As an example, individual components define and control menus, tabs, forms, buttons and every simple or complex portion of layout of an application. In this tutorial you will learn how to create a component using [Angular CLI](https://cli.angular.io/). After the creation you will learn how to add it to an existing application. |
| [**Adding a new component**](new-view.md) | Beginner | By definition a _component_ controls a patch of screen called a view. As an example, individual components define and control menus, tabs, forms, buttons and every simple or complex portion of layout of an application. In this tutorial you will learn how to create a component using [Angular CLI](https://cli.angular.io/). After the creation you will learn how to add it to an existing application. |
| [**Using components**](using-components.md) | Beginner | There are three different ways to use, extend and configure an ADF component: configuration properties, event listeners, content projection / HTML extensions. In this tutorial you are going to see a practical example for each approach. As an example, the Login component will be used. |
| [**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 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. |
| [**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. |
| [**Working with the Nodes API Service**](working-with-nodes-api-service.md) | | In this tutorial you will learn how to use the [`NodesApiService`](https://github.com/Alfresco/alfresco-ng2-components/blob/master/lib/core/services/nodes-api.service.ts). We have developed some practical examples to show you how to interact with an instance of Alfresco Content Services without using the REST endpoints directly. With this approach the `NodesApiService` is used as an abstraction layer, defined by one of the services in the ADF Core library. |
| [**Working with Nodes using the JS API**](working-with-nodes-js-api.md) | | In this tutorial you will learn how to use the [`AlfrescoCoreRestApi`](https://github.com/Alfresco/alfresco-js-api/tree/master/src/alfresco-core-rest-api). We have developed some practical examples to show you how to interact with an instance of Alfresco Content Services without using the REST endpoints directly. With this approach the `AlfrescoCoreRestApi` is used as an abstraction layer, defining one of the core services of the [`alfresco-api-js`](https://github.com/Alfresco/alfresco-js-api) library. |
| [**Content metadata component**](content-metadata-component.md) | Advanced | In this tutorial you will learn how to work with the [`ContentMetadataComponent`](https://alfresco.github.io/adf-component-catalog/components/ContentMetadataComponent.html). This component is used to render the standard and custom metadata of generic content item (called a _node_) stored in Alfresco Content Services. With the usual approach "learning by doing", you will see here some practical examples you might find useful in your own applicatioin. As a starting point, we will use and customize the [Alfresco Content App](https://github.com/Alfresco/alfresco-content-app). |

88
docs/tutorials/basic-theming.md Normal file
View File

@@ -0,0 +1,88 @@
---
Level: Beginner
---
# Basic theming
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.
## About the `adf-core` theming
As described in the [user guide about theming](../user-guide/theming.md), eveything happens in the `src/custom-style.scss` file defining the *primary*, the *accent* and the *warn* set of palettes. For a detailed description of the different types of palettes, check the [user guide about theming](../user-guide/theming.md).
As you can see directly in the `css` file, the sets of palettes are configured using some predefined variables used in the source code as described below.
$primary: mat-palette($alfresco-accent-orange);
$accent: mat-palette($alfresco-accent-purple);
$warn: mat-palette($alfresco-warn);
The `mat-palette` function is used to define the [Material Design](https://material.io/design/introduction/) Palettes from a collection of colors and `$alfresco-ecm-cyan`, `$alfresco-accent-purple` and `$alfresco-warn` are variables declared locally in the project to define the colors to be used in the application.
As you would expect, changing the parameter of the `mat-palette` function will change the colours of the entire application together.
All the available variables containing the set of palettes for the application can be found in the `node_modules/@alfresco/adf-core/_theming.css` file. In that file you can find:
- `$alfresco-ecm-cyan`
- `$alfresco-dev-teal`
- `$alfresco-ecm-blue`
- `$alfresco-bpm-green`
- `$alfresco-warn`
- `$alfresco-accent-purple`
- `$alfresco-accent-orange`
Check the `_theming.css` file to see the latest changes and how the variables are structured and defined.
## Changing the palette of your application
As an example, let's change the set of palettes for the primary colours. In the `src/custom-style.scss` file, change the `$primary` definition as follows.
$primary: mat-palette($alfresco-ecm-blue);
Once done, save the `custom-style.scss` file and you will see the application refreshed with different colours. That's all there is to it.
## Developing your own palette
In some cases you might want to do something more "customized", and you might want to choose your preferred colours for your application. In this case you simply need to develop your own palette in a local variable and use it as the primary, accent or warn palette.
As an example, let's edit the `src/custom-style.scss` file adding the following source code immediately before the definition of the `$primary` variable.
$my-own-brown: (
50: #f9f2ec,
100: #ecd9c6,
200: #dfbf9f,
300: #d2a679,
400: #c68c53,
500: #ac7339,
600: #86592d,
700: #604020,
800: #392613,
900: #130d06,
A100: #e6ccb3,
A200: #cc9966,
A400: #996633,
A700: #4d3319,
contrast: (
50: $black-87-opacity,
100: $black-87-opacity,
200: $black-87-opacity,
300: $black-87-opacity,
400: $black-87-opacity,
500: white,
600: white,
700: white,
800: $white-87-opacity,
900: $white-87-opacity,
A100: $black-87-opacity,
A200: white,
A400: white,
A700: white,
)
);
When you have done this, replace the `$primary` definition as follows and save the `custom-style.scss` file:
$primary: mat-palette($my-own-brown);
After a few seconds you will see the application refreshing with different colours in the upper menu. In the following screenshot you can see how the new palette looks:
![theming_palette](../docassets/images/theming_palette.png)

106
docs/tutorials/content-metadata-component.md Normal file
View File

@@ -0,0 +1,106 @@
---
Level: Advanced
---
# Content metadata component
In this tutorial you will learn how to work with the [`ContentMetadataComponent`](https://alfresco.github.io/adf-component-catalog/components/ContentMetadataComponent.html). This component is used to render the standard and custom metadata of generic content item (called a *node*) stored in Alfresco Content Services. With the usual approach "learning by doing", you will see here some practical examples you might find useful in your own applicatioin. As a starting point, we will use and customize the [Alfresco Content App](https://github.com/Alfresco/alfresco-content-app).
## About the `ContentMetadataComponent`
As described in the [`ContentMetadataComponent`](https://alfresco.github.io/adf-component-catalog/components/ContentMetadataComponent.html) documentation, the `adf-content-metadata-card` tag has some useful attributes, included the `preset` attribute, which is used to point to a collection of aspects/properties to render.
Below, you can see the `preset` value requesting to render all the available aspects/properties:
```html
<adf-content-metadata-card
[node]="..."
[preset]="'*'">
</adf-content-metadata-card>
```
As another example, you can see the `preset` value requesting to render all the available aspects/properties related to a specific configuration, named `custom`:
```html
<adf-content-metadata-card
[node]="..."
[preset]="'custom'">
</adf-content-metadata-card>
```
All the `preset` configurations are defined in one single configuration file named `app.config.json`, stored in the `src` folder of the project. The `app.config.json` file contains all the configurations of the ADF application, including a section named `content-metadata`, which is used to store the `presets`. The following JSON excerpt gives an example of configuration for the `preset` named `custom`:
```json
"content-metadata": {
"presets": {
"custom": [
{
"title": "APP.CONTENT_METADATA.EXIF_GROUP_TITLE",
"items": [
{
"aspect": "exif:exif",
"properties": [
"exif:pixelXDimension",
"exif:pixelYDimension",
...
]
}
]
}
]
}
},
```
This configuration will show all the listed properties prefixed with `exif:*` in a group titled with the value of the variable `APP.CONTENT_METADATA.EXIF_GROUP_TITLE` for the aspect `exif:exif`. Since this aspect is not related to the node, the component will simply ignore the rendering and nothing will be displayed for these properties. In other words: the aspects to be displayed are calculated as an intersection of the preset's aspects and the aspects related to the node.
## Adding and using a new `preset` configuration
In this example we will add a new preset configuration and see how it looks in the user interface.
### Adding a new `preset` configuration
To add a new `preset` configuration, edit the `src/app.config.json` file and locate the `content-metadata` section. Then, append the following JSON to the `presets` content and save the file:
```json
...,
"content-metadata": {
"presets": {
"custom": [...],
"my-preset": [
{
"title": "This is my preset",
"items": [
{
"aspect": "st:siteContainer",
"properties": ["*"]
}
]
}
]
}
},
```
**Note:** As an alternative to `"properties": ["*"]` (which matches all the properties of the `st:siteContainer` aspect), you can use `"properties": ["st:componentId"]`, which will render one property only.
### Using the `my-preset` configuration
Now that the `my-preset` configuration is defined, let's use it in a view of the ADF application. As an example, let's edit the files view, stored in the `src/app/files` folder. Specifically, let's change the `files.component.html` file as follows:
```html
<adf-content-metadata-card
...
[preset]="'my-preset'">
</adf-content-metadata-card>
```
### Viewing the result
After saving the html file, open the ADF app in a browser and dive into the `Personal Files > Sites > swsdp` folder of the Alfresco's repository. Once there, select the `documentLibrary` folder (one click only) and click on the view details icon (the `i` on the top right). Scrolling down the metadata tab on the right, click on the `More information` item at the bottom. Once clicked, you will see two different groups: `Properties` (already there by default) and `This is my preset`. Click on `This is my preset` to show the properties related.
In the following screenshot you can see how the result should look:
![content_metadata_preset](../docassets/images/content_metadata_preset.png)
To check it out, double click on the `documentLibrary` folder and select (with one click) the `Presentations` folder. You should see the `This is my preset` group disappear from the metadata panel, because the node doesn't have the `st:siteContainer` aspect.

123
docs/tutorials/creating-javascript-app-using-alfresco-js-api.md Normal file
View File

@@ -0,0 +1,123 @@
---
Level: Basic
---
# Creating your Alfresco JavaScript application
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.
The tutorial uses Alfresco Content Services for demonstration purposes, but development on
top of Alfresco Process Services follows exactly the same principles.
**Note:** You can develop for Alfresco Content Services AND Alfresco Process Services together but
with the only limitations introduced by
[CORS](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing). If you want to develop for both
services then you might need to proxy your application first.
## Prerequisites
The only prerequisite of this tutorial is that an instance of Alfresco Content Services in a [Docker](https://www.docker.com/) container should be available. Docker is not the only option for deployment,
but its simplicity allows us to focus more on the development of the environment setup.
If you don't have an instance of Alfresco Content Services up and running, see
[Preparing the development environment](./preparing-environment.md)
to learn how to set it up.
You will need the `npm` client to download the requested Node libraries (also explained in
[Preparing the development environment](./preparing-environment.md)).
## Creating the JavaScript application
Assuming that you have your Alfresco Content Services instance up and running at `http://localhost:8082/alfresco`, let's see here how to develop a JavaScript application from scratch.
The JavaScript application will be able to interact with Alfresco back-end services using the
[`alfresco-js-api`](https://github.com/Alfresco/alfresco-js-api) library. This library does not
necessarily have to be used with Angular applications since it is "framework agnostic".
Before starting the development of the source code, create a local folder called `my-js-app`
that will contain the entire JavaScript application.
### Creating the `index.html` file
Inside the `my-js-app` folder, create the `index.html` file with the following content:
```html
<html>
<head>
<script src="node_modules/alfresco-js-api/dist/alfresco-js-api.js"></script>
<script >
this.alfrescoJsApi = new AlfrescoApi({ provider:'ECM', hostEcm: 'http://localhost:8082/' });
this.alfrescoJsApi.login('admin', 'admin').then(function (data) {
alert('API called successfully to login into Alfresco Content Services.');
}, function (error) {
console.error(error);
});
</script>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
```
As you can see, the content describes a very simple and basic HTML + JavaScript page, containing the source code to log into Alfresco Content Services at the URL `http://localhost:8082/alfresco`.
All the magic happens because of the inclusion (and use) of the `alfresco-js-api.js` library.
### Adding the `alfresco-js-api` library
To install the `alfresco-js-api.js` library: open a terminal, move into the `my-js-app` folder and run the following command.
npm install --save alfresco-js-api
Once launched, the command downloads the numerous files of the library into the `node_modules` folder.
**Note:** `npm` will create a `package-lock.json` file into the root folder of your project during
execution. This file won't be used and you can safely ignore it.
Believe it or not, this is all you need to develop a (very basic) JavaScript application on top of Alfresco Content Services.
## Deploying the application
Now that the JavaScript application is created, the next step is to deploy it to the HTTP Server for
use. To avoid the [CORS](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing) issue, for the purpose of this tutorial, the app will be deployed into the same instance of
[Apache Tomcat](http://tomcat.apache.org/) used by Alfresco Content Services. This setup is not ideal
for production use but it is the fastest way we could find to show the results for the tutorial.
To deploy the `my-js-app` application into the Alfresco Content Services Docker container, open a terminal and launch the following commands from inside the `my-js-app` folder:
// List the active containers into your environment.
docker container ls
// Copy the CONTAINER_ID of the image with name 'alfresco/alfresco-content-repository-community:...'.
// Open a shell into the container.
docker exec -i -t <CONTAINER_ID> /bin/bash
// Create the 'my-js-app' folder into the Tomcat's webapps folder.
mkdir webapps/my-js-app
// Back to the host's shell.
exit
// Copy the 'my-js-app' folder into the Tomcat's webapps folder.
docker cp ../my-js-app <CONTAINER_ID>:/usr/local/tomcat/webapps
This is all you need to deploy the JavaScript application into the same Tomcat instance as
Alfresco Content Services.
## The JavaScript application in action
To see the JavaScript application in action, open a browser at `http://localhost:8082/my-js-app`.
You should see something like the following screenshot:
![javascript_app_launch](../docassets/images/javascript_app_launch.png)
Of course this is a very basic example to show how to develop a JavaScript application
(not necessarily an Angular application) interacting with Alfresco Back-end Services using
the [`alfresco-js-api`](https://github.com/Alfresco/alfresco-js-api) library.

75
docs/tutorials/creating-the-app-using-yeoman.md Normal file
View File

@@ -0,0 +1,75 @@
---
Level: Basic
---
# Creating your ADF application using Yeoman
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.
## Prerequisites
Before any further task, be sure you executed the optional section described in [the preparation of the development environment](./preparing-environment.md), dedicated to the installation of the ADF Yeoman generator. This is a requested prerequisite to complete this tutorial with success.
## Creating the ADF application
The creation of a brand new application is straightforward using the [Yeoman generator](http://yeoman.io/). Open a terminal and execute the following command.
yo alfresco-adf-app
After the execution, the generator asks few questions: mainly the name of your app (in this example we are going to use `myApp`) and which blueprint you want to use. below the picture showing how the wizard looks like.
![yeoman_creation](../docassets/images/yeoman_creation.png)
You can select one of the three following blueprints.
**Process Services**
This will generate an application for Alfresco Process Services. It mainly contains the following components: Login, App List, Task List, Form and Start Process.
**Content Services**
This will generate an application for Alfresco Content Services. It mainly contains the following components: Login, Document List, Viewer.
**Process and Content Services**
This will generate an application for both Alfresco Process and Content Services and will be a combination of the two blueprints above.
Select your preferred one and the generator asks if you want to install dependencies right away. Enter `Y` and hit enter. This can take a minute or two depending on your internet connection. You might see a few warnings at the end like this:
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN @mat-datetimepicker/core@1.0.4 requires a peer of @angular/core@^5.2.3 but none is installed. You must install peer dependencies yourself.
npm WARN @mat-datetimepicker/core@1.0.4 requires a peer of @angular/material@^5.2.4 but none is installed. You must install peer dependencies yourself.
npm WARN @mat-datetimepicker/core@1.0.4 requires a peer of @angular/cdk@^5.2.4 but none is installed. You must install peer dependencies yourself.
npm WARN @mat-datetimepicker/moment@1.0.4 requires a peer of @angular/material@^5.2.4 but none is installed. You must install peer dependencies yourself.
npm WARN @mat-datetimepicker/moment@1.0.4 requires a peer of @angular/material-moment-adapter@^5.2.4 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/compiler-cli@5.2.10 requires a peer of @angular/compiler@5.2.10 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
These warnings are normal. Unfortunately they happen within the Angular Flex Layout package that ADF depends on. You can safely ignore them.
Once done, you will find a folder named `myApp` where you can find all the ADF application already created and completed.
## Configuring the application
To configure the ADF application, you only need to point on the correct Alfresco Content Services and Alfresco Process Services, accordingly with the blueprint you decided to use during the creation.
To setup the correct back-end services, change into the directory of your app (`myApp` in our case) and inspect the `proxy.conf.json` file. This file will tell Angular Webpack to create a proxy for your backend (Content or Process services). Change the URLs and ports to reflect where they are currently running. Below an example of how the `proxy.conf.json` file should look like.
{
"/alfresco": {
"target": "http://localhost:8080", // <-- Change this!
"secure": false,
"changeOrigin": true
},
"/activiti-app": {
"target": "http://localhost:9999", // <-- Change this!
"secure": false,
"changeOrigin": true
}
}
## Using the application
Now that you ADF application is correctly configured, start it running the `npm start` command from a terminal, double checking you are located into the project folder (in our case `myApp`). The execution of the command takes a couple of seconds and a browser will automatically open at `http://localhost:4200/`.
As you can see from the user interface, the Alfresco ADF application is really straightforward and basic. This is a precise requirement for this example, because it focuses the attention on the comprehension of the basis, instead of containing complex features that will be part of an intermediate/expert learning path. Below a screenshot of how the home page looks like.
![yeoman_start](../docassets/images/yeoman_start.png)

44
docs/tutorials/customising-login.md Normal file
View File

@@ -0,0 +1,44 @@
---
Level: Intermediate
---
# Customizing the Login component
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.
## Locating the component into your application
Starting from an existing ADF application, the `Login` component, like any other component, is stored in a subfolder of the `app` folder. In the
[Alfresco Content App](https://github.com/Alfresco/alfresco-content-app)
it is stored in the `/src/app/components/login` path. In an ADF app created with [Yeoman](http://yeoman.io/)
it is stored in the `/src/app/login` path.
Once you have located the `Login` component for your application, you can customize it as described below.
## Changing the header
As with every regular
[Angular Component](https://angular.io/guide/architecture-components),
you can customize the `Login` component can be customised via CSS, HTML and Typescript. In this simple
example, we will customize the header (as described also in the
[technical documentation](https://alfresco.github.io/adf-component-catalog/components/LoginComponent.html)).
Open the `login.component.html` file and change the content to match the following source code:
```html
<adf-login ...>
<login-header><ng-template>My custom HTML for the header</ng-template></login-header>
</adf-login>
```
After saving the file, the login form will look like this:
![login_header](../docassets/images/login_header.png)
## More examples
As mentioned earlier, this is a very basic example and the `Login` component can be customized
much more extensively than this. For a complete and detailed description, full of examples, check the
[technical documentation about the component](https://alfresco.github.io/adf-component-catalog/components/LoginComponent.html).
This describes every customization available for the `Login` component.

56
docs/tutorials/new-component.md
View File

@@ -1,35 +1,59 @@
---
Level: Basic
---
# Adding a new component
By definition a *component* controls a patch of screen called a view. As an example, individual components define and control menus, tabs, forms, buttons and every simple or complex portion of layout of an application. In this tutorial you will learn how to create a component using [Angular CLI](https://cli.angular.io/). After the creation you will learn how to add it to an existing application.
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.
## Creating a component
Starting from the root of your project, run the following command into a terminal.
Starting from the root of your project, run the following command in a terminal:
ng generate component my-first-component
If you are adding the component to an application with more than one module, you might want to specify it using the `--module` parameter. For example use `--module app` to add the new component to the root app of your application.
## Using the component
Once done, wherever you will use `<app-my-first-component></app-my-first-component>` into the HTML file of another component, you will see the content of the new component rendered exactly in that place.
As an example, add `<app-my-first-component></app-my-first-component>` on top of the `app.component.html` file stored into the `src` folder, and run the application again. Directly in the browser you will see `my-first-component works!`, that shows exactly the place where the component is rendered in the layout.
Once the component is created, you can use the element
```html
<app-my-first-component></app-my-first-component>
```
anywhere within the HTML file of another component to render the content of `my-first-component`.
As an example, add `<app-my-first-component></app-my-first-component>` at the top of the
`app.component.html` file in the `src` folder, and run the application again. In the browser you will
shortly see the text "my-first-component works!", as a placeholder to show where the component is
rendered in the layout.
## Anatomy of the component
By default the new component is created into the `src/app` path and everything is stored in a folder named like the component itself. In this example a folder named with `my-first-component` is added to `src/app`, with inside the following content:
- `my-first-component.component.scss` containing the CSS used by the component. This file is created as empty.
- `my-first-component.component.html` containing the HTML used to render the component. This file is created with a very basic message rendering the name of the component included in a `p` tag.
By default the new component is created in the `src/app` path and everything is stored in a folder with the
same name as the component itself. Here, you should find a folder named `my-first-component` has been added
to `src/app`, with the following contents:
- `my-first-component.component.scss` containing the CSS used by the component, initially empty.
- `my-first-component.component.html` containing the HTML used to render the component. This file is
created with a very basic placeholder message that displays the name of the component within a `p` tag.
- `my-first-component.component.spec.ts` containing the unit tests for the component.
- `my-first-component.component.ts` containing the `MyFirstComponentComponent` class implementing the business logic in typescript.
- `my-first-component.component.ts` containing the `MyFirstComponentComponent` class that implements the
business logic in typescript.
To make the component usable, one or more modules should declare it (or import it). In this example the `app.module.ts` file stored into the `src/app` folder contains the following code.
You must declare or import the component in one or more modules in order to use it. In this example the
`app.module.ts` file stored in `src/app` contains the following code:
import { MyFirstComponentComponent } from './my-first-component/my-first-component.component';
```ts
import { MyFirstComponentComponent } from './my-first-component/my-first-component.component';
@NgModule({
declarations: [
...
MyFirstComponentComponent
],
@NgModule({
declarations: [
...
MyFirstComponentComponent
],
```
These are the very basic information you should be know about your brand new component. All you have read here is standard Angular, not customised or valid for ADF applications only.
These is the most basic information you need to know about your component. Everything mentioned here is
standard Angular code without anything specific to ADF applications.

143
docs/tutorials/new-view.md
View File

@@ -1,38 +1,135 @@
---
Level: Beginner
---
# Adding a new component
By definition a *component* controls a patch of screen called a view. As an example, individual components define and control menus, tabs, forms, buttons and every simple or complex portion of layout of an application. In this tutorial you will learn how to create a component using [Angular CLI](https://cli.angular.io/). After the creation you will learn how to add it to an existing application.
# Adding a new view
## Creating a component
Starting from the root of your project, run the following command into a terminal.
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.
ng generate component my-first-component
## Creating a view
If you are adding the component to an application with more than one module, you might want to specify it using the `--module` parameter. For example use `--module app` to add the new component to the root app of your application.
In an Angular application, a view is implemented by a regular component. A view can use other views
(ie, other components) but a view can also be used to implement the full layout of your application.
This is the reason why creating a view is not necessarily the same task as creating a component.
## Using the component
Once done, wherever you will use `<app-my-first-component></app-my-first-component>` into the HTML file of another component, you will see the content of the new component rendered exactly in that place.
To create a view, run the following command in a terminal from the root of your project:
As an example, add `<app-my-first-component></app-my-first-component>` on top of the `app.component.html` file stored into the `src` folder, and run the application again. Directly in the browser you will see `my-first-component works!`, that shows exactly the place where the component is rendered in the layout.
ng generate component my-first-view
## Anatomy of the component
By default the new component is created into the `src/app` path and everything is stored in a folder named like the component itself. In this example a folder named with `my-first-component` is added to `src/app`, with inside the following content:
For further details about creating a component, refer to the tutorial [here](new-component.md).
- `my-first-component.component.scss` containing the CSS used by the component. This file is created as empty.
- `my-first-component.component.html` containing the HTML used to render the component. This file is created with a very basic message rendering the name of the component included in a `p` tag.
- `my-first-component.component.spec.ts` containing the unit tests for the component.
- `my-first-component.component.ts` containing the `MyFirstComponentComponent` class implementing the business logic in typescript.
## Routing the view
To make the component usable, one or more modules should declare it (or import it). In this example the `app.module.ts` file stored into the `src/app` folder contains the following code.
An Angular application has one singleton instance of the `Router` service that is used to match the browser's URL with the corresponding component to display. The `Router` service must be configured in a Typescript file with a syntax similar to the following source code.
import { MyFirstComponentComponent } from './my-first-component/my-first-component.component';
```ts
import { Routes, RouterModule } from '@angular/router';
@NgModule({
declarations: [
...
MyFirstComponentComponent
],
const appRoutes: Routes = [
{ path: 'path-in-the-app', component: ExistingComponent },
{ path: '**', component: PageNotFoundComponent }
];
@NgModule({
imports: [
RouterModule.forRoot(
appRoutes,
{ enableTracing: true } // <-- debugging purposes only.
)
// other imports here
],
...
})
```
To add the new view to the routing, change the `appRoutes` constant as follows:
```ts
const appRoutes: Routes = [
{ path: 'path-in-the-app', component: ExistingComponent },
{ path: 'my-first-view', component: MyFirstViewComponent }, // <-- Add this!
{ path: '**', component: PageNotFoundComponent }
];
```
And remember to import the component in the same file with the following syntax.
```ts
import { MyFirstViewComponent } from './my-first-view/my-first-view.component';
```
Be aware that the `Router` service can be declared in a file that can be stored in different places in the application's structure. Usually, the `Router` service is declared in a location close to the file containing
the root module.
## Testing the view
To render the new view through the application and check the user experience, restart the application and open a browser at the following URL:
http://<ip_address>:<port>/my-first-view
The result should be a very simple page with the following content.
my-first-view works!
## View parameters (optional)
In most use cases, you will want to add parameters to the view's endpoint. To enable this, change the `appRoutes` constant as follows:
```ts
const appRoutes: Routes = [
{ path: 'path-in-the-app', component: ExistingComponent },
{ path: 'my-first-view/:name', component: MyFirstViewComponent }, // <-- Change this!
{ path: '**', component: PageNotFoundComponent }
];
```
Then open the Typescript controller for the `MyFirstViewComponent` stored in `src/app/my-first-view` (`my-first-view.component.ts`). You need to add a few things here:
1. We need to `import` and `inject` the router into the class.
2. Subscribe to the router parameters and fetch the value.
3. Unsubscribe to the router parameters.
While #3 isn't strictly required, it would eventually cause a memory leak in your application, so
please remember to unsubscribe!
Modify the typescript controller `my-first-view.component.ts` to look like this:
```ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-my-first-view',
templateUrl: './my-first-view.component.html',
styleUrls: ['./my-first-view.component.scss']
})
export class MyFirstViewComponent implements OnInit {
private params: any;
name: String;
constructor(private route: ActivatedRoute) { }
ngOnInit() {
this.params = this.route.params.subscribe(params => {
this.name = params['name'];
});
}
ngOnDestroy() {
this.params.unsubscribe();
}
}
```
Next open the template `my-first-view.component.html` in the same folder and add the greeting as in
the following source code.
```html
<p>
Hello {{ name }}
</p>
```
You can now navigate to `http://<ip_address>:<port>/my-first-view/sir` and see the nice message "Hello sir".
These are the very basic information you should be know about your brand new component. All you have read here is standard Angular, not customised or valid for ADF applications only.

72
docs/tutorials/preparing-environment.md
View File

@@ -1,23 +1,25 @@
---
Level: Beginner
---
## Preparing the development environment
In this content is shared all the prerequisites valid for all the tutorials and descriptions of the entire documentation. This content contains the development environment description, along with the details of the suggested versions for each tools, library or module.
# Preparing the development environment
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.
## Node.js
[Node.js](https://nodejs.org) is a JavaScript runtime built using an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js uses [npm](https://www.npmjs.com/) as public registry and a package system.
[Node.js](https://nodejs.org) is a JavaScript runtime built using an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js uses [npm](https://www.npmjs.com/) as a public registry and package system.
You need the latest `node.js` of either the `8.x` or `9.x` branch.
You need the latest `node.js` from either the `8.x` or `9.x` branch.
To check the version, run the following command in a terminal.
node -v
## Angular CLI
The [Angular CLI](https://cli.angular.io/) is a tool to initialise, develop, scaffold and maintain [Angular](https://angular.io/) applications
[Angular CLI](https://cli.angular.io/) is a tool to initialize, develop, scaffold and maintain [Angular](https://angular.io/) applications
Earlier and later versions have issues around `@angular/devkit-core`. 1.6.6 seem to be the stable choice currently.
Version 1.6.6 seems to be the most stable version currently. Earlier and later versions have issues regarding `@angular/devkit-core`.
If you already have `Angular CLI` installed check the version by running:
@@ -29,22 +31,64 @@ To globally install `Angular CLI` version globally 1.6.6 run:
## Code Editor
We recommend [Visual Studio Code](http://code.visualstudio.com) - it's a free, lightweight and *very* powerful tool from Microsoft that works great with Angular development.
We recommend [Visual Studio Code](http://code.visualstudio.com) - it's a free, lightweight and *very* powerful tool from Microsoft that works well for Angular development.
## Alfresco Content Services (optional)
If you want to develop on top of the [Alfresco Content Services](https://www.alfresco.com/platform/content-services-ecm), you might want to install it using the [Alfresco Content Services Community Deployment](https://github.com/Alfresco/acs-community-deployment.git) project on GitHub.
We suggest to follow the instructions related to the Docker deployment, considering that you are working on a development environment.
Please note that you might want to deploy and use Alfresco Content Services Enterprise Edition instead. In this case you can use the [Alfresco Content Services Deployment](https://github.com/Alfresco/acs-deployment.git) project on GitHub.
## Alfresco Process Services (optional)
If you want to develop on top of the [Alfresco Process Services](https://www.alfresco.com/platform/process-services-bpm), you might want to install it as described in the [official documentation](https://docs.alfresco.com/process-services1.8/topics/installing_process_services.html).
Please note that ADF applications are compatible with [Alfresco Process Services powered by Activiti](https://www.alfresco.com/platform/process-services-bpm) and not with [Activiti](https://www.activiti.org/) yet.
## ADF Yeoman generator (optional)
You might want to ensure that you have `Yeoman` installed by running `yo --version`. If this is not in your system make sure you run:
You can check if you have `Yeoman` installed by running `yo --version`. If this is not in your system then you can install it by running:
sudo npm install -g yo
If you have installed it previously, you might want to make sure you uninstall them before. In ADF 2.0 we renamed the generator packages and the update is highly suggested.
(The `sudo` command is not required on Windows but you may need to ensure you are running a command
prompt with Administrator privileges).
Uninstall previous versions with:
sudo npm uninstall generator-alfresco-adf-app
sudo npm uninstall generator-ng2-alfresco-app
Install the latest version of the `generator-alfresco-adf-app` using the following command.
sudo npm install -g generator-alfresco-adf-app
If you have an earlier version of the generator installed then it usually a good idea to uninstall it before reinstalling the latest version. This is especially true if you installed the generator packages before ADF 2.0 because the packages were renamed for this version.
Uninstall previous versions with:
sudo npm uninstall generator-alfresco-adf-app
...for versions after ADF 2.0 and:
sudo npm uninstall generator-ng2-alfresco-app
...for versions before ADF 2.0.
## Alfresco Example Content Application (optional)
In some tutorials your might be required to use the [Alfresco Example Content Application](https://github.com/Alfresco/alfresco-content-app) available in a public repository on GitHub named [`alfresco-content-app`](https://github.com/Alfresco/alfresco-content-app). The Alfresco Example Content Application is an example application and it is used in the tutorial as a starting point to customise the behaviour and show the development, avoiding to loose time in building apps from scratch.
The Alfresco Example Content Application requires an instance of Alfresco Content Services up and running, to work properly. If you don't have it already, follow the instructions above in the `Alfresco Content Services (optional)` paragraph.
To make the Alfresco Example Content Application works into your development environment, clone the [`alfresco-content-app` GitHub repository](https://github.com/Alfresco/alfresco-content-app) using the following command into a terminal.
git clone https://github.com/Alfresco/alfresco-content-app
Once completed, edit the `proxy.conf.js` file into the root of the project and change the `target` property according to the Alfresco Content Services instance. Below the setup if you are using the [Alfresco Content Services Community Deployment](https://github.com/Alfresco/acs-community-deployment.git) project on GitHub.
module.exports = {
"/alfresco": {
"target": "http://0.0.0.0:8082",
...
}
};
Once done, open a terminal and move into the `alfresco-content-app` folder and run `npm install`. Then run `npm start` and the application will be served on port `4200`, at the url `http://localhost:4200`.

175
docs/tutorials/using-components.md
View File

@@ -1,107 +1,148 @@
---
Level: Beginner
---
# Using components
There are three different ways to use, extend and configure an ADF component: configuration properties, event listeners, content projection / HTML extensions. In this tutorial you are going to see a practical example for each approach. As an example, the Login component will be used.
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.
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:
The best option you should consider when you plan to use an ADF component and want to learn the details of its usage, is always to check the documentation for the component you are looking to use. More 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.
## Configuration properties
Angular components can easily be configured via properties in the HTML template. In this example we will act on the "Remember me" check and "Need Help?" + "Register" links in the footer of the Login component.
To prepare the task, be sure you have and ADF application up and running by executing `npm start` in a terminal, from the root folder of the project. Access to the login page using your browser and edit the `login.component.html` file stored into the `src/app/.../login` folder. The content of the `login.component.html` file should look like the following source code.
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.
<adf-login
copyrightText="&#169; 2017 - 2018 Alfresco Software, Inc. All rights reserved."
providers="ECM"
...
>
</adf-login>
When reviewing 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 not already specified, add both the properties both with the false value, suing the syntax described below in the example. If the properties are defined in the HTML template, toggle the value according to what you see in the source code (set them to `true` if they have the `false` value and viceversa).
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.html` file stored in the `src/app/.../login` folder. The content of the `login.component.html` file should look like the following:
<adf-login
copyrightText="&#169; 2017 - 2018 Alfresco Software, Inc. All rights reserved."
providers="ECM"
[showRememberMe]="..."
[showLoginActions]="..."
...
>
</adf-login>
```html
<adf-login
copyrightText="&#169; 2017 - 2018 Alfresco Software, Inc. All rights reserved."
providers="ECM"
...
>
</adf-login>
```
Once saved the HTML template you will see the login page updated with a different layout accordingly with the property values.
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).
**Notice:** The two new properties are specified with `[]` around them. There are three ways to configure a component.
```html
<adf-login
copyrightText="&#169; 2017 - 2018 Alfresco Software, Inc. All rights reserved."
providers="ECM"
[showRememberMe]="..."
[showLoginActions]="..."
...
>
</adf-login>
```
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.
After saving the HTML template, you will see the login page updated with a different layout matching the
new property values.
**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.
## Event listeners
Now that you've successfully configured properties on the `<adf-login/>` component, it's time to look at the events.
Now that you've successfully configured properties on the `<adf-login/>` component, it's time to look at events.
As we did for the previous task, looking at 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`.
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`.
We can subscribe to these events and have our custom code executed once these events are emitted. Let's hook into the `executeSubmit` and do a simple `alert()` once the form is submitted.
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.
Continue to edit the `login.component.html` file and add `(success)="mySuccessMethod($event)"` to the `<adf-login/>` component (the position is not relevant).
Back in the `login.component.html` file, add `(success)="mySuccessMethod($event)"` to the `<adf-login/>` component (the position is not relevant).
<adf-login
...
(executeSubmit)="myExecuteSubmitMethod($event)"
>
</adf-login>
```html
<adf-login
...
(executeSubmit)="myExecuteSubmitMethod($event)"
>
</adf-login>
```
Next you need to implement `myExecuteSubmitMethod` in the typescript class implementing the component. Edit the `login.component.ts` file stored in the same `src/app/.../login` folder and add the implementation of `myExecuteSubmitMethod` as follows.
Next, implement `myExecuteSubmitMethod` in the Typescript class that defines the component. Edit
the `login.component.ts` file stored in the same `src/app/.../login` folder and add the implementation
of `myExecuteSubmitMethod` as follows:
@Component({
...
})
export class LoginComponent {
...
```ts
@Component({
...
})
export class LoginComponent {
// Add this!
myExecuteSubmitMethod(event: any) {
alert('Form was submitted!');
console.log(event);
}
...
// Add this!
myExecuteSubmitMethod(event: any) {
alert('Form was submitted!');
console.log(event);
}
}
```
Save both the files and the login component will be refreshed in your browser. Enter random values for 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.
After saving both files, the login component 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.
**Bonus objective:** Add a custom logo and background to the login view.
**Bonus objective:** Add a custom logo and background to the login view using the relevant properties
described in the documentation.
## 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.
In regular HTML, elements can be nested, for example:
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.
<div>
<p>
<b>Here we have some bold text</b>
</p>
</div>
In regular HTML, elements can be nested. For example:
We can use the same approach with ADF components to inject custom code or entire components into the ADF component. Going to the documentation you can find more details about which targets are in place.
```html
<div>
<p>
<b>Here we have some bold text</b>
</p>
</div>
```
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.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 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.html` and add a new tag *inside* the `<adf-login/>` tag:
<adf-login
...
>
<login-footer>
<ng-template>
Hello World!
</ng-template>
</login-footer>
</adf-login>
```html
<adf-login
...
>
<login-footer>
<ng-template>
Hello World!
</ng-template>
</login-footer>
</adf-login>
```
Watch carefully 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 source in custom or 3rd party components.
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.
Once done, save the template and you should see a "Hello World!" message in the footer of your login page through your browser.
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.

417
docs/tutorials/working-with-data-table.md Normal file
View File

@@ -0,0 +1,417 @@
---
Level: Intermediate
---
# Working with a Data Table
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.
## Prerequisites and data source
Before diving deep into the technical description of the
[`DataTable` component](https://alfresco.github.io/adf-component-catalog/components/DataTableComponent.html),
let's start with a description of the development environment and its prerequisites.
In this tutorial we will start from an existing ADF application set up to use (at least) Alfresco Content
Services as a service layer. For convenience and relevance to the Data Table, we suggest using the
[Alfresco Example Content Application](https://github.com/Alfresco/alfresco-content-app). This application
is well documented [here](https://alfresco.github.io/alfresco-content-app/#/), and you can choose to
[build it from the source code](https://alfresco.github.io/alfresco-content-app/#/build) or
[run it in a Docker container](https://alfresco.github.io/alfresco-content-app/#/docker).
However, if you prefer to create a brand new ADF application from scratch then you should still be able
to follow the tutorial without difficulty.
For this tutorial, the endpoint used to populate the Data Table component is the
[`/people` service](https://api-explorer.alfresco.com/api-explorer/#!/people/listPeople) which lists
all users available in an Alfresco Content Services instance. The `/people` service is suitable for the
purpose of this tutorial because it is available by default in the Alfresco Content Services REST API.
As a follow-up, you could choose to use an Alfresco Process Services endpoint or a third party API.
Below is an example of the information returned by the
[`/people` service](https://api-explorer.alfresco.com/api-explorer/#!/people/listPeople):
```json
{
"list": {
"pagination": {
"count": 46,
"hasMoreItems": false,
"totalItems": 46,
"skipCount": 0,
"maxItems": 100
},
"entries": [
{
"entry": {
"firstName": "Jay",
"lastName": "Veeru",
"emailNotificationsEnabled": true,
"company": {},
"id": "JayVeeru2",
"enabled": true,
"email": "JayVeeru@test.con"
},
...
}
]
}
}
```
## Adding a page using the `DataTable` component
Starting from the ADF application, let's add a new component that implements a new page containing a
basic `DataTable` component. Open a terminal and `cd` to the root of the application, then run the
following command to add the component for the new page:
ng g c mydatatable -m app.module
In the `src/app/mydatatable` folder you should now find four files with extensions `html`, `scss`,
`spec.ts` and `ts`, that will be used to implement the new page.
To add the new page to the routing of the application, edit the `Routes` instance in `app.routes.ts`
(if you are using the Alfresco Example Content Application) or in `app.module.ts` (if you built the
application using the standard Angular CLI).
To define the new routing, ensure the following import is included in the file:
```ts
import {MydatatableComponent} from './mydatatable/mydatatable.component';
```
Then add a new item to the `Routes` instance, as described below.
```ts
export const APP_ROUTES: Routes = [
...,
{
path: 'mydatatable',
component: MydatatableComponent
},
...
];
```
The page will now be available at the URL `http://localhost:3000/#/mydatatable` (if you started from the
Alfresco Example Content Application).
Now that the new page is in place, let's add the `DataTable` component to it. To do this, open
the `src/app/mydatatable/mydatatable.component.ts` file and add the following import:
```ts
import { ObjectDataTableAdapter } from '@alfresco/adf-core';
```
A DataTable needs an instance of `ObjectDataTableAdapter` to be configured as the data source. Add
the source code below to the `mydatatable` component, just before the constructor:
```ts
data = new ObjectDataTableAdapter(
[
{
id: 1,
firstName: 'Name #1',
lastName: 'Lastname #1',
icon: 'material-icons://folder_open'
},
{
id: 2,
firstName: 'Name #2',
lastName: 'Lastname #2',
icon: 'material-icons://accessibility'
},
{
id: 3,
firstName: 'Name #3',
lastName: 'Lastname #3',
icon: 'material-icons://alarm'
}
]
);
```
Next, we need to put the `<adf-datatable>` component in the template and bind the data property, which will
configure the columns. Open the `src/app/mydatatable/mydatatable.component.html` file and replace the content
with the following:
```html
<adf-datatable
[data]="data">
<data-columns>
<data-column
key="icon"
type="image"
[sortable]="false">
</data-column>
<data-column
key="firstName"
title="First Name">
</data-column>
<data-column
key="lastName"
title="Last Name"
class="full-width name-column">
</data-column>
</data-columns>
</adf-datatable>
```
Save the file and go back to the browser. You should now see a datatable showing three rows, each with
three columns:
![data_table_static](../docassets/images/data_table_static.png)
## DataTable configuration
The DataTable can be configured in many different ways, which enables it to be used as the foundation
for all list components throughout ADF. The Document List, Task List, and Process List are extensions
of the DataTable, and even smaller components like Attachment List, Comment List, Version List and
Content Selector are also based on it.
Looking at the
[documentation](https://alfresco.github.io/adf-component-catalog/components/DataTableComponent.html),
we can see that it has a lot of different options, including single/multi selection, click events,
context menus, actions and keyboard navigation.
As a simple example, we'll add a `click` event to display an alert when a row is clicked. Open
`src/app/mydatatable/mydatatable.component.html` and add the following:
```html
<adf-datatable
(rowClick)="onRowClick($event)"
[data]="data">
.......
```
Next, open `src/app/mydatatable/mydatatable.component.ts` and add the method `onRowClick` as described below:
```ts
onRowClick(event: any) {
alert('We just clicked row id: ' + event.value.obj.id);
}
```
Note that the entire row is passed in the `event` parameter. This means that our method will have
access to all the data in the row, if required. When you click a row, you should now see a nice alert:
![data_table_rowClick](../docassets/images/data_table_rowClick.png)
## DataTable columns
Let's dig a bit deeper into the different options for rendering columns within the DataTable. The documentation for the
[Data Column component](https://alfresco.github.io/adf-component-catalog/components/DataColumnComponent.html)
is quite in-depth and has lots of examples. We highly recommend checking it out.
From the documentation we can see that the Data Column component has quite a few properties but the
most important ones are `key`, `type`, `sortable`, `title` and `class`.
- `key` is the name of the corresponding property in the `ObjectDataTableAdapter` object.
- `type` indicates how to render. By default it will take the `text` from the matching key in the data,
but other modes are also available:
- `image` will take a URI for a Material Icon or a URL for any image and display it.
- `date` will format a date/datetime string. Use the `format` property to override it and define a custom time format.
- `fileSize` will convert into kb/mb/gb as needed.
- `location` assumes the value is a nodeId for ACS and will display the path.
- `sortable` toggles whether or not the column can be sorted.
- `title` sets the column title in the table header.
- `class` allows you to set CSS classes for the column. Use `full-width` for the column to take as much width as it can while still leaving room for the remaining columns.
## Content projection
Sometimes it's not enough to simply render a text string or an image. To handle such cases, the Data Column
supports Content projection to allow you to control what gets rendered in the column.
Let's change the example above and introduce a status field. In the data, we define a new status field that can have the values `green` or `red`. Then we can use content projection to render the column with the color instead of the text.
Open `src/app/mydatatable/mydatatable.component.ts` and change the data to the following:
```ts
data = new ObjectDataTableAdapter(
[
{
id: 1,
name: 'Name #1',
createdBy: 'User #1',
status: 'green',
icon: 'material-icons://folder_open'
},
{
id: 2,
name: 'Name #2',
createdBy: 'User #2',
status: 'red',
icon: 'material-icons://accessibility'
},
{
id: 3,
name: 'Name #3',
createdBy: 'User #3',
status: 'green',
icon: 'material-icons://alarm'
}
]
);
```
Next we need to define a new column in the template and use `<ng-template/>` to project our own content
into it. Open the template and add the following code:
```html
<data-column key="status" title="Status">
<ng-template let-entry="$implicit">
<span *ngIf="entry.data.getValue(entry.row, entry.col) == 'red'" style="background-color: red; width: 20px; height: 20px"></span>
<span *ngIf="entry.data.getValue(entry.row, entry.col) == 'green'" style="background-color: green; width: 20px; height: 20px"></span>
</ng-template>
</data-column>
```
While this might not be best practise for setting the background, it does illustrate how to take
control over the rendition of the content within a table cell. In the picture below you can see what the
user experience looks like:
![data_table_contentProjection](../docassets/images/data_table_contentProjection.png)
## Playing with the data source
Now that you know how to control you DataTable, let's add another element by changing the data source
to integrate an external API (in this example the
[`/people` service](https://api-explorer.alfresco.com/api-explorer/#!/people/listPeople)
that lists all the users available in an Alfresco Content Services instance).
As explained above, you can do this by populating the `ObjectDataTableAdapter` object that acts as
the data source of the `DataTable` component. Open the `src/app/mydatatable/mydatatable.component.ts`
file and replace the content with the following:
```ts
import { Component, OnInit } from '@angular/core';
import { AlfrescoApiService } from '@alfresco/adf-core';
import { ObjectDataTableAdapter, ObjectDataRow } from '@alfresco/adf-core';
@Component({
selector: 'app-mydatatable',
templateUrl: './mydatatable.component.html',
styleUrls: ['./mydatatable.component.scss']
})
export class MydatatableComponent implements OnInit {
data = new ObjectDataTableAdapter([],[]);
constructor(private apiService: AlfrescoApiService) {
this.apiService.getInstance().webScript.executeWebScript(
'GET',
'people',
[],
null,
'api/-default-/public/alfresco/versions/1',
null
).then(
(response: any) => {
let results = [];
for (var entry of response.list.entries) {
results.push({
id: entry.entry.id,
firstName: entry.entry.firstName,
lastName: entry.entry.lastName,
status: 'green',
icon: 'material-icons://accessibility'
});
}
this.data.setRows(results.map(item => { return new ObjectDataRow(item); }));
}
);
}
onRowClick(event: any) {
alert('We just clicked row id: ' + event.value.obj.status);
}
}
```
As you can see, the major changes are in the constructor where the external API is invoked and the
`this.data` object id dynamically populates the table with the response of the services (assumed to
be in JSON but it could be in any format).
After saving the file, you should see something like the following in the browser:
![data_table_dataSource](../docassets/images/data_table_dataSource.png)
## Adding an action
A common and straightforward customization for a DataTable is to add an action to each row or to rows
that meet certain conditions.
Make the changes shown below to the `src/app/mydatatable/mydatatable.component.html` file:
```html
<adf-datatable
...
[actions]="true"
(showRowActionsMenu)="onShowRowActionsMenu($event)"
(executeRowAction)="onExecuteRowAction($event)">
</adf-datatable>
```
Also update `src/app/mydatatable/mydatatable.component.ts` as follows:
```ts
import { DataCellEvent, DataRowActionEvent } from '@alfresco/adf-core';
onShowRowActionsMenu(event: DataCellEvent) {
event.value.actions = [
{
title: 'Greetings'
// Put here your custom metadata.
}
];
}
onExecuteRowAction(event: DataRowActionEvent) {
console.log(event.value.row);
alert('${event.value.action.title} ${event.value.row.obj.firstName}');
}
```
After you have saved both files, you should see something like the following when you click the
three dots column in the table and select `Greetings` for the first row:
![data_table_dataSource](../docassets/images/data_table_action.png)
Note that the browser console has a log describing how the row object is shown for debugging purposes.
To make the example more realistic, let's add some interaction with an external service. We will use
the [`/people/{personId}` service](https://api-explorer.alfresco.com/api-explorer/#!/people/getPerson)
to get the complete profile data, retrieved as a JSON response. To make it simple, we will extract the data as a string, shown to the user through the usual `alert` command. In your final application you might want to use a more sophisticated modal window (the standard
[Material Dialog](https://material.angular.io/components/dialog/overview), perhaps).
To develop the enhancement, edit the `src/app/mydatatable/mydatatable.component.html` file, replacing the
`onExecuteRowAction` method as follows:
```ts
onExecuteRowAction(event: DataRowActionEvent) {
if (event.value.action.title = "Greetings") {
this.apiService.getInstance().webScript.executeWebScript(
'GET',
'people/' + event['value']['row']['obj']['id'],
[],
null,
'api/-default-/public/alfresco/versions/1',
null
).then(
(response: any) => {
alert(JSON.stringify(response.entry));
}
);
}
}
```
After saving this, the application will be updated automatically and your browser should show something
like the following when the `Greetings` action is selected for a row:
![data_table_dataSource](../docassets/images/data_table_action2.png)

229
docs/tutorials/working-with-nodes-api-service.md Normal file
View File

@@ -0,0 +1,229 @@
# Working with the Nodes API Service
In this tutorial you will learn how to use the [`NodesApiService`](https://github.com/Alfresco/alfresco-ng2-components/blob/master/lib/core/services/nodes-api.service.ts). We have developed some practical examples to show you how to interact with an instance of Alfresco Content Services without using the REST endpoints directly. With this approach the `NodesApiService` is used as an abstraction layer, defined by one of the services in the ADF Core library.
## Preparing the development environment
To focus the description on the `NodesApiService`, we will develop on top of the
[Alfresco Example Content Application](https://github.com/Alfresco/alfresco-content-app).
If you don't have it already installed in your development environment then see the
*how-to* description in
[preparation of the development environment](./preparing-environment.md).
When you have the Alfresco Example Content Application up and running, edit the `FileComponent`
defined in `src/app/components/files/files.component.ts`. Change the `onNodeDoubleClick` method
to match the source code below.
```ts
if (PageComponent.isLockedNode(node)) {
...
} else if (node.isFile) {
// Comment the line below.
// this.router.navigate(['./preview', node.id], { relativeTo: this.route });
// Add this line.
this.myOnNodeDoubleClick(node.id);
}
```
Now add the `myOnNodeDoubleClick` method as described below and save the file:
```ts
myOnNodeDoubleClick(nodeId) {
console.log("You ckicked on the node '" + nodeId + "'.");
}
```
This will change the user experience when you click on a content node (but *not* a folder):
in the browser's console you will see something like the following screenshot, instead of
the preview of the content:
![nodesapiservices_myonnodedoubleclick](../docassets/images/nodesapiservices_myonnodedoubleclick.png)
The Alfresco Example Content app is now set up to demonstrate the usage of the `NodesApiService`.
## Basic examples of usage
For a first look at the `NodesApiService`, let's check the `FileComponent` component stored in
`src/app/components/files/files.component.ts`. In the source code, you can see the `nodesApi`
property that represents the `NodesApiService` in the `FilesComponent`. See the `fetchNode` and
`fetchNodes` methods for some very basic examples.
## About the `NodesApiService`
Before going further, let's introduce the `NodesApiService` class. For further details about the
implementation, see the
[component catalog page](https://alfresco.github.io/adf-component-catalog/injectables/NodesApiService.html).
As you can see, the available methods are easy to understand and they should be all you need to
manage the nodes of your content repository.
### Observables
Almost all the methods return an [Observable](https://angular.io/guide/observables).
Observables provide support for passing messages between publishers and subscribers in Angular
applications. Observables offer significant benefits over other techniques for event handling,
asynchronous programming, and handling multiple values.
The return values of the `NodesApiService` methods are managed in the usual way for Observables.
You "subscribe" to the asynchronous messaging using the following syntax:
```ts
this.nodesApi.getNode(nodeId).subscribe(
(node) => { ... },
error => { ... }
);
```
### MinimalNodeEntryEntity
All the methods that manage content nodes return an `Observable` of the `MinimalNodeEntryEntity`
class. `MinimalNodeEntryEntity` is used to represent the node's content. See the
[official documentation](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodeMinimalEntry.md)
for further details.
### NodePaging
When a method returns a list of nodes rather than a single node, it usually returns an `Observable` of the `NodePaging` class. See the
[NodePaging](https://alfresco.github.io/adf-component-catalog/classes/NodePaging.html)
docs for further details.
## Retrieving info and metadata from a node
As a first example of the usage of the `NodesApiService`, let's retrieve the properties of a content node using its identifier. Edit the `myOnNodeDoubleClick` method in `src/app/components/files/files.component.ts`, as shown below:
```ts
myOnNodeDoubleClick(nodeId) {
this.nodesApi.getNode(nodeId)
.subscribe(
(node) => {
console.log(node.properties);
},
error => { console.log("Ouch, an error happened!"); }
);
}
```
This will show the properties of the content node in the browser's console as a log.
The screenshot below shows an example of what this looks like:
![nodesapiservices_properties](../docassets/images/nodesapiservices_properties.png)
Of course, if you prefer to use the node's data in the user interface (using a `DataTable` or
other visual component) then the principle is the same.
## Retrieving the node's children
Another common use of the `NodesApiService` is to retrieve a list of the children of a folder node.
Edit `src/app/components/files/files.component.ts` again, changing the `onNodeDoubleClick` method
to match the source code below:
```ts
if (node.isFolder) {
// Comment the line below.
// this.navigate(node.id);
// Add this line.
this.myOnFolderNodeDoubleClick(node.id);
}
```
Now add the `myOnFolderNodeDoubleClick` method as shown below and save the file:
```ts
myOnFolderNodeDoubleClick(nodeId) {
this.nodesApi.getNodeChildren(nodeId)
.subscribe(
(nodePaging) => {
console.log(nodePaging.list);
},
error => { console.log("Ouch, an error happened!"); }
);
}
```
Now, the user experience changes if you click on a folder node (but not a content node)
in the browser's console you will see something like the following screenshot:
![nodesapiservices_nodelist](../docassets/images/nodesapiservices_nodelist.png)
## Creating and deleting a subfolder
The `NodesApiService` class is not just for retrieving data. You can also use it to manage a
real CRUD of nodes (content and folders). In the following examples, you will see how to create
a subfolder of the double clicked folder and also how to delete it.
### Creating a subfolder
To create a subfolder, change the `myOnFolderNodeDoubleClick` method as described below and save the Typescript file.
```ts
myOnFolderNodeDoubleClick(nodeId) {
this.nodesApi.createFolder(nodeId, { "name": "My new subfolder" })
.subscribe(
(node) => {
console.log("Subfolder created with name '" + node.name + "' (id:'" + node.id + "').");
},
error => { console.log("Ouch, an error happened!"); }
);
}
```
The user experience now changes if you click on a folder node (but not a content node). To check
it out, double click on the `Shared` folder and in the browser's console you will see something
like the following screenshot:
![nodesapiservices_createnode](../docassets/images/nodesapiservices_createnode.png)
A new subfolder named `My new subfolder` will be created. You can check its existence using
Alfresco Share client or by replacing the content of the `myOnFolderNodeDoubleClick` method
with:
```ts
this.navigate(nodeId);`
```
...and then saving and navigating to the `Shared` folder.
In the following screenshot you can see how the browser should look:
![nodesapiservices_createnode_proof](../docassets/images/nodesapiservices_createnode_proof.png)
Note that if you double-click several times on a folder then the action should only succeed for
the first click. The behaviour is correct if you bear in mind that you are trying to create folders
with the same name in the same parent folder, which is not permitted by Alfresco Content Services.
### Deleting a folder
To delete a folder, change the `myOnFolderNodeDoubleClick` method as described below and save the Typescript file.
```ts
myOnFolderNodeDoubleClick(nodeId) {
this.nodesApi.deleteNode(nodeId)
.subscribe(
success => {
alert("Node deleted! Click on a folder into the left menu.");
},
error => { console.log("Ouch, an error happened!"); }
);
}
```
**NOTE:** This task could delete entire parts of your Alfresco repository if you double click
on the wrong folder. Test it carefully!
Now, if you click on a folder node (be careful which folder you choose!) then you will see
something like the following screenshot in the browser:
![nodesapiservices_deletefolder](../docassets/images/nodesapiservices_deletefolder.png)
You can check that the folder does not exist anymore using Alfresco Share client or by replacing
the content of the `myOnFolderNodeDoubleClick` method with
```ts
this.navigate(nodeId);
```
...and saving the file.

184
docs/tutorials/working-with-nodes-js-api.md Normal file
View File

@@ -0,0 +1,184 @@
# Working with Nodes using the JS API
In this tutorial you will learn how to use the [`AlfrescoCoreRestApi`](https://github.com/Alfresco/alfresco-js-api/tree/master/src/alfresco-core-rest-api). We have developed some practical examples to show you how to interact with an instance of Alfresco Content Services without using the REST endpoints directly. With this approach the `AlfrescoCoreRestApi` is used as an abstraction layer, defining one of the core services of the [`alfresco-api-js`](https://github.com/Alfresco/alfresco-js-api) library.
## Preparing the development environment
To focus the description on the `AlfrescoCoreRestApi`, we will develop using the
[Alfresco JavaScript application](./creating-javascript-app-using-alfresco-js-api.md).
If you don't have it already available in your development environment then see the *how-to*
description in the [dedicated tutorial](./creating-javascript-app-using-alfresco-js-api.md).
## About the `AlfrescoCoreRestApi`
Before going further, let's introduce the `AlfrescoCoreRestApi` class. For further details
about its implementation, check the documentation
[here](https://github.com/Alfresco/alfresco-js-api/tree/master/src/alfresco-core-rest-api).
As you can see, the available methods are in one-to-one relation with the REST endpoints and services of Alfresco Content Services. This makes development easy and clean, and gives the developer full access to the Alfresco Content Services REST API.
Starting with the most basic
[Alfresco JavaScript application](./creating-javascript-app-using-alfresco-js-api.md),
the `AlfrescoCoreRestApi` class can be accessed with the following command:
this.alfrescoJsApi.core
## Retrieving the children of a node
As a first example of the usage of the `AlfrescoCoreRestApi` class, let's retrieve the children of the root node, identified by the `-root-` alias. As described in the official documentation, the method `getNodeChildren` should be used as described below. Edit the `index.html` file as shown below and
replace the JavaScript source code for the login call:
```js
...
this.alfrescoJsApi.login('admin', 'admin').then(function (data) {
this.alfrescoJsApi.core.childAssociationsApi.getNodeChildren('-root-', {}).then(
function (data) {
var divElement = document.getElementById("result");
for (var i = 0; i < data.list.entries.length; i++) {
console.log(data.list.entries[i]);
var textElement = document.createTextNode(
data.list.entries[i].entry.name +
" (" +
data.list.entries[i].entry.id +
")"
);
var paragraphElement = document.createElement("p");
paragraphElement.appendChild(textElement);
divElement.appendChild(paragraphElement);
}
},
function (error) { console.error(error); });
}, function (error) {
console.error(error);
});
...
```
Then replace the HTML body as follows:
```html
<body>
<div id='result'></div>
</body>
```
Once done, save and deploy the source code as described
[here](./creating-javascript-app-using-alfresco-js-api.md),
by executing the following command from the `my-js-app` folder in a terminal:
docker cp ../my-js-app <CONTAINER_ID>:/usr/local/tomcat/webapps
If you now open the browser at the URL `http://localhost:8082/my-js-app/`, you will see
something similar to the following screenshot:
![alfrescocorerestapi_children](../docassets/images/alfrescocorerestapi_children.png)
As an exercise, you can try to implement navigation between the nodes. To do this, change the
source code of the page to accept a `nodeId` parameter and use it as the first parameter of the
`getNodeChildren` method. Then change the dynamic HTML to create a link element (`a` tag) on the
name of the child. The link will point to the same page but with `nodeId` set to the value
`data.list.entries[i].entry.id`.
## Retrieving the node data
Now that you can show the children of a node (and maybe navigate into the repository structure, if you completed the bonus exercise), let's see how to retrieve and show the data related to a node.
To make the example more complete, we split the final result into two parts: the first is about
retrieving (and showing) the data for the current node and the second is about retrieving
(and showing) the data for the child nodes.
In both cases, all is possible thanks to the
[`getNode`](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodesApi.md#getNode)
method, which gets information for a node identified by a node id.
### Retrieving and showing data about the current node
Starting from the JavaScript application developed in the previous section, let's modify the source code for `function (data)` as follows:
```js
...
function (data) {
var divElement = document.getElementById('nodeInfo');
this.alfrescoJsApi.core.nodesApi.getNode(data.list.entries[0].entry.parentId, {}).then(function(nodeData) {
console.log(nodeData);
var textElement = document.createTextNode(
'This node is named "' +
nodeData.entry.name
+ '" and its children are:'
);
var paragraphElement = document.createElement('p');
paragraphElement.appendChild(textElement);
divElement.appendChild(paragraphElement);
},
function (error) { console.error(error); });
...
```
This portion of source code retrieves the node data for the parent of the first node of the results.
Of course, if the node does not have children then this code might throw an exception. As an exercise,
change the source code to manage this situation correctly.
Once retrieved, the name of the current node is displayed in the form:
`This node is named "..." and its children are:...`. To put the text in the right place, change
the HTML body as follows:
```html
<body>
<div id='nodeInfo'></div>
<div id='result'></div>
</body>
```
### Retrieving and showing data about the child nodes
Append the following JavaScript source code to the `function (data)`:
```js
...
var divElement = document.getElementById('result');
for (var i = 0; i < data.list.entries.length; i++) {
this.alfrescoJsApi.core.nodesApi.getNode(data.list.entries[i].entry.id, {}).then(function(nodeData) {
console.log(nodeData);
var textElement = document.createTextNode(
nodeData.entry.name +
' - ' +
nodeData.entry.aspectNames
);
var paragraphElement = document.createElement('p');
paragraphElement.appendChild(textElement);
divElement.appendChild(paragraphElement);
}, function(error) { console.error(error); });
}
```
As you can see, in this piece of code, information about each node is retrieved and presented in the
form: `<node name> - <list of aspect names>`.
### Showing the results
Save and deploy the source code again by executing the following command from the `my-js-app`
folder in a terminal:
docker cp ../my-js-app <CONTAINER_ID>:/usr/local/tomcat/webapps
If you now open the browser at the URL `http://localhost:8082/my-js-app/`, you will see something
similar to the following screenshot:
![alfrescocorerestapi_nodesdata](../docassets/images/alfrescocorerestapi_nodesdata.png)