Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
สมาร์ทฟอร์ม/เอนทิตีที่สร้างขึ้นโดยใช้แพลตฟอร์ม ONEWEB รองรับโหมดเอนทิตีต่างๆ เพื่อแสดง บันทึก และตรวจสอบความถูกต้องของเนื้อหาอย่างเหมาะสม ให้ผู้ใช้มีตัวเลือกในการกำหนดค่าสมาร์ทฟอร์มที่แตกต่างกันสำหรับโหมดต่างๆ ในระหว่างการปรับแต่ง เอนทิตีสามารถปรับแต่งสำหรับแต่ละโหมดแยกกันตามความต้องการของลูกค้า ตัวอย่างเช่น ผู้ใช้สามารถสร้างปุ่มที่มีการกระทำเฉพาะหรือข้อความป๊อปอัพเฉพาะสำหรับโหมดต่างๆ
ONEWEB รองรับโหมดเอนทิตีที่แตกต่างกันสี่โหมด เช่น โหมดแทรก, อัปเดต, ค้นหา และลบ
แทรก (Insert) คือโหมดการป้อนข้อมูลเมื่อข้อมูลที่ป้อนถูกแทรกเป็นบันทึกใหม่ในฐานข้อมูล การกำหนดค่าทั้งหมดที่จำเป็นเมื่อผู้ใช้เปิดเอนทิตีเพื่อสร้างข้อมูลใหม่จะถูกกำหนดค่าโดยใช้โหมดแทรก
อัปเดต (Update) คือโหมดการป้อนข้อมูลเมื่อเอนทิตีเปิดข้อมูลที่มีอยู่จากฐานข้อมูล เพื่อวัตถุประสงค์ในการแก้ไข การกำหนดค่าทั้งหมดที่จำเป็นเมื่อผู้ใช้เปิดเอนทิตีเพื่อแก้ไขจะถูกกำหนดค่าโดยใช้โหมดอัปเดต
ค้นหา (Search) คือโหมดเอนทิตีสำหรับการค้นหาบันทึกในฐานข้อมูล การกำหนดค่าทั้งหมดที่จำเป็นเมื่อผู้ใช้เปิดเอนทิตีสำหรับการค้นหาข้อมูลจะถูกกำหนดค่าโดยใช้โหมดการค้นหา ในโหมดค้นหา ผู้ใช้สามารถค้นหาบันทึกตามเกณฑ์การค้นหาที่เลือก และผลการค้นหาจะแสดงตามนั้น
โปรดทราบว่าการตั้งค่าเกณฑ์การค้นหาและการตั้งค่าผลการค้นหาไม่ได้ขึ้นอยู่กับโหมดเอนทิตี แต่ขึ้นอยู่กับคุณสมบัติ SearchCriteria & ShowSearch ในการกำหนดค่าฟิลด์ที่เกี่ยวข้องเท่านั้น
ลบ (Delete) คือโหมดการป้อนข้อมูลเมื่อข้อมูลถูกลบออกจากฐานข้อมูล การกำหนดค่าทั้งหมดที่จำเป็นเมื่อผู้ใช้เปิดเอนทิตีเพื่อลบจะถูกกำหนดค่าโดยใช้โหมดลบ
คุณสมบัติที่ผู้ใช้สามารถควบคุมได้โดยใช้โหมดต่างๆ ได้แก่
ใช้การตั้งค่าโหมดการควบคุมการเข้าถึงเพื่อแสดง / ซ่อนฟิลด์หรือโมดูลบนสมาร์ทฟอร์ม
กำหนดค่าปุ่มเอนทิตีเฉพาะสำหรับแต่ละโหมดของเอนทิตี
กำหนดค่าปุ่มโมดูลเพื่อแสดง/ซ่อนตามโหมดเอนทิตี
นักพัฒนาขั้นสูงสามารถปรับแต่งเอนทิตีเพื่อสร้างการดำเนินการของเอนทิตีที่ซับซ้อนเฉพาะความต้องการสำหรับโหมดเอนทิตีที่แตกต่างกัน
Smart Form คือแบบฟอร์มใบสมัครอิเล็กทรอนิกส์ที่ลูกค้า คู่ค้า และพนักงานใช้ในการสมัครผลิตภัณฑ์และบริการ เป็นสิ่งสำคัญสำหรับธุรกิจดิจิทัลที่เกี่ยวข้องกับการรวบรวมและเปลี่ยนแปลงข้อมูล มาพร้อมความสามารถที่เหนือกว่ารูปแบบกระดาษทั่วไป เช่น การกรอกแบบอิเล็กทรอนิกส์ ส่วนไดนามิก การเรียกฐานข้อมูล และการส่งแบบอิเล็กทรอนิกส์ ข้อดีของการใช้ Smart Forms คือ
กำจัดกระดาษและแบบฟอร์ม PDF
รองรับการเก็บข้อมูลออฟไลน์และมือถือ
ช่วยให้ผู้ใช้สามารถเริ่มต้นหรือดำเนินการต่อกระบวนการทางธุรกิจได้จากทุกที่
ทำให้กระบวนการมีประสิทธิภาพและใช้งานง่ายมากขึ้น
ในแพลตฟอร์ม ONEWEB ตัวออกแบบแอพ (App Designer)จะใช้เพื่อสร้างและสร้างฟอร์มอัจฉริยะ ความสามารถหลักบางประการของสมาร์ทฟอร์ม ONEWEB ได้แก่
เลือกจากตัวเลือกฟิลด์ที่หลากหลาย (Choose from a variety of Field options) ฟอร์มถูกสร้างขึ้นด้วยบล็อกที่เรียกว่าฟิลด์ ช่องให้สิทธิ์ให้ผู้ใช้ป้อนข้อมูลประเภทใดประเภทหนึ่ง ตั้งแต่ชื่อ วันที่ ช่องทำเครื่องหมาย และปุ่มตัวเลือก ไปจนถึงการอัปโหลดไฟล์
แบบฟอร์มอัจฉริยะพร้อมกฎ (Smart Forms with Rules) แสดงหรือซ่อนฟิลด์แบบไดนามิกขึ้นอยู่กับข้อมูลที่ป้อนโดยผู้ใช้ ด้วยคุณลักษณะนี้ คุณจะแสดงเฉพาะฟิลด์ที่เกี่ยวข้องกับผู้ใช้เท่านั้น
ทำการคำนวณ (Perform Calculations) ทำการคำนวณที่ซับซ้อนเพื่อกำหนดค่าในฟิลด์ที่จำเป็น
แบบฟอร์มหลายหน้า (Multi-page forms) แยกแบบฟอร์มยาวออกเป็นหลายหน้าเพื่อปรับปรุงประสบการณ์ของผู้ใช้
แสดงเนื้อหาแบบไดนามิก (Display dynamic content) แสดงเนื้อหาแบบไดนามิกตามความต้องการ
การตรวจสอบข้อมูล (Data Validation) ทำการตรวจสอบที่ซับซ้อนกับข้อมูลผู้ใช้ที่ป้อนเข้า
การเชื่อมต่อข้อมูล (Data Connectivity) ค้นหาข้อมูลจากระบบระยะไกล
การส่งข้อมูล (Data Submission) ส่งข้อมูลไปยังฐานข้อมูลขององค์กรของคุณอย่างปลอดภัย
ฐานข้อมูลฝังในตัว (Built-in Database Persistence) เมื่อใช้การตั้งค่าการกำหนดค่าฟิลด์ ผู้ใช้สามารถจำกัดและควบคุมข้อมูลที่แสดงบน GUI เท่านั้นได้อย่างง่ายดาย และไม่ต้องการการแทรกแซงของฐานข้อมูล หรือในทางกลับกัน
รองรับการปรับแต่ง (Customizations Support) สามารถปรับแต่งได้อย่างง่ายดายโดยใช้ Java, JSP และ JavaScript
สร้างการแสดงตัวอย่างทันที (Generate instant Previews) สร้างตัวอย่างสมาร์ทฟอร์มทันทีเมื่อผู้ใช้สร้างและเพิ่มประสิทธิภาพซ้ำๆ
การรวมกระบวนการ Integration (Process Integration) สามารถรวมเข้ากับกระบวนการทางธุรกิจส่วนหลังที่ออกแบบบน Process Designer ได้อย่างง่ายดายโดยการกำหนดค่าปุ่มกระบวนการบนเอนทิตี
รูปแบบการออกแบบเป็นโซลูชันที่เกิดซ้ำซึ่งช่วยแก้ปัญหาการออกแบบทั่วไป พวกเขาจัดเตรียมภาษากลางระหว่างนักออกแบบและช่วยสร้างความสอดคล้องกันทั่วทั้งเว็บ เป็นแหล่งข้อมูลที่ยอดเยี่ยมสำหรับนักออกแบบเว็บไซต์ที่กำลังมองหาเค้าโครงที่ผ่านการทดสอบแล้ว ใช้งานได้ดีที่สุด และมีประสิทธิภาพมากที่สุด รูปแบบ UI ในการออกแบบเว็บกำลังได้รับการยอมรับว่าเป็นทรัพยากรสำคัญที่ต้องพิจารณา และการสร้างการออกแบบรอบๆ รูปแบบเหล่านี้สามารถช่วยให้แอพหรือเว็บไซต์เป็นมิตรกับผู้ใช้มากขึ้น
ONEWEB รองรับรูปแบบ UI ต่อไปนี้
WYSIWIG Pattern ONEWEB แบบฟอร์มอัจฉริยะใช้รูปแบบ WYSWIG WYSIWYG เป็นตัวย่อของ What You See Is What You Get รูปแบบนี้ช่วยให้ผู้ใช้ทราบได้อย่างชัดเจนว่าเนื้อหาของตนจะมีลักษณะอย่างไรเมื่อเผยแพร่ ช่วยให้ผู้ใช้สามารถดูผลลัพธ์ที่จัดรูปแบบในขณะที่ทำการแก้ไข ซึ่งช่วยเพิ่มความมั่นใจและช่วยให้ได้ผลลัพธ์ที่ดูดีและรวดเร็ว
Page Grid เค้าโครงตารางมักใช้ในรูปแบบอัจฉริยะเพื่อจัดระเบียบเนื้อหา สร้างการจัดตำแหน่ง และใช้สัดส่วนอันศักดิ์สิทธิ์หรือหลักการออกแบบพื้นฐานอื่นๆ อย่างไรก็ตาม กริดที่รู้จักในรูปแบบอินเทอร์เฟซยังมีจุดประสงค์ในการสร้างจุดสนใจหลักและรองที่ชัดเจน
Input Feedback จะใช้เมื่อผู้ใช้ป้อนข้อมูลเข้าสู่ระบบและคาดว่าจะได้รับการตอบรับเกี่ยวกับผลลัพธ์ของการส่งนั้น เมื่อใช้รูปแบบนี้ ข้อมูลที่ป้อนโดยผู้ใช้จะต้องผ่านกฎที่ถือว่าถูกต้อง กฎการตรวจสอบดังกล่าวสามารถ
ตรวจสอบการมีอยู่ของเนื้อหา(Validate the presence of content) อย่างน้อยต้องใส่เนื้อหาบางส่วน
ตรวจสอบการรวมเนื้อหา(Validate the inclusion of content) ข้อความที่ป้อนต้องมีข้อมูลบางอย่างหรือต้องอยู่ในช่วงที่กำหนด
ตรวจสอบการยอมรับ(Validate acceptance)(หรือข้อกำหนดในการให้บริการเช่น) มักจะมีช่องทำเครื่องหมาย
ตรวจสอบความยาว(Validate length) ในหลายกรณี รหัสผ่านต้องมีความยาวอย่างน้อย 6 ตัวอักษร
ตรวจสอบความเป็นเอกลักษณ์(Validate uniqueness) หลายระบบอนุญาตให้ผู้ใช้หนึ่งรายใช้ชื่อผู้ใช้ที่กำหนดเท่านั้น หากข้อมูลที่ส่งโดยผู้ใช้ไม่ผ่านการตรวจสอบ ควรแสดงข้อความแสดงข้อผิดพลาดแก่ผู้ใช้เพื่ออธิบายวิธีการแก้ไขข้อมูลและขอให้ส่งใหม่
Drag and Drop รูปแบบการออกแบบช่วยให้ผู้ใช้สามารถดำเนินการกับวัตถุหนึ่งชิ้นหรือมากกว่าโดยการย้ายจากที่หนึ่งไปยังอีกที่หนึ่ง ช่วยให้ผู้ใช้เลือกเนื้อหาแล้วจัดเรียงเนื้อหาใหม่โดยลากผ่านหน้าจอ
Calendar Picker ซึ่งช่วยให้ผู้ใช้ค้นหาหรือส่งข้อมูลตามวันที่หรือช่วงวันที่ เพื่อให้ผู้ใช้สามารถเลือกวันที่หรือช่วงวันที่ในการส่ง ติดตาม จัดเรียง หรือกรองข้อมูลได้อย่างง่ายดาย
Structure Input สิ่งนี้ช่วยเมื่อผู้ใช้ต้องการป้อนข้อมูลเข้าสู่ระบบอย่างรวดเร็ว แต่รูปแบบของข้อมูลต้องเป็นไปตามโครงสร้างที่กำหนดไว้ล่วงหน้า ใช้เมื่ออินพุตที่คุณต้องการรวบรวมจากผู้ใช้เป็นประเภทข้อมูลเฉพาะ ตัวอย่างเช่น รหัสไปรษณีย์ วันที่หรือเวลา หมายเลขโทรศัพท์
Live Previews การแสดงตัวอย่างแบบสดช่วยให้ผู้ใช้สามารถตรวจสอบว่าการเปลี่ยนแปลงในช่องแบบฟอร์มส่งผลต่อผลลัพธ์สุดท้ายอย่างไรโดยเร็วที่สุด
Morphing Controls รูปแบบนี้ช่วยเมื่อผู้ใช้ต้องการให้แสดงส่วนควบคุมที่มีให้ในโหมดปัจจุบันเท่านั้น สิ่งนี้มีประโยชน์เมื่อไม่จำเป็นต้องแสดงการควบคุมบางอย่างพร้อมกัน และช่วยลดความยุ่งเหยิงของหน้าจอจากการควบคุมที่ไม่จำเป็นและไม่พร้อมใช้งาน
Navigation Tab Design รูปแบบนี้ช่วยให้ผู้ใช้เลือกเนื้อหาที่ต้องแยกออกเป็นส่วนๆ และเข้าถึงได้โดยใช้โครงสร้างการนำทางแบบเรียบ ซึ่งแสดงตำแหน่งปัจจุบันได้อย่างชัดเจน ซึ่งจะมีประโยชน์เมื่อคุณต้องการระบุรายการส่วน/ส่วนย่อยที่มีอยู่สูงสุดบนฟอร์มอัจฉริยะของคุณ และต้องการแสดงข้อมูลเฉพาะเนื้อหาสำหรับแต่ละแท็บ ONEWEB รองรับแท็บทั่วไปและแท็บ 2 ชั้น และแต่ละแท็บสามารถมีหลายโมดูล (1-1) และ (1- Many) ตามความต้องการของผู้ใช้
Module Tab Design รูปแบบแท็บโมดูลช่วยในการสร้างเนื้อหาที่ต้องแยกออกเป็นส่วนๆ และเข้าถึงได้ผ่านพื้นที่เนื้อหาเดียวโดยใช้โครงสร้างการนำทางแบบเรียบซึ่งไม่รีเฟรชหน้าเมื่อเลือก ช่วยให้ผู้ใช้สามารถดูเนื้อหาของแต่ละแท็บที่สามารถดูแยกจากกันแทนที่จะดูในบริบทของกันและกัน การออกแบบนี้ยังมีประโยชน์เมื่อเนื้อหาของแต่ละแท็บมีโครงสร้างที่แตกต่างกัน เช่น โมดูล 1-1 บน ONEWEB หรือการออกแบบโมดูล 1-Many
Buttons App Designer รองรับการกำหนดค่าปุ่ม 3 ประเภทภายในสมาร์ทฟอร์มของคุณ
Entity Button ปุ่มเอนทิตีอำนวยความสะดวกในการดำเนินการสำหรับสมาร์ทฟอร์มทั้งหมด เช่น การเรียกฐานข้อมูลหรือยกเลิก/ปฏิเสธการดำเนินการบนสมาร์ทฟอร์มของคุณ
Module Button อำนวยความสะดวกในการดำเนินการของผู้ใช้สำหรับโมดูล 1-Many จะไม่ส่งผลกระทบต่อเอนทิตีทั้งหมด และสามารถใช้เพื่อเพิ่ม ลบ หรือปรับปรุงเรกคอร์ดของโมดูล
Process Button อำนวยความสะดวกให้สมาร์ทฟอร์มเชื่อมต่อภายในทางธุรกิจกระบวนการหรือไมโครโฟลว์
หมายเหตุ: หากต้องการดูการตั้งค่าคุณสมบัติการกำหนดค่าทั้งหมดของปุ่มโดยละเอียดโปรดดูส่วน Button ในบทที่ 8 – การอ้างอิงผู้ออกแบบแอพ (App Designer Reference)
Actions คือ hooks ที่ทำโดยโดย App Designer เพื่อแนบ JSP, JavaScript หรือคลาส Java ที่กำหนดเองเข้ากับเอนทิตีของคุณ การกระทำมีสองประเภท
Entity Action การดำเนินการของเอนทิตีครอบคลุมทั้งเอนทิตี คุณสามารถแนบคลาส Java กับ Entity Action เพื่อแทนที่ฟังก์ชันในการบันทึกหรืออัพเดตเอนทิตี แต่คุณไม่สามารถแนบไฟล์ JSP กับการดำเนินการของเอนทิตีได้
Module Action การดำเนินการของโมดูลครอบคลุมเฉพาะโมดูลที่เกี่ยวข้องเท่านั้น คุณสามารถรวม JSP แบบกำหนดเองลงในโมดูลของคุณโดยใช้ Module Action คุณยังสามารถเพิ่มคลาส Java เพื่อแทนที่แล้วเพิ่ม อัพเดต บันทึกฟังก์ชันบนโมดูล หรือเพิ่มฟังก์ชัน JavaScript เพื่อปรับแต่งการโต้ตอบบนโมดูล
หมายเหตุ: หากต้องการดูรายละเอียดการตั้งค่าคุณสมบัติการกำหนดค่าทั้งหมดของ Button โปรดดูส่วนการดำเนินการในบทที่ 8 – การอ้างอิงตัวออกแบบแอพ (App Designer Reference)
เอนทิตีบนแพลตฟอร์ม ONEWEB หมายถึงกลุ่มของคุณลักษณะทางธุรกิจที่สามารถแสดงเป็นหน่วยเดียวได้ เช่น. ลูกค้า คำสั่งซื้อ สินค้า ใบกำกับภาษี ฯลฯ ขั้นตอนแรกในการสร้างสมาร์ทฟอร์มใดๆ บนแพลตฟอร์ม ONEWEB คือการกำหนดเอนทิตี คุณต้องกำหนดขอบเขตของเอนทิตีธุรกิจอย่างระมัดระวังก่อนที่จะเริ่มการกำหนดค่าฟอร์มอัจฉริยะ ในสถานการณ์ทางธุรกิจส่วนใหญ่ เอนทิตีใน ONEWEB สามารถเทียบได้โดยตรงกับเอนทิตีตามไดอะแกรมกรณีการใช้งานหรือไดอะแกรม ER
ประเด็นสำคัญที่ผู้ใช้ควรทราบเกี่ยวกับ ONEWEB Entity คือ
App Designer เป็นตัวสร้าง Smart Form บน ONEWEB ซึ่งผู้ใช้สามารถสร้างเอนทิตีได้
Smart Form บน ONEWEB สามารถประกอบด้วยเอนทิตีเดียวหรือกลุ่มของเอนทิตีที่เชื่อมโยงเข้าด้วยกัน ซึ่งขึ้นอยู่กับการออกแบบและความซับซ้อนของ Smart Form
สามารถเชื่อมโยงเอนทิตีเข้าด้วยกันได้อย่างง่ายดายบนแพลตฟอร์ม ONEWEB โดยใช้การกำหนดค่าแม่-ลูกและการกำหนดค่าป๊อปอัป
สามารถรวมเอนทิตีกับกระบวนการธุรกิจส่วนหลังที่ออกแบบบน Process Designer โดยใช้การกำหนดค่าปุ่มกระบวนการ
สามารถนำเข้าและส่งออกเอนทิตีเป็นไฟล์ json แบบพกพาบนแพลตฟอร์ม ONEWEB ได้อย่างง่ายดาย
สามารถโคลนเอนทิตีและช่วยลดเวลาในการสร้างสมาร์ทฟอร์มที่คล้ายกันได้อย่างมาก
สามารถบันทึกเอนทิตีเป็นเวอร์ชันใหม่เพื่ออัปเกรดและแก้ไขคุณลักษณะ/ฟิลด์เพิ่มเติมภายในฟอร์มอัจฉริยะของคุณต่อไป
ผู้ใช้ยังสามารถค้นหาเอนทิตี/เอนทิตีที่มีอยู่บน App Designer ได้โดยคลิกที่ไอคอนค้นหา
App Designer ให้หน้าจอการค้นหาที่ง่ายและเพิ่ม/แก้ไขตัวอย่างหน้าจอเพื่อตรวจสอบ UI ที่สร้างจากเอนทิตีของคุณ
App Designer ช่วยให้ผู้ใช้สามารถดูคอนโซลสำหรับบันทึกเซิร์ฟเวอร์แบบเรียลไทม์เพื่อระบุข้อผิดพลาดในการกำหนดค่า
ไม่จำเป็นต้องปรับใช้เพื่อปรับใช้ Smart Form ของคุณบนแพลตฟอร์ม ONEWEB เมื่อสร้างโดยใช้ App Designer แล้ว จะสามารถใช้หรือเชื่อมโยงกับสมาร์ทฟอร์มอื่นๆ โดยใช้การกำหนดค่าเมนูอย่างง่ายหรือการกำหนดค่าหลักย่อยตามที่อธิบายไว้ในส่วนความสัมพันธ์ระหว่าง Parent-Child
นอกจากนี้แบบฟอร์มอัจฉริยะเหล่านี้เมื่อสร้างขึ้นแล้วสามารถใช้เป็นไฟล์ JSON แบบง่ายๆในการส่งออกหรือนำเข้าจากแพลตฟอร์ม ONEWEB หนึ่งไปยังอีกสภาพแวดล้อมหนึ่งได้อย่างง่ายดาย
แต่ถ้าผู้ใช้ต้องการปรับใช้การกำหนดค่านี้กับ environment รันไทม์อื่น เช่น การใช้งานจริง ผู้ใช้สามารถใช้คุณสมบัติการปรับใช้ใน AppSpace โปรดตรวจสอบ AppSpace Deployment Center เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับการปรับใช้แอพพลิเคชันกับรันไทม์ต่างๆ
การตั้งค่าความสัมพันธ์แบบหนึ่งต่อหนึ่งในเอนทิตีนั้นตรงไปตรงมา สิ่งที่คุณต้องทำคือค้นหาค่าคีย์ ประกาศ และแมปภายในการกำหนดค่าโมดูลเอนทิตีบนฟอร์มอัจฉริยะเพื่อจัดเก็บและดึงข้อมูลจากฐานข้อมูล แต่สำหรับแอพพลิเคชันที่ซับซ้อน ผู้ใช้อาจต้องเชื่อมโยงระหว่างเอนทิตี ONEWEB รองรับการสร้างลิงก์ระหว่างสองเอนทิตีที่มีอยู่ (called Parent and Child Entity) ผ่าน Parent-Child configuration การเชื่อมโยงเอนทิตีระดับบนและระดับล่างเข้าด้วยกันทำให้การเปลี่ยนจากโมดูลซอฟต์แวร์หนึ่งไปยังอีกโมดูลหนึ่งเป็นไปอย่างราบรื่น ตัวอย่างเช่น เป็นความคิดที่ดีสำหรับผู้ใช้ที่กำลังทำงานบนหน้าจอคำสั่งขายเพื่อให้สามารถสลับไปยังหน้าจอข้อมูลลูกค้าได้ทันทีโดยไม่ต้องค้นหาผ่านฐานข้อมูลด้วยรหัสลูกค้า สิ่งนี้เป็นเรื่องปกติมากในกระบวนการทางธุรกิจขององค์กร ซึ่งการเปลี่ยนผ่านระหว่างหน่วยงานธุรกิจเกิดขึ้นบ่อยครั้ง
หมายเหตุ: หากต้องการดูการตั้งค่าคุณสมบัติการกำหนดค่าทั้งหมดของรูปแบบแม่แบบย่อยในรายละเอียดโปรดดูที่ส่วนยูทิลิตี้ใน App Designer Reference
App Designer มีเทมเพลตหรือฟีเจอร์ในตัวมากมายเพื่อช่วยตอบสนองสถานการณ์ทั่วไปที่แตกต่างกันที่จำเป็นในขณะที่สร้างฟอร์มอัจฉริยะระดับองค์กร ส่วนนี้ประกอบด้วยคุณลักษณะเหล่านี้ทั้งหมดใน App Designer เพื่อสร้างสมาร์ทฟอร์มแบบไดนามิก
โมดูล (Modules) เป็นส่วนย่อยของหน้าจอที่วางช่องใส่ข้อมูล การกำหนดค่าโมดูลมีรายการคุณสมบัติที่จะรวมไว้ในฟอร์มอัจฉริยะ ผู้ใช้สามารถเพิ่มแถวและคอลัมน์ในรูปแบบอัจฉริยะตามการออกแบบที่เกี่ยวข้อง การกำหนดค่าโมดูลกำหนดให้ผู้ใช้ระบุชื่อตารางฐานข้อมูล คีย์ตาราง และลำดับเพื่อจัดเก็บอินพุตของผู้ใช้ และยังมีตัวเลือกสำหรับผู้ใช้ในการเขียนแบบสอบถาม SQL ภายในการกำหนดค่าเพื่อดึงค่าจากฐานข้อมูล ผู้ใช้สามารถลากและวางรายการฟิลด์ที่จำเป็นภายในโครงร่างโมดูลเพื่อสร้างแบบฟอร์มที่ต้องการ ฟิลด์เป็นค่าอินพุตประเภทหนึ่งที่ใช้ภายในโครงร่างโมดูลเพื่อจัดเก็บอินพุตของผู้ใช้ประเภทต่างๆ ประเภทของฟิลด์ที่รองรับโดย ONEWEB smart form มีดังนี้
Text box
ข้อความและตัวเลข
Label
เพื่อแสดงป้ายกำกับคงที่บนหน้าจอ มันมาพร้อมกับตัวเลือก Rich Text
Hidden
ฟิลด์ที่ซ่อนอยู่บนหน้าจอ ส่วนใหญ่ใช้เพื่อจัดการคีย์โมดูล
Text Area
ฟิลด์สำหรับป้อนข้อความมากกว่า 100 ตัวอักษร
Radio
ปุ่ม อนุญาตให้เลือกตัวเลือกที่ต้องการจากหลายตัวเลือก
Checkbox
เพื่ออนุญาตให้เลือกข้อมูลตั้งแต่หนึ่งข้อมูลขึ้นไปจากหลายตัวเลือก
Listbox
หากต้องการแสดงรายการข้อมูลคงที่เป็นรายการแบบเลื่อนลง ค่าที่จะแสดงถูกกำหนดไว้ในฟิลด์เอง
Dynamic List
หากต้องการแสดงรายการค่าแบบไดนามิกเป็นรายการแบบเลื่อนลง ข้อมูลจะแสดงจากตารางในฐานข้อมูลและสามารถควบคุมให้แสดงค่าโดยขึ้นอยู่กับฟิลด์อื่นในโมดูล
Popup
เพื่อแสดงรายการข้อมูลจากตารางในฐานข้อมูลเป็นหน้าต่างป๊อปอัป นอกจากนี้ยังมีกล่องข้อความสำหรับค้นหาข้อมูลตามคีย์
Calendar
เพื่อป้อนฟิลด์วันที่
Suggestion box
ฟิลด์นี้สามารถแนะนำข้อมูลให้กับผู้ใช้ในดร็อปดาวน์ตามข้อมูลที่ป้อน นอกจากนี้ ผู้ใช้สามารถใช้การค้นหาคำหลักในฟิลด์นี้
No Object
ฟิลด์พิเศษใช้เพื่อแสดงค่าที่กำหนดเองบนหน้าจอที่ไม่ใช่ส่วนหนึ่งของข้อมูลในตารางของโมดูล
Multi Select
เพื่อให้ตัวเลือกแบบเลือกหลายรายการ
Upload
เพื่อแนบและอัปโหลดไฟล์
App Designer รองรับโมดูล 3 ประเภท
One to One (1-1) One to One บน ONEWEB แสดงและจัดการฟิลด์ข้อมูลที่สอดคล้องกับบันทึกหนึ่งในฐานข้อมูล หากต้องการสร้างฟอร์มอัจฉริยะด้วยโมดูล 1-1 คุณสามารถเริ่มต้นด้วยการสร้างเอนทิตี แท็บตามความต้องการ และพร้อมที่จะเริ่มต้นด้วยการกำหนดค่าโมดูล โมดูล 1-1 มีรูปแบบแถวและคอลัมน์ที่คุณสามารถเพิ่มแถวและคอลัมน์ตามการออกแบบที่คุณต้องการ
ด้านล่างเป็นตัวอย่างของโมดูล 1-1 ที่มี 5 แถวและเค้าโครง 2 คอลัมน์ การกำหนดค่าโมดูลจะแสดงรายการการตั้งค่าคุณสมบัติ (1-7) หากต้องการดูรายละเอียดการตั้งค่าคอนฟิกูเรชันคุณสมบัติทั้งหมด โปรดดูที่ส่วน 1-1 โมดูล ในการอ้างอิงตัวออกแบบแอพ
One to Many (1-Many) "One to Many" โมดูลแสดงและจัดการข้อมูลสำหรับหลายระเบียนในฐานข้อมูล แสดงข้อมูลในรูปแบบตาราง โมดูลประเภทนี้รองรับทั้งเค้าโครงตารางและการ์ดสำหรับตาราง และอนุญาตให้ผู้ใช้จัดการกับรายการและคอลัมน์จำนวนมาก
ด้านล่างนี้เป็นตัวอย่างของโมดูล 1-Many ที่มี 13 คอลัมน์ หากต้องการดูการตั้งค่าคอนฟิกูเรชันคุณสมบัติทั้งหมดของ 1-Many Module โดยละเอียด โปรดอ้างอิง 1-Many Module ในลิงค์อ้างอิง
ภาพด้านล่างแสดงหน้าจอของผู้ใช้ที่มีแบบฟอร์มอัจฉริยะพร้อมโมดูล 1-1 และการกำหนดค่าโมดูล 1-Many
Reuse Module ฟังก์ชั่นการใช้งานซ้ำภายใต้ส่วนโมดูลใช้เพื่อรองรับการใช้งานซ้ำของโมดูลที่มีอยู่ ด้วยคุณสมบัติโมดูลนี้คุณสามารถโคลนโมดูลที่มีอยู่ลงในแท็บได้ อย่างไรก็ตามควรสังเกตว่าฟังก์ชั่นการโคลนจะถูก จำกัด ไว้ที่โมดูลฟิลด์และการกำหนดค่าแผนที่ฐานข้อมูลเท่านั้นและจะไม่คัดลอกการกระทำใด ๆ ที่กำหนดค่าโมดูลนี้
ภาพด้านล่างแสดงการนำการกำหนดค่าโมดูลกลับมาใช้ใหม่ โปรดดูที่ “Reuse Module section”ในการอ้างอิงตัวออกแบบแอพ
2-Layer Tab ได้รับการออกแบบมาสำหรับส่วนต่อประสานผู้ใช้ที่ซับซ้อนมากขึ้น ซึ่งข้อมูลทางธุรกิจต้องใช้รูปแบบอัจฉริยะที่มีการแสดงแท็บบนและล่างหลายรายการ การออกแบบแท็บ 2 ชั้นแบ่งแบบฟอร์มยาวออกเป็นหลายหน้าเพื่อปรับปรุงประสบการณ์ผู้ใช้
ตัวอย่าง 2-Layer Tab
หมายเหตุ: หากต้องการดูการตั้งค่าคุณสมบัติทั้งหมดของการกำหนดค่า 2-Layer Tab โปรดดูส่วน 2-Layer Tab ใน App Designer Reference
หากต้องการสร้าง Smart Form คุณต้องสร้างแอพพลิเคชันก่อน ตั้งแต่เวอร์ชัน 4.0.19.10 ขึ้นไป ผู้ใช้สามารถสร้างแอพพลิเคชันได้จาก AppSpace เท่านั้น จากนั้นผู้ใช้สามารถสร้างแบบฟอร์มภายในแอพพลิเคชัน เมื่อสร้างแบบฟอร์มแล้ว AppSpace จะนำคุณไปยัง App Designer เพื่อออกแบบแบบฟอร์ม
วิธีสร้าง Smart form Application จาก AppSpace ในการสร้างแอพพลิเคชันบน AppSpace ผู้ใช้จะต้องลงชื่อเข้าใช้ AppSpace ก่อน จากนั้นคลิกที่ Create new app ปุ่มที่แสดงด้านล่าง
การสร้างแอพพลิเคชันโดยใช้ AppSpace มี 2 แพลตฟอร์ม แพลตฟอร์มหนึ่งสำหรับ web application และอื่น ๆ สำหรับการสร้างแอพพลิเคชันมือถือ สำหรับแอพพลิเคชันเว็บสมาร์ทฟอร์มเลือกแพลตฟอร์มเว็บและป้อนรายละเอียด
คลิกที่ปุ่ม Create จากนั้นหน้าจอจะแสดงสถานะสร้างแอพพลิเคชัน
เมื่อสถานะแสดง 100% แสดงว่าแอพพลิเคชันถูกสร้างขึ้นให้คลิกที่ปุ่ม Done เพื่อปิดหน้าต่างสถานะหน้าต่าง
คลิกที่ไอคอนแอพพลิเคชันเพื่อเปิดแอพของคุณ ระบบจะเปลี่ยนเส้นทางผู้ใช้ไปยัง components page
คลิกที่ไอคอน Create Forms
ป้อนชื่อแบบฟอร์มและคลิก Start Design เพื่อเปลี่ยนเส้นทางไปยัง App Designer
ตัวออกแบบแอพรองรับการกำหนดค่าแท็บสองประเภท Normal Tab และ 2 Layer tab.
Normal Tab ได้รับการออกแบบและใช้เพื่อสร้างสมาร์ทฟอร์มที่มีเพียงเลเยอร์เดียว (การออกแบบฟอร์มหน้าเดียวอย่างง่าย) สามารถรวมหลายส่วนหรือโมดูลภายในแท็บนี้
ตัวอย่าง Normal tab
หมายเหตุ: หากต้องการดูการตั้งค่าคุณสมบัติทั้งหมดของการกำหนดค่า Normal Tab โปรดดูส่วน Normal Tab ใน App Designer Reference
App Designer มีตัวเลือก Universal Search ในตัวที่สามารถกำหนดค่าได้ตามความชอบของแต่ละคน เมื่อเปิดใช้งานการค้นหาแบบสากลในเอนทิตี ผู้ดูแลระบบสามารถสร้างเกณฑ์การค้นหาแบบกำหนดเองซึ่งผู้ใช้ทุกคนสามารถใช้ได้ หรือแต่ละคนสามารถสร้างเกณฑ์การค้นหาแบบกำหนดเองของเขาเองขึ้นอยู่กับข้อกำหนดในเอนทิตีเดียวกัน
วิธีเปิดใช้งาน Universal Search ในเอนทิตี?
หากต้องการเปิดใช้งานการค้นหาทั่วไปในเอนทิตี ให้เปิดเอนทิตีและไปที่หน้าต่างการกำหนดค่าเอนทิตี และเปิดใช้งานคุณสมบัติการค้นหาขั้นสูง
จะใช้ Universal Search ใน Smart Form ได้อย่างไร?
สร้างเกณฑ์การค้นหารายการโปรดใหม่โดยคลิกที่ไอคอนเพิ่มรายการโปรด
สร้างการกำหนดค่า ตามมาตรฐานส่วนบุคคลของคุณ เลือกจัดการประเภทเป็น "Me" สำหรับเกณฑ์การค้นหาส่วนบุคคล เลือกประเภท "All" แชร์มาตรฐานกับผู้ใช้รายอื่น
ผู้ใช้สามารถปรับแต่งฟิลด์เกณฑ์การค้นหาและผลลัพธ์การค้นหาได้ ผู้ใช้ยังสามารถเลือกประเภทการเรียงลำดับได้เองอีกด้วย
เมื่อบันทึกเกณฑ์แล้ว ผู้ใช้สามารถเลือกระหว่างการค้นหาแบบกำหนดเองต่างๆ ที่มีให้
หากต้องการปรับแต่งและสร้างเกณฑ์การค้นหาของคุณเองในเอนทิตี ให้เปิดแบบฟอร์มใน FrontWeb แล้วคลิกไอคอนการกำหนดค่าการค้นหาขั้นสูง
ส่วนนี้จะอธิบายกระบวนการทีละขั้นตอนในการสร้างสมาร์ทฟอร์มแรกของคุณบน 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
ตอนนี้คุณก็พร้อมแล้ว "Main Tab" และ "Main Module" กำหนดค่า Let us begin with Field Configuration.
หมายเหตุ: สามารถลากและวางฟิลด์ภายในโมดูลได้ก็ต่อเมื่อผู้ใช้เพิ่มแถวในเค้าโครงโมดูลตามที่กล่าวไว้ข้างต้นในขั้นตอนที่ 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 ของคุณ
หมายเหตุ: เป็นแนวปฏิบัติที่ดีเสมอในการบันทึก 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 ของคุณ
คลิกที่ไอคอนแก้ไข เพื่อเปิดการกำหนดค่าโมดูล ในหน้าต่างการกำหนดค่าโมดูล
เลือกชื่อเดียวกัน ShowFieldName (หมายเหตุ: นอกจากนี้ยังสามารถคัดลอกชื่อในการกำหนดค่าทั้งหมดโดยคลิกที่ไอคอนคัดลอก เพื่อทำซ้ำค่าเดียวกัน)
เปิดหน้าต่างคุณสมบัติของฟิลด์โดยคลิกไอคอนแก้ไขบนฟิลด์
เปิดหน้า Property ของฟิลด์โดยคลิกไอคอนแก้ไขบนฟิลด์
เปิดหน้าต่าง Dynamic List Box Configuration Property โดยคลิกที่ไอคอนแก้ไขบนฟิลด์
เปิดหน้าต่าง Module Property คลิกไอคอนแก้ไขบนโมดูล
เปิดหน้าต่าง Field Property โดยคลิกที่ไอคอนแก้ไข บนฟิลด์
เปิดหน้าต่าง Text Box Configuration โดยคลิกที่ไอคอนแก้ไข บนฟิลด์
เปิดหน้าต่าง Child Module Property คลิกไอคอนแก้ไขบนโมดูล
คลิกที่ปุ่มแก้ไข เปิดหน้าต่างการกำหนดค่า
คลิกที่ปุ่มแก้ไข เปิดหน้าต่างการกำหนดค่า
หน้าต่างการกำหนดค่า
คลิกปุ่มที่ไอคอนแก้ไข เปิดหน้าต่างการกำหนดค่า
คลิกปุ่มที่ไอคอนแก้ไข เปิดหน้าต่างการกำหนดค่า