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 smartform] VLog – ตัวอย่างการใช้งาน BarCode/ QRCode

สวัสดีครับไม่ได้เขียน Blog มาซักพักนึงวันนี้ เอาตัวอย่างการประยุกต์ใช้งาน BarCode reader control ที่สามารถอ่าน ได้ทั้ง Barcode และ QR Code มาให้ลองดูกันเล่นๆ ครับ ลองไปดูกันเลย

Continue reading [K2 smartform] VLog – ตัวอย่างการใช้งาน BarCode/ QRCode

[K2 smartform] เพิ่ม Select All check box ให้กับ List View

สวัสดีครับเพื่อนๆ จากคราวที่แล้ว ที่คุณกายได้มาแชร์เรื่อง การทำ Check Box บน List View ก็มีคำถามเพิ่มเติมเข้ามาว่า แล้วอยากทำ Select All จะมีแนวทางอย่างไร คุณกายเลยเพิ่มเติมเข้ามาให้ครบ ลองมาดูกันครับผม

การเพิ่ม Select All

เพิ่ม Rule ไปที่ ChkAll

การตรวจสอบวันหยุดจาก “Special & Exception Dates”

สวัสดีครับเพื่อนๆ วันนี้มีบทความ Trick & Tip มาฝากเพื่อนๆ อีกเช่นเคย บทความนี้ได้รับการแบ่งปันมาจาก “คุณกาย” แห่งห้อง K2 Technical Rock ครับ หากเพื่อน สนใจอยากส่งบทความเข้ามาบ้างสามารถแจ้งมาได้ที่ narapat@k2.com ได้เลยนะครับผม

สำหรับ การตรวจสอบวันหยุดจาก “Special & Exception Dates” จะทำได้ยากง่ายอย่างไรนั้นเชิญทัศนาได้ ณ บัดนาวว

Continue reading การตรวจสอบวันหยุดจาก “Special & Exception Dates”

[k2 smartform] การทำ Check Box บน List View

สวัสดีครับเพื่อนๆ สำหรับ K2 Ranger วันนี้ เราได้รับเกียรติจาก “คุณกาย” K2 Champion ที่คอยช่วยตอบปัญหาด้านเทคนิค ให้กับพี่ๆ น้องๆ ในห้อง K2 Technical Rock อยู่สม่ำเสมอ ทาง K2 Ranger ทีมเลยขอส่งเทียบเชิญให้ช่วยเขียนบทความให้กับคอมมูนิตี้ของเราครับ

และตอนนี้ คุณกายได้ส่งมาให้เรียบร้อยแล้ว K2 Ranger ขอขอบคุณ “คุณกาย” มา ณ ที่นี้ด้วยครับ

Sky - K2 Technical Rock
คุณกายกับหนุ่มน้อย

Continue reading [k2 smartform] การทำ Check Box บน List View

[K2 smartform] Google Map (Reusable) View

สวัสดีวันแห่งความรักครับ วันนี้มีทริคง่ายๆ ในการใช้ smartform แสดงแผนที่แบบที่ไม่ต้องฝั่งโค๊ดมาฝากครับ

googlemapview-01

ก่อนอื่นต้องเล่่าก่อนว่า K2 Smartform มี control ตัวนึงที่ชื่อว่า Location Service ซึ่งจะช่วยให้เราสามารถ หาพิกัด Lat / Long  คราวนี้พอได้มาแล้ว หลายๆ ครั้งเราอยากจะแสดงให้เห็นเป็นภาพบน map ซึ่ง หลักเราก็มักจะไปใช้ map ของ google ซึ่งมี api มาให้เราใช้งานได้สบายๆ แต่คราวนี้ ถ้าเราไม่อยากเชียนโค๊ดหละทำแบบไหนได้ง่ายสุด โดยที่

  • ถ้าเรียก view นี้ ต้องแสดงที่อยู่ปัจจุบันของเราได้
  • ต้องส่งค่า Lat / Long ไปให้แล้วมีการเปลี่ยนแปลง

