Let's play with adf 3.0

Let's Play with ADF 3.0
Eugenio Romano

Learn. Connect. Collaborate.
Eugenio Romano
Architect & Team Lead at Alfresco

SOME NEW FEATURES
New JS-API
SSO
Extensibility
ACTIVITI CE/EE Components
Tree View Component
Search enhancements
Update Angular 7
Remove deprecated code

• Code Review
• Build Size check
• Code Coverage
• Security Vulnerabilities

• Lint checks: TS, SCSS, JS
• Quality assurance
– Over 700 E2E Test
– Around 3500 Unit test 85% code
coverage
• Docker Image
• Build and deploy packages on NPM

• Performance
• Tree shakable
• Smaller output Size
• Web components future
• SSO Full support
– ACS 6.1.0 / APS 1.9.0 / ACTIVITI 7 CE EE
• Bug Fixing
– Refresh token with Grant password
– WithCredential option for Kerberos
3.0.0

• Packages name deprecated:
– alfresco-js-api
– alfresco-js-api-node
• Node and Browser are now both in:
– @alfresco/js-api
• Project repository still the same :
https://github.com/Alfresco/alfresco-js-api
3.0.0

• Version 3.0.0 has been completely rewritten in
Typescript
• Final Output still JavaScript
– Types enhance code quality and readability
– Simple to maintain
– Simple to generate new code
– TypeScript provides a number of features that are
planned in future version of JavaScript now
– Intellisense in your IDE is now working much better
3.0.0

JS API 2 VS JS API 3
JS-API 2
JS-API 3
import { AlfrescoApi, PeopleApi } from '@alfresco/js-api';
let alfrescoApi = new AlfrescoApi(config);
let peopleApiService = new PeopleApi(this.alfrescoApi);
peopleApiService.createPerson();
import { AlfrescoApi } from 'alfresco-js-api';
import * as alfrescoApi from 'alfresco-js-api';
let alfrescoApi = <AlfrescoApi> new alfrescoApi(config);
alfrescoApi.core.peopleApi.createPerson();

JS API 2 Compatibility Layer
import { AlfrescoApiCompatibility } from '@alfresco/js-api';
let alfrescoApi = new AlfrescoApiCompatibility(this.config);
alfrescoApi.core.peopleApi.createPerson();
alfrescoApi.activiti.taskApi.listTasks();
You can still use the old syntax wit the JS-API using the
compatibility layer:
Use it only until you don’t complete the update to the new syntax we
could may decide to not support it in the future

Performance improvement
JS-API 2
JS-API 3

WEB COMPONENTS

Tomorrow Tinto 10:45-11:30
Tomorrow Tinto 16:00-16:30

Components Description
App list Shows all deployed cloud application instances.
Group cloud component Searches Groups.
Edit process filter Shows Process Filter Details.
Process filters Lists all available process filters and allows to select a filter.
Process list
Renders a list containing all the process instances matched
by the parameters specified.
Start process Starts a process.
People cloud component
Allows one or more users to be selected (with auto-
suggestion) based on the input parameters.
Start task Creates/starts a new task for the specified app.
Edit task filter Edits Task Filter Details.
Task filters Shows all available filters.
Task header Shows all the information related to a task.
Task list
Renders a list containing all the tasks matched by the
parameters specified.

import { ProcessServicesCloudModule } from '@alfresco/adf-process-services-cloud';
@NgModule({
imports: [
……
ProcessServicesCloudModule
…….
],
})
export class AppModule {}
npm install --save @alfresco/adf-process-services-cloud
Code Example – Import Process Activiti module

Code Example – List Your Apps
<adf-cloud-app-list (appClick)="onAppClick($event)">
</adf-cloud-app-list>
onAppClick(app) {
this.router.navigate([`/cloud/${app.name}`]);
}

Code Example – Start Process
<adf-cloud-start-process
[appName]="applicationName"
(success)="onStartProcessSuccess()">
</adf-cloud-start-process>
onStartProcessSuccess() {
this.router.navigate([`/cloud/${this.applicationName}/processes`]);
}

Code Example – List Process
<adf-cloud-process-list
[applicationName]="applicationName"
(rowClick)="onRowClick($event)"
#processCloud>
</adf-cloud-process-list>
<adf-pagination [target]="processCloud" > </adf-pagination>

