Step by Step เพื่อสร้างสมาร์ทฟอร์มแรกของคุณ

Last updated 2 years ago

Step by Step เพื่อสร้างสมาร์ทฟอร์มแรกของคุณ

ส่วนนี้จะอธิบายกระบวนการทีละขั้นตอนในการสร้างสมาร์ทฟอร์มแรกของคุณบน ONEWEB ดังที่ได้กล่าวไว้ก่อนหน้านี้ จำเป็นต้องกำหนดขอบเขตและวัตถุประสงค์ขององค์กรธุรกิจของคุณก่อนที่จะเริ่มการกำหนดค่าสมาร์ทฟอร์มของคุณ สมมติว่า ที่นี่เรามีวัตถุประสงค์และข้อกำหนดในการสร้างแบบฟอร์มอัจฉริยะสำหรับการขอสินเชื่อด้วยข้อมูลด้านล่าง และจำเป็นต้องเก็บรายละเอียดลูกค้า เช่น ชื่อ นามสกุล ประเภทส่วนบุคคล เพศ วันเกิด และการระบุตัวตน

ตัวอย่างสมาร์ทฟอร์มนี้มีชื่อว่า "Application" และประกอบด้วยข้อมูลทางธุรกิจดังต่อไปนี้

Application Date จำเป็นต้องทราบวันที่ยื่นสมาร์ทฟอร์ม

Product มีให้เลือกถึง 3 ประเภท ได้แก่ สินเชื่อบ้าน สินเชื่อส่วนบุคคล และบัตรเครดิต

Channel มี 2 แบบ คือ Walk in และ Sale

Customer Type อาจเป็นได้ทั้งองค์กรหรือบุคคลธรรมดา

Office Code อาจเป็นสำนักงานใหญ่หรือสาขาก็ได้

Finance Amount และ Term Loan จำเป็นต้องป้อนโดยผู้ใช้แอพพลิเคชัน

Status สามารถอนุมัติ ปฏิเสธ หรือร่าง และถูกเลือกโดยผู้ใช้แอพพลิเคชัน

Email: Yes / No, Yes ในกรณีที่จำเป็นต้องส่งอีเมลถึงลูกค้า

จากข้อมูลธุรกิจข้างต้นและข้อกำหนดตัวอย่าง เรามาทำตามขั้นตอนเพื่อสร้างสมาร์ทฟอร์มตัวอย่างที่คล้ายกับภาพด้านล่างนี้ ซึ่งพนักงานธนาคารสามารถป้อนและจัดเก็บข้อมูลธุรกิจตามที่แสดงด้านล่างใน (Screen 1) นอกจากนี้ยังสามารถเก็บข้อมูลลูกค้า ใน (Screen 2) ในภายหลัง ผู้ใช้แอพพลิเคชันต้องการค้นหาบันทึกที่มีอยู่จากฐานข้อมูลตามเกณฑ์การค้นหาด้านล่าง เช่น สถานะ ผลิตภัณฑ์ ประเภทลูกค้า ช่องทาง และช่วงวันที่ตามที่แสดงใน (Screen 3)

ขั้นตอนแรกคือการเริ่มต้นด้วยการกำหนดค่าเอนทิตี (The First step is to begin with Entity Configuration)

สร้างเอนทิตีใหม่ ตรวจสอบสองขั้นตอนสุดท้ายของหน้าก่อนหน้า
เปิดหน้าต่างคุณสมบัติเอนทิตีโดยคลิกที่ไอคอนแก้ไข (หากสร้าง Entity จาก AppSpace สามารถข้ามขั้นตอนนี้ได้)
ในชื่อเอนทิตี ให้ป้อน "Application" (หากสร้างเอนทิตีจาก AppSpace ให้ข้ามขั้นตอนนี้ไป)
คลิก Okay (หากสร้างเอนทิตีจาก AppSpace ให้ข้ามขั้นตอนนี้ไป)

ตัวอย่าง "Smart Form" ข้างต้นมีโครงสร้าง 2- layer Tab – ชื่อ "Application" เป็นแท็บหลักและ "Customer Information" เป็นแท็บย่อยตามที่แสดงใน Screen 1 ด้านบน

เริ่มต้นด้วยการกำหนดค่าแท็บหลัก "Application"

การกำหนดค่า Main General Tab

