การเพิ่ม Tab ที่เชื่อมโยงไปยัง SaaS (เช่น Smartform) บน MS Team #1

สวัสดีครับเพื่อนๆ บล็อกนี้จะพิเศษกว่าบล็อกอื่นๆเล็กน้อย คือผมไปเจอบทความที่น่าสนใจจะเพื่อนร่วมงาน ฝั่งยุโรป เลยขออนุญาต มาแปลเป็นภาษาไทย ให้ได้อ่านกันง่ายๆครับ

บทความนี้จะเกี่ยวกับการ customize Microsoft Team ให้แสดง Smartform ของ K2 ได้ครับสำหรับใครที่ยังไม่รู้จักกับ MS Team (ไว้ว่างๆ จะมาเล่าให้ฟัง) แต่เอาเป็นว่าอ่านไปเล่นๆ ก่อน

Translated with permission from  https://www.dragan-panjkov.com/adding-third-party-saas-as-a-tab-in-microsoft-teams

Tab บน MS Team เป็นช่องทางที่ดีมากๆ สำหรับการเชื่อมโยงกับเว็บภายนอก เพื่อให้เกิดการใช้งานและเข้าถึงข้อมูลเนื้อหาต่างๆ ได้ง่ายสำหรับผู้ใช้ทั่วไป ในบทความนี้จะผมจะแสดงให้เห็นถึงขั้นตอนการเชื่อมโยง SaaS ใดๆ เข้ามาไว้ใน Tab ใน Microsoft Team และทำให้กลายเป็นแอพที่ใช้งานผ่าน MS Team

To create a Tab for Microsoft Teams, we need to do the following:
ในการจะสร้าง Tab สำหรับ MS Teams ต้องทำตามขั้นตอนต่อไปนี้

  1. เราต้องตัดสินใจก่อนว่า Tab ที่เราจะเพิ่มเข้าไปนั้นจะเป็นแบบ Static หรือว่าแบบที่ Configure ได้ โดย แบบ Static จะใช้สำหรับ Personal Scope ส่วน Tab แบบที่ Configure ได้ จะสามารถใช้กับ Channel ใด หรือมากกว่าได้ หรือ อาจจะใช้กับ Group Chat ก็ได้เช่นกัน
  2. เข้าไปปรับแก้ หน้าเพจ ที่เป็น SaaS ให้รองรับการเป็น Content Page บน MS Teams ได้
  3. สำหรับ configurable tabs นั้นเราจต้องสร้างเพจสำหรับ configuration ด้วย แต่ถ้าเป็น Static Tab ก็ข้ามข้อนี้ไปได้เลย
  4. สร้าง app manifest ด้วย Teams App Studio.
  5. ใช้งาน app ที่สร้างขึ้นมาใหม่บน MS Teams

Static Tabs กับ Configurable Tabs

ความแต่ต่างทางเทคนิคหลักๆ ระหว่าง Static Tab กับ Configurable Tab ก็คือ URL ของ Content page สำหรับ Static Tab จะเป็นการระบุฝั่งไปตรงๆ ใน app manifest ซึ่งต่างจาก Configurable Tab ตรงที่เราไม่จำเป็นต้องฝั่ง Content page ลงไปที่ app manifest,  แต่จะใช้การบอกให้ manifest ชี้ไปยัง Configuration page ที่เราสามารถระบุ content page ที่ต้องการให้ใช้บน Tab ได้อีกทีหนึ่ง

สำหรับเพื่อนๆ ที่ต้องการทราบรายละเอียดเกี่ยวกับ Tabs สามารถตามไปอ่านได้ที่: https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/tabs/tabs-overview

Configure page มาใส่ไว้ใน Tab

จาก ข้อที่สองก่อนที่จะนำ content page ของเราไปใส่ใน tab เราก็ต้องตระเตรียมให้เพจของเราพร้อมเสียก่อนโดยการ เพิ่ม reference ของ Microsoft Teams JavaScript client SDK ในหน้าเพจของเราโดยสร้าง script tag ตามตัวอย่างด้วย

msteam-tab01

และที่สำคัญ configuration pages จะต้อง handle configuration ของ tab โดย (อ่านรายเอียดเพ่ิมเติม):

  • เรียกใช้งาน
    microsoftTeams.settings.setSettings

    เพื่อที่จะ configure content page และค่าอื่นๆสำหรับ tab

  • และเรียกใช้งาน
    microsoftTeams.settings.setValidityState(true);

    เพื่อจะให้แสดงปุ่มบันทึกค่าบนหน้าต่างที่แสดงขึ้นเมื่อ หน้าสำหรับ configure ถูกโหลดขึ้นมแสดงเป็นหน้าต่างอีกหน้าต่างหนึ่ง