<adf-cloud-process-filters
[appName]=" applicationName"
[filterParam]="currentProcessFilter$ | async"
(filterClick)="onProcessFilterSelected($event)">
</adf-cloud-process-filters>
<adf-cloud-process-list
[applicationName]="applicationName"
(rowClick)="onRowClick($event)"
#processCloud>
</adf-cloud-process-list>
<adf-pagination [target]="processCloud" >
</adf-pagination>

<adf-cloud-edit-process-filter
[appName]="applicationName"
[id]="filterId"
(filterChange)="onFilterChange($event)"
(action)="onProcessFilterAction($event)">
</adf-cloud-edit-process-filter>

• @alfresco/adf-extensions
• You can create plugins that change, toggle, or extend :
– Navigation sidebar links and groups
– Context Menu
– Sidebar (aka Info Drawer)
– Toolbar entries (buttons, menu buttons ,separators)
– Viewer actions
– Content metadata
– Custom icons
– Extensions can also:
– Overwrite or disable extension points of the main application or other plugins
– Change rules, actions or any visual element
– Register new application routes based on empty pages or layouts
– Register new rule evaluators, components, guards

• alfresco/adf-extensions
• What do we have in 3.0.0
– Icons
– Viewer
– Columns template document list
• What we are going to have in 3.1.0
– All the others

@alfresco/adf-extensions
ADF Application
Plugins

Code Example – Import extension module
import { ExtensionsModule } from '@alfresco/adf-extensions';
@NgModule({
imports: [
.....
ExtensionsModule.forRoot(),
....
]
})
npm install --save @alfresco/adf-extensions

Code Example – Define extension JSON
your-app/src/assets/app.extensions.json
{
"$schema": "./app-extension.schema.json",
"$references": [
"plugin1.json",
"plugin2.json"
]
}
• File plugins list used in your app:
Plugin List installed

Code Example – Plugin registration
<ngx-monaco-editor id="adf-monaco-file-editor"
class="adf-monaco-file-editor"
[options]="editorOptions"
[(ngModel)]="code"
(onInit)="onInit($event)">
</ngx-monaco-editor>

