[K2 SmartForms] – Filter Data ใน Check Box List

สวัสดีครับ ห่างหายกันไปซักพัก คราวนี้กลับมาด้วยคำถามที่เกิดจากโปรเจคที่ตัวเองทำอยู่ ในบางครั้งเราจะเจอโจทย์ในการออกแบบหน้าจอแบบที่เป็นตัวเลือกที่เลือกได้หลายๆ ตัวเลือก control ที่เราใช้ก็คงไม่พ้น check box list, picker หรือ multi-select control โดยที่นิยมที่สุดก็จะเป็น check box list เพราะใช้งานง่าย และเห็นตัวเลือกทั้งหมดตั้งแต่แรก

ที่นี้ถ้าเราต้องแสดง check box list ธรรมดาคงไม่ใช่ปัญหา แต่ถ้าต้องนำค่าใน check box list ที่เราเลือกไว้ ไป filter ข้อมูลใน control อื่นล่ะ จะใช้วิธีไหนดี?

วิธีแรกที่นึกถึงคือ สร้างเป็น stored procedure ที่ส่ง list ของค่าที่เลือก และส่งข้อมูลกลับออกไปแสดงผล แต่วิธีนี้จะใช้ได้ผลเฉพาะข้อมูลที่อยู่ใน database

วิธีที่สอง ในเมื่อต้องดึงข้อมูลจากที่อื่น ก็เขียน web service ขึ้นมาซะเลย แต่วิธีนี้ก็ต้องมี effort ในการเขียน web service และมีปัญหาเรื่อง performance อยู่บ้างถ้ามีข้อมูลเยอะๆ

วิธีที่สาม ซึ่งเป็นวิธีที่จะแนะนำใน blog รอบนี้ นั่นก็คือ upgrade K2 ไปเป็น version 4.6.9 และใช้ for each!!! แต่วิธีนี้ ตัวเลือกที่จะนำมา filter ต้องไปมากจนเกินไปนะครับ ส่วนเหตุผลว่า ทำไมต้องไม่มากจนเกินไปจะเฉลยอยู่ในวิธีทำครับ

ผลลัพธ์ที่อยากได้จากการทำงานนี้ก็คือ เราอยากเลือกภาค โดยใช้ check box list อันบน และแสดงผลจังหวัดใน check box list ด้านล่าง

Testing

อันดับแรก เราต้องวาง layout ซะก่อน สิ่งที่ต้องมีคือ check box list 2 อันสำหรับใส่ตัวเลือก และ data label จำนวนเท่ากับตัวเลือกที่จะมา filter

Layout

หลังจากเรา set SmartObject สำหรับดึงข้อมูลภาค และจังหวัดในกับ check box list แล้ว (ตรงนี้ผมไม่ได้ capture ให้ดูนะครับ เพราะน่าจะทำกันได้อยู่แล้ว ถ้ายังทำไม่ได้ให้ลองดูใน help ของ SmartForms นะครับ) ให้เข้าไป disable rule สำหรับ populate จังหวัดใน rule initialize ก่อน

View Initialize

Disable Province

จากนั้นให้สร้าง Rule ใหม่ขึ้นมา แต่ไม่ต้องเลือก Event ที่จะผูกกับ Rule นั้น แค่ให้ตั้งชื่อ Rule ไว้ (สามารถ double click ตั้งชื่อได้ ตรงตำแหน่ง CheckdlbRegion6 ในรูปด้านล่าง) ให้ใส่ condition เพื่อตรวจสอบว่า data label ตัวสุดท้ายมีค่าหรือไม่ ถ้ายังไม่มีให้ทำ action transfer data

CheckdlbRegion6

ใน action transfer data ให้เรานำ property ที่ต้องใช้จาก check box list ที่จะนำมา filter มาใส่ไว้ใน data label

dlbRegion6 Transfer

