Consume REST Services with K2

สวัสดีครับ เนื่องจากใน K2 4.7 มี broker ใหม่เพิ่มเข้ามา และเป็น broker ที่เราน่าจะได้ใช้กันเยอะในอนาคต broker ตัวนี้ก็คือ REST service broker นั่นเอง

การเชื่อมต่อ REST service ใน K2 จะแตกต่างจากการเชื่อมต่อ web service อื่นๆ อยู่ตรงที่ เรารู้แค่ url ของ web service นั้นไม่พอ สิ่งที่ต้องมีถัดไปคือ descriptor file ใน format ของ JSON ถ้าเป็น REST service ที่เราเขียนเองก็อาจจะไม่ยาก เพราะเราสามารถ generate JSON ออกมาจาก swagger ที่เราเขียนได้ แต่ถ้าไม่ได้เขียนเองมี option ตามด้านล่าง

โดยในส่วนที่อยู่ใน blog นี้จะเป็นการเขียนเอง

ถ้าจะเขียน descriptor เอง เราควรรู้อะไรบ้าง?

  • Format ที่ REST Service response ออกมา
  • Swagger syntax ที่จะใช้เขียน เพื่อทำ mapping กับ service ที่เราจะใช้

ผมเลือก service จาก Accuweather (https://developer.accuweather.com) มาลองดู สามารถสมัครมาลองใช้ได้ฟรี แต่ service ก็จะ limit หน่อย (ถ้าใครอยากลอง ก็ไปสมัครแล้ว register app ก็จะได้ API Key ที่ต้องใช้ในมา) ใช้ได้ไม่กี่อัน แต่หลักๆ ของ service ที่มีให้คือ การพยากรณ์ต่างๆ

Weather API

ที่เราจะใช้กันคือ Location API เพื่อหาพื้นที่ที่ต้องการ กับ Forecast API เพื่อดูพยากรณ์ (จริงๆ อยากใช้ Weather Alerts มากกว่า แต่แบบฟรีใช้ไม่ได้ T-T)  อย่างที่บอก เริ่มแรกคือ ต้องไปลองเรียก REST Service เพื่อให้ return response มาซะก่อน

API Response

พอได้ response เราก็เอามาเขียน swagger เพื่อที่จะ generate เป็น descriptor กัน รายละเอียดเกี่ยวกับ swagger ลองอ่านดูตาม link ด้านล่างนะครับ

Tool ที่ผมใช้ในการเขียน swagger ก็มาจาก swagger.io นี่แหละ ใช้เป็นแบบ online เลยง่ายดี สามารถเข้าไปได้ที่ http://editor.swagger.io  ถ้าเขียนเสร็จแล้วก็น่าจะได้ format แบบด้านล่างนี่ล่ะ

Swagger UI

สิ่งที่ควรระวังตอนเขียน swagger คือ ในบางกรณีที่เรามีการเรียกใช้ reference object ซ้อนๆ กัน การประกาศบางแบบอาจจะเรียกใช้ไม่ได้ใน K2 นะครับ แบบที่ใช้ได้จะมีตัวอย่าง file swagger ที่เขียนให้ download ตอนท้ายบทความครับ

เมื่อเขียนเรียบร้อย เราสามารถ generate JSON file ได้โดยเลือกเมนู File -> Download JSON

Download JSON

พอได้ file มา เราก็เอามา register กับ K2 โดยผ่าน SmartObject Service Tester

02-Register REST

03-Register 2

หลังจาก register แล้ว เราก็จะเห็น object ที่สามารถเรียกได้ตามด้านล่าง

04-After Regist

จะเห็นว่า มี method พวก Serialize กับ Deserialize มาด้วย method พวกนี้จะเป็น method สำหรับดึงค่าจาก type ที่ return มาเป็น structure เหมือนกับที่เราใช้ K2 ต่อกับ SAP หรือ web service อื่นๆ จากนั้นลองสร้างเป็น smartobject แล้วทดสอบดู

05-Test City Search

อย่างแรกเลยคือ call City Search เพื่อหาเมือง เพิ่งรู้นะเนี่ยว่า กรุงเทพฯ มีที่อินโดนีเซียด้วย พอได้แล้ว ผมก็เอา Key ไปใช้เพื่อหา forecast ของ 5 วันข้างหน้า

06-5 day forecast

ใน method นี้จะ return Headline หรือคือ พาดหัวข่าวสำคัญ เช่น ฝนจะตกหนักวันไหน กับรายละเอียด forecast มาเป็น object ส่วนที่เราต้องทำถัดไปคือ เอา xml ยาวๆ ที่ได้ ไป call method Deserialize เพื่อให้แสดงผลออกมาเป็น property ออกมา

ส่วนของ Headline ผมได้ xml ตามด้านล่างออกมา

{“$type”:”Accuweather.k2RESTidentifier_Headline, Accuweather, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null”,”EffectiveDate”:”2017-08-13T01:00:00+07:00″,”Text”:”A thunderstorm late Saturday night”,”Category”:”thunderstorm”,”Link”:”http://www.accuweather.com/en/th/bangkok/318849/daily-weather-forecast/318849?lang=en-us”}

ผลหลังจากการ call โอ๊ะ!!! ฝนตกหนักคืนวันเสาร์ตอนดึกๆ

07-Headline Call

ส่วนของพยากรณ์จะได้เป็น array ออกมา

{“$type”:”Accuweather.k2RESTidentifier_DailyForecast[], Accuweather, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null”,”$values”:[{“$type”:”Accuweather.k2RESTidentifier_DailyForecast, Accuweather, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null”,”Date”:”2017-08-10T07:00:00+07:00″,”Link”:”http://www.accuweather.com/en/th/bangkok/318849/daily-weather-forecast/318849?day=1&lang=en-us”},{“$type”:”Accuweather.k2RESTidentifier_DailyForecast, Accuweather, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null”,”Date”:”2017-08-11T07:00:00+07:00″,”Link”:”http://www.accuweather.com/en/th/bangkok/318849/daily-weather-forecast/318849?day=2&lang=en-us”},{“$type”:”Accuweather.k2RESTidentifier_DailyForecast, Accuweather, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null”,”Date”:”2017-08-12T07:00:00+07:00″,”Link”:”http://www.accuweather.com/en/th/bangkok/318849/daily-weather-forecast/318849?day=3&lang=en-us”},{“$type”:”Accuweather.k2RESTidentifier_DailyForecast, Accuweather, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null”,”Date”:”2017-08-13T07:00:00+07:00″,”Link”:”http://www.accuweather.com/en/th/bangkok/318849/daily-weather-forecast/318849?day=4&lang=en-us”},{“$type”:”Accuweather.k2RESTidentifier_DailyForecast, Accuweather, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null”,”Date”:”2017-08-14T07:00:00+07:00″,”Link”:”http://www.accuweather.com/en/th/bangkok/318849/daily-weather-forecast/318849?day=5&lang=en-us”}]}

ผลหลังจากการ call ก็เป็นตามด้านล่าง

08-DailyForecast Call

จริงๆ ค่าที่ REST return มามีมากกว่าที่ผมเอามาแสดง แต่ผมเขียน swagger เพื่อเอาค่ามาเฉพาะที่ต้องการเท่านั้น (ขี้เกียจนั่นเอง = =’) ถ้าใครอยากดูตัวอย่างการเขียน swagger กับ file JSON ที่ generate ออกมาได้สามารถ download ได้ตาม link ด้านล่างนะครับ

สำหรับคราวนี้ก็ขอลาแต่เพียงเท่านี้ พบกันใหม่คราวหน้าครับ 🙂

 

 

 

 

List View Scroll bar with JS

หลายคนคงเคยเจอปัญหากับการแสดงผลของ list view ในกรณีที่มีคอลัมน์ใช้งานเยอะๆ คอลัมน์จะมีความกว้างน้อยทำให้การใช้งานค่อนข้างสะดวกจะไม่สะดวก ซึ่งผมก็เจอปัญหานี้เช่นกันโดยผมใช้เจ้าตัว Java Script เข้ามาช่วยเพื่อให้ UI ของเรา มีหน้าตาที่ดูง่ายยิ่งขึ้น ซึ่งผมมีปัญหากับ List view ที่ต้อง
แสดงผลคอลัมน์เป็นจำนวน 20 คอลัมน์ ซึ่งเมื่อแสดงผลก็เป็นอย่างที่เห็นแหละครับ ดูกันไม่รู้เรื่องเลยว่าอะไรเป็นอะไร

SB1

อย่ารอช้ามาดูวิธีกันเลยครับว่าจะเอาเจ้า JS มาช่วยยังไง

  1. ไปที่ฟอร์มที่มีการใช้งาน List View สร้าง Data Label ขึ้นมาหนึ่งตัวครับSB2
  2.  จากนั้นให้ดำเนินการใส่ Expression ให้กับตัว Data Label ที่เราสร้างขึ้นมานะครับ โดยใน Expression เราจะใส่ JS เข้าไปนี่แหละSB3
  3. ดำเนินการใส่ Script ได้เลยครับSB4

Script ที่เราจะใช้คือ

SB9

สำหรับ  name=’ScollBar.Form Area Item‘ จะเป็น name ของ view ที่เราต้องการจะให้มี scroll bar นะครับ ซึ่งถ้าเราหาไม่เจอว่าไอเจ้าชื่อ name ของ view เนี่ยอยู่ตรงไหนให้ดูที่หน้าฟอร์มได้นะครับ โดยจะอยู่ในส่วนของ Properties ด้านขวามือครับ สามารถ copy ไปวางใน script ได้เลยครับ

SB5

เมื่อดำเนินการใส่ Script ที่ Expression เสร็จเรียบร้อยแล้วให้ดำเนินการในขั้นตอนถัดไปได้เลยครับ

4. ให้เลือกไปที่ List View นะครับ โดยขั้นตอนนี้เราจะใส่ความกว้างของ List View ครับ โดยเราสามารถใส่ได้ตามใจชอบนะครับ ว่าอยากให้ List View ของมีความกว้างเท่าไร โดยสามารถปรับความกว้างได้ที่ Properties ของ List View ครับ  ซึ่งจากตัวอย่างผมใส่เป็น 2400px ครับ เพราะผมมีคอลัมน์ค่อนข้างเยอะ ยังไงก็ลองปรับให้เข้ากับหน้าจอที่จะนำไปใช้งานดูครับ

SB6

เสร็จแล้วก็ถึงเวลา RUN Test ดูครับ จะเห็นว่าจะมี Scroll Bar เกิดขึ้นอยู่ด้านล่าง และ คอลัมน์ขยายความกว้างตาม Header ซึ่งก็ค่อนข้างดูง่ายขึ้นกว่าเดิม ยังไงถ้าท่านใดเจอปัญหาการแสดงผลของ list view แบบนี้ลองนำไปใช้ดูกันนะครับ หวังว่าคงจะเป็นประโยชน์กันนะครับ

SB7

SB8

[K2 Viewflow] เปลี่ยน URL Viewflow ตรงไหน?

วันนี้มีคำถามจากทางบ้านเกี่ยวกับการใช้งาน Viewflow โดยถามมาว่าต้องการเปลี่ยน URL ของ viewflow ต้องทำอย่างไร เลยขอเอามาเขียนแชร์กันครับ

Viewflow เป็น web สำหรับดูสถานะของ workflow ว่าปัจจุบันงานอยู่ที่ขั้นตอนไหนแล้ว (ตามรูปด้านล่าง) ทำงานบน technology silverlight ซึ่งในปัจจุบัน browser ที่รองรับจะเป็น Internet explorer และ Mozilla Firefox

ViewFlow002

ทีนี้การเข้าถึง viewflow สามารถเข้าได้ 2 ช่องทางด้วยกันคือ

  1. ผ่าน k2 worklist control ใน smartform
  2. ผ่าน k2 workspace

ซึ่งทั้งสองที่จะเก็บการ configure url ไว้ต่างที่กัน ซึ่งถ้าต้องการเข้าไปแก้ไขสามารถทำได้ดังนี้

1. สำหรับใช้งานผ่าน k2 worklist control ใน smartform

  • เข้า K2 Workspace (หรือ K2 Management สำหรับ version 4.7)
  • ไปที่ Environment Library
  • ขยายเข้าไปจนถึง Environment Library Filed
  • หา field ที่ชื่อ Workspace Url และ Workspace Url SSLWorkspaceURL
  • แก้ URL ให้เป็นชื่อใหม่ที่ต้องการ
  • Restart IIS สักรอบนึง (start -> cmd -> run as administrator -> iisreset)
  • ทดสอบเลยครับ

2. สำหรับใช้งานผ่าน K2 workspace

  • ไปที่ folder K2 workspace (ปกติจะอยู่ที่ C:\Program Files (x86)\K2 blackpearl\Workspace\Site แต่ถ้าหาไม่เจอ เข้าจาก iis แล้วกด explore เอาก็ได้ครับ)
  • เปิด web.config
  • หา tab ที่ชื่อ  <add key=”WebServiceServerURL” value=”http://K2LAB:81 “>
  • แก้ value เป็น url ที่ต้องการแล้วบันทึก เป็นอันเสร็จสิ้น
  • ทดสอบอีกทีครับ

 

จบแล้วครับ…

[K2 SmartForms] – Using Field Property

สวัสดีครับ หายไปนานกับ blog ของ K2 Ranger พอดีวันนี้มีคำถามเข้ามาทาง page K2 Thailand เกี่ยวกับการเลือก field ที่ผูกกับ data source เลยเอามาเขียนให้อ่านกัน

ในส่วนแรกให้เราสร้าง property field เพิ่มใน file .cs

public string Field

{

get

{

return base.GetOption<string>(“Field”, string.Empty);

}

set

{

base.SetOption<string>(“Field”, value, string.Empty);

}

}

จากนั้นก็ไปเพิ่ม property ใน file definition.xml ของ control

<Prop ID=”Field” mappable=”false” friendlyname=”Field” category=”Detail” refreshdisplay=”false” type=”complex” InitializeServerControl=”initializeFieldPropertyConfig” ClearServerControl=”clearFieldConfig” ServerControl=”SourceCode.Forms.Controls.Web.FieldConfiguration.FieldPropertyConfig,SourceCode.Forms.Controls.Web” />

เพิ่มแล้วเรียบร้อยให้ลอง build แล้ว deploy ใหม่ดู เราก็จะสามารถดึง field ที่อยู่ใน SmartObject ที่ผูกกับ view นี้ออกมาได้

Field

FieldSelection

จะมองเห็นเฉพาะ field type ที่ control นี้สามารถใช้งานได้ด้วย

   ส่วนวิธีเอาค่าจาก Field property ไปใช้ต่อ ก็ใช้วิธีเดียวกันกับการดึงค่าใน property อื่นๆ ไปใช้นะครับ สำหรับรอบนี้ขอลาไปเท่านี้ครับ 🙂

 

ว่าด้วยเรื่องการแสดง Paging ใน Listview

วันนี้มาว่ากันด้วยเรื่อง paging ใน listview นะครับ โดยปกติในหน้าจอ View Settings ของ listview เราสามารถใส่ paging ได้ (ใครหาไม่เจอ เข้าหน้า design listview แล้วหารูปเฟืองนะครับ) ตามรูปด้านล่างผมใส่ให้แสดง 10 รายการต่อ 1 หน้า

setting

ตอนที่ใช้งานมีข้อสังเกตว่า ด้านล่างของ list view มีเลขบอกนะ ว่าเปิดอยู่หน้าไหนอยู่ แต่ไม่ได้แสดงหน้าทั้งหมดที่มี และไม่สามารถกระโดดข้ามไปหน้าสุดท้ายได้เลย

listview

กลไกการทำงานส่วนนี้ ทำเพื่อเพิ่มความเร็วในการโหลดหน้าจอครับ ซึ่งถ้าเราใส่ไว้ว่าให้โหลดหน้าละ 10 รายการ ตอนดึงข้อมูลมาจากฐานข้อมูล ก็จะดึงแค่ 10 รายการ แต่กรณีที่เราต้องการให้แสดงจำนวนหน้าทั้งหมดจริงๆ เราสามารถไปปรับ setting ได้ โดยไปแก้ไขที่ไฟล์ C:\Program Files (x86)\K2 blackpearl\K2 smartforms Runtime\web.config (อย่าลืม backup ไฟล์ทุกครั้งก่อนแก้ไขนะครับ)

<add key=”SmartObject.RuntimeListViewRowCount” value=”false” />

แก้เป็น

<add key=”SmartObject.RuntimeListViewRowCount” value=”true” />

Save ไฟล์ และทดสอบผล แสดงจำนวน page ทั้งหมด แล้ว 🙂

listview2

แต่เดี๋ยวก่อน!! ทดสอบแล้วอย่าเพิ่งรีบเอาไปใช้จริงนะครับ ขอให้อ่าน note ตามนี้ก่อนใช้งานครับ

  1. เวลาที่ใช้ในการโหลดหน้าจอจะเพิ่มขึ้น อย่างที่บอกไปตอนต้นว่ากลไกนี้มีเพื่อเพิ่มความเร็วในการโหลด ผมลองจับเวลาในการโหลด list view 2 ชุดข้อมูล
    • Listview แสดง 2 column จำนวน 20,000 กว่ารายการ พบว่าใช้เวลาเฉลี่ยในการเปิดหน้าจอเปิดขึ้นจาก 1.59 วินาทีเป็น 1.76 วินาที (เพิ่มราว ๆ 10%)
    • Listview แสดง 4 column จำนวน 100,000 กว่ารายการ พบว่าใช้เวลาเฉลี่ยในการเปิดหน้าจอเปิดขึ้นจาก 4.58 วินาทีเป็น 6.02 วินาที (เพิ่มราว ๆ 30%)
  2. Setting ตัวนี้เป็น setting กลาง แปลว่าถ้าแก้ไปแล้วจะมีผลกับทุก ๆ หน้าจอครับ (list view, รวมไปถึง picker control ด้วย)

สรุป ถ้าใช้งานกับลูกค้าจริง ผมแนะนำให้เปิดหน้าจอที่ข้อมูลเยอะที่สุด แล้วให้ลูกค้าทดลองใช้งานครับ ว่าเวลาโหลดหน้าจอที่เพิ่มขึ้น มันคุ้มค่ากับการแสดงผล paging แบบนี้หรือไม่

Test with K2 4.6.11

[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 ได้ตามปกติครับ  🙂

[K2 SmartForms] – Use SmartObject Property in Custom Control (Part III)

มาต่อจากคราวที่แล้ว ที่เราเลือกเป็น static ไป คราวนี้จะมาลองเลือก SmartObject มาใช้งานกันบ้าง เหมือนกับของ static คือ เราต้องสร้าง property ใน file .cs เพิ่มก่อน โดย property ที่ใช้งานจะมี AssociationSO, AssociationMethod, ValueProperty และ DisplayTemplate

public string AssociationSO

{

get

{

return this.GetOption<string>(“AssociationSO”, string.Empty);

}

set

{

this.SetOption<string>(“AssociationSO”, value, string.Empty);

}

}

public string AssociationMethod

{

get

{

return this.GetOption<string>(“AssociationMethod”, string.Empty);

}

set

{

this.SetOption<string>(“AssociationMethod”, value, string.Empty);

}

}

public string ValueProperty

{

get

{

return this.GetOption<string>(“ValueProperty”, string.Empty);

}

set

{

this.SetOption<string>(“ValueProperty”, value, string.Empty);

}

}

public string DisplayTemplate

{

get

{

return this.GetOption<string>(“DisplayTemplate”, string.Empty);

}

set

{

this.SetOption<string>(“DisplayTemplate”, value, string.Empty);

}

}

สิ่งที่ต้องทำถัดไปคือ สร้าง structure มาเพื่อรับค่าที่เราเก็บไว้ใน DisplayTemplate เพราะตอนที่เราเลือกว่า จะแสดงค่าอะไรออกมาที่ control เราสามารถเลือกได้หลาย field ตามตัวอย่างด้านล่าง

ccb5-01

structure ที่สร้างมาเพื่อรองรับค่า จะใช้ตามด้านล่าง โดยใน DisplayTemplate ที่ K2 เก็บไว้จะเก็บไว้ในรูปของ xml

internal struct DisplayTemplateObject
{

public string SourceType;

public string SourceID;

public string Value;

}

อีกส่วนที่ต้องทำไว้ก่อนคือ การเอา field จาก DisplayTemplate มาต่อกัน เพื่อนำไปใช้ใน control เลยสร้าง method ที่ชื่อ BuildValue ไว้ตามด้านล่าง

private string BuildValue(SmartObject smo, List<DisplayTemplateObject> ParsedTemplate)

{

StringBuilder builder = new StringBuilder();

foreach (DisplayTemplateObject templateObj in ParsedTemplate)

{

if (templateObj.SourceType == “Value”)

{

builder.Append(templateObj.Value);

}

else

{

builder.Append(smo.Properties[templateObj.SourceID].Value);

}

}

return builder.ToString();

}

ทีนี้ก็พร้อมแล้ว เรามาเพิ่ม code ใน CreateChildControls กัน โดยขั้นตอนการทำงานจะทำตาม step ด้านล่าง

  • ตรวจสอบว่า DataSourceType เป็น SmartObject หรือเปล่า?
  • เอาข้อมูล SmartObject, Method และ Value ออกมาจาก property
  • ดึงข้อมูลโดยใช้ class SmartObjectClientServer แบบที่เราเขียนโปรแกรมปกติ
  • ดึงข้อมูล DisplayTemplate มาใส่ใน list โดยแยก attribute มาจาก xml ที่ K2 เก็บไว้ให้
  • นำมาใส่ไว้ใน control ที่ต้องการ

if (this.DataSourceType.Equals(“smartobject”, StringComparison.InvariantCultureIgnoreCase))
{

string smo = this.AssociationSO;
string valueProp = this.ValueProperty;
string smoMethod = this.AssociationMethod;

SmartObjectClientServer smartObjectClient = ConnectionClass.GetSmartObjectClient();
Guid guid = new Guid(smo);
SmartObject smartObject = smartObjectClient.GetSmartObject(guid);
smartObject.MethodToExecute = smoMethod;
SmartObjectList list = new SmartObjectList();

list = smartObjectClient.ExecuteList(smartObject);

List<DisplayTemplateObject> parsedTemplate = new List<DisplayTemplateObject>();

foreach (XElement element in XDocument.Parse(this.DisplayTemplate).Root.Elements())
{

DisplayTemplateObject item = new DisplayTemplateObject

{

SourceType = element.Attribute(“SourceType”).Value

};

if (item.SourceType == “Value”)

{

item.Value = element.Element(“SourceValue”).Value;

}

else

{

item.SourceID = element.Attribute(“SourceID”).Value;

}

parsedTemplate.Add(item);

}

this.ddl = new DropDownList();

List<KeyValuePair<string, string>> showList = new List<KeyValuePair<string, string>>();

foreach(SmartObject item in list.SmartObjectsList)
{

ddl.Items.Add(new ListItem(this.BuildValue(item, parsedTemplate), item.Properties[valueProp].Value));

}

this.Controls.Add(this.ddl);

ในกรณีที่ใส่ code ไปแล้วติด reference บางตัวที่หาไม่เจอ ให้ลอง add dll SourceCode.SmartObjects.Client เพิ่มเข้ามาใน project แล้วก็ add using ตามด้านล่างเข้าไปใน coding ของ control เพิ่ม

using SourceCode.SmartObjects.Client;

using SourceCode.Forms.Controls.Web.SDK.Utilities;

using System.Xml.Linq;

จากนั้นก็ deploy แล้วก็ทดสอบ

ccb5-02

ccb5-03

สำหรับส่วนการ add property ก็จะจบเท่านี้นะครับ เอาไว้พบกันใหม่คราวหน้าครับ 🙂

[K2 SmartForms] – Confirmation Popup Trick

สวัสดีครับอาจจะมีหลายๆท่านงงหรือสงสัยกับการเรียกใช้ rule Get confirmation เพื่อแสดงข้อความ Pop up แจ้งเตือน User หากท่านใดไม่งงแล้วก็เลื่อนไปดู trick ด้านล่างๆได้เลยนะครับข้ามการใช้ไปได้เลยโดยการแสดง popup ของ K2 SMF เนี่ยเราสามารถเรียกใช้ได้ผ่าน rule Get confirmation ดังภาพด้านล่างครับ
get-confirm-1
get-confirm-2

หลายๆท่านอาจจะเจอปัญหาว่าหากมีการ config rule อื่นๆที่มีการ validate เพิ่มเติมต่อจาก rule Get confirmation เมื่อใช้งานจริงเวลา กด cancel ใน pop up comfirm แล้ว Rule ที่เหลืออยู่ยัง execute ทำงานต่อไปซึ่งไม่ถูกต้องจริงๆแล้วหลักการทำงานที่จะทำงานถูกต้องต้อง Config แบบนี้ครับคือ เพิ่ม advanced condition ที่โดยใส่เงื่อนไข 1=1 เข้าไป   get-confirm-2-1  จากนั้น config rule ตาม รูปภาพ ด้านล่างครับ เราสามารถเรียก rule อื่นๆหลังจาก User กด cancel ได้หรือไม่อยากให้ทำอะไรก็เพิ่ม rule transfer data ไปเฉยๆได้ครับ
get-confirm-3

ตอนทำงานจริงนั้นเรามันจะมีการ validate ค่าเป็นจำนวนมากหากทำตามวิธีด้านบนจะค่อนข้างยุ่งยากครับ technic ที่เราสามารถทำได้คือให้ rule ที่มีการ validate มากมายหลายแหล่เป็น Fucntion หรือ rule ลอยๆแทนซะยกตัวอย่างเช่น ผมทำการ validate มากมายจากนั้น Hilight สีนำเงินผมตั้งชื่อ Rule ชุดนี้ว่า FnSaveMainForm ดังภาพด้านล่างจากนั้นกด Save
get-confirm-4

จากนั้นที่ปุ่มเราต้องการแสดง Pop up Confirm ให้ใช้วิธีเรียก Execute another rule แทนดังภาพ ด้วยวิธีนี้การทำงานของ Pop up จะถูกต้องครับ
get-confirm-5

ทีนี้มีคำถามว่า Comfirm pop up สามารถ เพิ่ม size popup ,ใส่ header ,ใส่ template ,ใส่ค่าตัวแปร บลาๆๆ ไปได้ไหม???
คำตอบคือ ไม่ได้ครับ!!! 5555+

แต่เรามีทางออกให้ดังนี้คือแต้นแต๊นนนนน ใช้ rule Show a message แทนซิคร้าบพี่น้องง
get-confirm-6

แต่มีข้อแม้คือต้องเลือก Message Type เป็น Confirmation นะครับ ทีนี้เราสามารถลาก Control ต่างๆมายำใส่ในนี้ได้เลยแม้กระทั้งใส่ Tag Html เพื่อการแสดงผลที่ต้องการก็ยังได้เรื่อง size ก็สามารถปรับได้อีกทั้งการทำงานยังเหมือนกับใช้ rule Get confirmation ทุกประการครับ
get-confirm-7

เอาละลองกดดูจากที่ Config ได้ผลลัพตามภาพเลยครับผม
get-confirm-8

วันหลังจะมาแชร์ทริคอื่นๆอีกนะครับ บ้ายบาย

Test on K2 version
4.7
4.6.11

 

[Trouble Shooting] – How to solve SmartForms Worklist Control Infinite Spinning

สวัสดีครับ รอบนี้มาคั่นเวลา custom control series นิดหน่อย เนื่องจากเมื่อเช้าได้ช่วยลูกค้าแก้ปัญหา worklist control ของ SmartForms ไม่แสดง worklist ได้แต่หมุนค้างตามรูปด้านล่าง

infiniteworklist01

อย่างแรกที่เราควรไปดูคือ worklist ใน workspace ทำงานได้ไหม? และสามารถใช้งาน service อื่นของ K2 ได้หรือไม่? (service อื่น เช่น start workflow, ใช้งานหน้าจอ SmartForm ที่ไม่มี worklist) ถ้าตรวจสอบแล้วใช้งานได้ ให้ไปดู Web Service URL กับ Web Service URL SSL ใน Environment Library ว่า มีการ set ค่า default ไว้หรือเปล่า?

infiniteworklist02

ถ้าเป็นตามรูปด้านบนที่ไม่ได้ set ไว้ ก็ให้เลือก set อันใดอันหนึ่งให้เป็น default จากนั้น restart service K2 ก็จะสามารถใช้งาน worklist control ของ SmartForms ได้ตามปกติครับ (ถ้ายังไม่ได้ให้ลอง reset IIS กับ clear browser cache ด้วยนะครับ)

ก็ขอจบ tip สั้นๆ ไว้เพียงเท่านี้ ไว้เจอกันใหม่รอบหน้าครับ 😀

[K2 SmartForms] – Use SmartObject Property in Custom Control (Part II)

สวัสดีครับ เรามาต่อจากคราวที่แล้วที่เราสามารถเรียกหน้า configure SmartObject ขึ้นมาแสดงได้แล้ว (ถ้ายังไม่ได้เคยอ่าน ดูได้จาก https://k2ranger.wordpress.com/2017/02/20/k2-smartforms-use-smartobject-property-in-custom-control-part-i/  พอแสดงได้แล้ว ในหน้า configure จะมีให้เลือกอยู่ 2 แบบด้วยกัน คือ เลือกเป็น static หรือ SmartObject ในวันนี้เราจะมาพูดในส่วนของ static ก่อน

ในตอนที่แล้ว เราเพิ่ม property ไว้ใน xml หลาย property แต่ยังไม่ได้สร้าง property จริงๆ ใน coding ให้เราไปสร้าง property ใน file .cs ของเราเพิ่ม โดยในการใช้งานส่วนของ static จะใช้แค่ 2 properties ตามด้านล่าง คือ DataSourceType กับ FixedListItems

public string DataSourceType

{

get

{

                return this.GetOption<string>(“dataSourceType”, string.Empty);

}

set

{

                this.SetOption<string>(“dataSourceType”, value, string.Empty);

}

}

public string FixedListItems

{

get

{

                return this.GetOption<string>(“FixedListItems”, string.Empty);

}

set

{

                this.SetOption<string>(“FixedListItems”, value, string.Empty);

}

}

เมื่อเพิ่มแล้วให้เรามาดูเพิ่ม checking ใน method CreateChildControls ในตัวอย่างด้านล่างนี้ ผมจะเช็คว่า ค่าใน DataSourceType เป็น static หรือเปล่า? ถ้าเป็น static ก็จะตรวจสอบ FixedListItems ต่อว่า มีค่าไหม?

ccb4-01

ถ้ามีค่า ก็จะทำการ Deserialize xml (เนื่องจากเวลาเราสร้าง list item เก็บไว้ จะเก็บไว้ใน format ของ xml) ออกมาเป็น list จากนั้นก็วน loop เพื่อ add เข้า dropdownlist เพื่อแสดงค่า และในส่วนสุดท้ายต้องไม่ลืม add dropdownlist เข้าไปใน control ที่จะ render ด้วย (ใน class ผมมีไปประกาศ ddl เป็น dropdownlist แบบ private ไว้ เพื่อเอามาใช้แสดงผลด้วย)

this.ddl = new DropDownList();

if (this.DataSourceType.Equals(“static”, StringComparison.InvariantCultureIgnoreCase))

{

if (!string.IsNullOrEmpty(this.FixedListItems))

{

using (StringReader reader = new StringReader(this.FixedListItems))

{

bool flag = true;

List<StaticItem> list = null;

                        if (this.FixedListItems.StartsWith(“[“))

{

JavaScriptSerializer serializer = new JavaScriptSerializer();

try

{

list = serializer.Deserialize<List<StaticItem>>(this.FixedListItems);

}

catch (ArgumentException)

{

flag = false;

}

if (flag)

{

foreach (StaticItem item in list)

{

ddl.Items.Add(new ListItem(HttpUtility.HtmlEncode(item.Display), HttpUtility.HtmlEncode(item.Value)));

}

this.Controls.Add(ddl);

}

}

else

                        {

flag = false;

                        }

}

}

}

ในกรณีที่ใส่ code ไปแล้วติด reference บางตัวที่หาไม่เจอ ให้ลอง add dll SourceCode.Forms.Utilities เพิ่มเข้ามาใน project แล้วก็ add using ตามด้านล่างเข้าไปใน coding ของ control เพิ่ม

using SourceCode.Forms.Controls.Web.SDK;

using SourceCode.Forms.Controls.Web.SDK.Attributes;

using System.IO;

using System.Web.Script.Serialization;

using SourceCode.Forms.Utilities;

using System.Xml;

เมื่อทำการ deploy เรียบร้อยก็มาทดสอบกัน โดยใส่ข้อมูลเป็น static list

ccb4-02

ccb4-03

จะเห็นว่า ข้อมูลถูกแสดงออกมาอย่างที่อยากได้ใน dropdownlist แต่ถ้าอยากเอาข้อมูลออกมาใช้งานต่อ ก็ต้องไป implement javascript เพื่อ get ค่าจาก control ออกมาอีกรอบนะครับ สำหรับคราวนี้ก็ขอจบการดึง data จาก static list มาแสดงใน control แต่เพียงเท่านี้ แล้วค่อยมาต่อกันรอบหน้าสำหรับการดึงข้อมูลจาก SmartObject มาแสดงครับ 🙂