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

[K2 SmartForms] – Can’t click OK to finish rule in designer

สวัสดีครับ หลายๆ คนคงเคยเจอปัญหาอยู่บ้าง เวลาเราใส่ action เข้าไปใน SmartForms เยอะๆ จะไม่สามารถกดปุ่ม OK เพื่อ save action ที่เราใส่เข้าไปได้ หรือกดปุ่ม Finish ที่อยู่ใน form ก็ไม่ได้เช่นกัน ถ้าเคยเจอปัญหานี้ เรามีวิธีแก้ไขมาให้ 2 วิธี โดยทั้ง 2 วิธีเป็นการไปแก้ไข configure ใน web.config ของ SmartForms ที่ site designer (อยู่ใน {install dir}\K2 blackpearl\K2 smartforms Designer)

  • แก้ไขค่า MaxRequestLength จากค่า default เป็น “2097151” ซึ่งเป็นค่ามากที่สุดที่ใส่ได้

designer

  • ถ้าใช้วิธีแรกแล้วยังไม่หาย ให้เพิ่ม tag ตามด้านล่างลงไป ภายใต้ tag requestFiltering

<requestLimits maxAllowedContentLength=”300000000″ />

designer2

เมื่อแก้ไขแล้ว ให้ save web.config และ reset IIS จากนั้นลองใช้งานดู ก็น่าจะ save form ได้ตามปกติครับ  🙂

Smartform Thought: ซ่อนแสดงทำแบบไหนดี?

สวัสดีครับ หลังจากปล่อยให้ Ranger ท่านอื่นเขียนเรื่องหนักมานาน วันนี้เรามาเรื่องเบาๆ บ้างดีกว่า วันนี้เรามาเบาๆ เกี่ยวกับ การใช้ Rule เพื่อให้เหมาะสมตามสถานะการณ์กันครับ

Continue reading Smartform Thought: ซ่อนแสดงทำแบบไหนดี?

[K2 SmartForms] – Nested If ที่ใฝ่หา

สวัสดีครับ ห่างหายไปนาน วันนี้ผมกลับมาพร้อมกับ feature ที่หลายๆ คนต้องการ นั่นคือ การทำ If ซ้อน If นั่นเอง แต่อย่าเพิ่งดีใจไป เพราะ feature ยังไม่มา!!! ที่มามีแต่วิธีที่ทำให้ได้ผลลัพธ์แบบเหมือนกันเท่านั้นเอง

ดังที่เข้าใจกัน จนถึง version ที่เขียนอยู่คือ K2 4.6.11 ยังคงไม่สามารถทำ Nested If ได้ แต่ SmartForms มีสิ่งที่เราสามารถใช้ทดแทนกันได้ นั่นคือ การ execute another rule นั่นเอง (ทำเสียง echo) หลายคนอ่านแล้วคงคิดว่า มันเกี่ยวกันอย่างไร จะช้าอยู่ไย เราไปดูกันเลยดีกว่า

Sample Screen

สมมุติว่า เรามีหน้าจออยู่อันนึง ต้องการตรวจสอบข้อมูลตอนกดปุ่ม Submit ดังนี้

  1. End Date ต้องมากกว่า Start Date
  2. ถ้าผ่าน condition แรก ต้องมาตรวจสอบ Amount ว่า มากกว่า 5,000 ไหม

ถ้าเราทำ coding ก็จะบอกเลยว่า ง่าย ทำ if ซ้อน if เลย แต่ถ้าเป็น SmartForms ที่ทำไม่ได้ล่ะ จะทำอย่างไรดี? ติ๊กต่อก…ติ๊กต่อก…ติ๊กต่อก…ถูกต้องนะคร้าบบบบ ใช้ execute another rule

ขั้นแรก สร้าง rule ที่ตรวจสอบ Amount มากกว่า 5,000 ไว้ก่อน โดยเป็น rule ที่ไม่ต้องผูกกับ event ใดๆ

Check Amount

ขั้นที่สอง สร้าง rule ตอนกดปุ่ม Submit ให้ตรวจสอบ End Date มากกว่า Start Date ถ้าผ่านก็ให้ไป Execute Another Rule ที่เราสร้างไว้ในขั้นแรกก็เป็นอันเสร็จเรียบร้อย ได้ Nested If มาใช้แล้ว

Another Rule

BtnClick

ในตัวอย่างนี้ ทำแค่ชั้นเดียว แต่เท่าที่จำได้เคยลองแบบหลายๆ ชั้นแล้วก็ใช้งานได้นะครับ ยังไงก็ใช้กันไปจนกว่าจะมี Nested If จริงๆ ก็แล้วกันครับ 🙂

 

[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

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