Breaking News
Loading...
Friday, May 31, 2013

Info Post
เก็บ ตกจากอบรมที่มหาวิทยาลัยรังสิตและมหาวิทยาลัยนอร์ทกรุงเทพซึ่งการอบรมสนุก สนานเกินไปหน่อย ออกแนวๆ ดูหนัง sound track แบบไม่มีซับไทย เล่นเอานักศึกษาหลายคนเหวอไปกับอาจารย์ฮิวโก้เลยล่ะ เนื่องจากตามกันไม่ค่อยทันผมก็เลยขอยกตัวอย่าง Work Flow Application ง่ายๆ ซักตัวเผื่อระรึกความหลังกันได้บ้าง ตัวอย่างคือ โปรแกรมใบลา แบบง่ายๆ (คุ้นมั๊ย) สถานการณ์เราเป็นแบบนี้ครับ
" พนักงานที่ต้องการลาต้องกรอกใบลาให้กับผู้จัดการอนุมัติ หากผู้จัดการอนุมัติให้ลาได้ก็ทำการแจ้งให้กับผู้ขออนุญาติทราบผ่านทาง E-mail และอัพเดทฐานข้อมูล(อะไรซักอย่าง เดี๋ยวตอนหน้ามาเล่นกัน) หากไม่อนุญาติก็แจ้งให้ทราบผ่านทาง E-mail เช่นกัน "
จากสถานการณ์ข้างต้นเราจะพบว่ามี Paticipant อยู่ 2 คนด้วยกัน คือ พนักงาน (Applicant) และ ผู้จัดการ (Approver/Manager) อีกส่วนหนึ่งคือ Paticipant ที่ไม่ใช้คนคือ System ที่จะทำหน้าที่เกี่ยวกับการส่ง E-Mail และอัพเดทฐานข้อมูล (หัด Route แบบ AND) เอาล่ะมาลงมือกันเลย
Workflow จะมีหน้าตาแบบนี้ครับ
ภาพ Workflow
มาสร้าง Application กันก่อนให้ชื่อว่า Leave Application กำหนด
App ID : leaveApp App Name : Leave Application
กดปุ่ม Launch Workflow Designer สร้าง Workflow หน้าตาเหมือนภาพข้างบนครับ
ข้อมูล Process Properties กำหนดดังนี้
Name : Leave Process ID : leave_process Workflow Varible : status
ข้อมูล Human Paticipant
Name : Applicant ID : applicant Type : Paticipant
Name : Approver ID : approver Type : Paticipant
ข้อมูล System Paticipant
Name : System ID : system Type : System
ข้อมูล Activity
Name : Apply Leave Form ID : apply_leave_form
Name : Approve Leave Application ID : approve_leave_application
ข้อมูล Tool
Name : Notification Rejected ID : notification_rejected
Name : Update Database ID : update_database
Name : Notification Approved ID : notification_approved
ข้อมูล Transition ตรงที่มี varible (เส้นทึบสีฟ้า) กำหนดดังนี้
Type : Condition Expression : status=="Approved"
ข้อมูล Route แบบ AND (ที่มีเครื่องหมายบวกตรงกลาง) กำหนดดังนี้
Split Type : AND
เมื่อได้ Workflow แล้วกด Deploy Workflow ที่เราสร้างขึ้นไปยัง Server ของเราได้เลย หลังจากนี้ให้ทดสอบ Flow โดยการสั่ง Run Process แล้วตามดูจาก Running Processes Monitor, Complete Process หรือใช้ Audit Trail เพื่อดูการทำงานของ Flow ว่าทำงานถูกต้องหรือไม่ จากนั้นเราจะมาทำการกำหนดผู้ใช้ให้กับ Application ให้ดู ตรง Tab ชื่อ Map Participants to Users ก่อน ~ ถ้าดูยากไปกำหนดให้ใครซักคนเป็น Applicant และ Approver ก่อนก็ได้ครับ :P
กำหนดผู้ใช้ในส่วน Applicant เป็น
Type : Performer Value : Activity Definition Id :runProcess
กำหนดผู้ใช้ในส่วน Approver เป็น
Type : Group Value : Managers
เมื่อกำหนดผู้ใช้ได้แล้วเราจะมาสร้าง Form กัน ให้คลิกไปที่ Tab ที่ 2 คือ Map Activities to Form ส่วน Acitiviy แรกคือ Apply Leave Form กดปุ่ม Add/Edit Form จากนั้นจะมีหน้าต่างให้เราเลือกฟอร์ม ให้กด Create New Form เราจะสร้างฟอร์มหน้าตาอย่างนี้ครับ
Apply Leave Form
กำหนดค่าดังนี้
Form Name : Leave Application Form ID : leaveForm Table : leaves
กำหนดค่า Section ดังนี้
Label : Leave Application Form
ส่วน Field ต่างๆ กำหนดดังนี้
Label : Name Type : Text Field Validation : Mandtory
Label : Start Date Type : Date Picker Validation : Mandtory
Label : End Date Type : Date Picker Validation : Mandtory
Label : Reason Type : Text Area
เมื่อได้ฟอร์มแล้วกด Save หากต้องการดูว่าหน้าตาออกมาเป็นยังไงกดปุ่ม Preview ข้างบนครับ :) จากนั้นกลับไปที่หน้า Map Activities to Form อีกครั้ง ในส่วน Approve Leave Application กด Add/Edit Form เราจะสร้างฟอร์มหน้าตาอย่างนี้ครับ
Approve Leave Application
กำหนดค่าดังนี้
Form Name : Approve Leave Application Form ID : approve_leave_application Table : leaves
กำหนดค่า Section ดังนี้
Label : Approve Leave Application
เพิ่ม Sub Form เข้ามาและกำหนดค่าดังนี้
Label : (ลบชื่อ Label ออก) Form ID : Leave Application Readonly : (กด checkbox กำหนดให้อ่านได้อย่างเดียว)
ขั้นตอนนี้เราจะได้หน้าตาของแบบฟอร์ม Leave Application โผล่ออกมา จากนั้นเราจะเพิ่ม Radio Button เพื่อกำหนดเป็น Approved และ Rejected กำหนดค่าดังนี้
Label : Approval Type : Radio ID : approval Options :
  • ค่าแรก
    • Value : Approved
    • Label : Approved
  • ค่าที่สอง
    • Value : Rejected
    • Label : Rejected