นอกจากนี้ ทั้ง Content page และ configuration page นั่นต้องอนุญาติให้ใช้งานผ่าน iframe ได้ สำหรับรายละเอียดอื่นๆ สามารถตามอ่านได้ที่ : https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/tabs/tabs-requirements

App Studio

ถึงแม้เราเราจะสามารถสร้าง app manifest บน MS Team ได้ แต่การใช้ การสร้างด้วย App Studio เป็นทางเลือกที่ดีกว่า (อ่านเพิ่มเติมได้ที่: create manifest using App Studio). App Studio ในขั้นตอนนี้จะช่วยในการ ตรวจสอบ (validations) และ ช่วยเพิ่ม setting ที่จำเป็นให้อย่างอัตโนมัติ เช่น เมื่อเราเพิ่ม URL ใน configuration page, App Studio ก็จะไปเพิ่ม domain ของเพจนั้น ใน validDomains ให้อัตโนมัติ

เราสามารถ ติดตั้ง App Studio บน MS Teams จาก Teams Store ดังภาพ:

image

และเมื่อติดตั้งเรียบร้อยแล้ว เราจะสามารถเรียกใช้ App Studio จาก MS Teams ได้:

image

เริ่มใช้งาน Apps บน MS Teams

เมื่อเราสร้าง app เสร็จเรียบร้อยแล้วเราก็สามารถนำมาใช้งาน MS Team ได้ โดยวิธีที่ง่ายที่สุดคือการ upload ผ่าน link “upload a custom app” ดังภาพ

image

นอกจากนี้เราต้องเปิดการใช้งาน sideloading สำหรับ Teams apps ในส่วนของ Office 365 administration. ขั้นตอนการเปิดการใช้งานสามารถอ่านได้ที่: https://docs.microsoft.com/en-us/microsoftteams/admin-settings

ในบทความต่อไปผมจะแสดงให้เห็นวิธีการนำ SaaS อย่างเช่น K2 Smartform มาเป็นตัวอย่างในการใช้งานร่วมกับ MS Team โดย SmartForms นั้นเป็นส่วนหนึ่งของ K2 blackpearl (up to v4.7) และ K2 Five ทั้ง on-premises และ บน K2 Cloud. ซึ่งช่วยให้เราสร้างหน้าจอแสดงผล ข้อมูลและอัพเดทข้อมูลจากหลายๆ แหล่ง โดยใช้เพียง browser ในการสร้างและออกแบบ Smartform ผ่าน K2 Designer

Feel free to get in touch on Twitter: www.twitter.com/panjkov if you have any questions, comments or need clarifications. Any feedback is more than welcome. (ขอไม่แปลประโยคนี้นะครับ เพราะถ้าจะติดต่อไปต้องเขียนเป็นภาษาอังกฤษ เป็นอย่างน้อย)

Translated with permission from  https://www.dragan-panjkov.com/adding-third-party-saas-as-a-tab-in-microsoft-teams

สำหรับตอนแรก ขอจบเท่านี้ก่อน ตอนหน้าเราจะมาทำส่วนที่จะนำ K2 Smartform มาใส่ไว้ใน MS Team กันครับครับ
สวัสดีครับ

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

[Management] – Search Role in K2 [EN Version]

Today we’ll take about role in K2. We know that K2 Role use to manage group of user when we didn’t use AD group. We can create and manage role using Management console in workspace (K2 version prior to K2 Five) or using K2 Management site (K2 version 4.7 and K2 Five). But the thing that still missing is search function.

Imagine that if we have more than 100 roles in system and want to add/remove user in role or want to know which user belong to which role? How can we solve this problem? Today I got a tool for you. Please follow below step

  • Create stored procedure using script below in any database that can reach K2. You can also create in K2 database but please be aware. Because when we upgrade version or patch the stored procedure may be disappear.

CREATE PROCEDURE [dbo].[sp_FindRoleByUser] (

@pUserName NVARCHAR(447)

) AS

BEGIN

SELECT i.[Name]

FROM   [K2].[Identity].[Identity] i

INNER JOIN    [K2].[Identity].[RoleItem] r

