These release notes provide information for the 1.6.1 release of Alfresco Application Development Framework.
This is the next Limited Available release of Application Development Framework, containing the Angular components to build a Web Application on top of the Alfresco Services.
The release can be found on GitHub at this link.
The roadmap for ADF is taking form, and we have a high focus on bringing in engaging design and UX, as well as add more and more content capabilities into ADF.
Our focus while developing ADF 1.6.1 has been improving the Document List, Improved Preview, Finalize the design of the Login component, External configuration, Performance enhancements for development, improvements in forms as well as paving the way for editing metadata and using forms for content.
This release builds on last month's contains bug fixes and new feature. See the list below for major details.
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 the most relevant features of this release.
The ng2-alfresco-viewer if the renditions service can convert the unsupported document in PDF will show a pop up with the double possibility to Download the file or convert it to PDF.
Is now possible define your custom loading template that will be shown during the loading of your data in the datatable:
<alfresco-datatable
[data]="data"
[loading]=isLoading()">
<loading-content-template>
<ng-template>
<!--Add your custom loading template here-->
<md-progress-spinner
class="adf-document-list-loading-margin"
[color]="'primary'"
[mode]="'indeterminate'">
</md-progress-spinner>
</ng-template>
</loading-content-template>
</alfresco-datatable>
Refer to the datable documentation for further details. With this modify also the n2-alfresco-documentlist has gained a loading state.
The ng2-alfresco-viewer is now able to show files with txt extension natively and play wav and Mp3 files.
We have added more methods in the type definition file of the alfresco-js-api to help you with the autocomplete of you IDE.
The ADF Card is a generic component, which shows the properties received in input as a material design card. The main idea was to create a component that can be shared among different components.
<adf-card-view
[properties]="[{label: 'My Label', value: 'My value'}]">
</adf-card-view>
The properties are an array of CardViewModel
export class CardViewModel {
label: string;
value: any;
key: any;
format: string;
default: string;
constructor(obj?: any) {
this.label = obj.label || '';
this.value = obj.value;
this.key = obj.key;
this.format = obj.format;
this.default = obj.default;
}
}
As properties you can set the label, the value and other optional fields, such as the format and the default values.
Specifically, the format propriety is useful to show a value in a custom format, for example, the date in DD/MM/YYYY or MM/DD/YYYY
The default values allow initializing some proprieties as defined, in case the value provided is empty.
This component was already present in the previous ADF versions but we changed the design and the code using the ADF Card Component.
The Task Header shows all the information related to the task.
<div *ngIf="taskDetails">
<div class="mdl-grid mdl-shadow--2dp">
<adf-card-view [properties]="properties"></adf-card-view>
</div>
</div>
Result:
This component shows all the attachments added to a task/process as a list. The component is using the data table component to show the list and the context menu with the actions. At the moment, you can open the attachment doing the double click on the row or select the action view from the menu actions. There is also the ability to download the attachment or remove it.
<alfresco-datatable *ngIf="!isEmpty()"
[rows]="attachments"
[actions]="true"
(rowDblClick)="openContent($event)"
(showRowActionsMenu)="onShowRowActionsMenu($event)"
(executeRowAction)="onExecuteRowAction($event)">
<data-columns>
<data-column key="icon" type="icon" srTitle="Thumbnail" [sortable]="false"></data-column>
<data-column key="name" type="text" title="Name" class="full-width ellipsis-cell" [sortable]="true"></data-column>
<data-column key="created" type="date" format="shortDate" title="Date"></data-column>
</data-columns>
</alfresco-datatable>
Result:
This component was already present in the previous ADF versions but we changed the design and improve the code.
With this component, you can easily involve a person into a task. The component itself is composed of two different component, the search component, the people list component.
The search component has the goal to find a person not involved and show the results in a list. The list is always a data table component with the action menu disabled.
The people list component shows all the people involved in a task in a list. The component is a wrapper of the data-table component with a custom action i.e. Remove the person from the list.
<div class="assignment-container" *ngIf="showAssignment">
<activiti-people-search
(searchPeople)="searchUser($event)"
(success)="involveUser($event)"
(closeSearch)="onCloseSearch()"
[results]="peopleSearch$">
</activiti-people-search>
</div>
<div class="assignment-list-container" id="assignment-people-list" *ngIf="hasPeople()">
<adf-people-list [users]="people">
<data-columns>
<data-column key="firstName">
<ng-template let-entry="$implicit">
<div class="people-pic">{{getInitialUserName(entry.row.obj.firstName, entry.row.obj.lastName)}}</div>
</ng-template>
</data-column>
<data-column key="email" class="full-width">
<ng-template let-entry="$implicit">
<div class="people-full-name">{{ getDisplayUser(entry.row.obj.firstName, entry.row.obj.lastName, ' ') }}</div>
<div class="people-email">{{ entry.row.obj.email }}</div>
<div class="people-edit-label">can edit</div>
</ng-template>
</data-column>
</data-columns>
</adf-people-list>
</div>
Add people search person result:
Add people involved person result:
The Breadcrumbs has received a little cosmetic upgrade plus we have added also a new property.
The new property is root. You can specify in the root property the name of the folder where you want to tart the breadcrumb. Note: The root will always be shown as first element and it will continue to be displayed until you are not in a subfolder of it.
Example:
<adf-breadcrumb
[target]="documentList"
[root]="'New-Root'"
[folderNode]="newRootId">
</adf-breadcrumb>
Result:
Note: The root will always be showed as first element and it will continue to be displayed until you are not in a subfolder of it.
Refer to the document list documentation for further details.
If you want to listen to all the events fired from the form you can subscribe to this Subject :
formService.formEvents.subscribe((event: Event) => {
console.log('Event fired:' + event.type);
console.log('Event Target:' + event.target);
});
Refer to the form documentation for further details.
The 1.6.1 release lays a foundation for making a Form renderer independent from the backend and APS services to allow more granular control of how it works and where takes/stores its data.
With this release, it is now possible to bind a form definition via the "form" property.
<activiti-form [form]="form">
</activiti-form>
And the underlying component controller code can be as follows:
export class FormDemoComponent implements OnInit {
form: FormModel;
ngOnInit() {
let formDefinitionJSON: any = DemoForm.getDefinition();
let form = this.formService.parseForm(formDefinitionJSON);
this.form = form;
}
}
The FormService got a new API to parse form definitions from JSON into the FormModel instances without using Form Component like it was previously.
formService.parseForm(formDefinitionJSON)
It is now possible to control what happens when end users click the form outcome buttons, like Save, Complete, etc. The FormService gets a new cancellable event called "executeOutcome" for that purpose.
export class FormDemoComponent implements OnInit {
constructor(private formService: FormService) {
formService.executeOutcome.subscribe(e => {
e.preventDefault();
console.log(e.outcome);
});
}
}
It is now possible to have global (server-side) settings that enable or disable certain features in your web application.
By default, all application settings are stored in the "app.config.json" file in the root of your web application and have the following defaults:
{
"ecmHost": "http://localhost:3000/ecm",
"bpmHost": "http://localhost:3000/bpm",
"application": {
"name": "Alfresco"
}
}
You can get more details on application configuration in the following articles:
To greatly simplify development process the demo and generated applications now feature Proxy settings for webpack development server. That allows using ACS/APS services without any CORS configurations.
You get the following settings by default (also applied to the Application settings)
- http://localhost:3000/ecm is mapped to http://localhost:8080
- http://localhost:3000/bpm is mapped to http://localhost:9999
The settings above address most common scenarios for running ACS on port 8080 and APS on port 9999 and allow you to skip the CORS configuration.
If you would like to change default proxy settings, please edit the "config/webpack.common.js" file.
Below you can find a brief list of references to help you starting 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.
Below you can find a detailed list of tickets addressed in the new release. For a better understanding, the list is grouped by topic.
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.