@Component({
selector: 'adf-monaco-view',
templateUrl: './monaco-view.component.html',
styleUrls: ['./monaco-view.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class MonacoViewComponent implements OnInit {
constructor(private apiService: AlfrescoApiService) {}
ngOnInit() {
this.apiService.nodesApi.getFileContent(this.node.id).then(
fileContent => {
this.code = fileContent;
},
err => console.log(err)
);
}
}
@Input()
url: string;
@Input()
node: Node;

import …
@NgModule({
imports: [
CoreModule.forChild(),
MonacoEditorModule.forRoot()
],
declarations: MonacoViewComponent,
exports: MonacoViewComponent,
entryComponents: MonacoViewComponent
})
export class AdfMonacoModule {
constructor(extensions: ExtensionService) {
extensions.setComponents({
'monaco-extension.main.component': MonacoViewComponent
});
}
}

Code Example – Define Plugin JSON
• your-app/src/assets/plugins/monaco-extension.json
{
"$version": "1.0.0",
"$name": "monaco extension",
"$description": "monaco plugin",
"features": {
"viewer": {
"content": [
{
"id": "dev.tools.viewer",
"fileExtension": "js",
"component": "monaco-extension.main.component"
}
]
}
}
}
Define your Plugin

Build Plugin
Distribute It (if you want it)
Build
Copy the plugin JSON in the distribution or use the angular cli assets copy:

Code Example – Assemble it
1. Install extension
2. Add the module
@NgModule({
imports: [
ExtensionsModule.forRoot(),
AdfMonacoModule
]
})
3. Copy extension plugin JSON in plugin folder (no need in the future)
4. START YOUR APP

• alfresco/adf-core
• SSO Full support
– ACS 6.1+ / APS 1.9+ / ACTIVITI 7EE / CE
The Alfresco Identity Service will become the central
component responsible for identity-related capabilities
needed by other Alfresco software, such as managing
users, groups, roles, profiles, and authentication. Currently
it deals just with authentication.

SSO Configuration
app.config.json
"authType" : "OAUTH",
"oauth2": {
"host": ”http://AUTH_SERVER/auth/realms/alfresco",
"clientId": "alfresco",
"scope": "openid",
"secret": "",
"implicitFlow": true,
"silentLogin": true,
"redirectSilentIframeUri": http://APP_SERVER/assets/silent-refresh.html",
"redirectUri": "/",
"redirectUriLogout": "/logout"
},

app.config.json
"oauth2": {
"scope": "openid",
"secret": "",
"silentLogin": false,
"redirectUri": "/",
},
"silentLogin": false,
OAuth 2.0 Implicit Grant Flow with Silent login

ADF
Application
1
2
3
SIGN IN SSO Button
User redirect to Identity Service Log In
User Logged In

app.config.json
"oauth2": {
"scope": "openid",
"secret": "",
"redirectUri": "/",
},

ADF
Application
1
2
User redirect to Identity Service Log In
User Logged In

OAuth 2.0 Password Grant
app.config.json
"oauth2": {
"scope": "openid",
"secret": "",
"redirectUri": "/",
},
"implicitFlow": false,

ADF
Application
1
3
User stay in the APP and introduce the
credential in the Login component
User Logged In
OAuth 2.0 Password Grant
2
Credential are exchanged credential
for token with the identity service

Code Example
Implicit Flow ON Implicit Flow OFF
The Login component dynamically adapt itself you need only
to change the app.config.json configuration
<adf-login> </adf-login>

Tree view listSearch Filters
<adf-search-filter #searchFilter>
</adf-search-filter>
1. Categories and widgets
2. Chip List Component
3. Facet Fields

Search Filters
The Search Filter supports a number of widgets out of the box, each implemented by an ADF component:

Categories and widgets
"categories": [
{
"id": "queryName",
"name": "Name",
"enabled": true,
"expanded": true,
"component": {
"selector": "text",
"settings": {
"pattern": "cm:name:'(.*?)'",
"field": "cm:name",
"placeholder": "Enter the name” }}},
{
"id": "checkList",
"name": "Check List",
"enabled": true,
"component": {
"selector": "check-list",
"settings": {
"pageSize": 5,
"operator": "OR",
"options": [
{ "name": "Folder", "value": "TYPE:'cm:folder'" },
{ "name": "Document", "value": "TYPE:'cm:content'" }
] }}},

FacetField
"search": {
"facetFields": {
"expanded": true,
"fields": [
{ "field": "content.mimetype", "mincount": 1, "label": "SEARCH.FACET_FIELDS.TYPE" },
{ "field": "content.size", "mincount": 1, "label": "SEARCH.FACET_FIELDS.SIZE" },
{ "field": "creator", "mincount": 1, "label": "SEARCH.FACET_FIELDS.CREATOR" },
{ "field": "modifier", "mincount": 1, "label": "SEARCH.FACET_FIELDS.MODIFIER" },
{ "field": "created", "mincount": 1, "label": "SEARCH.FACET_FIELDS.CREATED" }
]
},
}

Search chip list
<adf-search-filter #searchFilter></adf-search-filter>
<adf-search-chip-list [searchFilter]="searchFilter"></adf-search-chip-list>

<adf-tree-view-list
[nodeId]="'-my-'"
(nodeClicked)="onClick($event)
"
(error)="onError($event)">
</adf-tree-view-list>
Tree view listTree view list

USEFUL
RESOURCES
• ADF Documentation
– https://www.alfresco.com/abn/adf/docs/
• ADF Repository
– https://github.com/Alfresco/alfresco-ng2-
components
• JS-API
– https://github.com/Alfresco/alfresco-js-api
• Gitter Channel
– https://gitter.im/Alfresco/alfresco-ng2-
components

CONTACT ME
https://twitter.com/RomanoEugenio
https://github.com/eromano
eugenio.romano@alfresco.com

Let's play with adf 3.0

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Let's play with adf 3.0

Similar to Let's play with adf 3.0 (20)

More from Eugenio Romano

More from Eugenio Romano (6)

Recently uploaded

Recently uploaded (20)

Let's play with adf 3.0