Skip navigation
All Places > Application Development Framework > Blog > 2018 > May

SIn the version 2.3.0 of ADF has been added a new Sidenav Layout Component : 


Sidenav Layout Component

In the next version of the generator this component will be by default present in your new generated app, but what if you want to add it to your current application?


In this tutorial, we are going to add this new component in a previous version of an ADF application. If you need more details about the sidenav layout component after the tutorial please check the documentation:

alfresco-ng2-components/ at master · Alfresco/alfresco-ng2-components · GitHub 


If you want to give a look at the example that I made, you can find it here:

Dev eromano sidebar by eromano · Pull Request #23 · Alfresco/adf-examples · GitHub 


Step 1


Update your current application package.json ADF dependencies to 2.3.0:


"@alfresco/adf-content-services" : "2.3.0"
"@alfresco/adf-process-services" : "2.3.0"
"@alfresco/adf-core" : "2.3.0"
"@alfresco/adf-insights" : "2.3.0"
"alfresco-js-api": "2.3.0"


Step 2


Generate the app-layout component:

ng generate component app-layout

Modify app-layout.component.html 


Note the route and the element in the HTML below are just for example, you need to feed this template with your own routes and elements:


<adf-sidenav-layout [sidenavMin]="70" [sidenavMax]="200" [stepOver]="780" [hideSidenav]="false" [expandedSidenav]="false">

        <ng-template let-toggleMenu="toggleMenu">
            <mat-toolbar color="primary" class="adf-app-layout-toolbar mat-elevation-z6">
                <button mat-icon-button (click)="toggleMenu()">

                <span fxFlex="1 1 auto" fxShow"true">ADF</span>

                <div class="adf-app-layout-menu-spacer"></div>


        <ng-template let-isMenuMinimized="isMenuMinimized">
            <mat-nav-list class="adf-sidenav-linklist">
                <a mat-list-item class="adf-sidenav-link" routerLink="/login">
                    <mat-icon matListIcon class="sidenav-menu-icon">vpn_key</mat-icon>
                    <div class="sidenav-menu-label" *ngIf="!isMenuMinimized()">Login</div>
                <a mat-list-item class="adf-sidenav-link" routerLink="/apps">
                    <mat-icon matListIcon class="sidenav-menu-icon">device_hub</mat-icon>
                    <div class="sidenav-menu-label" *ngIf="!isMenuMinimized()">Apps</div>
                <a mat-list-item class="adf-sidenav-link" routerLink="/documentlist">
                    <mat-icon matListIcon class="sidenav-menu-icon">folder_open</mat-icon>
                    <div class="sidenav-menu-label" *ngIf="!isMenuMinimized()">Documents</div>
                <a mat-list-item adf-logout class="adf-sidenav-link">
                    <mat-icon matListIcon class="sidenav-menu-icon">exit_to_app</mat-icon>
                    <div class="sidenav-menu-label" *ngIf="!isMenuMinimized()">Logout</div>



Modify app-layout.component.scss 


In this SCSS file should be present only the router outlet

adf-sidenav-layout {
    height: 100%;


Modify app.component.html 


In this HTML file should be present only the router outlet



Step 3


Modify app.routes.ts

Now let's add the AppLayoutComponent as the main route of the router and move all  yours previous route as children of the AppLayoutComponent as in this example:


export const appRoutes: Routes = [
    path: '',
    component: AppLayoutComponent,
    children: [
        path: '',
        component: HomeComponent


If you have more questions, please reply here or contact me using  gitter .

Often after you have to build your app for a different reason you need to track it.The analytics collected can be used for multiple purposes:

  • Track possible error in your software
  • New functionality engagement
  • Understand how the user interacts with your product


In my career, I saw multiple time create this kind of tracking systems implemented duplicating the code everywhere in the app. What I want to propose to you today is a simple way to archive this result taking advantages of the message log bus introduced in ADF 2.3.0. 

If you want to give a look at the example that I made, you can find it here:


logservice message bus example by eromano · Pull Request #22 · Alfresco/adf-examples · GitHub 


Step 1 Generate your application:


First, install yeoman:

npm install -g yo

Then the Alfresco Application Generator:

npm install -g generator-alfresco-adf-app

Then create the app

yo alfresco-adf-app

Step 2 create an account on Mixpanel


Go to and create your account. Once you have your account, you can get your Mixpanel token from the account information.


Step 3 add the log to your generated app


With the logService you can add differents kind of type of logs: 


Once you decided which kind of log is the one that you need to add a similar piece of code in your application:

import { LogService } from '@alfresco/adf-core';

export class AppComponent {

    constructor(logService: LogService) {
      this.logService.error('My error');
      this.logService.trace('My trace')
      this.logService.debug('My debug')'My info')
      this.logService.warn('My warn')

Please check the log service documentation for more details:  alfresco-ng2-components/ at master · Alfresco/alfresco-ng2-components · GitHub 


Step 4 Send the data to Mixapnel


In order to use Mixpanel we can take advantage of the Mixpanel javascript library:

Let's install it from npm:

npm install mixpanel

Now we need to redirect all the logService message to Mixpanel. The best way to archive this integration is adding a subscriber to the logService message bus:


import { Component } from '@angular/core';
import { LogService } from '@alfresco/adf-core';
import * as Mixpanel from 'mixpanel';

    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
export class AppComponent {

    constructor(public logService: LogService) {

        const mixpanel: any = Mixpanel.init('YOUR_MIXPANEL_TOKEN');
        mixpanel.set_config({ debug: true });

        logService.onMessage.subscribe((message) => {
            mixpanel.track(message.text, {
                type: message.type




If you have more questions, please reply here or contact me using  gitter .