เมื่อเสร็จแล้วก็ให้กด Finish rule และให้สร้าง Rule เพิ่มขึ้นอีก เพื่อตรวจสอบ data label ตัวรองสุดท้าย (ในกรณีของผมคือ ตัวที่ 5) วิธีการตรวจสอบก็จะเหมือนเดิม คือ ตรวจสอบว่า data label มีค่าหรือไม่ ถ้าไม่มีค่า ให้ transfer property ของ check box list มาใส่ใน data label แต่มีส่วนเพิ่มคือ ถ้า data label มีค่าแล้ว ให้ไปเรียก rule สำหรับตรวจสอบ data label ตัวถัดไป โดยใช้ action execute another rule

CheckdlbRegion5

ให้ทำซ้ำแบบนี้ไปเรื่อยๆ จนครบจำนวน data label ที่เรามีก็จะได้ rule ขึ้นมาตามด้านล่าง จะเห็นว่า ยิ่งเรามีตัวเลือกในการ filter มาก จะต้องสร้าง data label มากขึ้น และ rule ตรงนี้ก็จะเยอะขึ้น

After Add Checkdlb Rule

ในขั้นถัดไป เราก็จะ add rule ที่จะทำงานตอน check box list ที่เก็บข้อมูลภาคเปลี่ยนแปลงกัน ให้เลือก event change ของ check box list จากนั้นใช้ action transfer data เพื่อเคลียร์ข้อมูลออกจาก data label ที่เราไว้ใช้เก็บข้อมูล โดยเลือก check box ด้านหน้า control และปล่อยตรงส่วนค่าที่ต้อง set เป็นว่างๆ ไว้ตามด้านล่าง

Set Blank Data

จากนั้นให้ใช้ for each ซึ่งจะอยู่ใน tab condition มาต่อกับ transfer data ที่ใช้เคลียร์ข้อมูล data label

For Each

ให้เลือก state ของ items เป็น Checked (ซึ่งหมายถึง เราจะวน loop ไปทุก item ที่เราเลือก) ใน control check box list ตัวที่เป็น filter โดยใน for each ให้ใส่ action execute another rule ที่เป็น rule ที่เราเอาไว้ตรวจสอบว่า data label มีข้อมูลหรือไม่ และหลังจาก for each ให้ใส่ action สำหรับ populate data เข้าไปที่ check box list อันที่สอง และให้เรากด configure เพื่อ set condition ในการ populate data

Configure

ให้กดไปที่ tab Filter และเลือก Advanced Option จากนั้นให้ใส่ filter เพื่อ filter data จาก data label โดยใช้ condition Or

Advanced Filter

Set Or

ส่วนสุดท้ายที่แนะนำให้ทำ (แต่ไม่ได้จำเป็น) คือ ให้เปลี่ยน then ไป also ในส่วนที่ highlight ไว้ การเปลี่ยนจาก then เป็น also จะทำการ lock หน้าจอให้ user กดเลือกอะไรเพิ่มเติมไม่ได้ในขณะที่ rule ทำงานอยู่ แต่ถ้าไม่ต้องการ lock ตรงนี้สามารถใช้เป็น then ได้นะครับ (แต่ก็อาจจะทำให้การทำงานผิดพลาดได้เหมือนกัน)

Change To Also

โดยสรุปการทำงานทั้งหมดที่ set ไปด้านบนจะเป็นตามด้านล่างครับ

1. นำข้อมูลจาก check box list อันแรกออกมาเป็น for each มาพักใส่ data label ไว้

2. นำข้อมูลใน data label ที่มี ไป filter data เพื่อแสดงข้อมูลให้ถูกต้องใน check box list อันที่สอง

ทำซะยาว สรุปได้แค่ 2 ข้อซะงั้น…สำหรับคราวนี้อาจจะยาวหน่อย และไม่แน่ใจว่า จะเขียนแล้วอ่านกันเข้าใจไหม ยังไงถ้าไม่เข้าใจสามารถสอบถามได้นะครับ เจอกันใหม่คราวหน้าครับ 🙂

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s