ON     i.ID = r.IdentityID

WHERE  i.[Type] = 2

AND    r.[FQN] = @pUserName

END

After deploy you can use form at {url}/Runtime/Runtime/Form/UserRole.Form/

Hope this can help you when working with role 🙂

[Management] – Search Role ใน K2 [TH Version]

สวัสดีครับ ไม่ได้มา update blog ซะนาน วันนี้มาด้วยเรื่องของ role ใน K2 หลายๆ คนคงทราบอยู่แล้วว่า Role ไว้ใช้เวลาที่เราอยากส่งงานไปหาคนหลายๆ คน แต่เราไม่มี group บน AD ก็เลยมาใช้ระบบจัดการใน K2 แทน วิธีใช้งานก็ไม่ยาก สามารถเข้าไปเพิ่ม Role ผ่านหน้า workspace (ก่อน K2 Five) หรือผ่านหน้า Management (K2 4.7 และ K2 Five) ได้เลย แต่สิ่งที่หายไปสำหรับ Role ใน K2 นี้ก็คือ ไม่มี function ในการ search นั่นเอง

ลองนึกถึงเวลาที่เรามี Role เยอะๆ มากกว่า  100 ขึ้นไป (จริงๆ แค่ประมาณสิบปลายๆ ก็แย่แล้ว) แล้วต้องการเข้าไปแก้ไขคนใน role หรืออยากจะรู้ว่า user นี้อยู่ใน Role ไหนบ้าง จะทำยังไงดี?? วันนี้เรามี tool มีนำเสนอ โดยทำตาม step ด้านล่าง

  • สร้าง stored procedure ตาม script ด้านล่างใน database ที่เห็น database K2 จะสร้างไว้ใน database K2 ก็ได้ แต่ว่า ถ้ามีการ upgrade version หรือ patch stored procedure นี้อาจจะหายไปได้

CREATE PROCEDURE [dbo].[sp_FindRoleByUser] (

@pUserName NVARCHAR(447)

) AS

BEGIN

SELECT i.[Name]

FROM   [K2].[Identity].[Identity] i

INNER JOIN    [K2].[Identity].[RoleItem] r

ON     i.ID = r.IdentityID

WHERE  i.[Type] = 2

AND    r.[FQN] = @pUserName

END

เมื่อ deploy แล้วสามารถใช้งาน form ได้ที่ {url}/Runtime/Runtime/Form/UserRole.Form/

หวังว่า จะช่วยทำให้ชีวิตในการใช้ Role ของทุกคนง่ายขึ้นนะครับ 🙂

