Tag Archive Joget

Byphunsanit

Joget: สร้าง Chained select box

บางครั้งก็ต้องสร้างฟอร์มโดยเลือกข้อมูลที่สัมพันธ์กันเช่น ถ้าเค้าตอบมาว่าผู้ชาย คำนำหน้านามของเค้าคงไม่ใช่นางสาว การที่ select box ฉลาดพอที่จะไม่ถามว่า คุณคือนาง หรือ นางสาว ผู้ใช้จะใช้เวลาในการกรอกข้อมูลน้อยลง

ทำได้โดยการสร้าง Chained select box

  1. ในหน้า form builder ให้ลาก Select Box มาในตำแหน่งที่ต้องการ อาจจะอ่าน Joget: สร้าง select box จาก database ถ้ายังไม่เคยสร้างซีเล็คบ๊อกซ์
  2. คลิก Edit icon หลัง input
  3. สร้าง Grouping โดย
    • ถ้าสร้าง options แบบ Options (Hardcoded) ให้ใส่ Grouping โดยมีค่าเท่ากับ ค่าใน parent input
    • ถ้าสร้าง options แบบ JDBC Binder ให้ query โดยมี
      • Column ที่ 1 จะถูกใช้เป็น value ใน แต่ละ option
      • Column ที่ 2 จะเป็น label
      • Column ที่ 3 จะถูกใช้เป็น Grouping ที่จะรวม option ให้เป็นกลุ่ม เป็น Grouping โดยมีค่าเท่ากับ ค่าใน parent input
        สร้างตัวเลือก คำนำหน้านามแบบกลุ่ม
        SELECT
            id AS value, c_name AS label, c_sex_id AS grouping
        FROM
            app_fd_titles
        ORDER BY label ASC;
        
  4. คลิก next
  5. คลิก next
  6. Field ID to control available options based on Grouping ให้ใส่ id ของ parent input เช่น ใส่ sex_id โดย sex_id เป็น dropdown box ที่มีตัวเลือก ชาย = 2 หญิง = 1 ถ้าต้องการให้ option ไหนแสดงเมื่อ sex_id ถูกเลือกว่าเป็นผู้ชาย (2) ก็ให้ grouping มีค่าเท่ากับ 2

ดังนั้นค่าในตารางคำนำหน้านาม ควรจะเป็นตามรูปแบบ

Id label Grouping
  Please select  
1 Miss 1
2 Mr 2
3 Mrs 1
4 Ms 1
5 Mx 1

เมื่อ sex_id มีค่าเท่ากับ 1 joget จะแสดง แต่ตัวเลือก Mr เท่านั้น

Noteแต่ถ้า Grouping ไม่มีค่า จะแสดงออกมาด้วย เหมือนที่แสดงตัวเลือก Please select

อ่านเพิ่มเติม