in Activiti

Angular.js activiti webapp – part III (final)

Demo

Here is a live demo of the activiti created using AngularJs

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

 

Introduction

Some time ago we wrote about angularjs module for activiti and what is our vision on this subject. You can read more in the part I and part II, now we finally have part III where you can see last bits of the UI and the idea that is behind it.

 

What is new?

We added the dashboard, here logged in user will be able to see what are the tasks he needs to finish. Here is the image of the beginning of that idea.

New Dashboard

New Dashboard

Now user can list tasks that are assigned to him, that he owns or that he was involved in. Additionally user can take ownership of the task, assign himself or reassign to another, additionally user can see all tasks that are no assigned to anyone of his teammates. Here is the image of the tasks view.

You can see floating panel and a form inside it, floating panel as we call it can open any task of any workflow as it is model driven. We did this using the activiti form-data service.

Tasks view

Tasks view

Why is this here and what is our goal?

We did this just for fun, as time went by more than few people wanted the code and were interested in this idea of angularjs activiti client.

We are currently pushing to make this the official activiti angularjs module and we are hoping that you will help us do this by sharing the post or at least add the nice comment below .

As soon as this push is over we will make the code public and it will be available for you do use or download.

Edit 16.10.2014

We have been working hard to add some new features and change the existing ones. Let go through all features that are added so far

  • New way of managing groups and users in them, both ways
  • User can see list of processes and start any of them
  • User can see list of instances with every property instance has
  • User can filter better his tasks by group or other properties

Managing groups and users screenshot. As you can see user can see all of the groups in the system and easily add or remove other users.

users

Also we have added reverse view, for every user you can see what groups he is in and manage that. How awesome that?

users

Here are some screenshots of the instances and processes nothing fancy .

instances processes

Finally really nice dialog where user can see all important properties of process instance, currently you can not delete the instance :( , we will add that in the future.

instance-view

Filtering tasks is a bit nicer now…

filtering

We have changed UI from floating div to dialog, it works great this way!

new dialog

This is it for now, we are still working on joining this to activiti angular module…

EDIT: 18.10.2014

Finally this code is in Activiti project located here

https://github.com/Activiti/Activiti-AngularApp/

 

 

 

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

Was this helpful ?

26 Comments

  1. thank you very much for this post! I have downloaded and unzipped the .zip (https://github.com/Activiti/Activiti-AngularApp/), then I have to do this ?:

    npm update -g
    npm install -g I grunt-cli bower
    npm install -g generator generator-angular-karma
    && install npm install bower
    grunt server

    Please could you explain the steps after descargarme your zip?

    Thank you for your help!

      • I downloaded the code.Then I did these below steps,

        npm update -g
        npm install -g I grunt-cli bower
        npm install -g generator generator-angular-karma
        && install npm install bower
        grunt server

        A page comes up on browser for url http://localhost:9000/#,

        But it has no data or the login page.

        I have activiti-rest and activiti-explorer in my tomcat and it is running at 8085 port.

        Can you please send me a email with details steps or we can discuss this over phone also.

          • Savic,

            I installed the apache and setup the proxy .
            Started the apache
            Started the tomcat on 8080 (Activiti-rest.war and Activiti-explorer,war is already deployed)
            Ran :
            npm -g update
            npm install -g yo grunt-cli bower
            npm install -g generator-angular generator-karma
            npm install && bower install
            grunt server

            I just get the below blank page without any data or the login page.

            I sent you a email also on the same

            Please let me know what else I should do to see the tasks data and login page.

  2. Extremely interesting project, but since I’m running on Windows currently, setting it up to try it is quite a bit of work. I’d really love to try the demo first, could you please fix it?

    • Hello,
      here is a list of stuff you need to check.
      1: is tomcat running and app activiti-rest is operating (check localhost:8080/activiti-rest)
      2: if activiti-rest operating can you login into it using basic auth (check localhost:8080/activiti-rest/service)
      3: if all is ok with 8080 check if apache proxy is running ( check localhost/service , you should get basic auth login)
      4: when you start angular app and try to login check network tab ( if you use chrome os similar in FF and so on), what does it say.
      5: what is the version of your activiti as maybe rest changed, so check the documentation.
      5: You should now know what is the issue :)

      ps: maybe some steps you already check but this will insure that you can find the issue.

      Let me know what are the results of your tests.
      Thank you.

      • I should mention that I am running this in a dev environment. So everything starts up successfully. I am trying with the 5.18.0 and 6 branches.
        So steps 1,2,3,&5 are ok.
        I see the request made for the user as : http://localhost:9000/service/identity/users/kermit?size=100 in the browser console so I am guessing there’s something wrong with the login module. (I don’t know angular that well, in fact I am just starting to learn it)

        • Oh,
          maybe you need to access the angular application at
          http:://localhost/ .

          as you saw you have two proxypasses :
          ProxyPass /service/ http://localhost:8080/activiti-rest/service/ retry=0 timeout=30
          ProxyPass / http://localhost:9000/ retry=0 timeout=30

          First one is to access the activiti-rest app and second is to access angular app. There fore you need to open browser and access the angular app on http://localhost/ ( or the apache address).

          Let me know how it goes.

          • Thanks.
            The issue was down to the reverse proxying not working for the default host (On OSX by the way)
            For those of you setting this up on your osx environment (I’m using 10.10.x), just add those proxying statements to a vhost config in your /extra/httpd-vhosts.conf file

      • Thank you so much. I was able to log in. Thank you for your hard work.

        I’m trying to write the same application with the same functionality using Ani-Theme (http://startangular.com/product/ani-theme/). I understand that it uses AngularJS 1.3. I’m trying to do user login by calling the rest service just like in your application, but I keep getting an error saying “unknown provider when injecting an object in controller, object from resolve method”. It seems like it can’t find the UserService.js. Can you kindly give me some advise on what I can do to fix this?

        Regards, Toto

        • Hello,
          are you sure that you have registered service properly ?

          ps: Threre are really nice books on angular available, maybe you should give it a try just to kick start your angular development.

          • Hi,

            I think I did.

            My project structure looks like this app->factory->(Base64.js and userService.js).
            For controllers, app->controllers->(login.js)

            Login.js:
            ‘use strict’;
            angular.module(‘yapp’)
            .controller(‘LoginCtrl’, function($scope, $http, UserService, Base64, $rootScope, $location) {
            $rootScope.loggedUser = {};
            $scope.username = ‘kermit’;
            $scope.password = ‘kermit’;
            $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) {
            // data = JSON.parse(data);
            $rootScope.loggedin = true;
            $rootScope.loggedUser = data;
            $rootScope.username = $scope.username;
            $rootScope.password = $scope.password;
            $location.path(‘/dashboard’);
            });
            };
            });

            userService.js:
            angular.module(‘yapp’).factory(‘UserService’, [‘$http’, ‘$location’, function($http, $location) {
            var data = (‘/service/identity/users/:user’, {user: ‘@user’, size: 100});
            return data;
            }]);

            Then I added the following to my index.html:

            I’m using the AngularJS_ Novice to Ninja book.

            Your assistance will be highly appreciate

          • I have also setup proxy and everything is working fine I can even see the json returned by the user service.