These release notes provide information for the 2.2.0 release of the Alfresco Application Development Framework.
This a General Available release of the Application Development Framework, which contains the Angular components to build a Web Application on top of the Alfresco Platform.
The release can be found on GitHub at this link.
"@alfresco/adf-content-services" : "2.2.0"
"@alfresco/adf-process-services" : "2.2.0"
"@alfresco/adf-core" : "2.2.0"
"@alfresco/adf-insights" : "2.2.0"
"alfresco-js-api": "2.2.0"
Update dependencies:
"@ngx-translate/core": "9.1.1"
In this release we have focused on enhancing existing components, such as the Viewer which now supports thumbnails, previewing images and enhanced configuration. The Data Table and Document List have added initial support for a card and gallery view and forms now have a date time widget. See all the new features below.
We continue to keep a balance between improving existing components, adding new ones, and also improving the underlying architecture to prepare for future components such as faceted search.
Please report issues with this release in the issue tracker. You can collaborate on this release or share feedback by using the discussion tools on Gitter.
Below are the most important new features of this release:
The data table and the document list are now able to render in different formats. If you want to enable the gallery view mode you need to assign the string 'gallery' to the display input parameter [cardview] :
<adf-document-list ...[display]="'gallery'"> </adf-document-list>
<adf-datatable ... [display]="'gallery'"> </adf-datatable>
Besides the aspect oriented configuration, it is now possible to configure the groups and properties in a more detailed way. With this type of configuration any property of any aspect / type can be "cherry picked" and grouped into an accordion drawer, while defining a translatable title in the preset configuration.
This improvement was a proposed solution to a community-raised issue regarding the usage of the component.
For more info about the original issue, see the link below:
To help developers configure the application in a more error-proof way, the app.config.json file now has a schema validator. This schema is part of the core package and will be inside the Yeoman-generated application from now on, by default. Every time a component gets an update which involves using the app.config, the schema will be updated to the new interface to validate the configuration file.
If you want to customize the outcomes style of your form you can do so using plain CSS selectors. Any outcome has an Id that is composed in the following way:
adf-form-YOUR_OUTCAME_NAME
Using the CSS you can target any outcome ID and change the style as in this example:
#adf-form-complete {background-color: blue !important; color: white; }
#adf-form-save {background-color: green !important; color: white; }
#adf-form-customoutcome {background-color: yellow !important; color: white; }
In this release, the Viewer component has received the following set of improvements and enhancements:
For the current release, the Destination Picker UI has been greatly improved.
With ADF 2.2.0 the processes list result are easy to paginate. You just need to pass the process list reference #processList as target of the pagination component
<adf-process-instance-list
#processList
[appId]="processFilter?.appId"
[name]="processFilter?.filter?.name"
[state]="processFilter?.filter?.state"
[sort]="processFilter?.filter?.sort"
[size]="'5'"
[data]="dataProcesses">
</adf-process-instance-list>
<adf-pagination
*ngIf="processList"
[target]="processList"
[supportedPageSizes]="'[5, 10, 15, 20]'">
</adf-pagination>
With ADF 2.2.0, the app list component is shows the mat-spinner until the apps are loaded.
You can decide which properties the Task header component should render from the app.config.json file. By default, the component will render all the available properties. You can restrict those by changing app.config.json.
For instance, in this example, I would like to show the id, priority, parentName, and status.
"adf-task-header": {
"presets": {
"properties": [
"assignee",
"status",
"priority",
"parentName",
"id"
]
}
}
As with the Task List, now you can create your own process list with static and dynamic columns.
You can declare the static columns that your process list should show from the "app.config.json" file using custom presets.
"adf-process-list": {
"presets": {
"custom": [
{
"key": "name",
"type": "text",
"title": "ADF_PROCESS_LIST.PROPERTIES.NAME",
"cssClass": "dw-dt-col-4 ellipsis-cell",
"sortable": true
},
{
"key": "started",
"type": "date",
"title": "ADF_PROCESS_LIST.PROPERTIES.CREATED",
"cssClass": "dw-dt-col-2 ellipsis-cell",
"format": "timeAgo",
"sortable": true
}
]
}
},
You can define your custom template in the HTML code:
<adf-process-instance-list
[appId]="appId"
[presetColumn]="'custom'">
<data-columns>
<data-column key="startedBy" title="ADF_PROCESS_LIST.PROPERTIES.CREATED_BY" class="desktop-only dw-dt-col-3 ellipsis-cell">
<ng-template let-entry="$implicit">
<div>{{getFullName(entry.row.obj.startedBy)}}</div>
</ng-template>
</data-column>
</data-columns>
</adf-process-instance-list>
We have added the new date time widget provided with APS 1.7.
This widget lets you choose the date and the time in the format given by the APS form.
We have added a new menu for actions to perform on the Upload widget.
We have provided 3 actions for each file added : Show , Remove and Download.
Clicking on the Show button will trigger the viewer to open with the given document.
Clicking on the Download button will allow you to download the selected file.
Clicking on the Remove button will remove the file from the Upload widget value.
We enhanced the search control component by adding the option of customizing the template shown when no result is found via the tag adf-empty-search-result.
<adf-search-control [highlight]="true"
(optionClicked)="onItemClicked($event)"
(submit)="onSearchSubmit($event)">
<adf-empty-search-result>
<span>Empty</span>
</adf-empty-search-result>
</adf-search-control>
This lets you customize the empty search template as you want.
Two new scripts have been added in order to avoid export BC
This release includes: French, German, Italian, Spanish, Japanese, Dutch, Norwegian (Bokmål), Russian, Brazilian Portuguese and Simplified Chinese versions.
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.2.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 .