ลาก 2-Layer Tab ภายในด้านบน (gray shaded area) ของเอนทิตี
ในชื่อเรื่อง เขียนแอพพลิเคชัน
กำหนดเทมเพลตเป็น 1 คอลัมน์
คลิกปุ่ม Add

บันทึก Entity ของคุณ

หมายเหตุ: เป็นแนวปฏิบัติที่ดีเสมอในการบันทึก Entity หลังจากมีการตั้งค่า configuration ใหม่ทุกครั้ง

เมื่อการกำหนดค่าแท็บของคุณเสร็จสมบูรณ์แล้ว ด้านล่างนี้คือลักษณะของเอนทิตีของคุณควรมีลักษณะดังนี้

ขั้นตอนต่อไปคือการสร้างโมดูลหลักภายใต้แท็บหลักและลากฟิลด์ภายในโมดูลหลักเพื่อเริ่มสร้างแบบฟอร์มอัจฉริยะ ให้เราเริ่มต้นด้วยการกำหนดค่าโมดูลหลัก

Module Configuration

ลาก 1-1 โมดูลด้านล่างแท็บหลักของเอนทิตีในพื้นที่ที่เน้นสีน้ำเงิน
เลือก 2 คอลัมน์ในหน้าจอเค้าการปรับแต่ง Layout
.คลิกที่ Accept

ในชื่อโมดูล ให้ป้อน "Application"
ใน ชื่อตาราง ให้เลือก "oneweb_application(T)"
คลิก OK

หมายเหตุ: สามารถลากและวางฟิลด์ภายในโมดูลได้ก็ต่อเมื่อผู้ใช้เพิ่มแถวในเค้าโครงโมดูลตามที่กล่าวไว้ข้างต้นในขั้นตอนที่ 5 แล้วเท่านั้น

ด้านล่างนี้คือลักษณะที่เอนทิตีของคุณควรมีลักษณะก่อนที่คุณจะเริ่มต้นด้วยการกำหนดค่าฟิลด์

หมายเหตุ: เนื้อหาที่เขียนด้วยข้อความสีแดงภายในกล่องมีไว้เพื่อจุดประสงค์ในการทำความเข้าใจเท่านั้น และจะไม่ปรากฏในเอนทิตีของคุณ

Field Configuration

ดังที่แสดงใน Prototype Smart Form Screen 1 ด้านล่าง คุณต้องสร้างฟิลด์ 10 ช่องภายในการกำหนดค่าโมดูลหลักของคุณเพื่อสร้าง Smart Form ตัวอย่างนี้ ตอนนี้เรามาเริ่มการกำหนดค่าของแต่ละฟิลด์ทีละรายการ

หมายเหตุ: เป็นการดีเสมอที่จะลากและวางฟิลด์ที่ซ่อนอยู่ภายในการกำหนดค่าของคุณเพื่อจัดเก็บคีย์ - คีย์หลัก/และคีย์ต่างประเทศ (ถ้ามี) ก่อนเสมอ ในตัวอย่างข้างต้น Prototype screen 1 คุณจะต้องสร้างขึ้นใหม่ hidden field ภายในการกำหนดค่าโมดูลหลักเพื่อจัดเก็บ primary key เช่น "APPLICATION_ID" เพื่อ "oneweb_application(T)" ตารางที่ใช้ในการกำหนดค่าโมดูลหลักด้านบน

Hidden Field to store Primary Key

ลากช่องที่ซ่อนอยู่ภายในแถวว่าง 1 คอลัมน์ 1 ดังที่แสดงด้านล่างในขั้นตอนที่ 1
ภายใน "hidden field configuration" ตั้งค่า FIELD_ID เป็น "APPLICATION_ID" ในขั้นตอนที่ 2 (หมายเหตุ: "APPLICATION_ID" ที่ Primary Key ใน "oneweb_application(T)" table)
คลิก OK

ให้เราลากฟิลด์อื่นๆ ภายในการกำหนดค่าโมดูลเพื่อสร้างสมาร์ทฟอร์มที่ต้องการเหมือนใน screen 1

Date Field Configuration

ลากและวางฟิลด์ "Calendar" ภายในโมดูล Configuration
ใน FIELD_ID เข้า APPLICATION_DATE
ใน showFieldName ให้ป้อนวันที่
ตั้งค่า searchCriteria เป็น "Y"
ตั้งค่า showSearch เป็น "Y"
ตั้งค่า searchFromTo เป็น "Y"
คลิก OK

