Upgrading from ADF v5.0 to v6.0

This guide explains how to upgrade your ADF v5.0 project to work with v6.0.

Do not skip this task, if you want your application to be updated to a most recent version of ADF. Upgrades of multiple versions of ADF cannot be done in one step only, but should follow the chain of sequential updates.

Note: the steps described below might involve making significant changes to your code. If you are working with a versioning system then you should commit any changes you are currently working on. If you aren't using versioning then be sure to make a backup copy of your project before going ahead with the upgrade.

Since 6.0 is a major version release, there are breaking changes you need to take into account as well as the usual library updates. After updating the libraries, check the other sections to see if any of the changes affect your project.

Contents

• Library updates
• Breaking changes
• Library to update
• Deprecated items
  • DataColumnModule
  • PaginationModel
• Relocated classes
  • Update Data-table a data change
  • NodeNameTooltipPipe
  • nodeUpdated Subject
  • Comments component
  • ViewerComponent
  • UserInfoComponent
• Renamed items
  • New Classes or Services
  • Properties and methods
  • Component selectors
• Theme changes

Library updates

1. Update the package.json file with the latest library versions:

   "dependencies": {
       ...
       "@alfresco/adf-core": "6.0.0",
       "@alfresco/adf-content-services": "6.0.0",
       "@alfresco/adf-process-services-cloud": "6.0.0",
       "@alfresco/adf-insights": "6.0.0",
       "@alfresco/js-api": "6.0.0",
       ...
   

2. Clean your old distribution and dependencies by deleting node_modules and package-lock.json.

3. Reinstall your dependencies

   npm install
   

Breaking changes

The ADF project follows the semver conventions and so we only make breaking changes (ie, not backward-compatible) in major versions. ADF 6.0 is the first major version since general availability so a number of deprecated items have been removed and also some existing items have been renamed. The sections below explain how to adapt your project to the changes in 6.0. See also our For more information about the changes and links to the associated pull requests.

[TODO ADD HERE the PRs ][`checkallowableoperationdirective`](../content-services/directives/check-allowable-operation.directive.md): Moved from ADF Core to ADF content services LibraryFavoriteDirective: Moved from ADF Core to ADF content services LibraryMembershipDirective: Moved from ADF Core to ADF content services NodeDeleteDirective: Moved from ADF Core to ADF content services NodeFavoriteDirective: Moved from ADF Core to ADF content services NodeRestoreDirective: Moved from ADF Core to ADF content services [TODO ADD HERE the PRs ]

Each section needs to contains: Title Description How to fix it:

Library to update

Deprecated items

DataColumnModule

DataColumnModule has been deprecated and moved in DataTableModule

v6.0.0 and before:

@NgModule({
    imports: [
    ```
    DataColumnModule,
    DataTableModule
    ```    
])

v6.0.0 and after:

@NgModule({
    imports: [
    ```
    DataTableModule,
    ```    
])

PaginationModel

Pagination model from @alfresco/js-api has been now deprecated in favour of internal implementated model PaginationModel evrywhere

Relocated classes

Update Data-table a data change

v6.0.0 and after You will need to provide a DataTableService to update a row of your table. The model to update the DataTable require the ID of the row you want change and the new data Object of the row

DataRowUpdateModel {
    obj: any;
    id: string;
}

For example if your table use entry nodes you can pass:

this.dataTableService.rowUpdate.next({id: node.id, obj: {entry: node}});

As good practice is better to provide a DataTableService in the component where you are going to deliver the new object

@Component({
    selector: 'app-files-component',
    templateUrl: './files.component.html',
    styleUrls: ['./files.component.scss'],
    encapsulation: ViewEncapsulation.None,
    providers: [
        DataTableService
    ]
})
class FilesComponent implements OnInit {

    constructor(private dataTableService: DataTableService,
                private nodeService: NodesApiService) {
    }
    
    ngOnInit() {
        this.nodeService.nodeUpdated.subscribe((node) => {
            this.dataTableService.rowUpdate.next({id: node.id, obj: {entry: node}});
        });
    }

NodeNameTooltipPipe

NodeNameTooltipPipe has been moved in the @alfresco/adf-content-services in ContentPipeModule

v6.0.0 and before:

@NgModule({
    imports: [
    ````
    PipeModule
    ````    
     ]})

v6.0.0 and after:

@NgModule({
    imports: [
    ````
    ContentPipeModule
    ````    
     ]})

nodeUpdated Subject

The nodeUpdated Subject has been moved from AlfrescoApiService to NodesApiService

v6.0.0 and before:

 this.alfrescoApiService.nodeUpdated.pipe .....

v6.0.0 and after:

 this.nodesApiService.nodeUpdated.pipe .....

Comments component

adf-comments component is now a real presentational components. The taskId and nodeId has now renamed to id The adf-comments has now two specialization in :

• adf-node-comments Node Comments Componen
• adf-task-comments Task Comments Component

ViewerComponent

From v.6.0.0 and after ViewerComponent no longer show content from ACS, so instead of taking nodeId as @Input, it takes blobFile and urlFile. For more details check the PR. If you need to display content from ACS you can use instead the new AlfrescoViewerComponent

UserInfoComponent

From v.6.0.0 and after UserInfoComponent is no longer active.

In its place there are now 3 presentational components:

• IdentityUserInfoComponent present in core
• ContentUserInfoComponent present in content-services
• ProcessUserInfoComponent present in process-services

To build a similar logic to the one in UserInfoComponent check implementation on demo-shell

Renamed items

New Classes or Services

• AlfrescoViewerComponent
• ViewerRenderComponent

Properties and methods

Component selectors

Theme changes

v6.0.0 has improved the way that typography is injected into the ADF theme. Now the typography of ADF is taken from the material theme following the material design specifications :

before v6.0.0

@include mat-core($typography);
$primary: mat.define-palette($primary);
$accent: mat.define-palette($accent);
$warn: mat.define-palette($warn);
$theme:   mat-light-theme($primary, $accent, $warn);

typography was already predefined inside ADF theme but this will prevent to inject different typography.

v6.0.0 and after

$typography: mat.define-typography-config(
   ...define your typography following material specifications
);

$primary: mat.define-palette($primary);
$accent: mat.define-palette($accent);
$warn: mat.define-palette($warn);
$theme: mat.define-light-theme(
    (
        color: (
            primary: $primary,
            accent: $accent,
            warn: $warn
        ),
        typography: $typography
    )
);