upgrade50-60.md

Title
Upgrading from ADF v5.0 to v6.0

Upgrading from ADF v5.0 to v6.0

This guide provides instructions on how to upgrade your v5.0.0 ADF projects to v6.0.0.

Warning: Be sure to follow the guide below to migrate your application to the new version. You can't update Angular and ADF applications more than one major version at a time.

Before you begin

Always perform upgrades on "clean" project state, backup your changes or make a project backup.

Since 6.0.0 is a major version release, there are breaking changes you need to take into account as well as the usual library updates.

After the upgrade, check other sections to see if there are any changes affecting 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

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"
    }
}

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

Reinstall your dependencies

npm install

Breaking changes

The ADF project follows the semver conventions, breaking changes are introduced in major versions.

ADF 6.0.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 coming with 6.0.0 release.

Directives

Name	Description
CheckAllowableOperationDirective	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

Third-party Libraries

Name	Version
pdfjs-dist	3.3.122

Deprecated Items

Class	Before	Description
LoginDialogService	@alfresco/adf-core
DeletedNodesApiService	@alfresco/adf-core
BpmUserService	@alfresco/adf-core	you can use instead the PeopleProcessService
UserContentAccessService	@alfresco/adf-core	you can use instead the PeopleContentService
EcmUserService	@alfresco/adf-core	you can use instead the PeopleContentService

DataColumnModule

DataColumnModule has been deprecated and moved in DataTableModule

Before:

@NgModule({
    imports: [
        DataColumnModule,
        DataTableModule
    ]
})
export class MyModule {}

After:

@NgModule({
    imports: [
        DataTableModule,
    ]
})
export class MyModule {}

PaginationModel

Pagination model from @alfresco/js-api has been now deprecated in favour of ADF model PaginationModel.

Relocated classes

Class	Before	After
VersionCompatibilityService	@alfresco/adf-core	@alfresco/adf-content-services
VersionCompatibilityDirective	@alfresco/adf-core	@alfresco/adf-content-services
SitesService	@alfresco/adf-core	@alfresco/adf-content-services
SearchService	@alfresco/adf-core	@alfresco/adf-content-services
AppsProcessService	@alfresco/adf-core	@alfresco/adf-process-services
CheckAllowableOperationDirective	@alfresco/adf-core	@alfresco/adf-content-services
LibraryFavoriteDirective	@alfresco/adf-core	@alfresco/adf-content-services
LibraryMembershipDirective	@alfresco/adf-core	@alfresco/adf-content-services
NodeDeleteDirective	@alfresco/adf-core	@alfresco/adf-content-services
NodeFavoriteDirective	@alfresco/adf-core	@alfresco/adf-content-services
NodeRestoreDirective	@alfresco/adf-core	@alfresco/adf-content-services
NodeDownloadDirective	@alfresco/adf-core	@alfresco/adf-content-services
SharedLinksApiService	@alfresco/adf-core	@alfresco/adf-process-services
LockService	@alfresco/adf-core	@alfresco/adf-process-services
FavoritesApiService	@alfresco/adf-core	@alfresco/adf-process-services
SearchConfigurationInterface	@alfresco/adf-core	@alfresco/adf-content-services
NodeDownloadDirective	@alfresco/adf-core	@alfresco/adf-content-services
DownloadZipDialogComponent	@alfresco/adf-core	@alfresco/adf-content-services
RenditionService	@alfresco/adf-core	@alfresco/adf-content-services
UploadService	@alfresco/adf-core	@alfresco/adf-content-services
NodesApiService	@alfresco/adf-core	@alfresco/adf-content-services
ContentService	@alfresco/adf-core	@alfresco/adf-content-services
ContentService	@alfresco/adf-core	@alfresco/adf-content-services
PeopleContentService	@alfresco/adf-core	@alfresco/adf-content-services
PeopleProcessService	@alfresco/adf-core	@alfresco/adf-process-services
PermissionsEnum	@alfresco/adf-core	@alfresco/adf-content-services
AllowableOperationsEnum	@alfresco/adf-core	@alfresco/adf-content-services
FileModel	@alfresco/adf-core	@alfresco/adf-content-services
FileUploadStatus	@alfresco/adf-core	@alfresco/adf-content-services
FileUploadProgress	@alfresco/adf-core	@alfresco/adf-content-services
FileUploadOptions	@alfresco/adf-core	@alfresco/adf-content-services
FileUploadEvent	@alfresco/adf-core	@alfresco/adf-content-services
FileUploadCompleteEvent	@alfresco/adf-core	@alfresco/adf-content-services
FileUploadDeleteEvent	@alfresco/adf-core	@alfresco/adf-content-services
FileUploadErrorEvent	@alfresco/adf-core	@alfresco/adf-content-services
NodeMetadata	@alfresco/adf-core	@alfresco/adf-content-services
RichTextEditorComponent	@alfresco/adf-core	@alfresco/adf-process-services-cloud

DataTable changes

Starting with v6.0.0, you need to provide a DataTableService to update a row of your table. The model to update the DataTable require the id of the row that is being changed, and the new data Object of the row:

interface 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, it is suggested to provide a DataTableService at the component level:

@Component({
    selector: 'app-files-component',
    templateUrl: './files.component.html',
    styleUrls: ['./files.component.scss'],
    encapsulation: ViewEncapsulation.None,
    providers: [
        DataTableService
    ]
})
export 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 to the @alfresco/adf-content-services into the ContentPipeModule

Before:

@NgModule({
    imports: [
        PipeModule
    ]
})
export class MyModule {}

After:

@NgModule({
    imports: [
        ContentPipeModule
    ]
})
export class MyModule {}

nodeUpdated Subject

The nodeUpdated Subject has been moved from AlfrescoApiService to NodesApiService

Before:

this.alfrescoApiService.nodeUpdated.pipe(...).subscribe(...);

After:

this.nodesApiService.nodeUpdated.pipe(...).subscribe(...);

Comments component

adf-comments component is now a presentational components. The taskId and nodeId has been merged and moved to the id property.

The adf-comments has now two specialization in :

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

ViewerComponent

The ViewerComponent no longer shows 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

The UserInfoComponent is no longer active.

In its place there are now 3 presentational components:

• IdentityUserInfoComponent (Core)
• ContentUserInfoComponent (Content Services)
• ProcessUserInfoComponent (Process Services)

To build a similar logic to the one in UserInfoComponent, check example implementation in demo-shell.

Renamed items

New Classes or Services

• AlfrescoViewerComponent
• ViewerRenderComponent

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:

@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);

The typography was already predefined inside ADF theme but this prevents customisations.

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
    )
);