Joget: สร้าง Chained select box

ในระบบการจัดการข้อมูลที่ซับซ้อน การสร้างแบบฟอร์มที่ผู้ใช้ต้องกรอกข้อมูลที่สัมพันธ์กัน (Dependent Data) เป็นสิ่งจำเป็นอย่างยิ่ง ตัวอย่างเช่น หากผู้ใช้เลือก ‘เพศ’ เป็น ‘ชาย’ ตัวเลือกในช่อง ‘คำนำหน้านาม’ ควรถูกจำกัดให้เป็น ‘นาย’ เท่านั้น การใช้ Dropdown Box แบบธรรมดาจะไม่สามารถจัดการความสัมพันธ์นี้ได้

ทางออกคือการสร้าง Chained Select Box ซึ่งเป็นฟังก์ชันที่ทำให้ Select Box ตัวที่สองสามารถกรองตัวเลือกของตนเองได้ตามค่าที่ผู้ใช้เลือกใน Select Box ตัวแรก บทความนี้จะนำเสนอวิธีการสร้างฟังก์ชันขั้นสูงนี้ใน Joget โดยใช้พลังของฐานข้อมูล PostgreSQL

หลักการทำงานของ Chained Select Box ใน Joget

Chained Select Box ทำงานโดยการกำหนดให้ Select Box ตัวที่สอง (Child) ต้องส่งค่าที่ผู้ใช้เลือกใน Select Box ตัวแรก (Parent) ไปเป็นเงื่อนไขในการ Query ข้อมูลจากฐานข้อมูล (JDBC Binder) แทนที่จะแสดงตัวเลือกทั้งหมด ระบบจะรันคำสั่ง SQL โดยมีเงื่อนไข (WHERE clause) ที่อ้างอิงจากค่า Parent Input เสมอ

ขั้นตอนการสร้างโดยใช้ PostgreSQL

1. เตรียมโครงสร้างข้อมูล: ตรวจสอบให้แน่ใจว่าตารางข้อมูลของคุณมีคอลัมน์ที่สามารถใช้เป็นตัวเชื่อมโยง (Grouping Column) ได้ เช่น การมีคอลัมน์ parent_grouping ที่เก็บค่า ‘ชาย’ หรือ ‘หญิง’
2. ตั้งค่า Select Box ตัวแรก (Parent): ลาก Select Box ตัวแรกมาวางและกำหนดค่าตัวเลือกพื้นฐาน (เช่น เพศ)
3. ตั้งค่า Select Box ตัวที่สอง (Child): ภายในการตั้งค่าของ Select Box ตัวที่สอง ให้เลือกแหล่งข้อมูลเป็น JDBC Binder เพื่อให้ Joget สามารถรันคำสั่ง SQL ได้
4. กำหนด Query ด้วย PostgreSQL: นี่คือส่วนสำคัญที่สุด คุณต้องเขียนคำสั่ง SQL ที่ใช้เงื่อนไขจาก Parent Input โดยใช้ Placeholder (เช่น :parent_input_value)

ตัวอย่างโค้ด PostgreSQL สำหรับการกรองคำนำหน้านามตามเพศ:

SQL

SELECT <code>prefix_value</code>, <code>prefix_label</code>, <code>parent_grouping</code> FROM <code>user_prefixes</code> WHERE <code>parent_grouping</code> = :parent_input_value ORDER BY <code>prefix_value</code>;

คำอธิบายโค้ด:

• user_prefixes: คือชื่อตารางที่เก็บข้อมูลคำนำหน้านาม
• parent_grouping: คือคอลัมน์ที่ใช้เชื่อมโยง (เช่น เก็บค่า ‘ชาย’ หรือ ‘หญิง’)
• :parent_input_value: เป็น Placeholder ที่ Joget จะแทนที่ด้วยค่าที่ผู้ใช้เลือกใน Select Box ตัวแรก (Parent) ทำให้มั่นใจว่า Query จะดึงเฉพาะแถวที่ตรงกับเงื่อนไขที่กำหนดเท่านั้น

ข้อควรระวังระดับ Senior Architect

ในการใช้งานจริง ควรมีการจัดการ Error Handling และการทำ Indexing บนคอลัมน์ parent_grouping ในฐานข้อมูล PostgreSQL เพื่อให้มั่นใจว่าประสิทธิภาพของฟอร์มจะไม่ลดลงเมื่อมีข้อมูลจำนวนมาก

บทสรุป

การสร้าง Chained Select Box ด้วย Joget และการใช้ PostgreSQL JDBC Binder เป็นการแสดงให้เห็นถึงพลังของการผสานรวมระหว่าง Low-Code Platform กับความสามารถในการ Query ข้อมูลที่ซับซ้อนของฐานข้อมูล ทำให้สามารถสร้างประสบการณ์ผู้ใช้ (UX) ที่ราบรื่นและมีประสิทธิภาพสูงในการเก็บข้อมูลที่สัมพันธ์กันได้อย่างแม่นยำ