Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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
languagexml
linenumberstrue
<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