Activiti Custom Process Integration (V): Get a custom form when you start the process

After the process definition is deployed, nature is a list of process definitions, but as in the previous section, this is no different from the previous Activiti, so it's not much to say. Let's take a look at the list page and the corresponding code, and then step-by-step instructions on how to invoke the custom form form when you click the Start button.


The Process Definition List page is as follows:

The corresponding HTML code:

<div id= "Logdiv1" ng-init= "init ();" > <p style= "font-size:24px;margin:3px" > Process list </p> <center> <table border= "1px" style= "margin -top:1px;width:87%;font-size:14px;text-align:center;margin-top:1px;margin-left:2px;position:relative;float: Left; "cellspacing=" 0px "cellpadding=" 0px "> <tr style=" background-color: #ccc "> &LT;TD&GT;ID&LT;/TD&G         T <td>NAME</td> <td>DeploymentID</td> <td>KEY</td> <td> version & lt;/td> <td>resourceName</td> <td>DiagramResourceName</td> <td> operator Make </td> </tr> <tr ng-repeat= "Process in Processlist | By: ' id ' > <td>{{process.id}}</td> <td>{{process.name}}</td> <t D>{{process.deploymentid}}</td> <td>{{process.key}}</td> <td>{{process.version} }</td> <td>{{process.resourcename}}</td> <td>{{process.diagramResourceName}}</td> <td><a href = "script:;" ng-click= "toprocess (process)" > Start </a>  <a href= "script:; ng-click=" Deleteprocess (proc ESS) "> Delete </a>  </td> </tr> </table> <div id=" Handletemplate "><   /div> </center> </div>

The corresponding ANGULARJS code:

