diff --git a/src/frontend/app/administration/administration-routing.module.ts b/src/frontend/app/administration/administration-routing.module.ts
index 5a0d0a34a39d483a7bd977df56183052fea8d551..40ece1255998b9f25f9aca740c68bc3496018fb6 100755
--- a/src/frontend/app/administration/administration-routing.module.ts
+++ b/src/frontend/app/administration/administration-routing.module.ts
@@ -53,6 +53,8 @@ import { IssuingSiteListComponent } from './registered-mail/issuing-site/issuing
 import { IssuingSiteComponent } from './registered-mail/issuing-site/issuing-site.component';
 import { RegisteredMailListComponent } from './registered-mail/registered-mail-list.component';
 import { RegisteredMailComponent } from './registered-mail/registered-mail.component';
+import { SearchAdministrationComponent } from './searchAdv/search-adv.component';
+
 
 @NgModule({
     imports: [
@@ -127,6 +129,7 @@ import { RegisteredMailComponent } from './registered-mail/registered-mail.compo
             { path: 'issuingSites', canActivate: [AppGuard], component: IssuingSiteListComponent },
             { path: 'issuingSites/new', canActivate: [AppGuard], component: IssuingSiteComponent },
             { path: 'issuingSites/:id', canActivate: [AppGuard], component: IssuingSiteComponent },
+            { path : 'searchAdv', canActivate : [AppGuard], component : SearchAdministrationComponent}
         ]),
     ],
     exports: [
diff --git a/src/frontend/app/administration/administration.module.ts b/src/frontend/app/administration/administration.module.ts
index 6ae785ec75bd22b23a408cd4c92b0ed795fddee7..77564f54a039fb4ff65512ef21783c854f712173 100755
--- a/src/frontend/app/administration/administration.module.ts
+++ b/src/frontend/app/administration/administration.module.ts
@@ -75,6 +75,8 @@ import { RegisteredMailComponent } from './registered-mail/registered-mail.compo
 import { IssuingSiteListComponent } from './registered-mail/issuing-site/issuing-site-list.component';
 import { IssuingSiteComponent } from './registered-mail/issuing-site/issuing-site.component';
 import { RegisteredMailListComponent } from './registered-mail/registered-mail-list.component';
+import { SearchAdministrationComponent } from './searchAdv/search-adv.component';
+
 
 @NgModule({
     imports: [
@@ -156,7 +158,8 @@ import { RegisteredMailListComponent } from './registered-mail/registered-mail-l
         RegisteredMailComponent,
         IssuingSiteListComponent,
         IssuingSiteComponent,
-        RegisteredMailListComponent
+        RegisteredMailListComponent,
+        SearchAdministrationComponent
     ],
     entryComponents: [
         AccountLinkComponent,
diff --git a/src/frontend/app/administration/searchAdv/search-adv.component.html b/src/frontend/app/administration/searchAdv/search-adv.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..0c0760ca0d944f8a5d8adedaf2b9c9e105e19743
--- /dev/null
+++ b/src/frontend/app/administration/searchAdv/search-adv.component.html
@@ -0,0 +1,182 @@
+<div class="formType ratio-2 col-sm-12">
+    <div class="formType-title">
+        {{'lang.options' | translate}}
+    </div>
+    <mat-form-field class="eventList" appearance="outline">
+        <mat-label>{{'lang.tabProcessPosition' | translate}}</mat-label>
+        <mat-select [(ngModel)]="selectedProcessTool.defaultTab">
+            <mat-option *ngFor="let tool of processTool | sortBy: 'label'" [value]="tool.id">
+                {{tool.label}}
+            </mat-option>
+        </mat-select>
+    </mat-form-field>
+    <div style="padding: 10px;">
+        <mat-slide-toggle color="primary" [(ngModel)]="selectedProcessTool.canUpdateData"
+            (change)="toggleCanUpdate($event.checked)">{{'lang.canUpdateData' | translate}}</mat-slide-toggle>
+    </div>
+    <div style="padding: 10px;">
+        <mat-slide-toggle color="primary" [(ngModel)]="selectedProcessTool.canUpdateModel"
+            [disabled]="!selectedProcessTool.canUpdateData">{{'lang.canUpdateIndexingModel' | translate}}
+        </mat-slide-toggle>
+    </div>
+</div>
+<hr />
+<mat-toolbar class="editorTool">
+    <span>
+        <button color="primary" *ngIf="displayMode=='label'" mat-icon-button (click)="toggleData()"
+            title="{{'lang.preview' | translate}}">
+            <mat-icon fontSet="fas" fontIcon="fa-eye"></mat-icon>
+        </button>
+        <button color="primary" *ngIf="displayMode=='sample'" mat-icon-button (click)="toggleData()"
+            title="{{'lang.edition' | translate}}">
+            <mat-icon fontSet="fas" fontIcon="fa-edit"></mat-icon>
+        </button>
+        <button color="primary" mat-button [title]="'lang.templateUsed' | translate" [matMenuTriggerFor]="menu">
+            {{selectedTemplateDisplayedSecondaryData}} <i class="fas fa-columns"></i>
+        </button>
+        <mat-menu #menu="matMenu">
+            <button mat-menu-item *ngFor="let colNum of templateDisplayedSecondaryData" (click)="selectedTemplateDisplayedSecondaryData=colNum">{{colNum}} colonne(s)</button>
+        </mat-menu>
+    </span>
+    <span class="area">
+        <form>
+            <mat-form-field appearance="outline" floatLabel="never">
+                <input id="availableData" name="availableData" type="text" matInput [formControl]="dataControl"
+                    placeholder="{{'lang.availableDatas' | translate}}" [matAutocomplete]="auto">
+                <mat-autocomplete #auto="matAutocomplete" (optionSelected)="addData($event)">
+                    <mat-option *ngFor="let item of filteredDataOptions | async" [value]="item" class="dataList">
+                        <span class="optionContent">
+                            <span class="dataIcon">
+                                <i color="primary" class="fa {{item.icon}} fa-2x"></i>
+                            </span>
+                            <span class="dataLabel">
+                                {{item.label}}
+                            </span>
+                        </span>
+                    </mat-option>
+                </mat-autocomplete>
+            </mat-form-field>
+        </form>
+    </span>
+    <span>
+        <button color="warn" mat-button (click)="removeAllData()" style="float:right;"
+            [disabled]="displayMode=='sample'">
+            {{'lang.eraseAll' | translate}}
+        </button>
+    </span>
+</mat-toolbar>
+<mat-card>
+    <ng-container *ngIf="(displayedSecondaryData.length > 0 && displayMode=='sample') || displayMode=='label'">
+        <mat-toolbar class="secondaryInformations example-list column-{{selectedTemplateDisplayedSecondaryData}}-list" cdkDropListOrientation="horizontal" cdkDropList
+            [cdkDropListData]="displayedSecondaryData" (cdkDropListDropped)="drop($event)">
+            <ng-container *ngFor="let item of displayedSecondaryData;let itData=index">
+                <span class="example-box" *ngIf="item.value != 'getFolders'" cdkDrag>
+                    <button *ngIf="displayMode=='label'" color="primary" mat-icon-button [matMenuTriggerFor]="menu">
+                        <mat-icon fontSet="fas" fontIcon="fa-ellipsis-v fa-2x"></mat-icon>
+                    </button>
+                    <mat-menu #menu="matMenu">
+                        <button mat-menu-item (click)="removeData(item,itData)">
+                            <mat-icon class="secondaryInformations_icon" color="warn" fontSet="fas"
+                                fontIcon="fa-trash fa-2x"></mat-icon>
+                            <span>{{'lang.delete' | translate}}</span>
+                        </button>
+                        <mat-divider></mat-divider>
+                        <button [class.isSelectedMenu]="item.cssClasses.indexOf('boldFontData') > -1" mat-menu-item
+                            (click)="setStyle(item,'boldFontData')">
+                            <mat-icon class="secondaryInformations_icon" fontSet="fas" fontIcon="fa-bold fa-2x">
+                            </mat-icon>
+                            <span>{{'lang.fontBold' | translate}}</span>
+                        </button>
+                        <button [class.isSelectedMenu]="item.cssClasses.indexOf('align_leftData') > -1" mat-menu-item
+                            (click)="setStyle(item,'align_leftData')">
+                            <mat-icon class="secondaryInformations_icon" fontSet="fas" fontIcon="fa-align-left fa-2x">
+                            </mat-icon>
+                            <span>{{'lang.alignLeft' | translate}}</span>
+                        </button>
+                        <button [class.isSelectedMenu]="item.cssClasses.indexOf('align_centerData') > -1" mat-menu-item
+                            (click)="setStyle(item,'align_centerData')">
+                            <mat-icon class="secondaryInformations_icon" fontSet="fas" fontIcon="fa-align-center fa-2x">
+                            </mat-icon>
+                            <span>{{'lang.alignCenter' | translate}}</span>
+                        </button>
+                        <button [class.isSelectedMenu]="item.cssClasses.indexOf('align_rightData') > -1" mat-menu-item
+                            (click)="setStyle(item,'align_rightData')">
+                            <mat-icon class="secondaryInformations_icon" fontSet="fas" fontIcon="fa-align-right fa-2x">
+                            </mat-icon>
+                            <span>{{'lang.alignRight' | translate}}</span>
+                        </button>
+                        <button [class.isSelectedMenu]="item.cssClasses.indexOf('bigFontData') > -1" mat-menu-item
+                            (click)="setStyle(item,'bigFontData')">
+                            <mat-icon class="secondaryInformations_icon" fontSet="fas" fontIcon="fa-text-height fa-2x">
+                            </mat-icon>
+                            <span>{{'lang.fontBig' | translate}}</span>
+                        </button>
+                    </mat-menu>
+                    <span style="width:100%;" [class]="item.cssClasses.join(' ')">
+                        <i class="fa {{item.icon}}"></i>&nbsp;
+                        <span class="secondaryInformations_label" [innerHTML]="item[displayMode]"></span>
+                    </span>
+                </span>
+            </ng-container>
+        </mat-toolbar>
+    </ng-container>
+    <div class="resultRow newRow">
+        <span class="resultCol" *ngFor="let item of displayedMainData;let i=index" [class]="item.cssClasses.join(' ')">
+            <span *ngIf="i == 0">
+                <mat-icon *ngIf="displayMode=='label'" color="primary" class="fm fm-letter fm-2x"></mat-icon>
+                <mat-icon *ngIf="displayMode=='sample'" color="warn" class="fm fm-letter-status-inprogress fm-2x">
+                </mat-icon><br />
+                <span class="resultCol_chrono">{{item[displayMode]}}</span>
+            </span>
+            <span *ngIf="i == 1">
+                {{item[displayMode]}}
+            </span>
+        </span>
+        <mat-button-toggle-group class="actions" multiple>
+            <button color="primary" mat-icon-button title="{{'lang.notes' | translate}}"
+                [disabled]="displayMode == 'label'">
+                <mat-icon [matBadgeHidden]="displayMode == 'label'" fontSet="fas" matBadge="2"
+                    fontIcon="fa-comments fa-2x"></mat-icon>
+            </button>
+            <button color="primary" mat-icon-button title="{{'lang.attachments' | translate}}"
+                [disabled]="displayMode == 'label'">
+                <mat-icon [matBadgeHidden]="displayMode == 'label'" fontSet="fas" matBadge="7"
+                    fontIcon="fa-paperclip fa-2x"></mat-icon>
+            </button>
+            <button color="primary" mat-icon-button title="{{'lang.diffusionList' | translate}}"
+                [disabled]="displayMode == 'label'">
+                <mat-icon fontSet="fas" fontIcon="fa-sitemap fa-2x"></mat-icon>
+            </button>
+            <button color="primary" mat-icon-button title="{{'lang.linkDetails' | translate}}"
+                [disabled]="displayMode == 'label'">
+                <mat-icon fontSet="fas" fontIcon="fa-info-circle fa-2x"></mat-icon>
+            </button>
+        </mat-button-toggle-group>
+    </div>
+    <div *ngFor="let item of displayedSecondaryData;let itData=index" class="folder-info">
+        <ng-container *ngIf="item.value=='getFolders'">
+            <button *ngIf="displayMode=='label'" color="primary" mat-icon-button [matMenuTriggerFor]="menu">
+                <mat-icon fontSet="fas" fontIcon="fa-ellipsis-v fa-2x"></mat-icon>
+            </button>
+            <mat-menu #menu="matMenu">
+                <button mat-menu-item (click)="removeData(item,itData)">
+                    <mat-icon class="secondaryInformations_icon" color="warn" fontSet="fas" fontIcon="fa-trash fa-2x">
+                    </mat-icon>
+                    <span>{{'lang.delete' | translate}}</span>
+                </button>
+            </mat-menu>
+            <span class="badge badge-folder"><i class="fa fa-folder"></i>
+                {{item[displayMode]}}</span>
+        </ng-container>
+    </div>
+</mat-card>
+<div class="row">
+    <div class="col-md-12 text-center" style="margin-top:30px;">
+        <button color="primary" mat-raised-button (click)="saveTemplate()" [disabled]="checkModif()">
+            {{'lang.validate' | translate}}
+        </button>
+        <button color="default" mat-raised-button (click)="cancelModification()" [disabled]="checkModif()">
+            {{'lang.cancel' | translate}}
+        </button>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/frontend/app/administration/searchAdv/search-adv.component.scss b/src/frontend/app/administration/searchAdv/search-adv.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..30338c7659c898d53fe6d2b4aa261e939db57f8b
--- /dev/null
+++ b/src/frontend/app/administration/searchAdv/search-adv.component.scss
@@ -0,0 +1,268 @@
+@import '../../../css/vars.scss';
+
+.availableData {
+  margin: 10px;
+  display: flex;
+}
+
+.secondaryInformations {
+  border: solid 1px #F9983066;
+  font-size: 10px;
+  height: 30px;
+  color: #666;
+
+  &_icon {
+    height: auto;
+  }
+
+  &_label {
+    width: 100%;
+  }
+}
+
+.resultRow {
+  align-items: center;
+  display: flex;
+  padding: 5px;
+
+  &-mobile {
+    font-size: 80%;
+  }
+}
+
+.resultCol {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  &-mobile {
+    overflow: inherit;
+    text-overflow: inherit;
+    word-break: break-all;
+  }
+
+  &_chrono {
+    color: rgba(0, 0, 0, 0.4);
+    font-size: 90%;
+  }
+}
+
+.actions {
+  text-align: right;
+  box-shadow: none;
+  border: none;
+  flex: 1;
+  justify-content: flex-end;
+  overflow: inherit;
+}
+
+.elemToDrag {
+  flex: 1;
+  border: dashed 1px;
+  padding: 10px;
+  height: 10px;
+  line-height: 0px;
+  cursor: move;
+  margin-right: 5px;
+  margin-left: 5px;
+}
+
+.columns {
+  width: 100%;
+  height: 90px;
+  padding: 20px 10px;
+  border-bottom: solid 1px #ccc;
+  color: rgba(0, 0, 0, 0.87);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  background: white;
+  font-size: 14px;
+}
+
+.mat-badge-content {
+  background: #F99830;
+}
+
+.example-list {
+  display: grid;
+  gap: 10px;
+  height: auto;
+  max-width: 100%;
+  border-radius: 4px;
+  // overflow: hidden;
+  border: solid 1px #F9983066;
+  font-size: 10px;
+  background: #f5f5f5;
+}
+
+.example-box {
+  // padding: 20px 10px;
+  //border-right: solid 1px #ccc;
+  color: #666;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  cursor: move;
+  background: #f5f5f5;
+  flex-grow: 1;
+  flex-basis: 0;
+  height: 20px;
+}
+
+.cdk-drag-preview {
+  box-sizing: border-box;
+  border-radius: 4px;
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+    0 8px 10px 1px rgba(0, 0, 0, 0.14),
+    0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+
+.cdk-drag-placeholder {
+  opacity: 0;
+}
+
+.cdk-drag-animating {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.example-box:last-child {
+  border: none;
+}
+
+.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.editorTool {
+  display: flex;
+  height: 44px;
+  font-size: 10px;
+  margin-bottom: 30px;
+
+  .area {
+    flex: 1;
+
+    form {
+      width: 100%;
+    }
+  }
+
+  .separator {
+    border-left: solid 1px #666;
+    height: 70%;
+    margin-left: 10px;
+    margin-right: 10px;
+  }
+
+  .mat-form-field {
+    height: 35px;
+  }
+
+  ::ng-deep .mat-form-field-appearance-outline.mat-form-field-disabled .mat-form-field-outline {
+    background: inherit;
+  }
+
+  ::ng-deep .mat-form-field-outline {
+    background: white;
+  }
+}
+
+.optionContent {
+  display: flex !important;
+
+  .dataIcon {
+    width: 30px;
+
+    i {
+      font-size: 14px;
+    }
+  }
+
+  .dataLabel {
+    flex: 1;
+  }
+}
+
+.isSelectedMenu {
+  background: rgba(249, 152, 48, 0.14);
+}
+
+.align_leftData {
+  text-align: left;
+}
+
+.align_centerData {
+  text-align: center;
+}
+
+.align_rightData {
+  text-align: right;
+}
+
+.boldFontData {
+  font-weight: bold;
+}
+
+.bigFontData {
+  font-size: 14px;
+}
+
+.smallFontData {
+  font-size: 10px;
+}
+
+.normalData {
+  flex: 1;
+}
+
+.longData {
+  flex: 3;
+}
+
+.eventList {
+  padding-top: 10px;
+}
+
+.badge-folder {
+  cursor: default;
+  background: $primary;
+  margin: 5px;
+  font-size: 8px;
+  max-width: 250px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.formType {
+  align-items: center;
+  // display: flex;
+  // margin: 10px;
+  margin-bottom: 10px;
+  border-radius: 4px;
+  border: solid 1px #ccc;
+  position: relative;
+  padding: 10px;
+
+  &-title {
+      white-space: pre;
+      overflow: hidden;
+      max-width: 85%;
+      text-overflow: ellipsis;
+      z-index: 1;
+      font-size: 10px;
+      font-weight: bold;
+      background: white;
+      position: absolute;
+      top: -7px;
+      left: 10px;
+      padding: 0px;
+      margin: 0px;
+      color: #135f7f;
+  }
+}
diff --git a/src/frontend/app/administration/searchAdv/search-adv.component.ts b/src/frontend/app/administration/searchAdv/search-adv.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8c2855e36dea71ff0143f69b702502b1ade608b7
--- /dev/null
+++ b/src/frontend/app/administration/searchAdv/search-adv.component.ts
@@ -0,0 +1,456 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { TranslateService } from '@ngx-translate/core';
+import { NotificationService } from '../../../service/notification/notification.service';
+import { FormControl } from '@angular/forms';
+import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
+import { startWith, map, tap, catchError } from 'rxjs/operators';
+import { Observable } from 'rxjs/internal/Observable';
+import { of } from 'rxjs/internal/observable/of';
+
+declare var $: any;
+
+
+@Component({
+    templateUrl: 'search-adv.component.html',
+    styleUrls: ['search-adv.component.scss'],
+})
+
+export class SearchAdministrationComponent implements OnInit {
+
+
+    loading: boolean = false;
+
+    displayedMainData: any = [
+        {
+            'value': 'chronoNumberShort',
+            'label': this.translate.instant('lang.chronoNumberShort'),
+            'sample': 'MAARCH/2019A/1',
+            'cssClasses': ['align_centerData', 'normalData'],
+            'icon': ''
+        },
+        {
+            'value': 'object',
+            'label': this.translate.instant('lang.object'),
+            'sample': this.translate.instant('lang.objectSample'),
+            'cssClasses': ['longData'],
+            'icon': ''
+        }
+    ];
+
+    availableData: any = [
+        {
+            'value': 'getPriority',
+            'label': this.translate.instant('lang.getPriority'),
+            'sample': this.translate.instant('lang.getPrioritySample'),
+            'cssClasses': ['align_leftData'],
+            'icon': 'fa-traffic-light'
+        },
+        {
+            'value': 'getCategory',
+            'label': this.translate.instant('lang.getCategory'),
+            'sample': this.translate.instant('lang.incoming'),
+            'cssClasses': ['align_leftData'],
+            'icon': 'fa-exchange-alt'
+        },
+        {
+            'value': 'getDoctype',
+            'label': this.translate.instant('lang.getDoctype'),
+            'sample': this.translate.instant('lang.getDoctypeSample'),
+            'cssClasses': ['align_leftData'],
+            'icon': 'fa-suitcase'
+        },
+        {
+            'value': 'getAssignee',
+            'label': this.translate.instant('lang.getAssignee'),
+            'sample': this.translate.instant('lang.getAssigneeSample'),
+            'cssClasses': ['align_leftData'],
+            'icon': 'fa-sitemap'
+        },
+        {
+            'value': 'getRecipients',
+            'label': this.translate.instant('lang.getRecipients'),
+            'sample': 'Patricia PETIT',
+            'cssClasses': ['align_leftData'],
+            'icon': 'fa-user'
+        },
+        {
+            'value': 'getSenders',
+            'label': this.translate.instant('lang.getSenders'),
+            'sample': 'Alain DUBOIS (MAARCH)',
+            'cssClasses': ['align_leftData'],
+            'icon': 'fa-book'
+        },
+        {
+            'value': 'getCreationAndProcessLimitDates',
+            'label': this.translate.instant('lang.getCreationAndProcessLimitDates'),
+            'sample': this.translate.instant('lang.getCreationAndProcessLimitDatesSample'),
+            'cssClasses': ['align_leftData'],
+            'icon': 'fa-calendar'
+        },
+        {
+            'value': 'getVisaWorkflow',
+            'label': this.translate.instant('lang.getVisaWorkflow'),
+            'sample': '<i color="accent" class="fa fa-check"></i> Barbara BAIN -> <i class="fa fa-hourglass-half"></i> <b>Bruno BOULE</b> -> <i class="fa fa-hourglass-half"></i> Patricia PETIT',
+            'cssClasses': ['align_leftData'],
+            'icon': 'fa-list-ol'
+        },
+        {
+            'value': 'getSignatories',
+            'label': this.translate.instant('lang.getSignatories'),
+            'sample': 'Denis DAULL, Patricia PETIT',
+            'cssClasses': ['align_leftData'],
+            'icon': 'fa-certificate'
+        },
+        {
+            'value': 'getModificationDate',
+            'label': this.translate.instant('lang.getModificationDate'),
+            'sample': '01-01-2019',
+            'cssClasses': ['align_leftData'],
+            'icon': 'fa-calendar-check'
+        },
+        {
+            'value': 'getOpinionLimitDate',
+            'label': this.translate.instant('lang.getOpinionLimitDate'),
+            'sample': '01-01-2019',
+            'cssClasses': ['align_leftData'],
+            'icon': 'fa-stopwatch'
+        },
+        {
+            'value': 'getParallelOpinionsNumber',
+            'label': this.translate.instant('lang.getParallelOpinionsNumber'),
+            'sample': this.translate.instant('lang.getParallelOpinionsNumberSample'),
+            'cssClasses': ['align_leftData'],
+            'icon': 'fa-comment-alt'
+        },
+        {
+            'value': 'getFolders',
+            'label': this.translate.instant('lang.getFolders'),
+            'sample': this.translate.instant('lang.getFoldersSample'),
+            'cssClasses': ['align_leftData'],
+            'icon': 'fa-folder'
+        },
+        {
+            'value': 'getResId',
+            'label': this.translate.instant('lang.getResId'),
+            'sample': this.translate.instant('lang.getResIdSample'),
+            'cssClasses': ['align_leftData'],
+            'icon': 'fa-envelope'
+        }, {
+            'value': 'getBarcode',
+            'label': this.translate.instant('lang.getBarcode'),
+            'sample': this.translate.instant('lang.getBarcodeSample'),
+            'cssClasses': ['align_leftData'],
+            'icon': 'fa-barcode'
+        }
+    ];
+    availableDataClone: any = [];
+
+    displayedSecondaryData: any = [];
+    displayedSecondaryDataClone: any = [];
+
+    displayMode: string = 'label';
+    dataControl = new FormControl();
+    filteredDataOptions: Observable<string[]>;
+    listEvent: any[] = [
+        {
+            id: 'detailDoc',
+            value: 'documentDetails'
+        },
+        {
+            id: 'eventVisaMail',
+            value: 'signatureBookAction'
+        },
+        {
+            id: 'eventProcessDoc',
+            value: 'processDocument'
+        },
+        {
+            id: 'eventViewDoc',
+            value: 'viewDoc'
+        }
+    ];
+
+    templateDisplayedSecondaryData: number[] = [1, 2, 3, 4, 5, 6, 7];
+    selectedTemplateDisplayedSecondaryData: number = 7;
+    selectedTemplateDisplayedSecondaryDataClone: number = 7;
+
+    selectedListEvent: string = null;
+    selectedListEventClone: string = null;
+
+    processTool: any[] = [
+        {
+            id: 'dashboard',
+            icon: 'fas fa-columns',
+            label: this.translate.instant('lang.newsFeed'),
+        },
+        {
+            id: 'history',
+            icon: 'fas fa-history',
+            label: this.translate.instant('lang.history'),
+        },
+        {
+            id: 'notes',
+            icon: 'fas fa-pen-square',
+            label: this.translate.instant('lang.notesAlt'),
+        },
+        {
+            id: 'attachments',
+            icon: 'fas fa-paperclip',
+            label: this.translate.instant('lang.attachments'),
+        },
+        {
+            id: 'linkedResources',
+            icon: 'fas fa-link',
+            label: this.translate.instant('lang.links'),
+        },
+        {
+            id: 'diffusionList',
+            icon: 'fas fa-share-alt',
+            label: this.translate.instant('lang.diffusionList'),
+        },
+        {
+            id: 'emails',
+            icon: 'fas fa-envelope',
+            label: this.translate.instant('lang.mailsSentAlt'),
+        },
+        {
+            id: 'visaCircuit',
+            icon: 'fas fa-list-ol',
+            label: this.translate.instant('lang.visaWorkflow'),
+        },
+        {
+            id: 'opinionCircuit',
+            icon: 'fas fa-comment-alt',
+            label: this.translate.instant('lang.avis'),
+        },
+        {
+            id: 'info',
+            icon: 'fas fa-info-circle',
+            label: this.translate.instant('lang.informations'),
+        }
+    ];
+    selectedProcessTool: any = {
+        defaultTab: null,
+        canUpdateData: false,
+        canUpdateModel: false,
+        canUpdateDocuments: false,
+    };
+    selectedProcessToolClone: string = null;
+
+    searchAdv: any = { list_event: {}, list_display: {} };
+
+    constructor(public translate: TranslateService, public http: HttpClient, private notify: NotificationService) { }
+
+    async ngOnInit(): Promise<void> {
+        await this.initCustomFields();
+        this.filteredDataOptions = this.dataControl.valueChanges
+            .pipe(
+                startWith(''),
+                map(value => this._filterData(value))
+            );
+
+        this.availableDataClone = JSON.parse(JSON.stringify(this.availableData));
+        this.displayedSecondaryData = [];
+        let indexData: number = 0;
+        this.selectedTemplateDisplayedSecondaryData = this.searchAdv.list_display.templateColumns;
+        this.selectedTemplateDisplayedSecondaryDataClone = this.selectedTemplateDisplayedSecondaryData;
+        /*this.searchAdv.list_display.subInfos.forEach((element: any) => {
+            indexData = this.availableData.map((e: any) => e.value).indexOf(element.value);
+            this.availableData[indexData].cssClasses = element.cssClasses;
+            this.displayedSecondaryData.push(this.availableData[indexData]);
+            this.availableData.splice(indexData, 1);
+        });*/
+        this.selectedListEvent = this.searchAdv.list_event;
+        this.selectedListEventClone = this.selectedListEvent;
+
+        if (this.searchAdv.list_event === 'processDocument') {
+            this.selectedProcessTool.defaultTab = this.searchAdv.list_event_data === null ? 'dashboard' : this.searchAdv.list_event_data.defaultTab;
+            this.selectedProcessTool.canUpdateData = this.searchAdv.list_event_data === null ? false : this.searchAdv.list_event_data.canUpdateData;
+            this.selectedProcessTool.canUpdateModel = this.searchAdv.list_event_data === null ? false : this.searchAdv.list_event_data.canUpdateModel;
+        } else if (this.searchAdv.list_event === 'signatureBookAction') {
+            this.selectedProcessTool.canUpdateDocuments = this.searchAdv.list_event_data === null ? false : this.searchAdv.list_event_data.canUpdateDocuments;
+        }
+
+        this.selectedProcessToolClone = JSON.parse(JSON.stringify(this.selectedProcessTool));
+        this.displayedSecondaryDataClone = JSON.parse(JSON.stringify(this.displayedSecondaryData));
+    }
+
+    initCustomFields() {
+        return new Promise((resolve, reject) => {
+
+            this.http.get('../rest/customFields').pipe(
+                map((data: any) => {
+                    data.customFields = data.customFields.map((info: any) => {
+                        return {
+                            'value': 'indexingCustomField_' + info.id,
+                            'label': info.label,
+                            'sample': this.translate.instant('lang.customField') + info.id,
+                            'cssClasses': ['align_leftData'],
+                            'icon': 'fa-hashtag'
+                        };
+                    });
+                    return data.customFields;
+                }),
+                tap((customs) => {
+                    console.log(customs);
+                    this.availableData = this.availableData.concat(customs);
+                    resolve(true);
+
+                }),
+                catchError((err: any) => {
+                    this.notify.handleErrors(err);
+                    return of(false);
+                })
+            ).subscribe();
+        });
+    }
+
+    toggleData() {
+        this.dataControl.disabled ? this.dataControl.enable() : this.dataControl.disable();
+
+        if (this.displayMode === 'label') {
+            this.displayMode = 'sample';
+        } else {
+            this.displayMode = 'label';
+        }
+
+    }
+
+    setStyle(item: any, value: string) {
+        const typeFont = value.split('_');
+
+        if (typeFont.length === 2) {
+            item.cssClasses.forEach((element: any, it: number) => {
+                if (element.includes(typeFont[0]) && element !== value) {
+                    item.cssClasses.splice(it, 1);
+                }
+            });
+        }
+
+        const index = item.cssClasses.indexOf(value);
+
+        if (index === -1) {
+            item.cssClasses.push(value);
+        } else {
+            item.cssClasses.splice(index, 1);
+        }
+    }
+
+    addData(event: any) {
+        const i = this.availableData.map((e: any) => e.value).indexOf(event.option.value.value);
+        this.displayedSecondaryData.push(event.option.value);
+        this.availableData.splice(i, 1);
+        $('#availableData').blur();
+        this.dataControl.setValue('');
+    }
+
+    removeData(data: any, i: number) {
+        this.availableData.push(data);
+        this.displayedSecondaryData.splice(i, 1);
+        this.dataControl.setValue('');
+    }
+
+    removeAllData() {
+        this.availableData = this.availableData.concat(this.displayedSecondaryData);
+        this.displayedSecondaryData = [];
+        this.dataControl.setValue('');
+    }
+
+    drop(event: CdkDragDrop<string[]>) {
+        if (event.previousContainer === event.container) {
+            moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
+        }
+    }
+
+    saveTemplate() {
+        let objToSend = {};
+        const template: any = [];
+        this.displayedSecondaryData.forEach((element: any) => {
+            template.push(
+                {
+                    'value': element.value,
+                    'cssClasses': element.cssClasses,
+                    'icon': element.icon,
+                }
+            );
+        });
+
+        objToSend = {
+            templateColumns: this.selectedTemplateDisplayedSecondaryData,
+            subInfos: template
+        };
+
+        this.http.put('../rest/baskets/' + this.searchAdv.basket_id + '/groups/' + this.searchAdv.group_id, { 'list_display': objToSend, 'list_event': this.selectedListEvent, 'list_event_data': this.selectedProcessTool })
+            .subscribe(() => {
+                this.displayedSecondaryDataClone = JSON.parse(JSON.stringify(this.displayedSecondaryData));
+                this.searchAdv.list_display = template;
+                this.searchAdv.list_event = this.selectedListEvent;
+                this.selectedListEventClone = this.selectedListEvent;
+                this.searchAdv.list_event_data = this.selectedProcessTool;
+                this.selectedProcessToolClone = JSON.parse(JSON.stringify(this.selectedProcessTool));
+                this.selectedTemplateDisplayedSecondaryDataClone = JSON.parse(JSON.stringify(this.selectedTemplateDisplayedSecondaryData));
+                this.notify.success(this.translate.instant('lang.modificationsProcessed'));
+            }, (err) => {
+                this.notify.error(err.error.errors);
+            });
+    }
+
+    private _filterData(value: any): string[] {
+        let filterValue = '';
+
+        if (typeof value === 'string') {
+            filterValue = value.toLowerCase();
+        } else if (value !== null) {
+            filterValue = value.label.toLowerCase();
+        }
+        return this.availableData.filter((option: any) => option.label.toLowerCase().includes(filterValue));
+    }
+
+    checkModif() {
+        if (JSON.stringify(this.displayedSecondaryData) === JSON.stringify(this.displayedSecondaryDataClone) && this.selectedListEvent === this.selectedListEventClone && JSON.stringify(this.selectedProcessTool) === JSON.stringify(this.selectedProcessToolClone) && JSON.stringify(this.selectedTemplateDisplayedSecondaryData) === JSON.stringify(this.selectedTemplateDisplayedSecondaryDataClone)) {
+            return true;
+        } else {
+            return false;
+        }
+    }
+
+    cancelModification() {
+        this.displayedSecondaryData = JSON.parse(JSON.stringify(this.displayedSecondaryDataClone));
+        this.selectedListEvent = this.selectedListEventClone;
+        this.selectedProcessTool = JSON.parse(JSON.stringify(this.selectedProcessToolClone));
+        this.availableData = JSON.parse(JSON.stringify(this.availableDataClone));
+        this.selectedTemplateDisplayedSecondaryData = JSON.parse(JSON.stringify(this.selectedTemplateDisplayedSecondaryDataClone));
+
+        let indexData: number = 0;
+        this.displayedSecondaryData.forEach((element: any) => {
+            indexData = this.availableData.map((e: any) => e.value).indexOf(element.value);
+            this.availableData.splice(indexData, 1);
+        });
+        this.dataControl.setValue('');
+    }
+
+    hasFolder() {
+        if (this.displayedSecondaryData.map((data: any) => data.value).indexOf('getFolders') > -1) {
+            return true;
+        } else {
+            return false;
+        }
+    }
+
+    changeEventList(ev: any) {
+        if (ev.value === 'processDocument') {
+            this.selectedProcessTool = {
+                defaultTab: 'dashboard'
+            };
+        } else {
+            this.selectedProcessTool = {};
+        }
+    }
+
+    toggleCanUpdate(state: boolean) {
+        if (!state) {
+            this.selectedProcessTool.canUpdateModel = state;
+        }
+    }
+}