| English |
|---|
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. |
| Thai |
|---|
บทความนี้เป็นแบบฝึกหัดตัวอย่างวิธีด่วนสำหรับผู้เริ่มต้นที่พยายามรวม Joget กับแอปพลิเคชันภายนอก ในแบบฝึกหัดนี้เราจะแสดงวิธีเริ่มกระบวนการใน Joget จากหน้าภายนอก นอกจากนี้เราจะแสดงวิธีตั้งค่าตัวแปรของเวิร์กโฟลว์ตามวิธีการที่จะใช้ในการกำหนดหนึ่งในผู้เข้าร่วมของกระบวนการเวิร์กโฟลว์ |
Preparing the Joget App
We are going to create a simple Workflow Process as follow.
| Thai |
|---|
กำลังเตรียมแอพ Joget
|
Figure 1: Creating a Workflow App
...
APP_simpleApproval-1-20140211152817.zip
| Thai |
|---|
รูปที่ 1: การสร้างแอปเวิร์กโฟลว์ จด ID นิยามกระบวนการและตรวจสอบให้แน่ใจว่าคุณได้แมปตัวแปรเวิร์กโฟลว์กับหนึ่งในผู้เข้าร่วม หากคุณต้องการคุณสามารถดาวน์โหลดแอพได้โดยคลิกที่ลิงค์ด้านล่าง APP_simpleApproval-1-20140211152817.zip |
Preparing the External page
...
Create index.html and copy the following code into it.
| Thai |
|---|
กำลังเตรียมหน้าภายนอก
สถานที่ที่ง่ายที่สุดในการโฮสต์หน้าภายนอกของคุณคือการสร้างโฟลเดอร์บริบทอื่นในเว็บเซิร์ฟเวอร์ที่ Joget ของคุณตั้งอยู่หากคุณใช้ 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> |
...
You will need to study the code above where occasional remarks are placed to help you to understand.
| Thai |
|---|
เส้นทางสุดท้ายของคุณควรเป็น \ Joget-v3-Enterprise \ apache-tomcat-6.0.18 \ webapps \ poc \ index.html คุณจะต้องศึกษารหัสด้านบนซึ่งมีการใส่คำพูดเป็นครั้งคราวเพื่อช่วยให้คุณเข้าใจ |
Execution and Testing
From your browser, find your way to the index.html page.
| Thai |
|---|
การดำเนินการและการทดสอบ
|
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.
| Thai |
|---|
รูปที่ 2: หน้าภายนอก รหัสข้อกำหนดกระบวนการได้รับการเติมในการเข้ารหัสก่อนหน้านี้แล้ว จำไว้ว่าแทนที่ hash (#) ด้วยเครื่องหมายโคลอน (:) ใน id ป้อนชื่อผู้ใช้และกด 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.
| Thai |
|---|
รูปที่ 3: การเริ่มต้นอินสแตนซ์ของกระบวนการ ผลลัพธ์จะถูกพิมพ์ลงบนหน้ากระดาษหลังจากกดปุ่ม คุณควรจะสามารถหาอินสแตนซ์กระบวนการที่เกี่ยวข้องในเว็บคอนโซลของ Joget ได้เช่นกัน |
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.
| Thai |
|---|
รูปที่ 4: การตรวจสอบอินสแตนซ์กระบวนการในแอพการตรวจสอบ เจาะลึกลงไปในอินสแตนซ์ของกิจกรรมและคุณควรจะสามารถหาอินสแตนซ์ที่กำหนดให้กับบุคคลที่ถูกต้อง |
Figure 5: Inspecting Activity Instance in Monitor Apps
| Thai |
|---|
รูปที่ 5: การตรวจสอบอินสแตนซ์ของกิจกรรมในแอพการตรวจสอบ |
References
| Thai |
|---|
อ้างอิง |