Merge pull request #1201 from Alfresco/dev-wabson-775

Process variables component
2026-09-09 18:03:21 +00:00 · 2016-12-07 09:53:29 +00:00
parent e334848126 a49f7dd7f7
commit 93036da6a7
16 changed files with 1031 additions and 62 deletions
@@ -56,8 +56,8 @@
                            <span>Process Filters</span>
                            <button type="button" (click)="navigateStartProcess()" class="mdl-button" data-automation-id="btn-start-process">Start Process</button>
                            <activiti-process-instance-filters [appId]="appId"
-                                    (filterClick)="onProcessFilterClick($event)" (onSuccess)="onSuccessProcessFilterList($event)"
-                                    #activitiprocessfilter></activiti-process-instance-filters>
+                                    (filterClick)="onProcessFilterClick($event)"
+                                    (onSuccess)="onSuccessProcessFilterList($event)"></activiti-process-instance-filters>
                        </div>
                        <div class="mdl-cell mdl-cell--3-col task-column">
                            <span>Process List</span>
@@ -67,12 +67,14 @@
                                    [state]="processFilter.filter.state"
                                    [sort]="processFilter.filter.sort"
                                    [data]="dataProcesses"
-                                               (rowClick)="onProcessRowClick($event)" (onSuccess)="onSuccessProcessList($event)"
-                                                            #activitiprocesslist></activiti-process-instance-list>
+                                    (rowClick)="onProcessRowClick($event)"
+                                    (onSuccess)="onSuccessProcessList($event)"></activiti-process-instance-list>
                        </div>
                        <div class="mdl-cell mdl-cell--7-col task-column" *ngIf="!isStartProcessMode()">
                            <span>Process Details</span>
-                            <activiti-process-instance-details [processInstanceId]="currentProcessInstanceId" (activitiprocesslist)="taskFormCompleted()" (processCancelled)="processCancelled()" #activitiprocessdetails></activiti-process-instance-details>
+                            <activiti-process-instance-details [processInstanceId]="currentProcessInstanceId"
+                                    (activitiprocesslist)="taskFormCompleted()"
+                                    (processCancelled)="processCancelled()"></activiti-process-instance-details>
                        </div>
                        <div class="mdl-cell mdl-cell--7-col task-column" *ngIf="isStartProcessMode()">
                            <span>Start Process</span>
@@ -15,9 +15,17 @@
 * limitations under the License.
 */

