Joget DX Available for Download

Check out Joget DX, the next generation successor to Joget Workflow for faster, simpler digital transformation.

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

This design may be better tailored to certain user base who have used systems with similar design before.

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).text() + "</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