Trick เล็กๆ เพื่อ UX ที่ดี

สวัสดีครับไม่ได้อัพเดทบทความมานานเลย วันนี้มี Tick เล็กๆ ในการทำให้หน้า UI ของ Smartform ให้ ประทับใจลูกค้ามาฝากกันครับ

สำหรับ K2 developer แล้ว ทราบกันดีกว่า K2 Smartform มี Theme ที่ ทำให้ K2 Smartorm ทำงานแบบ responsive เพื่อปรับการแสดงผลบน browser บน desktop/laptop หรือ mobile ได้อย่างเหมาะสม แบบนี้

ListViewUX01.png
ภาพเวลาแสดงผลผ่าน Desktop/ Laptop browser

ภาพเวลาแสดงผ่าน Mobile Browser จะเห็นว่าภาพทางซ้าย ส่วน List View มีการปรับ layout ให้สวยงาม แต่ ทางขวามือ  List View จะเบียดๆ กัน ซึ่งปกติ List View จะไม่เหมาะสมในการแสดงบน Mobile device

แต่… เรามีเทคนิคในการแก้ไขได้ ด้วยการใช้ Feature ของ K2 Smartform เองด้วยคือ

  1. K2 Smartform รองรับ View ได้มากกว่าหนึ่ง View บน Form และยังมี Rule “Show a View”, “Hide a View”
  2. K2 Smartform สร้างมาตรเช็ค condition ต่างๆ ได้ เช่น Client Platform / Screen Width และอื่นๆใ
  3. List View สามารถสร้าง Custom Column เพิ่มเติมได้
  4. มี Expression ที่ใช้ในการจัดการข้อมูล ผ่าน Data Label ที่มี Option “Warp Text” และ “Literal”

มาถึงตรงนี้ เพื่อนๆ ก็น่าจะร้อง อ๋อ กันแล้วใช่มั้ยครับ 🙂  ด้วย feature และ option ด้านบน จะทำให้ หน้าจอ List View บนฟอร์ม ที่เปิดด้วย mobile browser สวยงามขึ้นแล้วแบบภาพนี้ครับ

ListViewUX06.png

หาก เพื่อนๆ สนใจว่าขั้นตอนการสร้างเป็นอย่างไร แบบละเอียด ลองคอมเมนท์ไว้นะครับ ผมจะหาเวลาเป็นเป็น วีดีโอไว้ให้เห็นาแบบละเอียดยิบได้เลย หวังว่า Trick ง่ายๆ ตัวนี้จะทำให้ เรามีหน้าจอ ที่ตอบโจทย์ผู้ใช้งาน ที่อยาก ดูข้อมูลแบบ List บน หน้าจอขนาดเล็กแล้วนะครับ

สำหรับวันนี้ สวัสดีครับ

เปลี่ยนใจมาเขียนเพิ่ม
ขั้นแรก ให้ สร้าง View เพิ่มก่อนครับ (คลิกที่รูป ดูภาพใหญ่ๆ ชัดๆ นะครับ)
ListViewUX07-1.png

ใน Expression ก็เขียนประมาณนี้ ประกอบ HTML ปกติ
ListViewUX07-2.png

เอา วิวมาวางที่ฟอร์มเดียวกับ (ตรงนี้ ต้องคำนึงเรื่องการ execute list view ที่เกี่ยวข้องก็พอนะครับ ให้เช็คดีๆ ไม่งั้นจะทำให้ ช้าเพราะโหลดคู่
ListViewUX08

ใน Rule กำหนด แบบนี้
ListViewUX09

ใน “an advance condition” เราก็เช็ค เงื่อไขประมาณนี้ได้ หรืออาจจะเพิ่มเงื่อนไขอื่นๆ ที่เหมาะสม
ListViewUX10
ลองทดลองกันดูนะครับผม 🙂

Advertisements

[Tip] – Clear Data ใน Drop Down List

สวัสดีครับ วันนี้มีคำถามจากทางบ้าน (บ้านไหน?) มาอีกแล้ว เกี่ยวกับการ clear ค่าใน Drop Down List ว่าทำอย่างไรโดยปกติเวลาเราทำ view ที่เชื่อมต่อกับ SmartObject อยู่แล้ว เราสามารถ reset ค่าทั้งหมดของ view นั้นได้ง่ายๆ โดยใช้ method “Clear”

ยกตัวอย่าง เรามี view ตามด้านล่าง

Before Reset

ใน rule ของปุ่ม “Reset” เราเรียก method “Clear”

Method Clear

หลังจากกดปุ่ม “Reset” ผลที่ได้จะเป็นตามด้านล่าง

After Reset

ทีนี้ถ้าเราอยาก clear ค่าแค่เฉพาะ control ที่เป็น Drop Down List ใน view เราจะทำอย่างไร (อันนี้ใช้ได้เฉพาะ Drop Down List ที่เลือก option “Allow Empty Selection” เท่านั้นนะครับ) ยกตัวอย่างว่า เรามี View แบบด้านล่าง เป็น Drop Down List ให้เลือกจังหวัด

Runtime

สิ่งที่คิดได้อย่างแรกเลยคือ ก็ใส่ data ที่เป็นค่าว่างลงไปซิ ไม่เห็นจะยากเลย ใช้ Rule “Transfer data” ก็ได้ แต่อนิจจาเรื่องกลับไม่ง่ายดายขนาดนั้น….เพราะใน Rule “Transfer data” เราไม่สามารถเรียก Function “Empty String” ที่มีอยู่ใน Operators ได้ ดังนั้นสิ่งที่เราจะต้องทำมีตามด้านล่าง (จนกว่า เขาจะใส่ Operators ให้เรียกได้ใน Rule นั่นแหละ)

อย่างแรกคือ เพิ่ม Data Label เข้าไป

Designer

จากนั้นสร้าง Expression ให้ Data Label อันนี้ โดยใส่ “Empty String” ลงไป (Empty String จะอยู่ใน Operators category ที่เป็น Text นะครับ เผื่อใครหาไม่เจอ)

Expression

จากนั้นในปุ่ม Reset เราก็ทำการเพิ่ม Action “Transfer data” เข้าไป

Rule

ใน Context Browser เราจะเห็น Expressions ที่เราสร้างไว้ ก็ลากมา assign ค่าได้เลย หรือถ้าไม่อยากใช้ Expression ก็สามารถลาก Data Label ที่สร้างไว้มา assign ค่าได้เช่นกัน

Rule2

สำหรับคราวนี้ก็มีเท่านี้นะครับ ขอลาไปก่อนครับ 🙂