These release notes provide information for the 2.0.0 release of the Alfresco Application Development Framework.
This is the first General Available release of the Application Development Framework, which contains the Angular components to build a Web Application on top of the Alfresco Services.
The release can be found on GitHub at this link.
From ADF 2.0 we split everything into four main packages:
"@alfresco/adf-content-services" : "2.0.0"
"@alfresco/adf-process-services" : "2.0.0"
"@alfresco/adf-core" : "2.0.0"
"@alfresco/adf-insights" : "2.0.1"
Please note the only major version valid for the package @alfresco/adf-insights is 2.0.1
While this release had a high focus on stabilization and bug fixes, we have also introduced new and enhanced features. These include a completely revamped Viewer component, a new metadata component and file versioning. Also, ADF is now localized into 11 different languages. In total we have closed around 242 issues in JIRA.
Since we follow SEMVER, we can only introduce breaking changes in major releases. We learned a lot and we needed to restructure and rename components to make things easier moving forward. You can see all the details about the breaking changes below.
We have continued to expand and rewrite our documentation. We now have a new component catalog running that we hope you'll enjoy.
The Yeoman generators have been updated. We now ship three small Angular CLI based applications to help get you started.
Please report issues with this release in the issue tracker. Enterprise customers can now submit issues in the support portal. You can collaborate on this release or share feedback by using the discussion tools on gitter.
The entire team has been working hard to make this release a reality and we're excited to share all the details!
Below the most relevant features of this release:
Viewer Enhancements
Pagination Component and DocumentList integration
Create Folder and Edit Folder dialogues
Editable file metadata
File versioning
Search Component refactoring
Max file size constraints properties in Upload Button
Register Alfresco file type icons within the mat-icon
LogService configuration
Favorite node Directive
Delete multiple nodes directive
Task Attachment list customizable template
CS and PS setting host component
Complete process service type definition in the alfresco-js-api
Redirect to original path upon successful login
Internationalization support
The Viewer component has been enhanced with the following features:
It is now very simple to use the Viewer component in an "Inline" mode on a separate page when using the Angular Router.
This allows you to have separate URLs for previewing content and later revisiting a file by navigating to a corresponding link.
In addition, the "Overlay" mode has been stabilised. It now handles subsequent reopenings correctly.
You can find more details in the corresponding documentation: Viewer Component.
With the 2.0 release, Pagination is implemented as a separate component that you can use with different other components.
ADF provides a lightweight integration with the DocumentList component out of the box:
<adf-document-list #documentList ...>
</adf-document-list>
<adf-pagination [target]="documentList" ...>
</adf-pagination>
For more details on custom pagination features see the following article: Pagination Component
You can now use "Create Folder" and "Edit Folder" dialogs with your ACS-enabled applications.
In order to greatly simplify your development experience, two extra Angular directives were introduced: "adf-create-folder" and "adf-edit-folder". These allow you to invoke dialogs from any clickable element, including other Angular components:
<adf-toolbar>
<button mat-icon-button
[adf-create-folder]="documentList.currentFolderId">
<mat-icon>create_new_folder</mat-icon>
</button>
</adf-toolbar>
<adf-document-list #documentList ...>
...
</adf-document-list>
For more details please refer to:
Basic content metadata can now be displayed and edited with the new ContentMetadata component. At the moment, only the basic properties are supported, such as title, description, author, etc. As an example it can be injected into the revamped viewer in the sidebar layout.
<adf-content-metadata-card [node]="aMinimalNodeEntryEntity"></adf-content-metadata-card>
You can now see and restore previous versions of a file node. This component can also be used in a dialog or in a sidebar layout. Being the first prototype, there are some restrictions applied on this component - check the documentation for details.
<adf-version-manager [node]="aMinimalNodeEntryEntity"></adf-version-manager>
We have completely separated the documentlist component from the search component. We also support customizing the search result with any template you like and optionally creating your own custom search autocomplete.
The adf-search-control provides you with a standard input search with an pre-styled autocomplete table :
<adf-search-control [highlight]="true"
...>
</adf-search-control>
For example :
The adf-search component offers a simple way to customize your search results :
<adf-search [searchTerm]="searchedWord">
<ng-template let-data>
<ul>
<li *ngFor="let item of data?.list?.entries; let idx = index">
...
</li>
</ul>
</ng-template>
</adf-search>
With this, you have access to the search results objects, so you can modify them as you like :
You can also associate to your own input/textarea with the search results via the searchAutocomplete directive :
<input [searchAutocomplete]="auto" .. />
<adf-search #auto="searchAutocomplete" .../>
This allows you to fetch the search result typed from the input/textarea element associated with the adf-search component :
For more details please refer to :
The upload button component now provides a new parameter to disallow uploading files larger than a certain size (in bytes):
<adf-upload-button [maxFilesSize]="20"></adf-upload-button>
For more details please refer to Upload button documentation
All the ADF MIME type icons are now registered into the MatIconRegistry. This improvement allows you to use all the icons through the mat-icon tag:
<mat-icon svgIcon="video/mp4"></mat-icon>
constructor(public thumbnailService: ThumbnailService) {
}
To see the list of all supported MIME types please refer to Thumbnail service documentation.
The new logservice provides logging functionality for your ADF application. You can configure logLevel in app.config.json.
By default the level is TRACE. If you want to silence all log output in ADF you can set it to SILENT:
{
"logLevel": " SILENT"
}
The log service provides 6 level of logs: TRACE, DEBUG, INFO, WARN, ERROR, SILENT. For more information please refer to log service documentation.
The NodeFavoriteDirective instance can be bound to a button to retrieve and manage a favorites node list:
<button mat-icon-button
#favorite="adfFavorite"
[adf-node-favorite]="nodeSelection">
<mat-icon>
{{ favorite.hasFavorites() ? 'star' :'star_border' }}
</mat-icon>
</button>
Deletes multiple files and folders.
<button mat-icon-button
(delete)="onDelete()"
[adf-delete]="nodeSelection">
<mat-icon>delete</mat-icon>
</button>
If there are no attachments for the selected task the Task Attachment List component shows a basic empty template.
If you want to customize and render a custom template, you can inject the adf-empty-list tag
<adf-task-attachment-list
[taskId]="YOUR_TASK_ID">
<adf-empty-list>
<div adf-empty-list-header>This is the header of my empty list</div>
<div adf-empty-list-body>This is the body</div>
<div adf-empty-list-footer>>This is the footer</div>
</adf-empty-list>
</adf-task-attachment-list>
Note that the Task Attachment List component doesn't provide the Drag & Drop feature out-of-the-box. To add it, you must use an adf-upload-drag-area as the parent of this component. You can also specify a custom template.
<adf-upload-drag-area
[parentId]="YOUR_TASK_ID">
<adf-task-attachment-list
[taskId]="YOUR_TASK_ID">
<adf-empty-list>
<div adf-empty-list-header>This List is empty</div>
<div adf-empty-list-body>Drag and drop to upload</div>
<div adf-empty-list-footer>
<img [src]="Your custom image URL"></div>
</adf-empty-list>
</adf-task-attachment-list>
</adf-upload-drag-area>
This is the result
This component is a form that allows you to validate and set the URL of your CS and PS, saving it in the user's local storage
For more information please refer to host component documentation.
We have added all the process service related models, class methods and type in the type definition file of the alfresco-js-api to help you with the autocomplete of your IDE.
The Login component now redirects users back to the originally requested URLs.
For example, if you have a route "/my-files" protected by the AuthGuardEcm (for ACS-related content) or AuthGuardBpm (for APS-related content), users may be redirected to a "/login" route if they are not authenticated. Upon successful login, the user is then redirected back to the "/my-files" page.
With the current ADF release, you can override the Task List columns from the app.config.json file.
"adf-task-list": {
"presets": {
"default": [
{
"key": "name",
"type": "text",
"title": "ADF_TASK_LIST.PROPERTIES.NAME",
"sortable": true
},
{
"key": "created",
"type": "date",
"title": "ADF_TASK_LIST.PROPERTIES.CREATED",
"sortable": true
},
{
"key": "priority",
"type": "text",
"title": "ADF_TASK_LIST.PROPERTIES.PRIORITY",
"sortable": true
},
{
"key": "assignee",
"type": "text",
"title": "ADF_TASK_LIST.PROPERTIES.ASSIGNEE",
"sortable": true
}
]
}
}
This is the result:
From the version 2.0.0, all the components in ADF are natively translated into 11 languages.
It is now possible to display the Sites (from ACS) that the currently logged-in user is a member of. You can do this by assigning the "-mysites-" alias to the "currentFolderId" property. The Document List automatically displays the required content. If you want to display all available Sites use the "-sites-" alias, which is still supported.
Also, the Document List now provides a customizable screen for permission errors. The users will see your custom content if they are trying to access any restricted content. The default permission screen is shown in the picture below:
Clean all the events that start with "on"
Upload button and Drag area deprecated properties has been removed
From ADF 2.0 we split everything into four main packages:
@alfresco/adf-content-services
@alfresco/adf-process-services
@alfresco/adf-core
@alfresco/adf-insights
The Alfresco Javascript API remains the same and will be deployed as previously.
The structure of the Github repository has been rearranged to reflect these changes.
The impact for developers using ADF is that the dependencies need to be adjusted (and simplified) in package.json, and all import statements in typescript files need to be changed.
If you want to know more about why this modification was necessary, please see this link. Full details about the events that have been renamed are given below:
adf-analytics-generator , adf-analytics-report-list, adf-diagram, adf-login, adf-process-instance-filters , adf-process-instance-list , adf-filters :
Old event name | New event name |
---|---|
onSuccess | success |
onError | error |
adf-form, adf-task-details :
Old event name | New event name |
---|---|
onError | error |
adf-tasklist, adf-webscript-get, adf-upload-button:
Old event name | New event name |
---|---|
onSuccess | success |
file-draggable Directive :
Old event name | New event name |
---|---|
onFilesDropped | filesDropped |
onFilesEntityDropped | filesEntityDropped |
onFolderEntityDropped | folderEntityDropped |
adf-analytics :
Old event name | New event name |
---|---|
onError | error |
onSuccess | success |
onFormValueChanged | formValueChanged |
onEdit | edit |
In the previous release, there was a mixed usage of TAG prefixes for all the components ("alfresco-", "activiti", "adf-" ) We found this approach was quite cumbersome in 1.7.0 and so we renamed all of them using only the TAG adf- prefix. However, we still had backward compatibility for the old tags. The compatibility with "alfresco-" and "activiti-" prefix is now discontinued from 2.0.0
The extension-viewer tag (used to extend the viewer behavior to open extensions not supported by the standard viewer) has been renamed to adf-viewer-extension.
adf-upload-drag-area :
Properties | Description |
---|---|
enabled | Deprecated in 1.6.0 in favor of disabled input property |
showNotificationBar | Deprecated in 1.6.0 you can use UploadService events and NotificationService api instead. |
currentFolderPath | Deprecated in 1.6.0, this property is not used for couple of releases already. Use rootFolderId instead. |
rootFolderId | Deprecated in 1.6.0, this property is not used for couple of releases already. Use parentId instea |
adf-upload-button :
Properties | Description |
---|---|
showNotificationBar | Deprecated in 1.6.0 you can use UploadService events and NotificationService api instead. |
currentFolderPath | Deprecated in 1.6.0, this property is not used for couple of releases already. Use rootFolderId instead. |
disableWithNoPermission | Deprecated in 1.8.0, use the button with combination of adf-node-permission directive |
The search component has received a big refactor in this release in order to use the new search API. This gives better configurability as described above. The decoupling of the internal documentlist from the search allows you to customize the search result as you wish.
Learn how to show the search result in a document list here.
Because is now possible to select between two different pagination strategies (classic pagination and infinite scrolling) we moved these options into separate components:
<adf-document-list
.....>
</adf-document-list>
<adf-pagination
*ngIf="!infiniteScrolling"
.....>
</adf-pagination>
<adf-infinite-pagination
*ngIf="infiniteScrolling"
.....>
</adf-infinite-pagination>
This modification will even allow you to write your own pagination if you need to or use our pagination system to paginate your own list.
In our constant commitment to improving the quality of ADF we have also introduced two new automatic checks over all the PRs:
Bundle size check is an open source tool that helps us to check that the final result of our build never exceeds the wanted bundle size:
Snyk is an open source tool that helps us to find and fix known vulnerabilities in our dependencies
This release features brand new application generators powered by Yeoman. All out-of-the-box generators are based on the Angular CLI. Upon generation, you get a valid Angular CLI project, configured with ADF libraries and styles, ready to be used.
npm install -g generator-alfresco-adf-app
In addition, the application generator provides support for "blueprints". The 2.0 release includes the following blueprints:
Every project blueprint asks the minimum necessary set of questions with reasonable defaults.
It is now possible to install all project dependencies as part of the generation steps.
We watch the quality of the templates and ensure all unit tests and end-to-end tests are functioning correctly.
The tests run for all modifications to either the generator the underlying blueprints.
Below you can find a brief list of references to help you start to use the new release.
Official GitHub Project - alfresco-ng2-components
Getting started guides with Alfresco Application Development Framework
Gitter chat supporting Alfresco ADF
Please refer to the official documentation for further details and suggestions.
Release Notes - Apps Development Framework - Version 2.0.0
Please refer to the Alfresco issue tracker for other known issues in this release. If you have more questions, please reply here or contact us using gitter.