Dynamic List Field Configuration (Channel)

ลากและวางฟิลด์ "Dynamic List" ภายในโมดูล Configuration
ในตาราง Table Name ป้อน ew_list_box_master
ใน Column Show ป้อน DISPLAY_NAME
ใน Column Value ป้อน DISPLAY_CODE
ใน Condition Value ป้อน category_code='CHANNEL'
ใน FIELD_ID ป้อน CHANNEL
ใน showFieldName ป้อน Channel
ตั้งค่า searchCriteria เป็น "Y"
ตั้งค่า showSearch เป็น "Y"
คลิก OK

Dynamic List Field Configuration (Office Code)

ลากและวางฟิลด์ "Dynamic List" ภายในโมดูล Configuration
ในตาราง Table Name ป้อน ew_list_box_master
ใน Column Show ป้อน DISPLAY_NAME
ใน Column Value ป้อน DISPLAY_CODE
ใน Condition Value ป้อน category_code= 'OFFICE_CODE'
ใน FIELD_ID ป้อน OFFICE_CODE
ใน showFieldName เข้า Office Code
ตั้งค่า searchCriteria เป็น "Y"
ตั้งค่า showSearch เป็น "Y"
คลิก OK

Text Box Field Configuration (Finance Amount)

ลากและวางฟิลด์ "Text Box" ภายในโมดูล Configuration
เปิดหน้าต่าง Text Box Configuration โดยคลิกที่ไอคอนแก้ไขบนฟิลด์
ใน FIELD_ID เข้า FINANCE_AMOUNT
ใน showFieldName เข้า Finance Amount
ตั้งค่า showSearch เป็น "Y"
คลิก OK

CheckBox Field Configuration (Email)

ลากและวางฟิลด์ "CheckBox" ภายในโมดูล Configuration
เปิดหน้าต่าง Checkbox Configuration Property โดยคลิกที่ไอคอนแก้ไขบนฟิลด์
สำหรับเงื่อนไขแรก ในคอลัมน์ Value เขียน Y , ShowName เป็น Yes, SEQ เป็น 10, DefaultCheck เป็น NO และจากนั้นคลิกที่ไอคอน Add เพิ่มบรรทัดแรก
สำหรับเงื่อนไขที่สอง ในคอลัมน์ Value เขียน N , ShowName เป็น No, SEQ เป็น 20, DefaultCheck เป็น NO และจากนั้นคลิกที่ไอคอน Add เพิ่มบรรทัดที่สอง
ใน FIELD_ID เข้า EMAIL
ใน showFieldName เข้า Email
คลิก OK

หมายเหตุ: ตอนนี้คุณได้กำหนดค่า 5 ฟิลด์แรกภายในการกำหนดค่าโมดูลสมาร์ทฟอร์มของคุณแล้ว หน้าจอการกำหนดค่าของคุณคาดว่าจะมีลักษณะเหมือนกับด้านล่าง ในกรณีที่พบความคลาดเคลื่อนหรือไม่ตรงกันบนหน้าจอการกำหนดค่าของคุณเมื่อเปรียบเทียบกับหน้าจอด้านล่าง คุณต้องตรวจสอบอีกครั้งและทำตามคำแนะนำที่ให้ไว้ด้านบนสำหรับการตั้งค่าแต่ละฟิลด์

ให้เราดำเนินการต่อกับช่องอื่นๆ ที่เหลือตามเค้าโครงของเราบนตัวอย่าง Screen 1

Dynamic List Field Configuration (Product)

ลากและวางฟิลด์ "Dynamic List" ภายในโมดูล Configuration
เปิดหน้าต่าง Dynamic List Box Configuration Property โดยคลิกที่ไอคอนแก้ไขบนฟิลด์
ในตาราง Table Name ป้อน ew_list_box_master
ใน Column Show ป้อน DISPLAY_NAME
ใน Column Value ป้อน DISPLAY_CODE
ใน Condition Value ป้อน category_code='PRODUCT'
ใน FIELD_ID ป้อน PRODUCT
ใน showFieldName ป้อน Produce
ตั้งค่า searchCriteria เป็น "Y"
ตั้งค่า showSearch เป็น "Y"
คลิก OK

