LogoLogo
TH
TH
  • เริ่มต้นกับ AVALANT ONEWEB
    • เริ่มต้นกับ Avalant ONEWEB
    • การพัฒนาแบบดั้งเดิมเทียบกับ Low Code
    • แนวคิดของ ONEWEB
      • แอพพลิเคชัน ONEWEB
      • ONEWEB AppSpace
      • ONEWEB Runtimes
      • สตูดิโอออกแบบ ONEWEB
  • การติดตั้งและตั้งค่า ONEWEB PLATFORM
    • ติดตั้งและกําหนดค่าแพลตฟอร์ม ONEWEB
    • วางแผนการติดตั้ง ONEWEB ของคุณ
      • ออกแบบสถาปัตยกรรม ONEWEB
        • สถาปัตยกรรมอิสระ
        • สถาปัตยกรรมความพร้อมใช้งานสูง
        • สถาปัตยกรรมคลาวด์
        • การผลิตเทียบกับการกู้คืนจากภัยพิบัติเทียบกับสภาพแวดล้อมการทดสอบ
        • การกําหนดค่าเซิร์ฟเวอร์ ONEWEB
        • การตรวจสอบใน ONEWEB
      • การพิจารณาขนาด
        • การปรับขนาด CPU
        • การปรับขนาดหน่วยความจํา
        • การปรับขนาดพื้นที่จัดเก็บ
        • การปรับขนาดเครือข่าย
      • ตรวจสอบข้อกำหนดเบื้องต้นสำหรับการติดตั้ง ONEWEB
        • ข้อกําหนดของฮาร์ดแวร์
        • ข้อกําหนดของซอฟต์แวร์
        • ข้อกําหนดของฐานข้อมูล
        • ข้อกําหนดด้านความปลอดภัย
        • ข้อกําหนดของเครือข่าย
        • ความต้องการของลูกค้า
        • Third-party Tools
    • ติดตั้งและจัดการคอมโพเนนต์ ONEWEB
      • สิทธิ์ของผู้ใช้
      • เตรียมซอฟต์แวร์ที่จำเป็น
        • เตรียมเซิร์ฟเวอร์ฐานข้อมูล
          • PostgreSQL
        • เตรียมเว็บเซิร์ฟเวอร์
          • Apache Web Server
        • เตรียมเซิร์ฟเวอร์แอพพลิเคชัน
          • การกำหนดค่า ONEWEB บน Wildfly
            • ขั้นตอนที่ 1 เตรียมสิทธิ์ผู้ใช้ฐานข้อมูล
            • ขั้นตอนที่ 2 กำหนดค่าการเข้าถึง Wildfly Management Console
            • ขั้นตอนที่ 3 สร้าง driver ฐานข้อมูล
            • ขั้นตอนที่ 4 สร้างแหล่งข้อมูล
            • ขั้นตอนที่ 5 ปรับใช้ไฟล์เก็บถาวรของแอพพลิเคชัน
            • ขั้นตอนที่ 6 การลงชื่อเพียงครั้งเดียว
            • ขั้นตอนที่ 7 การเข้ารหัส Wildfly และ Undertow
            • ขั้นตอนที่ 8 การรับรองความถูกต้องด้วย Wildfly
            • ขั้นตอนที่ 9 การพิสูจน์ตัวตนด้วย LDAP
          • ปรับแต่งเธรด
      • ติดตั้งส่วนประกอบแอพพลิเคชัน ONEWEB
        • ติดตั้ง ONEWEB Application Designer
        • ติดตั้ง ONEWEB Application Server
        • ติดตั้ง ONEWEB Page Designer
        • ติดตั้ง ONEWEB Page Server
      • การติดตั้งส่วนประกอบกระบวนการทำงานของ ONEWEB
        • ติดตั้ง ONEWEB Process Designer
        • ติดตั้ง ONEWEB Process Server
      • ติดตั้งส่วนประกอบการรวม ONEWEB
        • ติดตั้ง ONEWEB Microflow Designer
        • ติดตั้ง ONEWEB Microflow Server
        • ติดตั้ง ONEWEB IAM
      • ตรวจสอบการติดตั้ง ONEWEB
        • การตรวจสอบแอพพลิเคชัน
        • การตรวจสอบกระบวนการ
        • การตรวจสอบการรวมระบบ
  • การออกแบบและพัฒนาแอพพลิเคชันโดย ONEWB
    • การออกแบบและพัฒนาแอพ ONEWEB
    • การออกแบบแอพ ONEWEB
      • วิธีการเลือกระหว่างเว็บแอพและแอพมือถือ
      • วิธีการเลือกรูปแบบการออกแบบ ONEWEB ของคุณ
        • แอพ UI: UX/UI เท่านั้น
        • ประมวลผลกระบวนการทางธุรกิจของแอพเท่านั้น
        • แอพส่วนต่อประสาน: การรวมเข้ากับระบบอื่นเท่านั้น
        • แอพที่ซับซ้อน: รวม UX / UI, กระบวนการทางธุรกิจและอินเทอร์เฟซ
    • ออกแบบและพัฒนา UX/UI
      • UX/UI คืออะไร?
      • แนวทางปฏิบัติที่ดีที่สุดสําหรับ UX/UI
        • สิ่งที่ควรทำ (Do)
        • สิ่งที่ไม่ควรทำ (Don't)
        • วิธีเลือกระหว่าง Smart Form และ Page
      • ส่วนประกอบ UX/UI (UX/UI Components)
        • Smart Forms
          • Entity คืออะไร?
          • โมดูลภายในเอนทิตี
          • ปุ่มและการกระทํา
          • โหมดเอนทิตี
          • รูปแบบสมาร์ทฟอร์ม
            • Single Tab Forms
            • Multiple Tab Forms (General Tab)
            • Parent Child Forms
          • ขั้นตอนการสร้าง Smart Form ครั้งแรก
            • Step by Step เพื่อสร้างสมาร์ทฟอร์มแรกของคุณ
            • ปรับใช้รูปแบบ smart form ของคุณ
          • คุณสมบัติของ Smart Form
            • การค้นหาสากล
        • Pages
          • เพจคืออะไร?
            • Static Page
            • Dynamic Page
            • Page Navigation
          • คุณสมบัติของ Page
            • Header Footer
            • Dynamic Image
            • Switch Language
            • Custom Font
            • Custom Icon
            • Pass Parameter
            • Signature Pad
            • Theme Designer
            • Local Storage in Page
            • Sync Service in Page
            • Local Notification in Page
            • Push Notification in Page
            • Multi-language
            • Splash Screen
            • Plugin
            • App Icon
            • PGD Directives
            • Charts
            • UI Kits
            • Component Extension
            • Share Pages as Template
            • Page Expression Editor
            • Page Structure window
            • Popup Properties Editor
            • Box Model Editor
            • Environment Variables
            • Improved Drag & Drop
            • Microflow Version settings
            • Custom Dependencies
            • Navbar
            • Display Flex
            • Builder setting
          • เริ่มการสร้าง Web Page Application
            • ขั้นตอนการสร้างหน้าแรกของคุณ
            • การแสดงตัวอย่างเว็บเพจ
          • เริ่มการสร้าง Mobile Page Application
            • ขั้นตอนการสร้างหน้าเพจมือถือ
            • แสดงตัวอย่างแอพมือถือ
            • Mobile App CI/CD
        • Dashboard
          • Widget Dashboard
            • ขั้นตอนในการสร้าง widget dashboard
              • สร้างหน้า dashboard
              • สร้างเมนู dashboard
              • สร้าง chart widget
              • เพิ่ม widget บนเพจ
              • กำหนดค่า chart widget
              • กำหนดค่าชุดแผนภูมิ
              • แก้ไขชุดแผนภูมิ
              • เปลี่ยนแผนภูมิเป็นแผนภูมิวงกลม
              • เปลี่ยนสีของวงกลม
              • เพิ่มชุดข้อมูลอื่นลงในแผนภูมิ
              • เปลี่ยนแผนภูมิเป็นแผนภูมิแบบเรียงซ้อนของคอลัมน์
              • เปลี่ยนสีชุดข้อมูล
            • ปรับใช้ dashboard ของคุณ
          • Dashboard ที่ใช้ของ Page Extension
            • เพิ่ม chart ลงใน page
            • สร้าง Microflow
            • รวมแผนภูมิกับข้อมูล
        • รายงาน
          • การทำงานร่วมกับเครื่องมือการรายงาน
        • Menu & Navigation
          • เมนูและการนําทางใน ONEWEB
          • เชื่อมโยงเมนูไปยัง smart form
          • เชื่อมโยงเมนูไปที่ page
          • เชื่อมโยงเมนูไปยัง URL ภายนอก
      • UX /UI มือถือ
        • Web Responsive
          • Smart Form Responsive
          • Web Page Responsive
        • Mobile hybrid
        • Build Mobile App
          • เพิ่ม CI Server
          • รายละเอียด AppStore และ Playstore
      • การปรับแต่ง UX/UI
        • การปรับแต่ง Smart Form
          • ปรับแต่ง Look & Feel
          • เพิ่มตรรกะการตรวจสอบความถูกต้อง
          • เพิ่มตรรกะการคํานวณ
          • เพิ่ม SQL แบบกําหนดเอง
          • เพิ่ม class Java ภายนอก
        • การปรับแต่งหน้า
          • CSS ที่กําหนดเอง
          • JS action ที่กำหนดเอง
          • แหล่งข้อมูลของบุคคลที่สาม (Third party resources)
          • Extensions ที่กำหนดเอง
        • แอพมือถือ
      • การรวม UX/UI เข้ากับ Process, Micro flow, UI ภายนอก
        • การรวม Smart Form เข้ากับ Process
        • การรวม Page กับ Microflow
        • การรวม Page กับ Process
        • การรวม Smart Form กับ Microflow
      • Import/Export/Clone UX/UI
        • Export Import Clone Smart Forms
          • Export Entity
          • Import Entity
          • Clone Entity
        • Export Import Clone in Pages
          • Export Import App
          • Clone Pages
          • Import page จาก App อื่น
      • UX/UI Test & Debug guideline
    • ออกแบบและพัฒนา Process
      • Process คืออะไร?
      • แนวทางปฏิบัติที่ดีที่สุดสําหรับ Process Design
      • ส่วนประกอบของ Process
        • Business Process คืออะไร?
        • Process Template Diagram
        • Process Activity
          • Human Task
            • การจัดสรรงานและการจัดคิวสำหรับ Human Task
          • Gateway Decision
          • Web Service Task
          • Sub Process
          • Java Task
          • Database Task
          • File Read Task
          • File Input Task
          • Timer
          • Error Handling
          • Event Trigger
          • Push Notification
        • Business Object & Data Mapping
        • Formula Editor
          • Formula Editor for Data Mapping
          • Formula Editor for Gateway Condition
        • Work Party
        • Upload File
        • Environment Configuration
        • Process Instance
      • สร้าง Process แรกของคุณ
        • สร้างแอพพลิเคชัน
        • สร้าง process diagram ของคุณ
        • จำลอง process ของคุณ
        • ปรับใช้ process ของคุณ
      • การรวม
        • การรวม Process กับ UX/UI
        • การรวม Process กับ Microflow
      • การตรวจสอบ
        • การตรวจสอบกระบวนการ
        • การตรวจสอบงาน
        • SLA & OLA
        • การตรวจสอบ Dashboard
      • การตรวจสอบความถูกต้องของกระบวนการ
      • นำเข้า/ส่งออก Process
      • การปรับใช้กระบวนการจากสภาพแวดล้อมการพัฒนาไปยังสภาพแวดล้อมอื่น
      • รายการสิ่งที่ต้องทำ
      • แนวทางการทดสอบและแก้ไขข้อบกพร่องของกระบวนการ
      • สลับภาษา
      • การโยกย้าย Instance ของ Process
      • ซิงค์ผู้ใช้
      • ส่วนขยายที่กําหนดเอง
        • สร้างพื้นที่ทำงานสำหรับ Extension
        • สร้าง extension ในพื้นที่ทํางาน
        • ติดตั้ง Extension ในแอพพลิเคชัน
        • จัดการ extension
        • ใช้ Extension ใน workflow
    • การทำงานร่วมกับระบบอื่นๆ
      • ONEWEB Integration คืออะไร?
        • การรวมกับระบบอื่น from/to Microflow
        • การรวมกับระบบอื่นๆ from/to Process Flow
        • การรวมกับ App Runtime
      • แนวทางปฏิบัติที่ดีที่สุดสําหรับการรวม ONEWEB
      • Microflow เปรียบเทียบกับ Process Flow
      • พัฒนาการผสานรวมกับ ONEWEB Microflow
        • Embedded Microflow เทียบกับ Runtime Microflow Server
        • Integration Node
        • Synchronous เทียบกับ Asynchronouse
        • Data Mapping
        • Logic/Coding แบบกำหนดเอง
        • การแปลงข้อมูล
        • สร้าง Microflow แรกของคุณ
          • สร้างแอพพลิเคชัน
          • จำลอง flow ของคุณ
          • ปรับใช้ Microflow ของคุณ
            • Embedded Microflow
            • Microflow Server
          • สร้าง Flow
        • การรวม Microflow กับ UX/UI
          • รวม Smart Form กับระบบอื่นๆ โดยใช้ Microflow
          • รวม Page กับระบบอื่นๆ โดยใช้ Microflow
        • นำเข้า/ส่งออก Microflow
        • Upload File
        • การกำหนดค่า Environment
        • สลับภาษา
        • Push Notification
        • ส่วนขยายที่กำหนดเอง
        • JSON Path Mapping
        • Excel Reader
        • Excel Writer
        • Validation Node
        • JavaScript Node
      • App Runtime REST API
        • ตัวอย่างกรณีการใช้งานสําหรับ APP Runtime API
        • สร้างแอพแบบกําหนดเองเพื่อเรียกใช้ APP Runtime REST API
      • Process Runtime REST API
        • ตัวอย่างกรณีการใช้งานสําหรับ Process API
    • การออกแบบข้อมูลและการจัดการการเข้าถึงเนื้อหา
      • การจัดการการเข้าถึงข้อมูล (Data Access Management)
      • แนวทางปฏิบัติสำหรับการจัดการการเข้าถึงข้อมูล
      • การเข้าถึงฐานข้อมูล
        • โครงสร้างฐานข้อมูล
        • การเข้าถึงข้อมูลจาก UX/UI
          • เข้าถึงฐานข้อมูลจาก Smart Forms
          • การเข้าถึงฐานข้อมูลผ่าน Page
        • การเข้าถึงฐานข้อมูลจาก Process
          • โหนด Database Activity
        • การเข้าถึงฐานข้อมูลจาก Microflow
          • โหนด Database
      • การเข้าถึงรูปภาพ ไฟล์ และเอกสาร
        • เข้าถึงผ่าน UX/UI
        • การเข้าถึงผ่านทาง Process/ Microflow
    • การออกแบบและใช้งานความรักษาความปลอดภัยและการปฏิบัติการตามข้อกำหนด
      • ความปลอดภัยและการปฏิบัติตามข้อกำหนด (What is Security & Compliance?)
      • แนวทางปฏิบัติที่ดีที่สุดสําหรับการรักษาความปลอดภัยและการปฏิบัติตามข้อกําหนด
      • ตรวจสอบ
        • การรวม LDAP
        • Open ID protocol
      • การอนุญาตและการควบคุมการเข้าถึง
        • Roles, Permissions และ Objects
        • การจัดการการควบคุมการเข้าถึงด้วย IAM
          • สร้างผู้ใช้
          • จัดการบทบาทและสิทธิ์ของผู้ใช้
          • จัดการสิทธิ์ และ Object
          • จัดการบทบาท
      • Token ใน ONEWEB
      • การบันทึก, การบันทึกการตรวจสอบ
      • รองรับ SSL
    • ออกแบบและพัฒนาแอพโดยใช้ AppSpace
      • สร้างแอพพลิเคชันใน AppSpace
      • เครื่องมือฐานข้อมูล
        • Data Designer
          • วิธีสร้างแอพ Data Designer
          • เครื่องมือ Data Designer
          • คุณสมบัติเอนทิตี
          • เปรียบเทียบ schemas
        • SQL Builder
          • วิธีสร้างแอพ SQL Builder
          • เครื่องมือ SQL Builder
          • การเชื่อมต่อ
        • Data Viewer
          • วิธีใช้ Data Viewer
          • เครื่องมือ Data Viewer
      • จัดการเวอร์ชันของแอพ
      • ไปป์ไลน์
        • ปรับใช้แอพพลิเคชัน
        • ปรับใช้ Kubernetes
        • การจัดการผู้ใช้
        • แจกจ่ายแอพ
      • จัดการการเข้าถึงของผู้ใช้
        • การบริหารทีมพัฒนา
        • การจัดการการเข้าถึงของผู้ใช้ปลายทาง
      • เปลี่ยนภาษาใน AppSpace
      • ลิ้งค์แอพพลิเคชัน
      • ลิ้งค์ส่วนประกอบ
      • รายละเอียดแอพ
        • แก้ไขแอพพลิเคชันที่มีลิ้งค์เสีย
      • ส่งออกแอพพลิเคชัน
      • นำเข้าแอพพลิเคชัน
      • Cloud Native
  • อ้างอิง
    • อ้างอิง
      • ข้อมูลอ้างอิง Page Designer
        • การสร้างแอปพลิเคชัน
          • การสร้าง Mobile Page
          • การสร้าง Web Page
        • เมนูเครื่องมือบน Page
          • เมนูเครื่องมือ Page Web
          • เมนูเครื่องมือ Mobile Pages
        • เครื่องมือจัดการ Page
          • เครื่องมือทั่วไป
            • การเพิ่ม element
            • การวาง element
            • การลบ element
            • การแก้ไขข้อความ
            • การจัดรูปแบบข้อความ
            • การเชื่อมไปยังหน้าอื่น
            • อัปโหลดรูปภาพ
            • การเพิ่มรูปภาพให้เพจ
            • การตั้งค่าเพิ่มเติม
        • Tab
          • การเพิ่ม Tab บน WEB
          • การเพิ่ม Tab บน Mobile
        • เมนู
          • การเพิ่มเมนูบน Mobile
  • คู่มือ API
    • คู่มือ API
    • App Runtime API
      • รายการ Method ทั้งหมดของ REST API และคำอธิบายการทำงานของฟังก์ชันการทำงานของ API
    • Process Runtime API
      • รายการ Method ทั้งหมดของ REST API และคำอธิบายการทำงานของฟังก์ชันการทำงานของ API
    • การจัดการ Session API
      • รายการ methods API ทั้งหมดของ Java และคำอธิบายการทำงานของ API
    • API ของMicroflow Runtime
      • รายการ Method ทั้งหมดของ REST API และคำอธิบายการทำงานของฟังก์ชันการทำงานของ API
    • IAM2 API
Powered by GitBook
On this page
Export as PDF
  1. การออกแบบและพัฒนาแอพพลิเคชันโดย ONEWB
  2. ออกแบบและพัฒนา UX/UI
  3. ส่วนประกอบ UX/UI (UX/UI Components)
  4. Smart Forms
  5. ขั้นตอนการสร้าง Smart Form ครั้งแรก

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

Last updated 2 years ago

ส่วนนี้จะอธิบายกระบวนการทีละขั้นตอนในการสร้างสมาร์ทฟอร์มแรกของคุณบน 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)

  1. สร้างเอนทิตีใหม่ ตรวจสอบสองขั้นตอนสุดท้ายของหน้าก่อนหน้า

  2. เปิดหน้าต่างคุณสมบัติเอนทิตีโดยคลิกที่ไอคอนแก้ไข (หากสร้าง Entity จาก AppSpace สามารถข้ามขั้นตอนนี้ได้)

  3. ในชื่อเอนทิตี ให้ป้อน "Application" (หากสร้างเอนทิตีจาก AppSpace ให้ข้ามขั้นตอนนี้ไป)

  4. คลิก Okay (หากสร้างเอนทิตีจาก AppSpace ให้ข้ามขั้นตอนนี้ไป)

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

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

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

  1. ลาก 2-Layer Tab ภายในด้านบน (gray shaded area) ของเอนทิตี

  2. ในชื่อเรื่อง เขียนแอพพลิเคชัน

  3. กำหนดเทมเพลตเป็น 1 คอลัมน์

  4. คลิกปุ่ม Add

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

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

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

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