-import { Component, AfterViewInit, ViewChild, Input, ElementRef } from '@angular/core';
-import { FilterRepresentationModel, ActivitiApps, ActivitiTaskList } from 'ng2-activiti-tasklist';
+import { AfterViewInit, Component, ElementRef, Input, ViewChild } from '@angular/core';
 import {
+    ActivitiApps,
+    ActivitiFilters,
+    ActivitiTaskDetails,
+    ActivitiTaskList,
+    FilterRepresentationModel
+} from 'ng2-activiti-tasklist';
+import {
+    ActivitiProcessFilters,
+    ActivitiProcessInstanceDetails,
    ActivitiProcessInstanceListComponent,
    ActivitiStartProcessInstance,
    ProcessInstance
@@ -45,26 +53,26 @@ const currentProcessIdNew = '__NEW__';
 })
 export class ActivitiDemoComponent implements AfterViewInit {

-    @ViewChild('activitiapps')
+    @ViewChild(ActivitiApps)
    activitiapps: ActivitiApps;

-    @ViewChild('activitifilter')
-    activitifilter: any;
-
-    @ViewChild('activitidetails')
-    activitidetails: any;
+    @ViewChild(ActivitiFilters)
+    activitifilter: ActivitiFilters;

    @ViewChild(ActivitiTaskList)
    activititasklist: ActivitiTaskList;

-    @ViewChild('activitiprocessfilter')
-    activitiprocessfilter: any;
+    @ViewChild(ActivitiTaskDetails)
+    activitidetails: ActivitiTaskDetails;
+
+    @ViewChild(ActivitiProcessFilters)
+    activitiprocessfilter: ActivitiProcessFilters;

    @ViewChild(ActivitiProcessInstanceListComponent)
    activitiprocesslist: ActivitiProcessInstanceListComponent;

-    @ViewChild('activitiprocessdetails')
-    activitiprocessdetails: any;
+    @ViewChild(ActivitiProcessInstanceDetails)
+    activitiprocessdetails: ActivitiProcessInstanceDetails;

    @ViewChild(ActivitiStartProcessInstance)
    activitiStartProcess: ActivitiStartProcessInstance;
@@ -15,15 +15,24 @@
 * limitations under the License.
 */

-import { Input, NgModule, Component, OnInit, ViewChild } from '@angular/core';
+import { DebugElement, Input, NgModule, Component, OnInit, ViewChild } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { AppDefinitionRepresentationModel, ActivitiTaskListModule } from 'ng2-activiti-tasklist';
 import { CoreModule } from 'ng2-alfresco-core';
-import { ActivitiProcessListModule } from 'ng2-activiti-processlist';
+import {
+    ActivitiProcessListModule,
+    ActivitiProcessFilters,
+    ActivitiProcessInstanceDetails,
+    ActivitiProcessInstanceListComponent,
+    ActivitiStartProcessInstance,
+    ProcessInstance
+} from 'ng2-activiti-processlist';
 import { AlfrescoAuthenticationService, AlfrescoSettingsService, StorageService } from 'ng2-alfresco-core';
 import { ObjectDataTableAdapter } from 'ng2-alfresco-datatable';

+const currentProcessIdNew = '__NEW__';
+
@Component({
    selector: 'alfresco-app-demo',
    template: `
@@ -65,16 +74,16 @@ import { ObjectDataTableAdapter } from 'ng2-alfresco-datatable';
                <div class="page-content">
                    <div class="mdl-grid">
                        <div class="mdl-cell mdl-cell--2-col task-column">
-                            <span>Process Filters</span>
-                            <activiti-start-process-instance [appId]="appId"></activiti-start-process-instance>
+                            <h2>Process Filters</h2>
+                            <button type="button" (click)="navigateStartProcess()"
+                                    class="mdl-button" data-automation-id="btn-start-process">Start Process</button>
                            <activiti-process-instance-filters
                                        [appId]="appId"
                                        (filterClick)="onProcessFilterClick($event)"
-                                        (onSuccess)="onSuccessProcessFilterList($event)"
-                                        #activitiprocessfilter></activiti-process-instance-filters>
+                                        (onSuccess)="onSuccessProcessFilterList($event)"></activiti-process-instance-filters>
                        </div>
                        <div class="mdl-cell mdl-cell--3-col task-column">
-                            <span>Process List</span>
+                            <h2>Process List</h2>
                            <activiti-process-instance-list *ngIf="processFilter?.hasFilter()" [appId]="processFilter.appId"
                                       [processDefinitionKey]="processFilter.filter.processDefinitionKey"
                                       [name]="processFilter.filter.name"
@@ -82,16 +91,21 @@ import { ObjectDataTableAdapter } from 'ng2-alfresco-datatable';
                                       [sort]="processFilter.filter.sort"
                                       [data]="dataProcesses"
                                        (rowClick)="onProcessRowClick($event)"
-                                        (onSuccess)="onSuccessProcessList($event)"
-                                        #activitiprocesslist></activiti-process-instance-list>
+                                        (onSuccess)="onSuccessProcessList($event)"></activiti-process-instance-list>
                        </div>
-                        <div class="mdl-cell mdl-cell--7-col task-column">
-                            <span>Process Details</span>
+                        <div class="mdl-cell mdl-cell--7-col task-column" *ngIf="!isStartProcessMode()">
+                            <h2>Process Details</h2>
                            <activiti-process-instance-details
                                        [processInstanceId]="currentProcessInstanceId"
                                        (taskFormCompleted)="taskFormCompleted()"
-                                        (processCancelled)="processCancelled()"
-                                        #activitiprocessdetails></activiti-process-instance-details>
+                                        (processCancelled)="processCancelled()"></activiti-process-instance-details>
+                            <h2>Process Variables</h2>
+                            <activiti-process-instance-variables
+                                        [processInstanceId]="currentProcessInstanceId"></activiti-process-instance-variables>
+                        </div>
+                        <div class="mdl-cell mdl-cell--7-col task-column" *ngIf="isStartProcessMode()">
+                            <h2>Start Process</h2>
+                            <activiti-start-process [appId]="appId" (start)="onStartProcessInstance($event)"></activiti-start-process>
                        </div>
                    </div>
                </div>
@@ -99,7 +113,17 @@ import { ObjectDataTableAdapter } from 'ng2-alfresco-datatable';

        </main>
    </div>
-`
+`,
+    styles: [`
+        header {
+            min-height: 48px;
+        }
+        h2 {
+            font-size: 14px;
+            line-height: 20px;
+            margin: 10px 0;
+        }
+        `]
 })
 class MyDemoApp implements OnInit {

@@ -110,19 +134,22 @@ class MyDemoApp implements OnInit {
    ticket: string;

    @ViewChild('tabmain')
-    tabMain: any;
+    tabMain: DebugElement;

    @ViewChild('tabheader')
-    tabHeader: any;
+    tabHeader: DebugElement;

-    @ViewChild('activitiprocessfilter')
-    activitiprocessfilter: any;
+    @ViewChild(ActivitiProcessFilters)
+    activitiprocessfilter: ActivitiProcessFilters;

-    @ViewChild('activitiprocesslist')
-    activitiprocesslist: any;
+    @ViewChild(ActivitiProcessInstanceListComponent)
+    activitiprocesslist: ActivitiProcessInstanceListComponent;

-    @ViewChild('activitiprocessdetails')
-    activitiprocessdetails: any;
+    @ViewChild(ActivitiProcessInstanceDetails)
+    activitiprocessdetails: ActivitiProcessInstanceDetails;
+
+    @ViewChild(ActivitiStartProcessInstance)
+    activitiStartProcess: ActivitiStartProcessInstance;

    @Input()
    appId: number;
@@ -146,10 +173,8 @@ class MyDemoApp implements OnInit {
        this.dataProcesses = new ObjectDataTableAdapter(
            [],
            [
-                {type: 'text', key: 'id', title: 'Id'},
                {type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true},
-                {type: 'text', key: 'started', title: 'Started', sortable: true},
-                {type: 'text', key: 'startedBy.email', title: 'Started By', sortable: true}
+                {type: 'text', key: 'started', title: 'Started', sortable: true, cssClass: 'hidden'}
            ]
        );
    }
@@ -189,6 +214,19 @@ class MyDemoApp implements OnInit {
        this.changeTab('apps', 'processes');
    }

+    navigateStartProcess() {
+        this.currentProcessInstanceId = currentProcessIdNew;
+    }
+
+    onStartProcessInstance(instance: ProcessInstance) {
+        this.currentProcessInstanceId = instance.id;
+        this.activitiStartProcess.reset();
+    }
+
+    isStartProcessMode() {
+        return this.currentProcessInstanceId === currentProcessIdNew;
+    }
+
    onProcessFilterClick(event: any) {
        this.processFilter = event;
    }
@@ -25,6 +25,7 @@ import { ActivitiProcessInstanceListComponent } from './src/components/activiti-
 import { ActivitiProcessFilters } from './src/components/activiti-filters.component';
 import { ActivitiProcessInstanceHeader } from './src/components/activiti-process-instance-header.component';
 import { ActivitiProcessInstanceTasks } from './src/components/activiti-process-instance-tasks.component';
+import { ActivitiProcessInstanceVariables } from './src/components/activiti-process-instance-variables.component';
 import { ActivitiComments } from './src/components/activiti-comments.component';
 import { ActivitiProcessInstanceDetails } from './src/components/activiti-process-instance-details.component';
 import { ActivitiStartProcessInstance } from './src/components/activiti-start-process.component';
@@ -33,6 +34,7 @@ import { ActivitiProcessService } from './src/services/activiti-process.service'

 // components
 export * from './src/components/activiti-processlist.component';
+export * from './src/components/activiti-filters.component';
 export * from './src/components/activiti-process-instance-details.component';
 export * from './src/components/activiti-start-process.component';
 export * from './src/components/activiti-start-process-dialog.component';
@@ -49,6 +51,7 @@ export const ACTIVITI_PROCESSLIST_DIRECTIVES: [any] = [
    ActivitiProcessInstanceDetails,
    ActivitiProcessInstanceHeader,
    ActivitiProcessInstanceTasks,
+    ActivitiProcessInstanceVariables,
    ActivitiComments,
    ActivitiStartProcessInstance,
    ActivitiStartProcessInstanceDialog
@@ -2,7 +2,7 @@
      [attr.data-badge]="comments?.length">{{ 'DETAILS.LABELS.COMMENTS' |translate }}</span>
 <div id="addComment" (click)="showDialog()" class="icon material-icons">add</div>
 <div class="mdl-tooltip" for="addComment">
-    Add a comment
+    {{ 'DETAILS.COMMENTS.BUTTON.ADD' |translate }}
 </div>

 <div class="menu-container" *ngIf="comments?.length > 0">
@@ -21,15 +21,15 @@


 <dialog class="mdl-dialog" #dialog>
-    <h4 class="mdl-dialog__title">New comment</h4>
+<h4 class="mdl-dialog__title">{{ 'DETAILS.COMMENTS.ADD_DIALOG.TITLE' |translate }}</h4>
    <div class="mdl-dialog__content">
        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
            <textarea class="mdl-textfield__input" type="text" [(ngModel)]="message" rows="1" id="commentText"></textarea>
-            <label class="mdl-textfield__label" for="commentText">Message</label>
+            <label class="mdl-textfield__label" for="commentText">{{ 'DETAILS.COMMENTS.ADD_DIALOG.LABEL.MESSAGE' |translate }}</label>
        </div>
    </div>
    <div class="mdl-dialog__actions">
-        <button type="button" (click)="add()" class="mdl-button">Add Comment</button>
-        <button type="button" (click)="cancel()" class="mdl-button close">Cancel</button>
+        <button type="button" (click)="add()" class="mdl-button">{{ 'DETAILS.COMMENTS.ADD_DIALOG.BUTTON.ADD' |translate }}</button>
+        <button type="button" (click)="cancel()" class="mdl-button close">{{ 'DETAILS.COMMENTS.ADD_DIALOG.BUTTON.CANCEL' |translate }}</button>
    </div>
 </dialog>
@@ -1,13 +1,13 @@
 <div *ngIf="!processInstanceDetails">{{ 'DETAILS.MESSAGES.NONE'|translate }}</div>
 <div *ngIf="processInstanceDetails">
    <h2 class="mdl-card__title-text">{{processInstanceDetails.name}}</h2>
-    <activiti-process-instance-header [processInstance]="processInstanceDetails" (processCancelled)="bubbleProcessCancelled()" #activitiprocessheader></activiti-process-instance-header>
+    <activiti-process-instance-header [processInstance]="processInstanceDetails" (processCancelled)="bubbleProcessCancelled()"></activiti-process-instance-header>
    <div class="mdl-grid">
        <div class="mdl-cell mdl-cell--8-col">
-            <activiti-process-instance-tasks [processInstanceDetails]="processInstanceDetails" (taskFormCompleted)="bubbleTaskFormCompleted()" #activitiprocesstasks></activiti-process-instance-tasks>
+            <activiti-process-instance-tasks [processInstanceDetails]="processInstanceDetails" (taskFormCompleted)="bubbleTaskFormCompleted()"></activiti-process-instance-tasks>
        </div>
        <div class="mdl-cell mdl-cell--4-col">
-            <activiti-process-instance-comments [processInstanceId]="processInstanceDetails.id" #activitiprocesscomments></activiti-process-instance-comments>
+            <activiti-process-instance-comments [processInstanceId]="processInstanceDetails.id"></activiti-process-instance-comments>
        </div>
    </div>
-</div>
+</div>
@@ -36,13 +36,13 @@ export class ActivitiProcessInstanceDetails implements OnChanges {
    @Input()
    processInstanceId: string;

-    @ViewChild('activitiprocessheader')
+    @ViewChild(ActivitiProcessInstanceHeader)
    processInstanceHeader: ActivitiProcessInstanceHeader;

-    @ViewChild('activitiprocesstasks')
+    @ViewChild(ActivitiProcessInstanceTasks)
    tasksList: ActivitiProcessInstanceTasks;

-    @ViewChild('activitiprocesscomments')
+    @ViewChild(ActivitiComments)
    commentsList: ActivitiComments;

    @Input()
@@ -0,0 +1,66 @@
+<div id="setVariableBtn" (click)="showAddDialog()" class="icon material-icons">add</div>
+<div class="mdl-tooltip" for="setVariableBtn">
+    {{ 'DETAILS.VARIABLES.BUTTON.ADD' |translate }}
+</div>
+
+
+<div *ngIf="!isListEmpty()">
+    <alfresco-datatable [data]="data" [actions]="true" (showRowActionsMenu)="onShowRowActionsMenu($event)"
+                        (executeRowAction)="onExecuteRowAction($event)"></alfresco-datatable>
+</div>
+<div *ngIf="isListEmpty()" data-automation-id="variables-none">
+    {{ 'DETAILS.VARIABLES.NONE' | translate }}
+</div>
+
+
+<dialog class="mdl-dialog add-dialog" #addDialog>
+    <h4 class="mdl-dialog__title">{{ 'DETAILS.VARIABLES.ADD_DIALOG.TITLE' |translate }}</h4>
+    <div class="mdl-dialog__content">
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+            <label class="mdl-textfield__label" for="addVariableName">{{ 'DETAILS.VARIABLES.ADD_DIALOG.LABEL.NAME' |translate }}</label>
+            <input class="mdl-textfield__input" type="text" [(ngModel)]="variableName" id="addVariableName" [readonly]="editMode" />
+        </div>
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+            <label class="mdl-textfield__label" for="addVariableValue">{{ 'DETAILS.VARIABLES.ADD_DIALOG.LABEL.VALUE' |translate }}</label>
+            <input class="mdl-textfield__input" type="text" [(ngModel)]="variableValue" id="addVariableValue" />
+        </div>
+    </div>
+    <div class="mdl-dialog__actions">
+        <button type="button" (click)="add()" class="mdl-button">{{ 'DETAILS.VARIABLES.DIALOG.BUTTON.SET' |translate }}</button>
+        <button type="button" (click)="closeAddDialog()" class="mdl-button close">{{ 'DETAILS.VARIABLES.DIALOG.BUTTON.CANCEL' |translate }}</button>
+    </div>
+</dialog>
+
+
+<dialog class="mdl-dialog edit-dialog" #editDialog>
+    <h4 class="mdl-dialog__title">{{ 'DETAILS.VARIABLES.EDIT_DIALOG.TITLE' |translate }}</h4>
+    <div class="mdl-dialog__content">
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+            <label class="mdl-textfield__label" for="editVariableName">{{ 'DETAILS.VARIABLES.ADD_DIALOG.LABEL.NAME' |translate }}</label>
+            <input class="mdl-textfield__input" type="text" [(ngModel)]="variableName" id="editVariableName" [readonly]="true" />
+        </div>
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+            <label class="mdl-textfield__label" for="editVariableValue">{{ 'DETAILS.VARIABLES.ADD_DIALOG.LABEL.VALUE' |translate }}</label>
+            <input class="mdl-textfield__input" type="text" [(ngModel)]="variableValue" id="editVariableValue" />
+        </div>
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+            <label class="mdl-textfield__label" for="editVariableScope">{{ 'DETAILS.VARIABLES.ADD_DIALOG.LABEL.SCOPE' |translate }}</label>
+            <input class="mdl-textfield__input" type="text" [(ngModel)]="variableName" id="editVariableScope" [readonly]="true" />
+        </div>
+    </div>
+    <div class="mdl-dialog__actions">
+        <button type="button" (click)="edit()" class="mdl-button">{{ 'DETAILS.VARIABLES.DIALOG.BUTTON.SET' |translate }}</button>
+        <button type="button" (click)="closeEditDialog()" class="mdl-button close">{{ 'DETAILS.VARIABLES.DIALOG.BUTTON.CANCEL' |translate }}</button>
+    </div>
+</dialog>
+
+
+<dialog class="mdl-dialog error-dialog" #errorDialog>
+    <h4 class="mdl-dialog__title">{{ 'DETAILS.VARIABLES.ERROR_DIALOG.TITLE' |translate }}</h4>
+    <div class="mdl-dialog__content">
+        <p>{{ 'DETAILS.VARIABLES.ERROR_DIALOG.DESCRIPTION' |translate }}</p>
+    </div>
+    <div class="mdl-dialog__actions">
+        <button type="button" (click)="closeErrorDialog()" class="mdl-button close">{{ 'DETAILS.VARIABLES.DIALOG.BUTTON.OK' |translate }}</button>
+    </div>
+</dialog>
@@ -0,0 +1,364 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { DebugElement, SimpleChange } from '@angular/core';
+import { ComponentFixture, TestBed, async, fakeAsync, tick } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { Observable } from 'rxjs/Rx';
+
+import { AlfrescoTranslationService, CoreModule } from 'ng2-alfresco-core';
+import { DataTableModule, ObjectDataTableAdapter, ObjectDataRow } from 'ng2-alfresco-datatable';
+
+import { ActivitiProcessInstanceVariables } from './activiti-process-instance-variables.component';
+import { ActivitiProcessService } from './../services/activiti-process.service';
+import { TranslationMock } from './../assets/translation.service.mock';
+
+describe('ActivitiProcessInstanceVariables', () => {
+
+    let componentHandler: any;
+    let service: ActivitiProcessService;
+    let component: ActivitiProcessInstanceVariables;
+    let fixture: ComponentFixture<ActivitiProcessInstanceVariables>;
+    let getVariablesSpy: jasmine.Spy;
+    let createOrUpdateProcessInstanceVariablesSpy: jasmine.Spy;
+    let deleteProcessInstanceVariableSpy: jasmine.Spy;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports: [
+                CoreModule,
+                DataTableModule
+            ],
+            declarations: [
+                ActivitiProcessInstanceVariables
+            ],
+            providers: [
+                { provide: AlfrescoTranslationService, useClass: TranslationMock },
+                ActivitiProcessService
+            ]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+
+        fixture = TestBed.createComponent(ActivitiProcessInstanceVariables);
+        component = fixture.componentInstance;
+        service = fixture.debugElement.injector.get(ActivitiProcessService);
+
+        getVariablesSpy = spyOn(service, 'getProcessInstanceVariables').and.returnValue(Observable.of([{
+            name: 'var1',
+            value: 'Test1'
+        }, {
+            name: 'var2',
+            value: 'Test2'
+        }, {
+            name: 'var3',
+            value: 'Test3'
+        }]));
+        createOrUpdateProcessInstanceVariablesSpy = spyOn(service, 'createOrUpdateProcessInstanceVariables').and.returnValue(Observable.of({id: 123, message: 'Test'}));
+        deleteProcessInstanceVariableSpy = spyOn(service, 'deleteProcessInstanceVariable').and.returnValue(Observable.of());
+
+        componentHandler = jasmine.createSpyObj('componentHandler', [
+            'upgradeAllRegistered',
+            'upgradeElement'
+        ]);
+        window['componentHandler'] = componentHandler;
+    });
+
+    it('should load variables when processInstanceId specified', () => {
+        component.processInstanceId = '123';
+        fixture.detectChanges();
+        expect(getVariablesSpy).toHaveBeenCalled();
+    });
+
+    it('should emit an error when an error occurs loading variables', () => {
+        let emitSpy = spyOn(component.error, 'emit');
+        getVariablesSpy.and.returnValue(Observable.throw({}));
+        component.processInstanceId = '123';
+        fixture.detectChanges();
+        expect(emitSpy).toHaveBeenCalled();
+    });
+
+    it('should not fetch variables when no processInstanceId is specified', () => {
+        fixture.detectChanges();
+        expect(getVariablesSpy).not.toHaveBeenCalled();
+    });
+
+    it('should not display list when no processInstanceId is specified', fakeAsync(() => {
+        fixture.detectChanges();
+        fixture.whenStable();
+        tick();
+        let datatable: DebugElement = fixture.debugElement.query(By.css('alfresco-datatable'));
+        expect(datatable).toBeNull();
+    }));
+
+    it('should use the default schemaColumn as default', () => {
+        fixture.detectChanges();
+        expect(component.data.getColumns()).toBeDefined();
+        expect(component.data.getColumns().length).toEqual(3);
+    });
+
+    it('should use the schemaColumn passed in input', () => {
+        component.data = new ObjectDataTableAdapter(
+            [],
+            [
+                {type: 'text', key: 'fake-id', title: 'Name'}
+            ]
+        );
+
+        fixture.detectChanges();
+        expect(component.data.getColumns()).toBeDefined();
+        expect(component.data.getColumns().length).toEqual(1);
+    });
+
+    it('should display list when the process has variables', fakeAsync(() => {
+        component.processInstanceId = '123';
+        fixture.detectChanges();
+        fixture.whenStable();
+        tick();
+        let datatable: DebugElement = fixture.debugElement.query(By.css('alfresco-datatable'));
+        expect(datatable).not.toBeNull();
+    }));
+
+    it('should display correct number of data table rows when the process has variables', fakeAsync(() => {
+        component.processInstanceId = '123';
+        fixture.detectChanges();
+        fixture.whenStable();
+        tick();
+        fixture.detectChanges();
+        expect(fixture.debugElement.queryAll(By.css('tbody tr')).length).toBe(3);
+    }));
+
+    describe('change detection', () => {
+
+        let change = new SimpleChange('123', '456');
+        let nullChange = new SimpleChange('123', null);
+
+        beforeEach(async(() => {
+            component.processInstanceId = '123';
+            fixture.detectChanges();
+            fixture.whenStable().then(() => {
+                getVariablesSpy.calls.reset();
+            });
+        }));
+
+        it('should fetch new variables when processInstanceId changed', () => {
+            component.ngOnChanges({ 'processInstanceId': change });
+            expect(getVariablesSpy).toHaveBeenCalledWith('456');
+        });
+
+        it('should NOT fetch new variables when empty changeset made', () => {
+            component.ngOnChanges({});
+            expect(getVariablesSpy).not.toHaveBeenCalled();
+        });
+
+        it('should NOT fetch new variables when processInstanceId changed to null', () => {
+            component.ngOnChanges({ 'processInstanceId': nullChange });
+            expect(getVariablesSpy).not.toHaveBeenCalled();
+        });
+
+        it('should set a placeholder message when processInstanceId changed to null', () => {
+            component.ngOnChanges({ 'processInstanceId': nullChange });
+            fixture.detectChanges();
+            expect(fixture.debugElement.query(By.css('[data-automation-id="variables-none"]'))).not.toBeNull();
+        });
+    });
+
+    describe('Add variable', () => {
+
+        beforeEach(async(() => {
+            component.processInstanceId = '123';
+            fixture.detectChanges();
+            fixture.whenStable();
+        }));
+
+        it('should display a dialog to the user when the Add button clicked', () => {
+            let dialogEl = fixture.debugElement.query(By.css('.mdl-dialog.add-dialog')).nativeElement;
+            let showSpy: jasmine.Spy = spyOn(dialogEl, 'showModal');
+            component.showAddDialog();
+            expect(showSpy).toHaveBeenCalled();
+        });
+
+        it('should call service to add a variable', () => {
+            component.showAddDialog();
+            component.variableName = 'Test var';
+            component.variableValue = 'Test 222';
+            component.add();
+            let serviceArgs = createOrUpdateProcessInstanceVariablesSpy.calls.mostRecent().args;
+            let sentProcessId = serviceArgs[0];
+            let sentProcesses = serviceArgs[1];
+            expect(serviceArgs.length).toBe(2);
+            expect(sentProcessId).toBe('123');
+            expect(sentProcesses.length).toBe(1);
+            expect(sentProcesses[0].name).toBe('Test var');
+            expect(sentProcesses[0].value).toBe('Test 222');
+            expect(sentProcesses[0].scope).toBe('global');
+        });
+
+        it('should emit an error when an error occurs adding the variable', () => {
+            let emitSpy = spyOn(component.error, 'emit');
+            createOrUpdateProcessInstanceVariablesSpy.and.returnValue(Observable.throw({}));
+            component.showAddDialog();
+            component.variableName = 'Test var';
+            component.variableValue = 'Test 222';
+            component.add();
+            expect(emitSpy).toHaveBeenCalled();
+        });
+
+        it('should close add dialog when close button clicked', () => {
+            let dialogEl = fixture.debugElement.query(By.css('.mdl-dialog.add-dialog')).nativeElement;
+            let closeSpy: jasmine.Spy = spyOn(dialogEl, 'close');
+            component.showAddDialog();
+            component.closeAddDialog();
+            expect(closeSpy).toHaveBeenCalled();
+        });
+
+    });
+
+    describe('Edit variable', () => {
+
+        let fakeVariable = {
+            name: 'fakeVar',
+            value: 'my value 4',
+            scope: 'global'
+        };
+
+        beforeEach(async(() => {
+            component.processInstanceId = '123';
+            fixture.detectChanges();
+            fixture.whenStable();
+        }));
+
+        it('should display a dialog to the user when the Edit action clicked', () => {
+            let dialogEl = fixture.debugElement.query(By.css('.mdl-dialog.edit-dialog')).nativeElement;
+            let showSpy: jasmine.Spy = spyOn(dialogEl, 'showModal');
+            component.onExecuteRowAction({
+                args: {
+                    row: new ObjectDataRow(fakeVariable),
+                    action: {
+                        id: 'edit'
+                    }
+                }
+            });
+            expect(showSpy).toHaveBeenCalled();
+        });
+
+        it('should call service to edit a variable', () => {
+            component.showEditDialog(new ObjectDataRow(fakeVariable));
+            component.variableValue = 'Test 222';
+            component.edit();
+            let serviceArgs = createOrUpdateProcessInstanceVariablesSpy.calls.mostRecent().args;
+            let sentProcessId = serviceArgs[0];
+            let sentProcesses = serviceArgs[1];
+            expect(serviceArgs.length).toBe(2);
+            expect(sentProcessId).toBe('123');
+            expect(sentProcesses.length).toBe(1);
+            expect(sentProcesses[0].name).toBe(fakeVariable.name);
+            expect(sentProcesses[0].value).toBe('Test 222');
+            expect(sentProcesses[0].scope).toBe(fakeVariable.scope);
+        });
+
+        it('should emit an error when an error occurs editing the variable', () => {
+            let emitSpy = spyOn(component.error, 'emit');
+            createOrUpdateProcessInstanceVariablesSpy.and.returnValue(Observable.throw({}));
+            component.showEditDialog(new ObjectDataRow(fakeVariable));
+            component.variableName = 'Test var';
+            component.variableValue = 'Test 222';
+            component.edit();
+            expect(emitSpy).toHaveBeenCalled();
+        });
+
+        it('should close edit dialog when close button clicked', () => {
+            let dialogEl = fixture.debugElement.query(By.css('.mdl-dialog.edit-dialog')).nativeElement;
+            let closeSpy: jasmine.Spy = spyOn(dialogEl, 'close');
+            component.showEditDialog(new ObjectDataRow(fakeVariable));
+            component.closeEditDialog();
+            expect(closeSpy).toHaveBeenCalled();
+        });
+
+    });
+
+    describe('Delete variable', () => {
+
+        let fakeVariable = {
+            name: 'fakeVar',
+            value: 'my value 4',
+            scope: 'global'
+        };
+
+        let deleteAction = {
+            id: 'delete'
+        };
+
+        beforeEach(async(() => {
+            component.processInstanceId = '123';
+            fixture.detectChanges();
+            fixture.whenStable();
+        }));
+
+        it('should call service to delete the variable', () => {
+            component.variableValue = 'Test 222';
+            component.onExecuteRowAction({
+                args: {
+                    row: new ObjectDataRow(fakeVariable),
+                    action: deleteAction
+                }
+            });
+            let serviceArgs = deleteProcessInstanceVariableSpy.calls.mostRecent().args;
+            let sentProcessId = serviceArgs[0];
+            let sentVariableName = serviceArgs[1];
+            expect(serviceArgs.length).toBe(2);
+            expect(sentProcessId).toBe('123');
+            expect(sentVariableName).toBe(fakeVariable.name);
+        });
+
+        it('should emit an error when an error occurs deleting the variable', () => {
+            let emitSpy = spyOn(component.error, 'emit');
+            deleteProcessInstanceVariableSpy.and.returnValue(Observable.throw({}));
+            component.onExecuteRowAction({
+                args: {
+                    row: new ObjectDataRow(fakeVariable),
+                    action: deleteAction
+                }
+            });
+            expect(emitSpy).toHaveBeenCalled();
+        });
+
+        it('should display error dialog when an error is triggered', () => {
+            let dialogEl = fixture.debugElement.query(By.css('.mdl-dialog.error-dialog')).nativeElement;
+            let showSpy: jasmine.Spy = spyOn(dialogEl, 'showModal');
+            deleteProcessInstanceVariableSpy.and.returnValue(Observable.throw({}));
+            component.onExecuteRowAction({
+                args: {
+                    row: new ObjectDataRow(fakeVariable),
+                    action: deleteAction
+                }
+            });
+            expect(showSpy).toHaveBeenCalled();
+        });
+
+        it('should close error dialog when close button clicked', () => {
+            let dialogEl = fixture.debugElement.query(By.css('.mdl-dialog.error-dialog')).nativeElement;
+            let closeSpy: jasmine.Spy = spyOn(dialogEl, 'close');
+            component.showErrorDialog();
+            component.closeErrorDialog();
+            expect(closeSpy).toHaveBeenCalled();
+        });
+
+    });
+
+});
@@ -0,0 +1,277 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, DebugElement, EventEmitter, Input, Output, OnInit, ViewChild, OnChanges, SimpleChanges } from '@angular/core';
+
+import { AlfrescoTranslationService } from 'ng2-alfresco-core';
+import { ObjectDataTableAdapter, DataTableAdapter, ObjectDataRow } from 'ng2-alfresco-datatable';
+import { ProcessInstanceVariable } from './../models/process-instance-variable.model';
+import { ActivitiProcessService } from './../services/activiti-process.service';
+
+declare let componentHandler: any;
+declare let dialogPolyfill: any;
+
+@Component({
+    selector: 'activiti-process-instance-variables',
+    moduleId: module.id,
+    templateUrl: './activiti-process-instance-variables.component.html',
+    styleUrls: [],
+    providers: [ActivitiProcessService]
+})
+export class ActivitiProcessInstanceVariables implements OnInit, OnChanges {
+
+    @Input()
+    processInstanceId: string;
+
+    @Input()
+    data: DataTableAdapter;
+
+    @Output()
+    error: EventEmitter<any> = new EventEmitter<any>();
+
+    @ViewChild('addDialog')
+    addDialog: DebugElement;
+
+    @ViewChild('editDialog')
+    editDialog: DebugElement;
+
+    @ViewChild('errorDialog')
+    errorDialog: DebugElement;
+
+    private defaultSchemaColumn: any[] = [
+        {type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true},
+        {type: 'text', key: 'value', title: 'Value', sortable: true},
+        {type: 'text', key: 'scope', title: 'Scope', sortable: true}
+    ];
+
+    variableName: string;
+    variableValue: string;
+    variableScope: string;
+
+    /**
+     * Constructor
+     * @param translate Translation service
+     * @param activitiProcess Process service
+     */
+    constructor(private translate: AlfrescoTranslationService,
+                private activitiProcess: ActivitiProcessService) {
+
+        if (translate) {
+            translate.addTranslationFolder('ng2-activiti-processlist', 'node_modules/ng2-activiti-processlist/dist/src');
+        }
+
+    }
+
+    ngOnInit() {
+        if (!this.data) {
+            this.data = this.initDefaultSchemaColumns();
+        }
+        if (this.processInstanceId) {
+            this.getProcessInstanceVariables(this.processInstanceId);
+            return;
+        }
+    }
+
+    ngOnChanges(changes: SimpleChanges) {
+        let processInstanceId = changes['processInstanceId'];
+        if (processInstanceId) {
+            if (processInstanceId.currentValue) {
+                this.getProcessInstanceVariables(processInstanceId.currentValue);
+            } else {
+                this.resetVariables();
+            }
+        }
+    }
+
+    /**
+     * Check if the list is empty
+     * @returns {ObjectDataTableAdapter|boolean}
+     */
+    isListEmpty(): boolean {
+        return this.data === undefined ||
+            (this.data && this.data.getRows() && this.data.getRows().length === 0);
+    }
+
+    /**
+     * Return an initDefaultSchemaColumns instance with the default Schema Column
+     * @returns {ObjectDataTableAdapter}
+     */
+    private initDefaultSchemaColumns(): ObjectDataTableAdapter {
+        return new ObjectDataTableAdapter(
+            [],
+            this.defaultSchemaColumn
+        );
+    }
+
+    /**
+     * Create an array of ObjectDataRow
+     * @param instances
+     * @returns {ObjectDataRow[]}
+     */
+    private createDataRow(instances: ProcessInstanceVariable[]): ObjectDataRow[] {
+        let instancesRows: ObjectDataRow[] = [];
+        instances.forEach((row) => {
+            instancesRows.push(new ObjectDataRow({
+                name: row.name,
+                value: row.value,
+                scope: row.scope
+            }));
+        });
+        return instancesRows;
+    }
+
+    /**
+     * Render the instances list
+     *
+     * @param instances
+     */
+    private renderInstances(instances: any[]) {
+        this.data.setRows(instances);
+    }
+
+    private getProcessInstanceVariables(processInstanceId: string) {
+        if (processInstanceId) {
+            this.activitiProcess.getProcessInstanceVariables(processInstanceId).subscribe(
+                (res: ProcessInstanceVariable[]) => {
+                    let instancesRow = this.createDataRow(res);
+                    this.renderInstances(instancesRow);
+                },
+                (err) => {
+                    this.error.emit(err);
+                }
+            );
+        } else {
+            this.resetVariables();
+        }
+    }
+
+    private resetVariables() {
+        if (this.data) {
+            this.data.setRows([]);
+        }
+    }
+
+    private polyfillDialog(dialog: DebugElement) {
+        if (!dialog.nativeElement.showModal) {
+            dialogPolyfill.registerDialog(dialog.nativeElement);
+        }
+    }
+
+    public showAddDialog() {
+        this.resetForm();
+        this.polyfillDialog(this.addDialog);
+        this.addDialog.nativeElement.showModal();
+    }
+
+    public showEditDialog(row: ObjectDataRow) {
+        this.variableName = row.getValue('name');
+        this.variableValue = row.getValue('value');
+        this.variableScope = row.getValue('scope');
+        this.polyfillDialog(this.editDialog);
+        this.editDialog.nativeElement.showModal();
+    }
+
+    public showErrorDialog() {
+        this.polyfillDialog(this.errorDialog);
+        this.errorDialog.nativeElement.showModal();
+    }
+
+    public add() {
+        this.activitiProcess.createOrUpdateProcessInstanceVariables(this.processInstanceId, [new ProcessInstanceVariable({
+            name: this.variableName,
+            value: this.variableValue,
+            scope: this.variableScope
+        })]).subscribe(
+            (res: ProcessInstanceVariable[]) => {
+                this.getProcessInstanceVariables(this.processInstanceId);
+                this.resetForm();
+            },
+            (err) => {
+                this.showErrorDialog();
+                this.error.emit(err);
+            }
+        );
+        this.closeAddDialog();
+    }
+
+    public edit() {
+        this.activitiProcess.createOrUpdateProcessInstanceVariables(this.processInstanceId, [new ProcessInstanceVariable({
+            name: this.variableName,
+            value: this.variableValue,
+            scope: this.variableScope
+        })]).subscribe(
+            (res: ProcessInstanceVariable[]) => {
+                this.getProcessInstanceVariables(this.processInstanceId);
+                this.resetForm();
+            },
+            (err) => {
+                this.showErrorDialog();
+                this.error.emit(err);
+            }
+        );
+        this.closeEditDialog();
+    }
+
+    public closeAddDialog() {
+        this.addDialog.nativeElement.close();
+    }
+
+    public closeEditDialog() {
+        this.editDialog.nativeElement.close();
+    }
+
+    public closeErrorDialog() {
+        this.errorDialog.nativeElement.close();
+    }
+
+    private resetForm() {
+        this.variableName = '';
+        this.variableValue = '';
+        this.variableScope = 'global';
+    }
+
+    private onDeleteVariable(row: ObjectDataRow) {
+        this.activitiProcess.deleteProcessInstanceVariable(this.processInstanceId, row.getValue('name')).subscribe(() => {
+            this.getProcessInstanceVariables(this.processInstanceId);
+        },
+        (err) => {
+            this.showErrorDialog();
+            this.error.emit(err);
+        });
+    }
+
+    onExecuteRowAction(event) {
+        let row: ObjectDataRow = event.args.row;
+        let action = event.args.action;
+        if (action && action.id === 'delete') {
+            this.onDeleteVariable(row);
+        }
+        if (action && action.id === 'edit') {
+            this.showEditDialog(row);
+        }
+    }
+
+    onShowRowActionsMenu(event) {
+        event.args.actions = [{
+            id: 'delete',
+            title: 'Delete'
+        }, {
+            id: 'edit',
+            title: 'Edit'
+        }];
+    }
+}
@@ -54,6 +54,7 @@ describe('ActivitiProcessInstanceListComponent', () => {
    let fixture: ComponentFixture<ActivitiProcessInstanceListComponent>;
    let component: ActivitiProcessInstanceListComponent;
    let service: ActivitiProcessService;
+    let getProcessInstancesSpy: jasmine.Spy;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
@@ -71,6 +72,8 @@ describe('ActivitiProcessInstanceListComponent', () => {
            component = fixture.componentInstance;
            service = fixture.debugElement.injector.get(ActivitiProcessService);

+            getProcessInstancesSpy = spyOn(service, 'getProcessInstances').and.returnValue(Observable.of(fakeGlobalProcesses));
+
            componentHandler = jasmine.createSpyObj('componentHandler', [
                'upgradeAllRegistered',
                'upgradeElement'
@@ -106,7 +109,6 @@ describe('ActivitiProcessInstanceListComponent', () => {

    it('should emit onSuccess event when process instances loaded', fakeAsync(() => {
        let emitSpy = spyOn(component.onSuccess, 'emit');
-        spyOn(service, 'getProcessInstances').and.returnValue(Observable.of(fakeGlobalProcesses));
        component.appId = '1';
        component.state = 'open';
        component.processDefinitionKey = null;
@@ -116,7 +118,6 @@ describe('ActivitiProcessInstanceListComponent', () => {
    }));

    it('should return the process instances list', (done) => {
-        spyOn(service, 'getProcessInstances').and.returnValue(Observable.of(fakeGlobalProcesses));
        component.appId = '1';
        component.state = 'open';
        component.processDefinitionKey = null;
@@ -133,7 +134,6 @@ describe('ActivitiProcessInstanceListComponent', () => {
    });

    it('should return the process instances list filtered by processDefinitionKey', (done) => {
-        spyOn(service, 'getProcessInstances').and.returnValue(Observable.of(fakeGlobalProcesses));
        component.appId = '1';
        component.state = 'open';
        component.processDefinitionKey = 'fakeprocess';
@@ -157,7 +157,7 @@ describe('ActivitiProcessInstanceListComponent', () => {
    it('should throw an exception when the response is wrong', fakeAsync(() => {
        let emitSpy: jasmine.Spy = spyOn(component.onError, 'emit');
        let fakeError = 'Fake server error';
-        spyOn(service, 'getProcessInstances').and.returnValue(Observable.throw(fakeError));
+        getProcessInstancesSpy.and.returnValue(Observable.throw(fakeError));
        component.appId = '1';
        component.state = 'open';
        fixture.detectChanges();
@@ -166,7 +166,6 @@ describe('ActivitiProcessInstanceListComponent', () => {
    }));

    it('should emit onSuccess event when reload() called', fakeAsync(() => {
-        spyOn(service, 'getProcessInstances').and.returnValue(Observable.of(fakeGlobalProcesses));
        component.appId = '1';
        component.state = 'open';
        component.processDefinitionKey = null;
@@ -179,7 +178,6 @@ describe('ActivitiProcessInstanceListComponent', () => {
    }));

    it('should reload processes when reload() is called', (done) => {
-        spyOn(service, 'getProcessInstances').and.returnValue(Observable.of(fakeGlobalProcesses));
        component.data = new ObjectDataTableAdapter(
            [],
            [
@@ -217,7 +215,6 @@ describe('ActivitiProcessInstanceListComponent', () => {
    describe('component changes', () => {

        beforeEach(() => {
-            spyOn(service, 'getProcessInstances').and.returnValue(Observable.of(fakeGlobalProcesses));
            component.data = new ObjectDataTableAdapter(
                [],
                [
@@ -36,7 +36,49 @@
            "TASK_CLOSE": "Close"
        },
        "COMMENTS": {
-            "NONE": "No comments."
+            "NONE": "No comments.",
+            "BUTTON": {
+                "ADD": "Add a comment"
+            },
+            "ADD_DIALOG": {
+                "TITLE": "New comment",
+                "LABEL": {
+                    "MESSAGE": "Message"
+                },
+                "BUTTON": {
+                    "ADD": "Add Comment",
+                    "CANCEL": "Cancel"
+                }
+            }
+        },
+        "VARIABLES": {
+            "NONE": "No variables set.",
+            "BUTTON": {
+                "ADD": "Set a variable"
+            },
+            "DIALOG": {
+                "BUTTON": {
+                    "SET": "Set",
+                    "OK": "OK",
+                    "CANCEL": "Cancel",
+                    "CLOSE": "Close"
+                }
+            },
+            "ADD_DIALOG": {
+                "TITLE": "Set process variable",
+                "LABEL": {
+                    "NAME": "Name",
+                    "VALUE": "Value",
+                    "SCOPE": "Scope"
+                }
+            },
+            "EDIT_DIALOG": {
+                "TITLE": "Edit process variable"
+            },
+            "ERROR_DIALOG": {
+                "TITLE": "Sorry, an error occurred",
+                "DESCRIPTION": "Could not perform the requested operation, please check that you have permission."
+            }
        }
    },
    "START_PROCESS": {
@@ -18,3 +18,4 @@
 export * from './process-definition.model';
 export * from './process-instance.model';
 export * from './process-instance-filter.model';
+export * from './process-instance-variable.model';
@@ -0,0 +1,28 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export class ProcessInstanceVariable {
+    name: string;
+    scope: string;
+    value: any;
+
+    constructor(obj?: any) {
+        this.name = obj && obj.name !== undefined ? obj.name : null;
+        this.scope = obj && obj.scope !== undefined ? obj.scope : null;
+        this.value = obj && obj.value !== undefined ? obj.value : null;
+    }
+}
@@ -37,6 +37,7 @@ import {
 } from '../assets/activiti-process.service.mock';
 import { exampleProcess } from '../assets/activiti-process.model.mock';
 import { ProcessFilterRequestRepresentation } from '../models/process-instance-filter.model';
+import { ProcessInstanceVariable } from '../models/process-instance-variable.model';
 import { ActivitiProcessService } from './activiti-process.service';

 describe('ActivitiProcessService', () => {
@@ -681,4 +682,123 @@ describe('ActivitiProcessService', () => {

        });
    });
+
+    describe('process variables', () => {
+
+        let getVariablesSpy: jasmine.Spy;
+        let createOrUpdateProcessInstanceVariablesSpy: jasmine.Spy;
+        let deleteProcessInstanceVariableSpy: jasmine.Spy;
+
+        beforeEach(() => {
+            getVariablesSpy = spyOn(alfrescoApi.activiti.processInstanceVariablesApi, 'getProcessInstanceVariables').and.returnValue(Promise.resolve([{
+                name: 'var1',
+                value: 'Test1'
+            }, {
+                name: 'var3',
+                value: 'Test3'
+            }]));
+
+            createOrUpdateProcessInstanceVariablesSpy = spyOn(alfrescoApi.activiti.processInstanceVariablesApi,
+                'createOrUpdateProcessInstanceVariables').and.returnValue(Promise.resolve({}));
+
+            deleteProcessInstanceVariableSpy = spyOn(alfrescoApi.activiti.processInstanceVariablesApi,
+                'deleteProcessInstanceVariable').and.returnValue(Promise.resolve());
+        });
+
+        describe('get variables', () => {
+
+            it('should call service to fetch variables', () => {
+                service.getProcessInstanceVariables(null);
+                expect(getVariablesSpy).toHaveBeenCalled();
+            });
+
+            it('should pass on any error that is returned by the API', async(() => {
+                getVariablesSpy = getVariablesSpy.and.returnValue(Promise.reject(fakeError));
+                service.getProcessInstanceVariables(null).subscribe(
+                    () => {},
+                    (res) => {
+                        expect(res).toBe(fakeError);
+                    }
+                );
+            }));
+
+            it('should return a default error if no data is returned by the API', async(() => {
+                getVariablesSpy = getVariablesSpy.and.returnValue(Promise.reject(null));
+                service.getProcessInstanceVariables(null).subscribe(
+                    () => {},
+                    (res) => {
+                        expect(res).toBe('Server error');
+                    }
+                );
+            }));
+
+        });
+
+        describe('create or update variables', () => {
+
+            let updatedVariables = [new ProcessInstanceVariable({
+                name: 'var1',
+                value: 'Test1'
+            }), new ProcessInstanceVariable({
+                name: 'var3',
+                value: 'Test3'
+            })];
+
+            it('should call service to create or update variables', () => {
+                service.createOrUpdateProcessInstanceVariables('123', updatedVariables);
+                expect(createOrUpdateProcessInstanceVariablesSpy).toHaveBeenCalled();
+            });
+
+            it('should pass on any error that is returned by the API', async(() => {
+                createOrUpdateProcessInstanceVariablesSpy = createOrUpdateProcessInstanceVariablesSpy.and.returnValue(Promise.reject(fakeError));
+                service.createOrUpdateProcessInstanceVariables('123', updatedVariables).subscribe(
+                    () => {},
+                    (res) => {
+                        expect(res).toBe(fakeError);
+                    }
+                );
+            }));
+
+            it('should return a default error if no data is returned by the API', async(() => {
+                createOrUpdateProcessInstanceVariablesSpy = createOrUpdateProcessInstanceVariablesSpy.and.returnValue(Promise.reject(null));
+                service.createOrUpdateProcessInstanceVariables('123', updatedVariables).subscribe(
+                    () => {},
+                    (res) => {
+                        expect(res).toBe('Server error');
+                    }
+                );
+            }));
+
+        });
+
+        describe('delete variables', () => {
+
+            it('should call service to delete variables', () => {
+                service.deleteProcessInstanceVariable('123', 'myVar');
+                expect(deleteProcessInstanceVariableSpy).toHaveBeenCalled();
+            });
+
+            it('should pass on any error that is returned by the API', async(() => {
+                deleteProcessInstanceVariableSpy = deleteProcessInstanceVariableSpy.and.returnValue(Promise.reject(fakeError));
+                service.deleteProcessInstanceVariable('123', 'myVar').subscribe(
+                    () => {},
+                    (res) => {
+                        expect(res).toBe(fakeError);
+                    }
+                );
+            }));
+
+            it('should return a default error if no data is returned by the API', async(() => {
+                deleteProcessInstanceVariableSpy = deleteProcessInstanceVariableSpy.and.returnValue(Promise.reject(null));
+                service.deleteProcessInstanceVariable('123', 'myVar').subscribe(
+                    () => {},
+                    (res) => {
+                        expect(res).toBe('Server error');
+                    }
+                );
+            }));
+
+        });
+
+    });
 });
@@ -18,6 +18,7 @@
 import { AlfrescoApiService } from 'ng2-alfresco-core';
 import { ProcessInstance, ProcessDefinitionRepresentation } from '../models/index';
 import { ProcessFilterRequestRepresentation } from '../models/process-instance-filter.model';
+import { ProcessInstanceVariable } from './../models/process-instance-variable.model';
 import {
    AppDefinitionRepresentationModel,
    Comment,
@@ -251,6 +252,28 @@ export class ActivitiProcessService {
            .catch(this.handleError);
    }

+    getProcessInstanceVariables(processDefinitionId: string): Observable<ProcessInstanceVariable[]> {
+        return Observable.fromPromise(
+            this.apiService.getInstance().activiti.processInstanceVariablesApi.getProcessInstanceVariables(processDefinitionId)
+            )
+            .map((processVars: any[]) => processVars.map((pd) => new ProcessInstanceVariable(pd)))
+            .catch(this.handleError);
+    }
+
+    createOrUpdateProcessInstanceVariables(processDefinitionId: string, variables: ProcessInstanceVariable[]): Observable<ProcessInstanceVariable[]> {
+        return Observable.fromPromise(
+            this.apiService.getInstance().activiti.processInstanceVariablesApi.createOrUpdateProcessInstanceVariables(processDefinitionId, variables)
+            )
+            .catch(this.handleError);
+    }
+
+    deleteProcessInstanceVariable(processDefinitionId: string, variableName: string): Observable<void> {
+        return Observable.fromPromise(
+            this.apiService.getInstance().activiti.processInstanceVariablesApi.deleteProcessInstanceVariable(processDefinitionId, variableName)
+            )
+            .catch(this.handleError);
+    }
+
    private callApiGetUserProcessInstanceFilters(filterOpts) {
        return this.apiService.getInstance().activiti.userFiltersApi.getUserProcessInstanceFilters(filterOpts);
    }