Dynamic List Field Configuration (Customer Type)

ลากและวางฟิลด์ "Dynamic List" ภายในโมดูล Configuration
เปิดหน้าต่าง Dynamic List Box Configuration Property โดยคลิกที่ไอคอนแก้ไขบนฟิลด์
ในตาราง Table Name ป้อน ew_list_box_master
ใน Column Show ป้อน DISPLAY_NAME
ใน Column Value ป้อน DISPLAY_CODE
ใน Condition Value ป้อน category_code=' CUSTOMER_TY'
ใน FIELD_ID ป้อน CUSTOMER_TYPE
ใน showFieldName ป้อน Customer Type
ตั้งค่า searchCriteria เป็น "Y"
ตั้งค่า showSearch เป็น "Y"
คลิก OK

Text Box Field Configuration (Term Loan)

ลากและวางฟิลด์ "Text Box" ภายในโมดูล Configuration
เปิดหน้าต่าง Text Box Configuration โดยคลิกที่ไอคอนแก้ไขบนฟิลด์
ใน FIELD_ID ป้อน TERM_LOAN
ใน showFieldName ป้อน Term Loan
ตั้งค่า showSearch เป็น "Y"
คลิก OK

Dynamic List Field Configuration (Status)

ลากและวางฟิลด์ "Dynamic List" ภายในโมดูล Configuration
เปิดหน้าต่าง Dynamic List Box Configuration Property โดยคลิกที่ไอคอนแก้ไขบนฟิลด์
ในตาราง Table Name ป้อน ew_list_box_master
ใน Column Show ป้อน DISPLAY_NAME
ใน Column Value ป้อน DISPLAY_CODE
ใน Condition Value ป้อน category_code= 'STATUS'
ใน FIELD_ID ป้อน STATUS
ใน showFieldName ป้อน STATUS
ตั้งค่า showSearch เป็น "Y"
คลิก OK

เมื่อคุณกำหนดค่าฟิลด์ที่ต้องการทั้งหมดข้างต้นภายใต้โมดูลหลักของคุณเสร็จแล้ว หน้าจอของคุณควรมีลักษณะดังนี้

บันทึก Entity ของคุณ

หมายเหตุ: เป็นแนวปฏิบัติที่ดีเสมอในการบันทึก Entity หลังจากการกำหนดค่าใหม่แต่ละครั้ง

Set Primary Key of Main Module

เมื่อคุณเพิ่มฟิลด์ที่จำเป็นทั้งหมดภายในการกำหนดค่าโมดูลหลักของคุณแล้ว ขั้นตอนต่อไปคือการตั้งค่าคีย์หลักของ "Appliaction" โมดูลหลักของคุณ

หมายเหตุ: คีย์หลักถูกสร้างขึ้นแล้วด้านบนเป็นฟิลด์ที่ซ่อนอยู่ในตอนเริ่มต้นของการกำหนดค่าฟิลด์

เลือก "APPLICATION_ID" เป็น Module Key
เพิ่ม KeyLen เป็น “7”
เลือก Sequence เป็น "ONEWEB_APPLICATION_SEQ"
คลิกไอคอนที่เพิ่มแถว
คลิก OK

บันทึก Entity ของคุณ

หมายเหตุ: เป็นแนวปฏิบัติที่ดีเสมอในการบันทึก Entity หลังจากการกำหนดค่าใหม่ทุกครั้ง

Add Lower Tab (Child Tab) inside your Entity]

ลาก Normal Tab เข้าไปด้านในด้านล่าง (พื้นที่สีเทา ) ของเอนทิตีของคุณ
ป้อนชื่อเรื่องเป็น "Customer"
ตั้งค่า Template เป็น 1 column
คลิกที่ Add

เมื่อคุณทำการกำหนดค่าแท็บ (Child) เสร็จแล้ว ขั้นตอนต่อไปคือการสร้างโมดูลภายใต้แท็บ (Child) ของคุณ และลากฟิลด์ภายในโมดูล(Child) นี้เพื่อเริ่มสร้างฟิลด์ที่จำเป็นอื่นๆ สำหรับฟอร์มสมาร์ทของคุณ ให้เราเริ่มต้นด้วยการกำหนดค่าโมดูลแท็บ (Child)

