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

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/sidenav-layout.component.md 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">

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

                <span fxFlex="1 1 auto" fxShow fxHide.lt-sm="true">ADF</span>

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

            </mat-toolbar>
        </ng-template>
    </adf-sidenav-layout-header>

    <adf-sidenav-layout-navigation>
        <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>
                <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>
                <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>
                <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>
                </a>
            </mat-nav-list>
        </ng-template>
    </adf-sidenav-layout-navigation>

    <adf-sidenav-layout-content>
        <ng-template>
            <router-outlet></router-outlet>
        </ng-template>
    </adf-sidenav-layout-content>
</adf-sidenav-layout>

 

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

<router-outlet></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 https://mixpanel.com 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: 

"ERROR|DEBUG|INFO|LOG|TRACE|WARN|ASSERT"

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';

@Component({...})
export class AppComponent {

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

Please check the log service documentation for more details:  alfresco-ng2-components/log.service.md 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';

@Component({
    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 .