[K2 SmartForms] – Add property for your custom control

สวัสดีครับ กลับมาต่อกันใน blog ที่สองของ series การเขียน custom control ด้วยตนเอง (!? หืมม เคยตั้งชื่อด้วยเหรอออ = =’) ในคราวนี้ เราจะมาลองเพิ่ม property ง่ายๆ ให้ control ของเรากัน ถ้าใครยังไม่รู้วิธีสร้าง custom control project ให้ไปดูที่ blog แรกก่อนนะครับ (https://k2ranger.wordpress.com/2017/01/26/k2-smartforms-custom-control-for-beginner/)

ตอนที่สร้าง control มาจาก template เราจะได้ control default มาเป็น textbox ดังนั้นใน blog นี้ ผมจะเพิ่ม property ให้ textbox นี้กลายเป็น password textbox ได้ โดยสิ่งที่ต้องทำอย่างแรกคือ เปิด file xml ของ control ขึ้นมา

ccb2-01

จากนั้นให้หา section “Properties” แล้ว add property เพิ่มเข้าไป โดยมีรายละเอียดตามด้านล่าง

  • ID => ชื่อของ property
  • friendlyname =>label ที่จะปรากฏอยู่ในช่อง property ของ control
  • type => datatype ของ property ในกรณีนี้อยากได้แค่ checkbox ก็ใส่เป็น boolean ไป
  • category => แสดง control ใน category ไหน
<Prop ID="DisplayPasswordStyle" friendlyname="Display password style" type="bool" category="General" />

ccb2-02

ขั้นถัดไปให้ไปเปิด file .cs แล้วใส่ get set method สำหรับกำหนดค่า property ที่เราเพิ่มเข้ามา ในส่วนนี้ class ของ K2 ที่เรา inherit มา จะมี method สำหรับ get กับ set ค่าให้อยู่แล้ว ชื่อ GetOption กับ SetOption

public bool DisplayPasswordStyle
{
            get
            {
                return this.GetOption<bool>("displaypasswordstyle", true);
            }
            set
            {
                this.SetOption<bool>("displaypasswordstyle", value, true);
            }
}

 

ccb2-03

ส่วนสุดท้ายที่เราต้องทำคือ ควบคุมการ render control ในส่วนนี้จะมีอยู่ 2 methods ที่ใช้ได้คือ CreateChildControls กับ RenderContents (ถ้าใครเคยเขียน web part ของ SharePoint มาก่อน ก็น่าจะคุ้นเคยกับ method พวกนี้อยู่ เพราะจะทำงานแบบเดียวกัน) แต่แนะนำให้ใช้ CreateChildControls จะง่ายกว่า

ในส่วนนี้ผมจะตรวจสอบว่า มีการเลือกให้ Display เป็น password ไหม ถ้าเลือกให้ display เป็น password ก็จะใส่ attribute เพิ่มเข้าไป

if (DisplayPasswordStyle)
{
    base.Attributes["type"] = "password";
}

ccb2-04

เมื่อทำตามครบแล้ว ให้ build solution จากนั้นก็ deploy เข้า server K2 โดยการ deploy ก็ทำไม่ยาก เพราะใน template จะทำ file .bat สำหรับคำสั่ง copy dll และ register control เข้า server ให้แล้ว (ใน .bat จะ copy ไปที่ drive c: นะครับ ถ้าใครลง K2 ไว้ drive อื่น หรือไม่ใช่ folder default จะต้องแก้ file .bat อีกที) file .bat จะอยู่ใน bin folder ของ project ที่เราสร้าง จะมีชื่อว่า “RegisterCustomControl”

ccb2-05

ให้รัน .bat รอจนขึ้น Complete ตามด้านล่าง แสดงว่า การ deploy เสร็จเรียบร้อย

ccb2-06

สุดท้ายคือ การทดสอบ เมื่อเราเปิดหน้า designer จะเจอ control ที่เรา register มา เมื่อลากมาวาง ก็จะเห็น property ที่เราเพิ่มเข้ามา

ccb2-07

ถ้าเราเลือกให้แสดงผลเป็น password control ก็จะแสดงค่าที่พิมพ์เป็น * แทนที่จะเป็นตัวอักษรปกติ

ccb02-08

สำหรับคราวนี้ก็ขอจบเท่านี้นะครับ ถ้าใครเอาไปลองสร้าง control อะไรก็เอามาแชร์กันบ้างนะครับ ไว้เจอกันใหม่คราวหน้ากับรายละเอียดส่วนอื่นของการสร้าง custom control 🙂

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s