Module Configuration (Child)

ลาก 1-Many โมดูลด้านล่างแท็บ Lower/Child ของเอนทิตีของคุณ
คลิกที่ไอคอนแก้ไขเพื่อเปิดหน้าต่างการกำหนดค่าโมดูล

ในชื่อโมดูล ให้ป้อน "Customer Information"
ในชื่อตาราง เลือก "oneweb_customer(T)"
คลิก OK

Field Configuration for Child Module (Customer)

ดังที่แสดงใน Prototype Smart Form Screen 1 คุณจะต้องสร้าง 8 ฟิลด์ภายใน Child Module ของคุณเพื่อเก็บรายละเอียดลูกค้า ช่องที่ต้องกรอกคือ: ชื่อ นามสกุล ประเภทบุคคล เพศ วันเกิด ข้อมูลประจำตัว และ 2 ช่องที่ซ่อนอยู่ มีการใช้ฟิลด์ที่ซ่อนอยู่ที่นี่เพื่อเก็บทั้งคีย์หลักและคีย์ต่างประเทศเพื่อเชื่อมโยง Child Module นี้กับตารางโมดูลหลัก

ตัวอย่างเช่น "CUSTOMER_ID" เป็นคีย์หลักในตาราง "oneweb_customer(T)" ที่ใช้ในการกำหนดค่า Child Module นี้ และ "APPLICATION_ID" เป็นคีย์นอกในตารางนี้เพื่อเชื่อมโยงกับตารางโมดูลหลัก เช่น "oneweb_application(T)" มาเริ่มการกำหนดค่าฟิลด์สำหรับ Child Module นี้กันเลย

Hidden Field to store Primary Key (CUSTOMER_ID)

ลากและวาง hidden field ภายในโมดูล Configuration
คลิกที่ไอคอนแก้ไขเพื่อเปิดหน้าต่างการกำหนดค่าฟิลด์ของ Hidden Field
ใน "hidden field configuration”
ตั้งค่า FIELD_ID เป็น "CUSTOMER_ID"
เลือกชื่อเดียวกันสำหรับ ShowFieldName โดยคลิกที่ไอคอนทำซ้ำ
คลิก OK

Hidden Field to store Foreign Key (APPLICATION_ID)

ลากและวาง hidden field ภายในโมดูล Configuration
คลิกที่ไอคอนแก้ไขเพื่อเปิดหน้าต่างการกำหนดค่าฟิลด์ของ Hidden Field
ใน "hidden field configuration”
ตั้งค่า FIELD_ID เป็น "APPLICATION_ID"
เลือกชื่อเดียวกันสำหรับ ShowFieldName โดยคลิกที่ไอคอนทำซ้ำ
คลิก OK

Text Box Field Configuration (First Name)

ลากและวาง "Text Box" ภายในโมดูล Configuration
เปิดหน้าต่าง Text Box Configuration โดยคลิกที่ไอคอนแก้ไขบนฟิลด์
ใน FIELD_ID ป้อน FIRST_NAME
ใน showFieldName ป้อน First Name
ตั้งค่า showSearch เป็น "Y"
คลิก OK

Text Box Field Configuration (Last Name)

ลากและวาง "Text Box" ภายในโมดูล Configuration
เปิดหน้าต่าง Text Box Configuration โดยคลิกที่ไอคอนแก้ไขบนฟิลด์
ใน FIELD_ID ป้อน LAST_NAME
ใน showFieldName ป้อน Last Name
ตั้งค่า showSearch เป็น "Y"
คลิก OK

Dynamic List Field Configuration (Personal Type)

ลากและวาง "Dynamic List" ภายในโมดูล Configuration
เปิดหน้าต่าง Dynamic List Box Configuration Property โดยคลิกที่ไอคอนแก้ไขบนฟิลด์
ในชื่อตาราง ป้อน ew_list_box_master
ใน Column Show ป้อน DISPLAY_NAME
ใน Column Value ป้อน DISPLAY_CODE
ใน Condition Value ป้อน category_code='PERSONAL_TYPE'
ใน FIELD_ID ป้อน PERSONAL _TYPE
ใน showFieldName ป้อน PERSONAL_TYPE
ตั้งค่า showSearch เป็น "Y"
คลิก OK