Angular.module (' Activitiapp '). Controller (' processctr ', [' $rootScope ', ' $scope ', ' $http ', ' $location ', function ($ Rootscope, $scope, $http, $location) {$scope. Init=function () {$http. Post ("./processlist.do"). Success (Function (        Result) {if (result.islogin=== "yes") {$rootScope. Username=result.username;        $scope. Processlist=result.data;        }else{$location. Path ("/login");            }        });}        Start the process $scope. toprocess= function (process) {$rootScope. process=process; $ (' #handleTemplate '). html ('). Dialog ({title: ' Process name [' + Process.name + '] ', modal:true, Width: $.common.windo W.getclientwidth () * 0.6, Height: $.common.window.getclientheight () * 0.9, open:function () {//Get JSON-formatted form data, is    All field readform.call in the process definition (this, process.deploymentid);    }, buttons: [{text: ' Start process ', Click:function () {$ ("#handleTemplate"). Dialog ("Close");    Sendstartuprequest (); SetTimeout (function () {Window.locatioN.href = ("#/findfirsttask");        },1500); }}]}). Position ({//my: "center",//at: "Center", offset: ' + ', Of:window, Collisio    N: "Fit"});;    };    Read Process start form function Readform (deploymentid) {var dialog = this; Read Startup form $.post ('./getstartform.do ', Deploymentid, function (Result) {//Get the form is a word lines, HTML format directly displayed in the dialog box is ready, and then wrapped with a form    up $ (Dialog). Append ("<div class= ' formcontent '/>");        $ ('. Formcontent '). html ('). Wrap ("<form id= ' startform ' class= ' formkey-form ' method= ' post '/> ');    var $form = $ ('. Formkey-form ');    Set the form action Getstartformandstartprocess $form. attr (' action ', './getstartformandstartprocess ');    Set the ID of the deployment $form. Append ("<input type= ' hidden ' name= ' Deploymentid ' value=" +deploymentid+ ">");    $form. Append (Result.form);    Initializes the date component $form. Find ('. DateTime '). DateTimePicker ({stepminute:5});        $form. Find ('. Date '). DatePicker (); Form Validation $form. valIdate ($.extend ({}, $.common.plugin.validator));    }); }/** * Submit form * @return {[type]} [description] */function sendstartuprequest () {if ($ (". formkey-    Form "). Valid ()) {var url = './getstartformandstartprocess.do ';    var args = $ (' #startform '). Serialize ();    $.post (URL, args, function (data) {$ ("#handleTemplate"). Dialog ("Close"); $location. Path ("/findfirsttask");    });   }    }        }])

In the above code there is a need to notice, from the code can be seen, when we click on the page's Start button, will trigger the Toprocess method, and this method is used in the dialog dialog box, the dialog box is displayed in the previous customized form, from the background database request.


Then read the time sent the getstartform.do request, the background corresponding code is as follows:

@RequestMapping (value = "/getstartform.do", method = Requestmethod.post, produces = "application/json;charset=utf-8") @ Responsebodypublic Object getstartform (@RequestBody String deploymentid) {map<string, string> Map = new HashMap <string, string> (); String destring = null;destring = Deploymentid.replaceall ("=", ""); String form = This.getstartform1 (destring); Map.put ("form", form); return map;} public string GetStartForm1 (string deploymentid) {string destring = Null;destring = Deploymentid.replaceall ("=", ""); ProcessDefinition PD = Repositoryservice.createprocessdefinitionquery (). Deploymentid (deString). SingleResult (); String form = (string) formservice.getrenderedstartform (Pd.getid ()); return form;}

To illustrate the reason why the Formservice.getrenderedstartform method can be used here is because it was set up during the last section of the deployment, otherwise this method is not working properly.


Then this dialog pops up the interface view as follows:

Note that the dialog CSS style in the JQUERY-UI.CSS, do not forget to import, of course, you can also change according to their preferences.

Then fill in the relevant data click Submit, with the above JS can know to go to the background getstartformandstartprocess here, start the process example:

/** * @throws xmlstreamexception * START Process * * @author: Tuzongxun * @Title: startprocess * @param @return * @retu RN Object * @date Mar, 2:06:34 PM * @throws */@RequestMapping (value = "/getstartformandstartprocess.do", method = Requestmethod.post, produces = "application/json;charset=utf-8") @ResponseBodypublic Object StartProcess1 ( HttpServletRequest req) throws Xmlstreamexception {map<string, string[]> formmap = Req.getparametermap (); String deploymentid = Formmap.get ("Deploymentid") [0];//gets the first data_1 set applicant String Person1 = (string) formmap.get ("Data_1" ) [0]; map<string, string> map = new hashmap<string, string> (), Boolean islogin = This.islogin (req), if (IsLogin) {if ( Deploymentid = null) {HttpSession session = Req.getsession (); String Assginee = (string) session.getattribute ("UserName"); ProcessDefinition PD = Repositoryservice.createprocessdefinitionquery (). Deploymentid (DeploymentId). SingleResult () ; String Processdefinitionid = Pd.getid (); Map<string, String> formproperties = new hashmap<string, string> ();iterator<flowelement> Iterator1 = This.findflow ( Processdefinitionid);//Take the first node, the line number of the start node string row = Null;while (Iterator1.hasnext ()) {Flowelement flowelement = Iterator1.next (); row = Flowelement.getxmlrownumber () + ""; break;} Read the parameters from request and convert set<entry<string, string[]>> entryset = Formmap.entryset (); for (Entry<string, String[]> entry:entryset) {String key = Entry.getkey (); String value = Entry.getvalue () [0];if (!key.equals ("Deploymentid")) {string keystring = key + Row;formproperties.put ( KeyString, value);}} Formproperties.put ("Deploymentid", Deploymentid);iterator<flowelement> Iterator = This.findflow (Pd.getId ()); int i = 1;while (Iterator.hasnext ()) {Flowelement flowelement = Iterator.next ();//Applicant if (Flowelement.getclass (). GetSimp Lename (). Equals ("Usertask") && i = = 1) {Usertask Usertask = (usertask) flowelement; String assignee = Usertask.getassignee (); int index1 = Assignee.indexof ("{");int index2 = Assignee.indexof ("}"), Formproperties.put (assignee.substring (index1 + 1, index2), Person1); Identityservice.setauthenticateduserid (Assginee); ProcessInstance processinstance = Formservice.submitstartformdata (processdefinitionid,formproperties); Map.put (" UserName ", (String) req.getsession (). getattribute (" UserName ")), Map.put (" IsLogin "," yes "), map.put (" Result "," Success ");} else {map.put ("result", "fail");}} else {map.put ("IsLogin", "No");} return map;}

And here the most important is the processing of the foreground data, if you use the Ueditor plugin, will find that he passed to the background of the data is stored in the request of a map, and the map key is Data_1, data_2, data_3 form.

This is the problem, to the back of the task at the time of operation, the data is still starting from the data_1, then if we are saved to the database, the query will naturally have a problem, so here is based on the process of each process node line number uniqueness is re-assembled, This data is then saved as a process variable.

Activiti Custom Process Integration (V): Get a custom form when you start the process