พอได้ ฟีเจอร์ที่อยากได้แล้วเราก็มาดูเรื่อง องค์ประกอบ ว่าต้องใช้อะไรบ้าง

  • Google Map Key โดยหาได้จากที่นี่เลย https://developers.google.com/maps/ ใช้ฟรีได้ตามเงื่อนไข google นาจา
  • Certificate ที่ใช้ทำ SSL (https นั่นแหละจ้า)  ของเสียเงินที่ไม่ใช่ Self-Signed Certificate นาจา
  • Content URL control
  • K2 Designer (อันนี้แน่นอนนะ)

ต่อมา เราก็ต้องรู้ว่า การที่จะเรียกแผนที่ Google แล้วให้แสดง Pin แบบภาพข้างบนต้องทำยังไง ซึ่งง่ายมาก URL จะมีโครงสร้างแบบนี้ (ในอนาคตอาจมีการเปลี่ยนแปลงก็ตามดูเอกสารของ Google ได้เลย

https://www.google.com/maps/embed/v1/place?key=GoogleMapAPIKey&q=Lat,Long

พอรู้เช่นนี้แล้ว ง่ายแล้วใช่ปะหล่า เราก็จัดการ เอา control มาวางแบบนี้googlemapview-02

ซึ่งประกอบไปด้วย

คราวนี้เราก็ไปสร้าง Expression ที่ประกอบร่าง URL ขึ้นมา ตามโครงสร้างด้านบน (ด้วยฟังก์ชั่น Concatenate )

googlemapview-03

เพียงเท่านี้ เราก็จะได้ view ที่เก็บไว้ใช้ในการแสดงแผนที่สำหรับทุกๆ แบบฟอร์มที่ต้องการแล้ว

ง่่ายใช่ปะ 🙂

ไปละ

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

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

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

Update File ใน SmartObject ผ่าน SmartFileProperty

สวัสดีครับ พอดีมี Code Review กันในกลุ่มน้องๆ เลยเอา Solution นี้มาแชร์ครับ เป็นการ update เนื้อไฟล์ ผ่าน SmartFileProperty อันนี้เป็นวิธีที่เราใช้แปะ Signature และเขียน Activity log ไว้ในเนื้อเอกสารครับหลังจากการอนุมัติ  เนื้อหาต้นฉบับ

สำหรับ SmartObject ที่มีการเก็บ File เป็นหนึ่งใน Property ของ SmartObject นั้น เราสามารถดึง File ผ่าน SmartFileProperty มาแก้ไขเนื้อไฟลได้ในระหว่าง Workflow ยกตัวอย่าง Business Scenario ที่น่าจะเกิดขึ้นได้ดังนี้

  • ต้องการสร้างหน้าสรุปผล หลังจากเอกสารผ่านการอนุมัติเป็นที่เรียบร้อย เช่น มีการแปะ Log Activity ที่หน้าแรกว่า เอกสารผ่านการอนุมัติเมื่อวันไหน, Flow ในการเดินของเอกสารเป็นอย่างไร, ใครเป็นผู้อนุมัติในแต่ละขั้น
  • ต้องการ Stamp Signature หลังจากที่เอกสารผ่านการอนุมัติ

โดยวิธีที่เราจะเข้าไปแก้เนื้อไฟล์ของ SmartObject นั้น สามารถทำได้ผ่าน SmartFileProperty โดยมีขั้นตอนดังนี้

  • เริ่มต้นที่การไปดึงค่า file ออกมาจาก SmartObject  โดยอ้างอิงจาก path
  • แปลง file เป็น byte (ตัวอย่างคือ แปลงแล้ว parse เป็น pdfDocument)

byte[] pdfBytes = File.ReadAllBytes(@path);
PdfDocument pdf = new PdfDocument(pdfBytes);

  • เมื่อเราได้ Object File มาแล้วเราก็สามารถแก้ไขเนื้อใน pdf ได้ โดยในตัวอย่างนี้จะเป็นการแปะรูปลายเซ็นไปที่ตำแหน่งที่ต้องการ

Image firstApproverSignature = new Image(@firstApproverSignaturePath, 0, height – 50, 0.5f);
page.Elements.Add(firstApproverSignature);
//get approver timestamp from Activity Instance Destination
DateTime ts = DateTime.Parse(getProcessTimestamp(smoServer, processID, “First level Review”));
page.Elements.Add(new Label(ts.ToString(“G”, thInfo), 10, height – 30, 100, 20, Foxit.PDF.Font.LoadSystemFont(“leelawadee”)));

  • เมื่อเราเพิ่มเนื้อหาใน File เสร็จแล้ว เราก็ Update กลับไปที่ SmartObject เหมือนเดิมผ่าน SmartFileProperty

SmartFileProperty smartFile = (SmartFileProperty)smo.Properties[“File”];
byte[] stampFile = document.Draw();
smartFile.Content = System.Convert.ToBase64String(stampFile);
smo.MethodToExecute = “Save”;
smoServer.ExecuteScalar(smo);

เท่านี้เราก็สามารถ Update File ที่เก็บอยู่ใน SmartObject ได้ ซึ่งใน K2 Version 4.7 จะมี REST Service ขึ้นมา จึงคาดว่าน่าจะใช้ประโยชน์ในรูปแบบ Word Event ได้อีกด้วย เช่น มีการแปะ Word Control แล้วก็ update ผ่าน SmartObject ได้ เช่น เลขที่หนังสือหลังจากการอนุมัติเป็นต้น

K2 Online Material

สวัสดีครับ ในช่วงปีทีผ่านมามี นักพัฒนา องค์กรต่างๆ รวมถึงบริษัททีให้บริการสร้างซอฟต์แวร์โดยใช้ K2 blackpearl มีเพิ่มขึ้นค่อนข้างมาก ถึงแม้ว่าเราจะมีเทรนนิ่งประจำทุกเดือน (ซึ่งก็เต็มทุกเดือน) แต่ถ้าต้องรีบใช้จะทำยังไงดีหละ  ผมเลยขอเอาลิงค์ต่างๆ ที่เป็น resource ในการเรียนรู้ K2 มาฝากครับ

Step by Step สำหรับมือใหม่หัดคลิ๊ก – http://bit.ly/K2Tutorial

เน้นๆ แบบทุกซอกทุกมุม เพือสอบ K2 Certificate

K2 blackpearl Core – http://bit.ly/K2BlackpearlCore
K2 Smartforms builder – http://bit.ly/K2SmartformsBuilder
K2 Blackpearl Extension – http://bit.ly/K2BlackpearlExtensions
K2 Connect – http://bit.ly/K2Connect
 
คลิ๊กเลยย !!!

K2 Smartform – ThaiBahtText Label Control (แปลงค่าเงินบาทตัวเลขเป็นคำอ่านบาทภาษาไทย)

สวัสดีครับ

หายไปพักนึง ช่วงนี้ทีมยุ่งมากๆเลย ระหว่างที่หายไปก็ได้ไปสร้างงเจ้า SmartForm Custom Control มาหนึ่งตัว โดยการทำงานของมันคือ รับค่าตัวเลข แสดงผลเป็นภาษาไทย ซึ่งก่อนอื่นต้องบอกก่อนว่าโปรเจคนี้ได้แรงบันดาลใจต่อยอดมาจาก โปรเจค GreatFriends ThaiBahtText — https://github.com/greatfriends/ThaiBahtText  (ต้องขอบคุณ อ. สุเทพ มา ณ ที่นี้ด้วยครับที่เขียน dll ดีๆ มาแจกฟรีๆ)

หน้าตาก็จะเป็นประมาณนี้

2015-07-11_1333

แจกไว้แบบ community ครับ มีทั้ง source code มาให้เลย สามารถ แตกออกไป สร้างสรรค์กันต่อได้ตามสะดวก เป็น Creative Common : BY SA NC นะครับ Link source code บน Git Hub

วิธีการลองก็ง่ายมากๆ เข้าไปใน โฟล์ดเดอร์ Debug จะมี batch file ไว้ให้ครับ หรือ ถ้าลืมไปแล้ว อาจจะไปย้อนทบทวน Course K2 extension กันได้ครับ

ซึ่งในตัวที่ปล่อยไว้ จะยัง set style ไม่ได้นะครับ ยังทำไม่เสร็จ (ฮิๆ) ใครว่างช่วยทำเพิ่มเติมจะเป็นพระคุณต่อพี่น้องชาว K2 เป็นอย่างมากครับ เหมือนเดิมครับท่านใดอยากเขียน บทความ หรือแชร์ ทิป เทคนิคดีๆ ติดต่อมาได้ทันทีครับผม

สวัสดีวันจันทร์ ขอให้มีความสุขในการทำงานตลอดอาทิตย์ครับ