Dynamic List Field Configuration (GENDER)

ลากและวาง "Dynamic List" ภายในโมดูล Configuration
เปิดหน้าต่าง Dynamic List Box Configuration Property โดยคลิกที่ไอคอนแก้ไขบนฟิลด์
ในชื่อตาราง ป้อน ew_list_box_master
ใน Column Show ป้อน DISPLAY_NAME
ใน Column Value ป้อน DISPLAY_CODE
ใน Condition Value ป้อน category_code='GENDER'
ใน FIELD_ID ป้อน GENDER
ใน showFieldName ป้อน Gender
ตั้งค่า showSearch เป็น "Y"
คลิก OK

Date Field Configuration (Date Of Birth)

ลากและวาง "Calendar" ภายในโมดูล Configuration
ใน FIELD_ID ป้อน DATE_OF_BIRTH
ใน showFieldName ป้อน Date of Birth
ตั้งค่า showSearch เป็น "Y"
คลิก OK

Text Box Field Configuration (Identification)

ลากและวาง "Text Box" ภายในโมดูล Configuration
ใน FIELD_ID ป้อน IDENTIFICATION
ใน showFieldName ป้อน Identification
ตั้งค่า showSearch เป็น "Y"
คลิก OK

บันทึก Entity ของคุณ

Set Primary Key and Parent Key in Child Module:

หลังจากเพิ่มฟิลด์ที่จำเป็นทั้งหมดในการกำหนดค่าโมดูลย่อยขั้นตอนต่อไปคือการตั้งค่าโมดูลย่อย (Customer Information) คีย์หลัก (Customer_ID) และแผนที่การอ้างอิงไปยังโมดูลหลัก (Application)

Procedure:

เลือก "CUSTOMER_ID" เป็น Module Key
เพิ่ม KeyLen เป็น "7"
เลือก Sequence เป็น "ONEWEB_CUSTOMER_SEQ"
คลิกไอคอนเพื่อเพิ่มแถวแรกภายในการกำหนดค่าโมดูล
เลือก "APPLICATION_ID" เป็น Module Key
เลือก "APPLICATION_ID" เป็น Parent Key
คลิกไอคอนเพื่อเพิ่มแถวที่สองภายในการกำหนดค่าโมดูล
คลิก OK

ตอนนี้ เมื่อคุณกำหนดค่าสำหรับแท็บ Lower/child เสร็จแล้ว (Customer) กำหนดค่า Child Module (Customer Information) และฟิลด์และคีย์ที่จำเป็นทั้งหมดสำหรับ Child Module หน้าจอการกำหนดค่าของคุณควรมีลักษณะดังนี้

Generate Instant Preview to review your Smart Form

คุณยังสามารถสร้างตัวอย่างสมาร์ทฟอร์มของคุณได้ทันทีเพื่อดูว่าจะปรากฏอย่างไรต่อผู้ใช้ปลายทาง หากต้องการสร้างตัวอย่างทันทีสำหรับการกำหนดค่าของคุณ ให้คลิกสร้างไอคอนแสดงตัวอย่างที่ด้านบนซ้าย "Entity Menu"ดังที่แสดงด้านล่าง

หน้าต่างใหม่จะเปิดขึ้นเพื่อแสดงหน้าจอผู้ใช้ (Facade Screen) ของ Smart Form ของคุณ ดังที่แสดงด้านล่าง

Button Configuration for your Sample Smart Form

ตอนนี้คุณต้องมีการกำหนดค่าปุ่ม 2 ประเภทภายในฟอร์มอัจฉริยะของคุณเพื่อดำเนินการกำหนดค่าฟอร์มสมาร์ทตัวอย่างให้เสร็จสมบูรณ์

Entity Button ปุ่มเอนทิตีอำนวยความสะดวกในการดำเนินการสำหรับสมาร์ทฟอร์มทั้งหมด เช่น การเรียกฐานข้อมูลหรือ Cancel /Reject การดำเนินการบนสมาร์ทฟอร์มของคุณ

Module Button อำนวยความสะดวกในการดำเนินการของผู้ใช้สำหรับโมดูล 1-Many ซึ่งจะไม่ส่งผลกระทบต่อเอนทิตีทั้งหมดและสามารถใช้เพื่อเพิ่ม ลบ หรืออัปเดตเรกคอร์ดของโมดูลได้

