in Activiti

Angular.js activiti webapp – part I

Demo

Here is a live demo of the activiti created using AngularJs

http://activiti.alfrescoblog.com/?o=b

Introduction

Angular.js has been and is very popular now, our wish was to create an application that would communicate with activiti-rest using angular.js. So in short activiti webapp angular way. Here we will demonstrate how to create angular.js application and connect it to activiti-rest. Usecases that are currently supported are :

  • Login and logout
  • List, delete and add users
  • List, delete and add groups

Theme that we used is named lumen and can be downloaded from bobotswatch.com. Lets see a couple of screenshots.

Login Form

Login Form

Future Dashboard

Dashboard

Activiti users list

Activiti users list

Activiti Groups List

Activiti Groups List

As we can see in the screenshots, after successful login user is taken to Dashboard, then he can view users and groups. User can apply filter, delete and add items.

Angular.js

In order angular application to work it requires the module to be defined, we will call this module alfrescoBlogApp. Module requires few  other modules

  • ngResource
  • ui.bootstrap
  • ngRoute

Currently we have four pages

  • Dashboard Page
  • Users page
  • Groups Page
  • Login Page

we will use $routeProvider to connect paths ,templates and controllers together .

var alfrescoBlogApp = angular.module('alfrescoBlogApp', ['ngResource', 'ui.bootstrap', "ngRoute"])
    .config(['$routeProvider', function ($routeProvider) {
        $routeProvider
            .when('/', {
                templateUrl: 'partials/login.html',
                controller: 'LoginCtrl'
            })
            .when('/dashboard', {
                templateUrl: 'partials/dashboard.html',
                controller: 'DashboardCtrl'
            }).when('/users', {
                templateUrl: 'partials/users.html',
                controller: 'UsersCtrl'
            }).when('/groups', {
                templateUrl: 'partials/groups.html',
                controller: 'GroupsCtrl'
            })
            .otherwise({
                redirectTo: '/'
            });
    }]);

Now after we have put this all together we need to be able to load the data from activiti REST, to manage users and groups. For this we have created two factories with its resources, one for users one for goups.

 alfrescoBlogApp.factory('UserService', function ($resource) {
   var data = $resource('service/identity/users/:user', {user: "@user"});
   return data;
});

alfrescoBlogApp.factory('GroupService', function ($resource) {
  var data = $resource('service/identity/groups/:group', {group: "@group"});
 return data;
});

This two factories allow us to fetch data, to insert to update and delete using standard angular.js resource methods. Lets see how to manipulate with users(same principles can be used for groups).

//delete user
 UserService.delete({"user": user.id}, function (data) {
    //:)
 });

//insert user
var user = new UserService(newUser);
 user.id= newUser.id;
 user.firstName= newUser.firstName;
 user.lastName= newUser.lastName;
 user.email= newUser.email;
 user.password= newUser.password;

 user.$save(function (u, putResponseHeaders) {
    $scope.users.data.push(u);//put users into the list
 });

//Load users
UserService.get();

Security

Activiti-rest uses basic authentication, so with each HTTP request to activiti-rest must contain Authorization header.  For this we have implemented one login method that uses username and password that user has entered on our login form and tries to load user data. If successful activiti-rest will return data of logged in user, data returned will be saved to future usage in $rootScope. Lets see the implementation of login controller

alfrescoBlogApp.controller('LoginCtrl', function ($scope, $http, UserService, Base64, $rootSco   pe, $location) {
    $rootScope.loggedUser = {

    }; 
    $scope.username = "";
    $scope.password = "";
    $rootScope.loggedin = false;

    $scope.login = function () {
      $http.defaults.headers.common['Authorization'] = 
           'Basic ' + Base64.encode($scope.username + ":" + $scope.password);

      UserService.get({user: $scope.username}, function (data) {
         $rootScope.loggedin = true;
         $rootScope.loggedUser = data;
         $rootScope.username = $scope.username;
         $rootScope.password = $scope.password;
         $location.path('/dashboard');//redirect to dashboard
   });
 };
});

 Summary

The key parts of angular.js activiti-rest client application are shown in detail, rest of it can be downloaded from here. Installation is simple just add it to activiti-rest webapp and access it here

http://localhost:8080/activiti-rest/restclient.html

This concludes part one of activiti angular.js client, stay tuned for next session on this subject. Download : Rest Client.zip

 

Check out the Angular.js activiti-rest client part II here .

Don't be shellfish...Tweet about this on TwitterShare on LinkedInShare on Google+Share on RedditShare on Facebook

Was this helpful ?