K2 Operation Insight using Power BI

สวัสดีครับปีใหม่ครับ ชาว K2 ทุกท่านครับ ในปี 2019 นี้ K2 Ranger เราก็มี บทความมาอัปเดทกันเหมือนเช่นเคยครับ

ในปีที่ผ่านมา กระแสของการนำ Data มาใช้ในองค์กรก็มีมากขึ้นเรื่อยๆ หลายๆ ที่ เริ่มพูดถึง IoT, Big Data, AI กันอย่างแพรหลาย ซึ่งจากข้อมูลเหล่านั้นเราสามารถนำไปต่อยอดได้มากเลยเลยครับ

คราวนี้ถ้าเราลองกลับมาดูในองค์กรของเราที่ใช้งาน K2 อยู่ เจ้า K2 เองก็ผลิตข้อมูล ที่เกี่ยวข้องกับกระบวนการทำงานให้กับแต่ละองค์กรเองไม่ใช่น้อยเลย ซึ่งข้อมูลเหล่านั้นเราเรียกมันว่า Operation Insight หรือข้อมูลเชิงลึกของกระบวนการต่างๆในองค์กรเรานั่นเอง

หากจำกันได้ ตอนที่ภัทรแนะนำ K2 Workspace ที่เป็น feature ใหม่ของ K2 (ตอนนี้เก่าแล้ว) จะมีเรื่องเกี่ยวกับ Operation Insight เช่นเดียวกัน  (ถ้าจำไม่ได้ลองดูวีดีโอด้านล่างครับ)


คราวนี้ หลายๆ คนก็อาจจะมีคำถามว่าแล้วถ้าเราอยากได้ ข้อมูลไปใช้กับ BI Tool ตัวอื่นๆ หละ จะทำยังไงได้บ้าง วันนี้เราจะมาคุยเรื่องนี้กันครับ

Continue reading K2 Operation Insight using Power BI

Advertisements

Tips : K2 Smartform : วิธีการลบรายการใน List view มากกว่าหนึ่งรายการ

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

(จริงๆ คุณกายส่งมาให้ซักพักแล้วครับแต่ แอดฯเพิ่งมีเวลามาลงไว้ให้ครับ ขออภัยมา ณ ที่นี้ด้วยครับ)

1.กำหนด Allow multiple row selection ให้เป็นแบบในรูป (เพื่อให้สามารถกด Shift ค้างไว้ และ เลือกได้มากกว่า1รายการ)

deleteMulipleItem01

2.สร้างปุ่ม “ลบรายการที่เลือก” และกำหนด Rule ดังนี้

1.สร้าง condition for each item in list view เพื่อวน Loop

2 Remove selected

3.apply the changes

deleteMulipleItem02

ทดสอบ

1.ค้นหารายการ ได้ทั้งหมด 7 รายการ
deleteMulipleItem03

2.เลือกรายการที่ต้องการลบ (4รายการ)
deleteMulipleItem04

3.กดปุ่ม “ลบรายการที่เลือก” จะเหลือ 3 รายการดังรูป
deleteMulipleItem05

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
ลองทดลองกันดูนะครับผม 🙂

[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 ได้ เช่น เลขที่หนังสือหลังจากการอนุมัติเป็นต้น