Configure Entity Button of your sample Smart Form

เพิ่มปุ่ม Search

ลากและวางปุ่มเอนทิตีใต้เค้าโครงแท็บหลัก (Application)
เลื่อนเมาส์ไปที่ปุ่มและคลิกที่ไอคอนแก้ไขเพื่อเปิดหน้าต่างการกำหนดค่าปุ่ม
ในชื่อปุ่ม ป้อน Search
ในหน้า Action ป้อน ENTITY_SEARCH
ในปุ่ม Action เลือก searchResult()
คลิก OK

เพิ่มปุ่ม New

ลากและวางปุ่มเอนทิตีถัดจากปุ่มก่อนหน้า
ในชื่อปุ่ม ป้อน New
ในหน้า Action ป้อน ENTITY_SEARCH
ในปุ่ม Action เลือก addResult()
คลิก OK

เพิ่มปุ่ม Save

ลากและวางปุ่มเอนทิตีถัดจากปุ่มเอนทิตีอื่นๆ
ในชื่อปุ่ม ป้อน Save
ในหน้า Action ป้อน ENTITY_SEARCH
ในปุ่ม Action เลือก saveResult()
คลิก OK

เพิ่มปุ่ม Cancle

ลากและวางปุ่มเอนทิตีถัดจากปุ่มเอนทิตีอื่นๆ
คลิกที่ไอคอนแก้ไขเพื่อเปิดหน้าต่างการกำหนดค่าของปุ่ม
ในชื่อปุ่ม ป้อน Cancle
ในหน้า Action ป้อน ENTITY_SEARCH
ในปุ่ม Action เลือก cancleResult()
คลิก OK

บันทึก Entity ของคุณ

Configure Module Button of your sample Smart Form

เพิ่มปุ่ม Add

ลากและวางปุ่มโมดูลด้านล่างเค้าโครงแท็บ Child (Customer Info)
เลื่อนเมาส์ไปที่ปุ่มและคลิกที่ไอคอนแก้ไขเพื่อเปิดปุ่ม
ในชื่อปุ่ม ป้อน Add
ในหน้า Action ป้อน SUB_SEARCH
ในปุ่ม Action เลือก popupActionFlow('[MODULE_ID]')
คลิก OK

เพิ่มปุ่ม Delete

ลากและวางปุ่มโมดูลข้างปุ่มโมดูลอื่น
ในชื่อปุ่ม ป้อน Delete
ในหน้า Action ป้อน SUB_SEARCH
ในปุ่ม Action เลือก [MODULE_ID]Delete()
คลิก OK
เพิ่มปุ่ม Save
ลากและวางปุ่มโมดูล ถัดจากปุ่มโมดูลอื่นๆ
คลิกปุ่มที่ไอคอนแก้ไขเปิดหน้าต่างการกำหนดค่า
ในชื่อปุ่ม ป้อน Save
ในหน้า Action ป้อน INSERT
ในปุ่ม Action เลือก actionFormSubmit('insertMany,'Y')
คลิก OK

เพิ่มปุ่ม Cancel

ลากและวางปุ่มโมดูล ถัดจากปุ่มโมดูลอื่นๆ
ในชื่อปุ่ม ป้อน Cancle
ในหน้า Action ป้อน INSERT
ในปุ่ม Action เลือก $(#many_[MODULE_ID]_dialog('close');
คลิก OK

บันทึก Entity ของคุณ

ขอแสดงความยินดี คุณสร้างสมาร์ทฟอร์มตามตัวอย่างที่ให้ไว้ด้านบนได้สำเร็จ คุณสามารถเปิดดูตัวอย่างการค้นหา/สร้าง Smart Form ได้ทันทีเพื่อดูว่าจะปรากฏอย่างไรต่อผู้ใช้ปลายทาง/ผู้ใช้แอพพลิเคชัน และสามารถเพิ่มข้อมูลธุรกิจและรายละเอียดลูกค้าสำหรับวัตถุประสงค์ในการทดสอบได้

หากต้องการสร้างการแสดงตัวอย่างทันทีสำหรับการกำหนดค่าของคุณ ให้คลิกสร้างไอคอนแสดงตัวอย่างที่ด้านบนซ้าย "Entity Menu" ดังที่แสดงด้านล่าง