Validation : Mandtory Workflow Variables : status
เพิ่มลูกเล่นให้กับ Form ของเราอีกนิดหน่อย หากว่า Approver/Manager ไม่อนุมัติในลาให้เรา คลิกที่ปุ่ม Rejected แล้วแบบฟอร์มจะแสดงกล่อง Text Area ให้กรอกหมายเหตุเพิ่มเติม วิธีการทำมีดังนี้
ให้เพิ่ม Section มาอีก 1 อันกำหนดค่าดังนี้
Label : Rejected Visibility : Field ID to control this Section : approval Field value to display this Section : Rejected
จากนั้นเพิ่ม Text Area เข้าไปกำหนดค่าดังนี้
Label : Remark Type : Text Area ID : remark
ทีนี้ Save และ Preview ดูนะครับว่า กดปุ่ม Rejected แล้วมี Section ส่วน Remark ขึ้นมามั๊ย เอาคร่าวๆ แค่นี้ก่อนครับ :) ทีนี้กลับมาที่หน้า Leave App ของเรา เพื่อสร้าง User View เพื่อให้ผู้ใช้เข้าใช้งาน App หน้านี้ หน้าตาของ UserView ที่จะสร้างเป็นแบบนี้

ลงมือกันเลย กดไปที่ Userview โปรแกรมจะเปิดหน้า User View ขี้นมาให้กดปุ่ม Create New Userview จากนั้นกำหนดค่าดังนี้
Name : Leave Application Portal ID : leavePortal
โปรแกรมจะเปิดหน้า UserView Designer ขึ้นมา ให้สร้าง Category ชื่อ Main จากนั้นเพิ่ม Menu ลงไปดังนี้
Label : Home Element : HTML Page Content : Welcome to Leave Application Portal
Label : Inbox Element : Inbox Assignments to Display : Assignment for A Process Only Process : Leave Process UI :
  • Show Number of Rows In Menu : (check เพื่อแสดงจำนวนข้อมูลใน Inbox)
Label : New Leave Element : Run Process Assignments to Display : Assignment for A Process Only Process : Leave Process Run process without confirmation screen? : (check - เพื่อไม่ต้องถามคำถามก่อน Run Process) Show in popup dialog? : (เอาออก - เพื่อให้แสดงผลในหน้าเดียวไม่ต้องเปิดหน้าแสดงผลแบบ Dialog)
จากนั้น Save สั่ง Publish Application แล้ว Launch App ดูครับ เราจะได้หน้าตา Application ของเราอย่างนี้
Leave Application Portal
ลองใส่ข้อมูลดูครับ

Logout แล้วลอง Login เป็น Clark (Kent)

จะพบว่ามีเอกสารรอ Approve อยู่ 1 ฉบับหน้าตาแบบนี้

กดเพื่อเข้าไปอ่าน

ถ้าเลือก Rejected แบบฟอร์มจะให้กรอกเหตุผลของการไม่อนุมัติดังภาพ

ครั้งหน้าเราจะมาลองเล่น
  • การเพิ่ม Data List
  • การ Map Tools to Plugins
  • สั่งให้ส่ง E-Mail เตือน, Update Database ฯลฯ
  • เล่นกับ Hash Variable
อ้อเกือบลืมตัวอย่างไฟล์สมารถดาวน์โหลดได้ที่ http://pub.thaiopensource.org/joget-archive/Apps/ ครับ

0 comments:

Post a Comment