The goal of Actangular is to provide developers using Activiti with reusable functionality that they can use in their own web applications. To achieve this goal, Actangular provides the following
Try it!
To try it yourself, check out the source code on GitHub and follow instructions in "Getting started" section.
Actangular is still in early development stage. Feedback is appreciated
- A set of AngularJS and Javascript modules that provide client side functionality
- Based on activiti-rest and Activiti's REST API provide extended functionality as needed (when appropriate will be contributed to activiti-rest project)
- A reference web application that demonstrates provided functionality
What features are currently available in Actangular?
Some of the features currently available are
- Login and logout with remember me feature support
- Managing tasks i.e. listing, sorting, creating/editing/claiming/completing/deleting, posting comments, adding/deleting identity links, uploading attachments, etc..
- Managing process instances i.e. listing, sorting, starting/deleting, adding/deleting identity links, listing related tasks, etc..
- Historic tasks and process instances listing and sorting
- Form rendering and submitting, supports string, date, boolean, and long form property types
- Task and process instance variables, supports string, date, and long variable types
- Managing models i.e. listing, creating/editing/deleting models
- Modeler integration enables modeling, converting to BPMN and deploying from the Modeler
- Process diagrams rendering using SVG (client side) and PNG (sever side)
- Multi-language, currently English and Arabic (with RTL support)
Login
Task List
Task Details
Process list showing SVG and PNG rendered diagrams
Arabic language with RTL support
Try it!
To try it yourself, check out the source code on GitHub and follow instructions in "Getting started" section.
Actangular is still in early development stage. Feedback is appreciated
Hi Bassam Al Sarori, I am working on the UI part of a project, with Actangular as our reference may i know how does the routing mechanism work in this and if i have to add new link under the processes navigation on the left hand side what should i do. It would be really great if you can guide me on this. Thanks in Advance
ReplyDeleteFor routing ngRoute is used with one exception that a custom ag-page directive (see agPage in actangular-page.js) is used instead of ng-view directive. If you take a look to routes defined to $routeProvider in app.js, all routes resolve a page object which should point to the template to be loaded. Pages that represent a list extends ListPage (see ListPage in actangular-page.js).
DeleteIn your case adding a new link under the processes navigation, you will need to edit 3 files. The templates.html to include your custom page link, add a listPage to $processPage (check the myInstancesListPage, participantListPage, and other lists and create your own, you may need to modify listPage.requestParam if you have custom params) in actangular-process.js, and finally add route condition (by calling when()) to $routeProvider in app.js
Wow awesome, It worked Thanks a lot.
DeleteBut have a another issue like when I add my custom link i.e (My Routes). It does not display the text My Routes on the navigation, it shows MENU_ROUTES which is within the translate attribute. would please help me over this
Glad to hear that it worked!
DeleteMENU_ROUTES appears since there is no translation for it. Just add a translation for MENU_ROUTES to locale/en.json file
"MENU_ROUTES": "My Routes"
Thank you again for your time and assistance. Thank you very very much
DeleteHi Bassam Al Sarori, need some more help on this, have question like how do i create new controller like StartProcessModalInstanceCtrl, i have tried creating simple controller but i get an error of (Error: [ng:areq] Argument 'GreetingController' is not a function, got undefined), would you please help me no this.
DeleteHi Venkat, can you please provide more details of your issue such as where did you add your controller and how do you want to use it?
DeleteI had added the controller in actangular-process.js, Actually my requirement is to pass a live api url and get the data from the api and display it, like the way you are displaying on definitions tab from your service,
DeleteI have tried to changing the service url which you have given in app.js (RestangularConfigurer.setBaseUrl('service/runtime/');) to our url so that i would get the data from our api, but i was not able achieve it, so thought of to writing new controller like StartProcessModalInstanceCtrl in actangular-process.js and then pass the url.
Is there any way that i can use the existing controller/module/service to pass our url (api's) and fetch data and display it on the html page. if this is possible that would be really great.
To be able to fetch/submit your own data you need to create a Restangular service for that. Assuming your url is
Deletemyservice/mydata
The Restangular service can be as follows
.factory('MyRestData', function(Restangular) {
return Restangular.withConfig(function(RestangularConfigurer) {
RestangularConfigurer.setBaseUrl('myservice/');
}).service('mydata');
})
Usually, Restangular services are used in pages such as ProcessInstancesPage, ModelPage, etc! but can be used in existing controllers, services, etc! just make sure to add it as an argument to the function, for example:
.controller('MyDataController', function($scope, MyRestData) {
// your code here
})
Thank you, Bassam Al-Sarori shall work this and let you know
DeleteThis comment has been removed by the author.
ReplyDelete