Module Configuration

  1. ลาก 1-1 โมดูลด้านล่างแท็บหลักของเอนทิตีในพื้นที่ที่เน้นสีน้ำเงิน

  2. เลือก 2 คอลัมน์ในหน้าจอเค้าการปรับแต่ง Layout

  3. .คลิกที่ 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

  1. Date Field Configuration

  • ลากและวางฟิลด์ "Calendar" ภายในโมดูล Configuration

  • ใน FIELD_ID เข้า APPLICATION_DATE

  • ใน showFieldName ให้ป้อนวันที่

  • ตั้งค่า searchCriteria เป็น "Y"

  • ตั้งค่า showSearch เป็น "Y"

  • ตั้งค่า searchFromTo เป็น "Y"

  • คลิก OK

  1. 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

  1. 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

  1. Text Box Field Configuration (Finance Amount)

  • ลากและวางฟิลด์ "Text Box" ภายในโมดูล Configuration

  • เปิดหน้าต่าง Text Box Configuration โดยคลิกที่ไอคอนแก้ไขบนฟิลด์

  • ใน FIELD_ID เข้า FINANCE_AMOUNT

  • ใน showFieldName เข้า Finance Amount

  • ตั้งค่า showSearch เป็น "Y"

  • คลิก OK

  1. 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

  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

  1. 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

  1. Text Box Field Configuration (Term Loan)

  • ลากและวางฟิลด์ "Text Box" ภายในโมดูล Configuration

  • เปิดหน้าต่าง Text Box Configuration โดยคลิกที่ไอคอนแก้ไขบนฟิลด์

  • ใน FIELD_ID ป้อน TERM_LOAN

  • ใน showFieldName ป้อน Term Loan

  • ตั้งค่า showSearch เป็น "Y"

  • คลิก OK

  1. 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. ลาก 1-Many โมดูลด้านล่างแท็บ Lower/Child ของเอนทิตีของคุณ

  2. คลิกที่ไอคอนแก้ไขเพื่อเปิดหน้าต่างการกำหนดค่าโมดูล

  • ในชื่อโมดูล ให้ป้อน "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 นี้กันเลย

  1. Hidden Field to store Primary Key (CUSTOMER_ID)

  • ลากและวาง hidden field ภายในโมดูล Configuration

  • คลิกที่ไอคอนแก้ไขเพื่อเปิดหน้าต่างการกำหนดค่าฟิลด์ของ Hidden Field

  • ใน "hidden field configuration”

  • ตั้งค่า FIELD_ID เป็น "CUSTOMER_ID"

  • เลือกชื่อเดียวกันสำหรับ ShowFieldName โดยคลิกที่ไอคอนทำซ้ำ

  • คลิก OK

  1. Hidden Field to store Foreign Key (APPLICATION_ID)

  • ลากและวาง hidden field ภายในโมดูล Configuration

  • คลิกที่ไอคอนแก้ไขเพื่อเปิดหน้าต่างการกำหนดค่าฟิลด์ของ Hidden Field

  • ใน "hidden field configuration”

  • ตั้งค่า FIELD_ID เป็น "APPLICATION_ID"

  • เลือกชื่อเดียวกันสำหรับ ShowFieldName โดยคลิกที่ไอคอนทำซ้ำ

  • คลิก OK

  1. Text Box Field Configuration (First Name)

  • ลากและวาง "Text Box" ภายในโมดูล Configuration

  • เปิดหน้าต่าง Text Box Configuration โดยคลิกที่ไอคอนแก้ไขบนฟิลด์

  • ใน FIELD_ID ป้อน FIRST_NAME

  • ใน showFieldName ป้อน First Name

  • ตั้งค่า showSearch เป็น "Y"

  • คลิก OK

  1. Text Box Field Configuration (Last Name)

  • ลากและวาง "Text Box" ภายในโมดูล Configuration

  • เปิดหน้าต่าง Text Box Configuration โดยคลิกที่ไอคอนแก้ไขบนฟิลด์

  • ใน FIELD_ID ป้อน LAST_NAME

  • ใน showFieldName ป้อน Last Name

  • ตั้งค่า showSearch เป็น "Y"

  • คลิก OK

  1. 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

  1. 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

  1. Date Field Configuration (Date Of Birth)

  • ลากและวาง "Calendar" ภายในโมดูล Configuration

  • ใน FIELD_ID ป้อน DATE_OF_BIRTH

  • ใน showFieldName ป้อน Date of Birth

  • ตั้งค่า showSearch เป็น "Y"

  • คลิก OK

  1. Text Box Field Configuration (Identification)

  • ลากและวาง "Text Box" ภายในโมดูล Configuration

  • ใน FIELD_ID ป้อน IDENTIFICATION

  • ใน showFieldName ป้อน Identification

  • ตั้งค่า showSearch เป็น "Y"

  • คลิก OK

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

