这篇文章是为初学者试图将Joget与外部应用程序集成在一起的快速的示范练习。
在本练习中，我们将向您介绍如何从外部页面开始Joget中的一个流程。我们还将向您展示如何设置工作流程变量值，以便用于定义工作流程的参与者。
准备Joget应用程序
我们将创建一个简单的工作流程，如下所示。
图1：创建工作流应用程序
记下流程定义ID并确保您已将工作流程变量映射到其中一个参与者。如果你愿意，你可以点击下面的链接下载应用程序
This article is a quick how-to sample exercise for beginners trying to integrate Joget with external application.
In this exercise, we will show you on how to start a process in Joget from an external page. We will also show you on how to set a Workflow Variable value along the way which will be used to define one of the participants of the workflow process.
Preparing the Joget App
We are going to create a simple Workflow Process as follow.
Figure 1: Creating a Workflow App
Take note of the Process Definition ID and make sure that you have mapped a Workflow Variable to one of the participants. If you want to, you may download the app by clicking the link below.
APP_simpleApproval-1-20140211152817.zip
Preparing the External page
Now that we have handled what is required at Joget's side, we are going to create the external page now.
The easiest place to host your external page would be creating another context folder in the web server where your Joget resides in. If you are using Tomcat, navigate to /webapps and create a folder called "poc" for example.
...
准备外部页面
现在我们已经处理了Joget所要求的，现在我们要创建外部页面。
托管外部页面的最简单方法是在Joget所在的Web服务器上创建另一个上下文文件夹。如果您使用的是Tomcat，请导航到/ webapps并创建一个名为“ poc ” 的文件夹。
创建index.html并将下面的代码复制到它。
| Code Block | ||||
|---|---|---|---|---|
| ||||
<html>
<head>
<script type="text/javascript" src="http://localhost:8080/jw/js/jquery/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="http://localhost:8080/jw/js/json/util.js" ></script>
<script type="text/javascript" >
$(document).ready(function(){
var loginCallback = {
success : function(response){
if(response.username != "roleAnonymous"){
alert("login successfully");
}else{
alert("login fail");
}
}
};
//login
AssignmentManager.login('http://localhost:8080/jw', 'admin', 'admin', loginCallback);
$("input[name='startProcessButton']").click( function(){
//retrieving the values
var processDefinition = $("input[name='processDefinition']").val()
var requester = $("input[name='requester']").val()
//call back for "start a process"
var callback = {
success : function(response){
//print returned result
$("#responseDiv").html(response.toSource());
}
}
//start a process
ConnectionManager.ajaxJsonp('http://localhost:8080/jw/web/json/workflow/process/start/' + processDefinition, callback, "var_requester=" + requester);
});
});
</script>
</head>
<body>
<fieldset id="startProcess">
<legend>Start Process:</legend>
<label for="name">Process Definition:</label>
<input type="textfield" name="processDefinition" value="simpleApproval:1:sample"/>
<br>
<label for="name">Requester Username:</label>
<input type="textfield" name="requester"/>
<input name="startProcessButton" type="submit" value="Trigger"/>
<div id="responseDiv"/>
</fieldset>
</body>
</html> |
...
您的最终路径应该是\ Joget-v3-Enterprise \ apache-tomcat-6.0.18 \ webapps \ poc \ index.html
...
。
你将需要研究上面的代码以帮助你理解。
执行和测试
从您的浏览器，找到你的方式index.html页面。
图2：外部页面
流程定义ID在编码中已经被填充了。请记住用id中的冒号（:)代替散列（＃）。键入用户名并点击触发
图3：启动一个进程实例
点击按钮后，结果将打印在页面上。您应该能够在Joget的Web控制台中找到相应的流程实例。
图4：检查Monitor应用程序中的进程实例
深入到活动实例中，您应该能够找到分配给合适人员的实例。
图5：在监视器应用程序中检查活动实例
参考
You will need to study the code above where occasional remarks are placed to help you to understand.
Execution and Testing
From your browser, find your way to the index.html page.
Figure 2: External Page
The process definition ID has already been filled up in the coding earlier. Remember replacing hash (#) with a colon (:) in the id. Key in a Username and hit Trigger.
Figure 3: Starting a Process Instance
Result will be printed on the page itself after hitting the button. You should be able to find the corresponding process instance in Joget's web console as well.
Figure 4: Inspecting Process Instance in Monitor Apps
Drill down into the activity instance and you should be able to find the instance assigned to the rightful person.
Figure 5: Inspecting Activity Instance in Monitor Apps
...