In a typical form activity design, the next course of action is often determined using one of the form fields. We can see such example on the screenshot below.
| Thai |
|---|
ในการออกแบบกิจกรรมรูปแบบทั่วไปหลักสูตรต่อไปของการกระทำมักจะถูกกำหนดโดยใช้หนึ่งในเขตข้อมูลฟอร์ม เราสามารถดูตัวอย่างได้จากภาพหน้าจอด้านล่าง |
Figure 1: Approval Form Generated Using Generate Process - Approval Process
With the use of some client side scripting, we can change the way decision is being made from a select box into individual buttons as shown in the screenshot below.
| Thai |
|---|
รูปที่ 1: แบบฟอร์มการอนุมัติที่สร้างโดยใช้ Generate Process - Approval Process ด้วยการใช้สคริปต์ฝั่งไคลเอ็นต์เราสามารถเปลี่ยนวิธีการตัดสินใจจากกล่องเลือกเป็นปุ่มแต่ละปุ่มตามที่แสดงในภาพด้านล่าง |
Figure 2: Decision Making Buttons
...
In order to implement this design, we will need to first obtain the "name" of the select box. Please see the screenshot below.
| Thai |
|---|
รูปที่ 2: ปุ่มตัดสินใจ การออกแบบนี้อาจปรับให้เหมาะกับฐานผู้ใช้ที่เคยใช้ระบบที่มีการออกแบบคล้ายกันมาก่อน ในการใช้การออกแบบนี้เราจะต้องได้รับ "ชื่อ" ของช่องที่เลือกก่อน โปรดดูภาพหน้าจอด้านล่าง |
Figure 3: Identifying Element Name
Create a Custom HTML into your intended form, and paste in the code below. Change line 2 with the name of your select box.
| Thai |
|---|
รูปที่ 3: การระบุชื่อองค์ประกอบ สร้าง Custom HTML ลงในแบบฟอร์มที่คุณต้องการแล้ววางในโค้ดด้านล่าง เปลี่ยนบรรทัด 2 ด้วยชื่อของกล่องที่คุณเลือก |
| Code Block | ||||
|---|---|---|---|---|
| ||||
<script type="text/javascript">
var selectBoxName = "approval_request_approval_action_status";
$(function(){
$(FormUtil.getField(selectBoxName)).parent().hide();
$(FormUtil.getField(selectBoxName)).children().each(function(){
if($(this).attr("value") != ""){
var cssClass = $(".form-button:last").attr("class");
var button = "<div type=\"button\" class=\"form-cell\"><button class=\"" + cssClass + "\" onclick=\"completeWithVariable($(this));return false;\" value=\"" + $(this).attr("value") + "\">" + $(this).attr("value") + "</button></div>";
$(".form-button:last").after(button);
}
});
});
function completeWithVariable(obj){
$(FormUtil.getField(selectBoxName)).val($(obj).val());
$("#assignmentComplete").trigger("click");
}
</script>
<style type="text/css">
input#assignmentComplete{
display: none;
}
</style> |
Sample app to demonstrate the use of form buttons for approval/rejection on Joget Workflow Enterprise v6: APP_form_buttons_for_approval.jwa
| Thai |
|---|
แอพตัวอย่างเพื่อสาธิตการใช้งานปุ่มแบบฟอร์มสำหรับการอนุมัติ / ปฏิเสธใน Joget Workflow Enterprise v6: APP_form_buttons_for_approval.jwa |