หมายเหตุ: เป็นแนวปฏิบัติที่ดีเสมอในการบันทึก 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 ของคุณ

หมายเหตุ: เป็นแนวปฏิบัติที่ดีเสมอในการบันทึก 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 ของคุณ

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

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

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

คลิกที่ไอคอน Layout Property

คลิกที่ไอคอนเพิ่มแถว เพื่อเพิ่มแถวที่จำเป็นใน layout ของคุณ

คลิกที่ไอคอนแก้ไข เพื่อเปิดการกำหนดค่าโมดูล ในหน้าต่างการกำหนดค่าโมดูล

ตอนนี้คุณก็พร้อมแล้ว "Main Tab" และ "Main Module" กำหนดค่า

เลือกชื่อเดียวกัน ShowFieldName (หมายเหตุ: นอกจากนี้ยังสามารถคัดลอกชื่อในการกำหนดค่าทั้งหมดโดยคลิกที่ไอคอนคัดลอก เพื่อทำซ้ำค่าเดียวกัน)

เปิดหน้าต่างคุณสมบัติของฟิลด์โดยคลิกไอคอนแก้ไขบนฟิลด์

เปิดหน้า Property ของฟิลด์โดยคลิกไอคอนแก้ไขบนฟิลด์

เปิดหน้าต่าง Dynamic List Box Configuration Property โดยคลิกที่ไอคอนแก้ไขบนฟิลด์

เปิดหน้าต่าง Module Property คลิกไอคอนแก้ไขบนโมดูล

เปิดหน้าต่าง Field Property โดยคลิกที่ไอคอนแก้ไข บนฟิลด์

เปิดหน้าต่าง Text Box Configuration โดยคลิกที่ไอคอนแก้ไข บนฟิลด์

เปิดหน้าต่าง Child Module Property คลิกไอคอนแก้ไขบนโมดูล

คลิกที่ปุ่มแก้ไข เปิดหน้าต่างการกำหนดค่า

คลิกที่ปุ่มแก้ไข เปิดหน้าต่างการกำหนดค่า

หน้าต่างการกำหนดค่า

คลิกปุ่มที่ไอคอนแก้ไข เปิดหน้าต่างการกำหนดค่า

คลิกปุ่มที่ไอคอนแก้ไข เปิดหน้าต่างการกำหนดค่า

Let us begin with Field Configuration.