ตัวสร้างตัวกรอง
ฝังตัวสร้างตัวกรองของชั้นข้อมูล ส่งฟิลด์และตัวกรองเดิมเข้าไป แล้วรับตัวกรองที่ผู้ใช้สร้างกลับมา
widget filter-builder ให้ผู้ใช้สร้างตัวกรองที่มีชื่อจากกติกาบนฟิลด์ของตาราง แล้วส่งตัวกรองนั้นกลับมาให้หน้าของคุณ
URL และพารามิเตอร์
พารามิเตอร์ที่ขึ้นต้นด้วย _ เหมือนกันทุก widget ดู Widgets
| พารามิเตอร์ | ความหมาย | จำเป็น |
|---|---|---|
schema_source_item_id | id ของตารางที่ฟิลด์มาจาก widget อ่านฟิลด์จากตารางนี้เอง | ไม่ ถ้าส่ง schema |
schema | ฟิลด์ที่เลือกได้ ส่งด้วย post-widget-parameters ไม่ใช่ใน URL | ไม่ ถ้าใส่ schema_source_item_id |
value | ตัวกรองเดิมที่จะแก้ ส่งด้วย post-widget-parameters เช่นกัน | ไม่ |
ถ้าไม่มีทั้ง schema_source_item_id และ schema widget ไม่แสดงชื่อและกติกา
schema เป็นอ็อบเจกต์ที่ใช้ id ของฟิลด์เป็นคีย์ แต่ละฟิลด์มี type และ name และใส่ hidden: true เพื่อซ่อน widget ใช้ฟิลด์ชนิด String, Number, Boolean, DateTime, Date, Time และ OneToOne
value คือ { name, filters } และ filters คืออาร์เรย์ที่มีกลุ่มรากหนึ่งกลุ่ม
ข้อความ
ข้อความทั่วไปดู Widgets
| action | ทิศทาง | payload |
|---|---|---|
ready | widget ถึงหน้าของคุณ | ไม่มี ส่งหลังโหลดเสร็จ |
post-widget-parameters | หน้าของคุณถึง widget | { schema, value } ส่งหลัง ready |
done | widget ถึงหน้าของคุณ | { name, filters } ผู้ใช้ยืนยันตัวกรอง |
cancel | widget ถึงหน้าของคุณ | ไม่มี ผู้ใช้ปิดโดยไม่เอาตัวกรอง |
widget แทนค่าเดิมทั้งก้อนทุกครั้งที่ได้ post-widget-parameters ดังนั้นส่ง schema และ value พร้อมกัน
widget ส่ง done เมื่อตัวกรองมีชื่อเท่านั้น
กลุ่มคือ { decision: 'all' | 'any', children: [...] } กติกาคือ { type, field, decision, value } โดย decision เป็น ==, !=, <, <=, > หรือ >= ค่าวันที่และเวลาใน done เป็นสตริง ISO
ตัวอย่าง
ฝังด้วย iframe ตามที่ Widgets แสดง แล้วเพิ่มส่วนนี้
// frame คือ iframe ที่ src = `${site}/widgets/filter-builder?${params}`
// และ params มี schema_source_item_id ของตาราง
addEventListener('message', (e) => {
if (e.origin !== site || e.data.messageToken !== messageToken) return
const { action, payload } = e.data
if (action === 'ready') {
frame.contentWindow.postMessage(
{
messageToken,
action: 'post-widget-parameters',
payload: { value: { name: 'ตัวกรองของฉัน', filters: [] } },
},
site
)
}
if (action === 'done') save(payload) // { name, filters }
if (action === 'cancel') frame.remove()
})