[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

[Authentication] – Using LDAP with K2

สวัสดีครับ ช่วงนี้ได้มีโอกาสทำอะไรใหม่ๆ อีกอย่างเลยเอามาเขียนเป็น blog ซะหน่อย นั่นคือ configure K2 ให้มองเห็น LDAP ที่ไม่ใช่ LDAP ของ AD แต่ถ้าเป็น LDAP ของ AD ก็น่าจะใช้ได้เหมือนกัน โดย step ที่ต้องทำมีตามด้านล่าง

  • Register Security label ของ LDAP
  • Configure Claim ใน SmartForms

 

เรามาเริ่มจาก Register Security label ของ LDAP ให้เปิด database K2 ที่ table HostServer.SecurityProvider

provider

ให้ copy GUID ของ ProviderClassName ที่เป็น SourceCode.Security.Providers.LdapProvider.Trusted.Ldap เอามาใส่ใน script ด้านล่าง ส่วนที่เป็นตัวแปร AuthSecurityProviderID

ส่วนอื่นที่ต้องเปลี่ยนจะมีหลายอันตาม highlight สีน้ำเงิน สามารถไปดูรายละเอียดได้จาก https://help.k2.com/onlinehelp/k2blackpearl/icg/4.7/default.htm#Configure/UM-LDAP-config.htm%3FTocPath%3DConfigure%7CUser%2520Managers%7C_____3 นะครับ

DECLARE @SecurityLabelName NVARCHAR(20) = ‘K2LDAP‘; –Update as needed
DECLARE @XmlConfig XML =
‘<AuthInit><LdapConnection LdapServer=”Server Name” LdapServerPort=”389” LdapSsl=”false” LdapAuthTypeConnect=”Basic” LdapAuthTypeAuthenticateUser=”Basic” LdapResolveAuthenticationUserToDistinguishedName=”true” LdapAutoBind=”false” LdapScope=”Subtree” LdapConnectIntegrated=”false” LdapConnectUserName=”uid=username,ou=People,dc=xxx,dc=xxx” LdapConnectUserPassword=”password” LdapTimeout=”0″ LdapProtocolVersion=”3″ LdapServerCertificatePath=”” /><LdapUserBaseObject>ou=People,dc=xxx,dc=xxx</LdapUserBaseObject><LdapUserSearchFormatString>(uid={0})</LdapUserSearchFormatString><LdapUserGroupSearchFormatString>(memberOf={0})</LdapUserGroupSearchFormatString><LdapUserAttributes><K2LdapMapping K2Name=”ID” LdapName=”uid” ObjectType=”System.String” /><K2LdapMapping K2Name=”Name” LdapName=”uid” ObjectType=”System.String” /><K2LdapMapping K2Name=”Email” LdapName=”mail” ObjectType=”System.String” /><K2LdapMapping K2Name=”CommonName” LdapName=”cn” ObjectType=”System.String” /><K2LdapMapping K2Name=”UserPrincipalName” LdapName=”uid” ObjectType=”System.String” /><K2LdapMapping K2Name=”DisplayName” LdapName=”cn” ObjectType=”System.String” /><K2LdapMapping K2Name=”Mobile” LdapName=”mobile” ObjectType=”System.String” /></LdapUserAttributes><LdapGroupBaseObject>ou=Group,dc=xxx,dc=xxx</LdapGroupBaseObject><LdapGroupSearchFormatString>(uid={0})</LdapGroupSearchFormatString><LdapGroupMemberSearchFormatString>(cn={0})</LdapGroupMemberSearchFormatString><LdapGroupAttributes><K2LdapMapping K2Name=”ID” LdapName=”cn” ObjectType=”System.String” /><K2LdapMapping K2Name=”Name” LdapName=”cn” ObjectType=”System.String” /><K2LdapMapping K2Name=”Email” LdapName=”mail” ObjectType=”System.String” /><K2LdapMapping K2Name=”Member” LdapName=”member” FullOnly=”true” SearchQuery=”(&amp;(objectCategory=Person)(objectCategory=User))” SearchResultProperty=”cn” ObjectType=”System.Collections.ArrayList” /></LdapGroupAttributes></AuthInit>’
DECLARE @SecurityLabelID UNIQUEIDENTIFIER = NEWID(); –Assigning new GUID
DECLARE @AuthSecurityProviderID UNIQUEIDENTIFIER = ‘EE554827-1C61-46EF-9146-293CE74E55C9‘;
DECLARE @AuthInit XML = @XmlConfig;
DECLARE @RoleSecurityProviderID UNIQUEIDENTIFIER = @AuthSecurityProviderID;
DECLARE @RoleInit XML = @XmlConfig;
DECLARE @DefaultLabel BIT = NULL; –1 = true, NULL and 0 = false

DELETE FROM [SecurityLabels] WHERE SecurityLabelName = @SecurityLabelName;
INSERT INTO [SecurityLabels] VALUES (@SecurityLabelID, @SecurityLabelName, @AuthSecurityProviderID, @AuthInit, @RoleSecurityProviderID, @RoleInit, @DefaultLabel)

จะมีบางอันที่อาจจะหาลำบากคือ ldapname กับ userbaseobject แนะนำให้ใช้พวก ldap browser เช่น http://www.ldapadministrator.com หรือ http://www.ldapadmin.org เพื่อหาข้อมูลที่ถูกต้องได้

ldap browser

เมื่อได้ script เรียบร้อย เราก็เอาไปรันใน database K2

LDAP Register

เสร็จแล้วให้ restart service K2 และเราก็พร้อมที่จะทำ step ถัดไป คือการ configure claim ให้เข้าไปที่ management site ของ K2 ไปที่ Authentication => Claims => Claims แล้วกด New

02

ใส่ข้อมูลตามด้านล่าง

03

กดปุ่ม OK แล้วไปทดสอบด้วยการ login ผ่าน form ได้เลย

Login

ถ้าใครไปลองแล้วติดอะไรก็สอบถามได้นะครับ ในส่วนของ blog นี้ ใช้ได้กับทั้ง K2 Five และ K2 blackpearl นะครับ ลองแล้วใช้งานได้ทั้ง 2 version ครับ ไว้เจอกันใหม่คราวหน้าครับ 🙂