การออกแบบหน้าของ Form หรือ Page ให้อ่านยาก การออกแบบสมาร์ทฟอร์ม เว็บไซต์ หรืออินเทอร์เฟซผู้ใช้ ไม่ควรออกแบบแบบฟอร์มหรือหน้าเว็บให้เป็นอุปสรรคต่อการอ่านเว็บไซต์ของผู้ใช้ ซึ่งหมายถึงการมีภาพพื้นหลังที่ลายตาหรือสีของพื้นหลังที่กลืนไปกับสีของตัวอักษร ซึ่งจะขัดขวางความสามารถในการอ่านแบบฟอร์มหรือหน้า พื้นหลังที่ลายตาจะทำให้เสียสมาธิและดึงความสนใจไปจากเนื้อหา ยิ่งถ้าพื้นหลังนั้นอยู่ใต้เนื้อหาโดยตรง นอกจากนี้ ระวังอย่าใช้ชุดสีที่ลดคอนทราสต์ของตัวอักษรบนหน้าจอ (เช่น สีเทาอ่อนบนพื้นหลังสีขาว) ให้ความสำคัญกับรูปแบบตัวอักษรของเนื้อหาเพื่อให้แน่ใจว่าปัญหาต่างๆ เช่น ความยาวของบรรทัด ความสูงของบรรทัด และตัวเลือกแบบอักษรจะไม่ก่อให้เกิดปัญหาต่อความสามารถในการอ่าน

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

ทำการใส่หาที่ไม่เกี่ยวข้อง ลองคิดดูสิ เมื่อเราเข้าไปในร้านขายของชำโดยตั้งใจจะซื้อซีเรียลหนึ่งกล่อง คุณรู้จุดประสงค์ของคุณดี คุณจะไม่ไปหาซีเรียลที่ทางเดินในห้องน้ำ แต่คุณจะไปที่ชั้นขายซีเรียลโดยตรงเลย

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

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

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

มีสิ่งดึงดูดความสนใจที่มากเกินไป การออกแบบองค์ประกอบที่ต้องดึงดูดความสนใจยังทำให้ผู้ใช้สามารถสับสนและตึงเครียดโดยไม่จำเป็น การใช้ระดับการมองเห็นในการออกแบบการไหลของผู้ใช้บนหน้าจอลดความรู้สึกของการแข่งขันในองค์ประกอบที่แตกต่างกัน คุณสามารถช่วยพวกเขาได้โดยการ จำกัด จำนวนการโทรการกระทำบนหน้าจอลดหรือกำหนดเป้าหมายโฆษณาบนเว็บไซต์ของคุณลดการกระพริบและภาพเคลื่อนไหวและใช้ชื่อเรื่องอย่างเหมาะสม นอกจากนี้การไม่ป๊อปอัพเนื้อหา (เช่น modal box) ต่อหน้าผู้ใช้จะช่วยรักษาความสนใจในเนื้อหา

ในการตัดสินใจว่าจะเริ่มต้นด้วย Smart Form หรือ Page บนแพลตฟอร์ม ONEWEB ขึ้นอยู่กับข้อกำหนดความต้องการของผู้ใช้ ประเด็นสำคัญที่ผู้ใช้ต้องทราบก่อนเลือก Smart Form หรือ Page สำหรับข้อกำหนดการออกแบบแอพพลิเคชันคือ

ผู้ใช้ต้องเลือก Smart Form เมื่อ

• อินเทอร์เฟซการป้อนข้อมูล

• จำเป็นต้องมีการนำทางที่ซับซ้อน เช่น แท็บทั่วไปและโครงสร้างเลเยอร์ 2 แท็บ

• จำเป็นต้องป้อนข้อมูลเพื่อส่งหรือเริ่มต้นโฟลว์ของกระบวนการ

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

• แบบฟอร์มที่ต้องผสานรวมกับระบบการจัดการกระบวนการทางธุรกิจผู้ใช้ต้องเลือก

ผู้ใช้ต้องเลือก Page เมื่อ

• ต้องการแสดงเนื้อหาแบบสแตติกและไดนามิกบนหน้าเว็บ (โดยไม่ต้องเขียน HTML)

• จำเป็นต้องมีการนำทางเพจ

• การสร้างเว็บไซต์แบบคงที่หรือไดนามิก

• สร้างการรวมกลุ่ม / การตลาดทางอีเมล

• การกระทำ ข้อความหรือรูปภาพบนเพจที่ต้องมีการผสานรวมกับ Microflow หรือเว็บไซต์ของ third-party

คุณลักษณะหลักของแอพพลิเคชันอันทรงพลังคือการออกแบบส่วนต่อประสานกับผู้ใช้พร้อมหน้าเพจที่สวยงาม ความเรียบง่ายที่โดดเด่น และการนำทางที่ง่ายดาย นั่นคือเหตุผลที่องค์กรต่างๆ ทุ่มเงินหลายล้านดอลลาร์ในการพัฒนาและอัปเดตอินเทอร์เฟซผู้ใช้ การใช้ ONEWEB ผู้ใช้ทุกคนสามารถสร้างและดูแล UX/UI ที่น่าทึ่งโดยไม่ต้องมีความรู้ด้านการออกแบบเว็บมากนัก

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

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

ให้การจดจำทันทีและการนำทางที่ใช้งานง่าย ใจความสำคัญในการมอบประสบการณ์การใช้งานที่น่าพึงพอใจแก่ผู้ใช้คือการเข้าใจว่าพวกเขากำลังค้นหาเนื้อหา พวกเขาต้องการข้อมูลที่คุณให้ไว้ใน Smart Forms หรือ Pages พวกเขาจะใช้หน้าจอการค้นหาเมนูหรือการนำทางของเว็บไซต์เพื่อไปยังเนื้อหาที่พวกเขากำลังมองหาอย่างรวดเร็ว จัดเตรียมระบบนำทางที่เป็นมิตรต่อผู้ใช้ ง่ายต่อการจดจำและใช้งานง่าย

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

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

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

ให้ผู้ใช้ควบคุมประสบการณ์การท่องเว็บ มีสิ่งระคายเคืองทั่วไปหลายอย่างที่ปรากฏบนเว็บไซต์เมื่อเร็วๆ นี้ซึ่งควบคุมผู้ใช้ไม่อยู่ เช่น วิดีโอเล่นอัตโนมัติและการเลื่อนโดยถูกแย่งชิง เมื่อคุณออกแบบสมาร์ทฟอร์ม เว็บไซต์ หรืออินเทอร์เฟซผู้ใช้ คุณต้องการอนุญาตให้ผู้ใช้ควบคุมการเรียกดูและการเคลื่อนไหวผ่านไซต์หรือแอพพลิเคชัน

หัวใจของแพลตฟอร์ม ONEWEB ส่วนประกอบ UX/UI คือบล็อกที่สร้างแบบแยกส่วน รวมและนำกลับมาใช้ใหม่ของแอพ App Designer และ Page Designer เป็นสององค์ประกอบ ONEWEB ที่จะมอบเครื่องมือที่จำเป็นทั้งหมดแก่ผู้ใช้ในการสร้างและส่งมอบแอพสมัยใหม่พร้อมประสบการณ์ผู้ใช้ที่สวยงามบนหน้าจอทุกประเภท ด้วยส่วนประกอบ ONEWEB UX/UI คุณสามารถแก้ปัญหาทางธุรกิจด้วยการส่งมอบแอพอย่างรวดเร็ว

เอนทิตีบนแพลตฟอร์ม 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 คือแบบฟอร์มใบสมัครอิเล็กทรอนิกส์ที่ลูกค้า คู่ค้า และพนักงานใช้ในการสมัครผลิตภัณฑ์และบริการ เป็นสิ่งสำคัญสำหรับธุรกิจดิจิทัลที่เกี่ยวข้องกับการรวบรวมและเปลี่ยนแปลงข้อมูล มาพร้อมความสามารถที่เหนือกว่ารูปแบบกระดาษทั่วไป เช่น การกรอกแบบอิเล็กทรอนิกส์ ส่วนไดนามิก การเรียกฐานข้อมูล และการส่งแบบอิเล็กทรอนิกส์ ข้อดีของการใช้ 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 ได้อย่างง่ายดายโดยการกำหนดค่าปุ่มกระบวนการบนเอนทิตี

สมาร์ทฟอร์ม/เอนทิตีที่สร้างขึ้นโดยใช้แพลตฟอร์ม ONEWEB รองรับโหมดเอนทิตีต่างๆ เพื่อแสดง บันทึก และตรวจสอบความถูกต้องของเนื้อหาอย่างเหมาะสม ให้ผู้ใช้มีตัวเลือกในการกำหนดค่าสมาร์ทฟอร์มที่แตกต่างกันสำหรับโหมดต่างๆ ในระหว่างการปรับแต่ง เอนทิตีสามารถปรับแต่งสำหรับแต่ละโหมดแยกกันตามความต้องการของลูกค้า ตัวอย่างเช่น ผู้ใช้สามารถสร้างปุ่มที่มีการกระทำเฉพาะหรือข้อความป๊อปอัพเฉพาะสำหรับโหมดต่างๆ

ONEWEB รองรับโหมดเอนทิตีที่แตกต่างกันสี่โหมด เช่น โหมดแทรก, อัปเดต, ค้นหา และลบ

แทรก (Insert) คือโหมดการป้อนข้อมูลเมื่อข้อมูลที่ป้อนถูกแทรกเป็นบันทึกใหม่ในฐานข้อมูล การกำหนดค่าทั้งหมดที่จำเป็นเมื่อผู้ใช้เปิดเอนทิตีเพื่อสร้างข้อมูลใหม่จะถูกกำหนดค่าโดยใช้โหมดแทรก

อัปเดต (Update) คือโหมดการป้อนข้อมูลเมื่อเอนทิตีเปิดข้อมูลที่มีอยู่จากฐานข้อมูล เพื่อวัตถุประสงค์ในการแก้ไข การกำหนดค่าทั้งหมดที่จำเป็นเมื่อผู้ใช้เปิดเอนทิตีเพื่อแก้ไขจะถูกกำหนดค่าโดยใช้โหมดอัปเดต

ค้นหา (Search) คือโหมดเอนทิตีสำหรับการค้นหาบันทึกในฐานข้อมูล การกำหนดค่าทั้งหมดที่จำเป็นเมื่อผู้ใช้เปิดเอนทิตีสำหรับการค้นหาข้อมูลจะถูกกำหนดค่าโดยใช้โหมดการค้นหา ในโหมดค้นหา ผู้ใช้สามารถค้นหาบันทึกตามเกณฑ์การค้นหาที่เลือก และผลการค้นหาจะแสดงตามนั้น

ลบ (Delete) คือโหมดการป้อนข้อมูลเมื่อข้อมูลถูกลบออกจากฐานข้อมูล การกำหนดค่าทั้งหมดที่จำเป็นเมื่อผู้ใช้เปิดเอนทิตีเพื่อลบจะถูกกำหนดค่าโดยใช้โหมดลบ

คุณสมบัติที่ผู้ใช้สามารถควบคุมได้โดยใช้โหมดต่างๆ ได้แก่

• ใช้การตั้งค่าโหมดการควบคุมการเข้าถึงเพื่อแสดง / ซ่อนฟิลด์หรือโมดูลบนสมาร์ทฟอร์ม

• กำหนดค่าปุ่มเอนทิตีเฉพาะสำหรับแต่ละโหมดของเอนทิตี

• กำหนดค่าปุ่มโมดูลเพื่อแสดง/ซ่อนตามโหมดเอนทิตี

• นักพัฒนาขั้นสูงสามารถปรับแต่งเอนทิตีเพื่อสร้างการดำเนินการของเอนทิตีที่ซับซ้อนเฉพาะความต้องการสำหรับโหมดเอนทิตีที่แตกต่างกัน

รูปแบบการออกแบบเป็นโซลูชันที่เกิดซ้ำซึ่งช่วยแก้ปัญหาการออกแบบทั่วไป พวกเขาจัดเตรียมภาษากลางระหว่างนักออกแบบและช่วยสร้างความสอดคล้องกันทั่วทั้งเว็บ เป็นแหล่งข้อมูลที่ยอดเยี่ยมสำหรับนักออกแบบเว็บไซต์ที่กำลังมองหาเค้าโครงที่ผ่านการทดสอบแล้ว ใช้งานได้ดีที่สุด และมีประสิทธิภาพมากที่สุด รูปแบบ 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

การตั้งค่าความสัมพันธ์แบบหนึ่งต่อหนึ่งในเอนทิตีนั้นตรงไปตรงมา สิ่งที่คุณต้องทำคือค้นหาค่าคีย์ ประกาศ และแมปภายในการกำหนดค่าโมดูลเอนทิตีบนฟอร์มอัจฉริยะเพื่อจัดเก็บและดึงข้อมูลจากฐานข้อมูล แต่สำหรับแอพพลิเคชันที่ซับซ้อน ผู้ใช้อาจต้องเชื่อมโยงระหว่างเอนทิตี ONEWEB รองรับการสร้างลิงก์ระหว่างสองเอนทิตีที่มีอยู่ (called Parent and Child Entity) ผ่าน Parent-Child configuration การเชื่อมโยงเอนทิตีระดับบนและระดับล่างเข้าด้วยกันทำให้การเปลี่ยนจากโมดูลซอฟต์แวร์หนึ่งไปยังอีกโมดูลหนึ่งเป็นไปอย่างราบรื่น ตัวอย่างเช่น เป็นความคิดที่ดีสำหรับผู้ใช้ที่กำลังทำงานบนหน้าจอคำสั่งขายเพื่อให้สามารถสลับไปยังหน้าจอข้อมูลลูกค้าได้ทันทีโดยไม่ต้องค้นหาผ่านฐานข้อมูลด้วยรหัสลูกค้า สิ่งนี้เป็นเรื่องปกติมากในกระบวนการทางธุรกิจขององค์กร ซึ่งการเปลี่ยนผ่านระหว่างหน่วยงานธุรกิจเกิดขึ้นบ่อยครั้ง

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

Page เป็นเอกสารที่เขียนขึ้นเป็นหลักใน HTML และสามารถเข้าถึงได้ผ่านอินเทอร์เน็ตหรือเครือข่ายอื่น ๆ โดยใช้เบราว์เซอร์อินเทอร์เน็ต เข้าถึงได้โดยการป้อน URL และอาจมีข้อความ กราฟิก และไฮเปอร์ลิงก์ไปยังหน้าเว็บและไฟล์อื่นๆ ประกอบด้วยองค์ประกอบหลายอย่าง รวมทั้ง CSS รูปภาพ และ JavaScript

ใน ONEWEB Page Designer ใช้ในการสร้างเพจ Page Designer เป็นเครื่องมือที่ทรงพลังและมีฟีเจอร์มากมายที่ช่วยให้ผู้ใช้สร้างเว็บเพจ/เว็บไซต์ HTML โดยไม่จำเป็นต้องเรียนรู้ภาษา HTML หรือทักษะการออกแบบเว็บไซต์ ใช้ส่วนต่อประสานผู้ใช้แบบลากและวางที่เรียบง่ายเพื่อสร้างหน้าเว็บตามระบบแบบกริดที่ใช้ชุดของคอนเทนเนอร์ แถว และคอลัมน์สำหรับเค้าโครงและการจัดตำแหน่งเนื้อหา Page Designer มาพร้อมกับเทมเพลตสำเร็จรูปที่สามารถแก้ไขได้ด้วยข้อความหรือรูปภาพ ทำให้ผู้ใช้สามารถสร้างหน้าเว็บ/เว็บไซต์ที่มีคุณลักษณะหลากหลายซึ่งเหมาะกับความต้องการเฉพาะทางธุรกิจของตน ด้วย Page Designer ผู้ใช้สามารถเพิ่มฟังก์ชัน เช่น โซเชียลปลั๊กอิน อีคอมเมิร์ซ แบบฟอร์มติดต่อ เกตเวย์การชำระเงิน การรวมข้อมูลแบ็คเอนด์กับฐานข้อมูลหรือระบบภายนอกใดๆ โดยการผสานรวม UI ของเพจเข้ากับ ONEWEB Microflows

เริ่มจาก ONEWEB เวอร์ชัน 5.0.21.01 รูปลักษณ์และของ Page Designe เปลี่ยนไป การเปลี่ยนแปลงที่สำคัญซึ่งเป็นส่วนหนึ่งของการเปิดตัวครั้งนี้คือ

• หน้าต่างโครงสร้าง

• หน้าต่างป๊อปอัป properties

• ปรับปรุง Model box UI

• UI Toolkit

• ตัวเลือกตัวแปร Environment

• ความสามารถในการลากและวางที่ดีขึ้น

หน้าคือเอกสารที่สร้างขึ้นโดยใช้ HTML และระบุโดยใช้ URL มีหน้าเว็บประเภทต่างๆ

• Static Page

• Dynamic Page

Dynamic Page คือหน้าเว็บที่สามารถเปลี่ยนแปลงข้อมูลได้เอง หน้าเหล่านี้มีโค้ด "ฝั่งเซิร์ฟเวอร์" ซึ่งช่วยให้เซิร์ฟเวอร์สร้างเนื้อหาที่ไม่ซ้ำกันทุกครั้งที่โหลดหน้า ตัวอย่างเช่น เซิร์ฟเวอร์อาจแสดงเวลาและวันที่ปัจจุบันบนเว็บเพจ เพจไดนามิกจำนวนมากใช้โค้ดฝั่งเซิร์ฟเวอร์เพื่อเข้าถึงข้อมูลฐานข้อมูล ซึ่งทำให้สามารถสร้างเนื้อหาของเพจจากข้อมูลที่จัดเก็บไว้ในฐานข้อมูล เว็บไซต์ที่สร้างเว็บเพจจากข้อมูลฐานข้อมูลมักเรียกว่าเว็บไซต์ที่ขับเคลื่อนด้วยฐานข้อมูล การใช้ไดนามิกเพจ คุณสามารถเพิ่มฟีเจอร์ได้มากมาย เช่น

• บันทึกข้อมูลลงในฐานข้อมูล

• แสดงข้อมูลจากฐานข้อมูลบนเพจ

• ข้อมูลสามารถซ่อน แสดง หรือเปลี่ยนแปลงได้แบบไดนามิก

Page Designer มีเทมเพลตหรือคุณสมบัติในตัวมากมายเพื่อช่วยตอบสนองสถานการณ์ทั่วไปที่แตกต่างกันที่จำเป็นในขณะที่สร้างเว็บเพจระดับองค์กรหรือแอพพลิเคชันมือถือ ส่วนนี้ประกอบด้วยคุณลักษณะทั้งหมดที่มีใน Page Designer เพื่อสร้างเว็บแอพพลิเคชันแบบไดนามิกหรือแอพบนอุปกรณ์เคลื่อนที่

จากเวอร์ชัน ONEWEB 5.0.22.01 รูปลักษณ์ของ Page Designer เปลี่ยนไป คุณสมบัติหลักที่เพิ่มเข้ามาเป็นส่วนหนึ่งของรุ่นนี้คือ

• ปรับปรุงคุณสมบัติการลากและวางองค์ประกอบในโครงสร้างแบบต้นไม้

• รองรับ Microflow ส่วนที่เหลือเวอร์ชัน 2

• สนับสนุนนักพัฒนาหลายคนให้ทำงานบนเพจภายในแอพพลิเคชันเดียวกัน

• คุณสมบัติใหม่: การตั้งค่าตัวสร้างสำหรับการล้างแคชแอพสร้าง/แสดงตัวอย่างตัวออกแบบเพจจากเซิร์ฟเวอร์

• คุณสมบัติใหม่:: บันทึกอัตโนมัติในหน้าการตั้งค่า

• คุณสมบัติใหม่: Display Flex

Buttons App Designer รองรับการกำหนดค่าปุ่ม 3 ประเภทภายในสมาร์ทฟอร์มของคุณ

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

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

Process Button อำนวยความสะดวกให้สมาร์ทฟอร์มเชื่อมต่อภายในทางธุรกิจกระบวนการหรือไมโครโฟลว์

Actions คือ hooks ที่ทำโดยโดย App Designer เพื่อแนบ JSP, JavaScript หรือคลาส Java ที่กำหนดเองเข้ากับเอนทิตีของคุณ การกระทำมีสองประเภท

Entity Action การดำเนินการของเอนทิตีครอบคลุมทั้งเอนทิตี คุณสามารถแนบคลาส Java กับ Entity Action เพื่อแทนที่ฟังก์ชันในการบันทึกหรืออัพเดตเอนทิตี แต่คุณไม่สามารถแนบไฟล์ JSP กับการดำเนินการของเอนทิตีได้

Module Action การดำเนินการของโมดูลครอบคลุมเฉพาะโมดูลที่เกี่ยวข้องเท่านั้น คุณสามารถรวม JSP แบบกำหนดเองลงในโมดูลของคุณโดยใช้ Module Action คุณยังสามารถเพิ่มคลาส Java เพื่อแทนที่แล้วเพิ่ม อัพเดต บันทึกฟังก์ชันบนโมดูล หรือเพิ่มฟังก์ชัน JavaScript เพื่อปรับแต่งการโต้ตอบบนโมดูล

โมดูล (Modules) เป็นส่วนย่อยของหน้าจอที่วางช่องใส่ข้อมูล การกำหนดค่าโมดูลมีรายการคุณสมบัติที่จะรวมไว้ในฟอร์มอัจฉริยะ ผู้ใช้สามารถเพิ่มแถวและคอลัมน์ในรูปแบบอัจฉริยะตามการออกแบบที่เกี่ยวข้อง การกำหนดค่าโมดูลกำหนดให้ผู้ใช้ระบุชื่อตารางฐานข้อมูล คีย์ตาราง และลำดับเพื่อจัดเก็บอินพุตของผู้ใช้ และยังมีตัวเลือกสำหรับผู้ใช้ในการเขียนแบบสอบถาม SQL ภายในการกำหนดค่าเพื่อดึงค่าจากฐานข้อมูล ผู้ใช้สามารถลากและวางรายการฟิลด์ที่จำเป็นภายในโครงร่างโมดูลเพื่อสร้างแบบฟอร์มที่ต้องการ ฟิลด์เป็นค่าอินพุตประเภทหนึ่งที่ใช้ภายในโครงร่างโมดูลเพื่อจัดเก็บอินพุตของผู้ใช้ประเภทต่างๆ ประเภทของฟิลด์ที่รองรับโดย ONEWEB smart form มีดังนี้

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

App Designer มีตัวเลือก Universal Search ในตัวที่สามารถกำหนดค่าได้ตามความชอบของแต่ละคน เมื่อเปิดใช้งานการค้นหาแบบสากลในเอนทิตี ผู้ดูแลระบบสามารถสร้างเกณฑ์การค้นหาแบบกำหนดเองซึ่งผู้ใช้ทุกคนสามารถใช้ได้ หรือแต่ละคนสามารถสร้างเกณฑ์การค้นหาแบบกำหนดเองของเขาเองขึ้นอยู่กับข้อกำหนดในเอนทิตีเดียวกัน

วิธีเปิดใช้งาน Universal Search ในเอนทิตี?

หากต้องการเปิดใช้งานการค้นหาทั่วไปในเอนทิตี ให้เปิดเอนทิตีและไปที่หน้าต่างการกำหนดค่าเอนทิตี และเปิดใช้งานคุณสมบัติการค้นหาขั้นสูง

จะใช้ Universal Search ใน Smart Form ได้อย่างไร?

สร้างเกณฑ์การค้นหารายการโปรดใหม่โดยคลิกที่ไอคอนเพิ่มรายการโปรด

สร้างการกำหนดค่า ตามมาตรฐานส่วนบุคคลของคุณ เลือกจัดการประเภทเป็น "Me" สำหรับเกณฑ์การค้นหาส่วนบุคคล เลือกประเภท "All" แชร์มาตรฐานกับผู้ใช้รายอื่น

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

เมื่อบันทึกเกณฑ์แล้ว ผู้ใช้สามารถเลือกระหว่างการค้นหาแบบกำหนดเองต่างๆ ที่มีให้

ตัวออกแบบแอพรองรับการกำหนดค่าแท็บสองประเภท Normal Tab และ 2 Layer tab.

Normal Tab ได้รับการออกแบบและใช้เพื่อสร้างสมาร์ทฟอร์มที่มีเพียงเลเยอร์เดียว (การออกแบบฟอร์มหน้าเดียวอย่างง่าย) สามารถรวมหลายส่วนหรือโมดูลภายในแท็บนี้

ตัวอย่าง Normal tab

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

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

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

Module Configuration

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

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

4. .คลิกที่ Accept

• ในชื่อโมดูล ให้ป้อน "Application"

• ใน ชื่อตาราง ให้เลือก "oneweb_application(T)"

• คลิก OK

ตอนนี้คุณก็พร้อมแล้ว "Main Tab" และ "Main Module" กำหนดค่า Let us begin with Field Configuration.

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

Field Configuration

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

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

ให้เราดำเนินการต่อกับช่องอื่นๆ ที่เหลือตามเค้าโครงของเราบนตัวอย่าง 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 ของคุณ

Set Primary Key of Main Module

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

• เลือก "APPLICATION_ID" เป็น Module Key

• เพิ่ม KeyLen เป็น “7”

• เลือก Sequence เป็น "ONEWEB_APPLICATION_SEQ"

• คลิกไอคอนที่เพิ่มแถว

• คลิก OK

บันทึก 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 ของคุณ

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 ของคุณ

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

Page Designer มีเทคโนโลยีการนำทางในตัวเพื่อให้คุณสามารถเชื่อมโยงหน้าเว็บได้ง่ายขึ้น

HyperLink คุณสามารถเชื่อมโยงเพจของคุณกับเว็บไซต์อื่นได้โดยคลิกวัตถุที่คุณต้องการเชื่อมโยง เปิดแท็บสไตล์ เลือกประเภทลิงค์เป็น เพื่อนำลิงค์จากเว็บไซต์อื่นมาใส่ในช่องว่าง

Another Page คุณสามารถลิงค์เพจของคุณไปยังเพจอื่นใน Application โดยคลิกส่วนประกอบที่คุณต้องการลิงค์ เปิดแท็บสไตล์ เลือกประเภทลิงค์เป็น เพื่อชี้ไปยังหน้าอื่นในแอพพลิเคชันของคุณ

Tabs (Web) Page Designer มีองค์ประกอบ UI ที่เรียกว่า "Tabs" ที่ช่วยให้คุณตั้งค่าการนำทางแท็บ ลาก Tabs จากแถบเมนูใน Components ของ Tabs และวางลงในช่องว่างเพื่อสร้างการนำทางของ Tabs

คุณสามารถดูและแก้ไขรายละเอียดภายในได้โดยคลิกที่ Tabs และแถบเมนูจะแสดงที่ด้านบนของหน้าจอ

คลิก Show เพื่อดูรายละเอียดแท็บที่คุณเลือก คลิก Add เพิ่มแท็บเพิ่มเติม คลิก Remove เพื่อลบแท็บ

Tabs (Mobile) Page Designer ยังมีการนำทางแท็บสำหรับแอพพลิเคชันมือถือ ในการสร้างโครงสร้าง Tabs ผู้ใช้ต้องสร้างเพจใหม่และเลือกเทมเพลต Tabs ในประเภทเพจ

ระบบจะสร้างหน้าเมนู Tabs เริ่มต้นสำหรับผู้ใช้

ผู้ใช้สามารถกำหนดค่า Tabs และตั้งค่าหน้าสำหรับแต่ละ Tabs ได้ตามความต้องการ

Menu (Mobile) Page Designer ให้การนำทางเมนูสำหรับแอพพลิเคชันมือถือ ในการสร้างเมนู ผู้ใช้ต้องสร้างหน้าเมนูและเลือกเทมเพลต Drawer ในประเภทหน้า

ระบบจะสร้างหน้าเมนูเริ่มต้นสำหรับผู้ใช้

ผู้ใช้สามารถแก้ไขเนื้อหาของหน้าได้ตามความต้องการ

ตั้งค่าหน้า Landing Page เริ่มต้นของเมนู คลิกที่ส่วนประกอบตัวแยกและตั้งค่าคุณสมบัติหน้าเริ่มต้นและคุณสมบัติด้านข้างเลื่อน

ตอนนี้เลือกส่วนประกอบรายการแต่ละรายการและตั้งค่าลิงก์เพื่อตั้งค่าการดำเนินการสำหรับรายการเมนู

หากต้องการสร้าง 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

เพื่อให้แน่ใจว่าประสิทธิภาพและความสามารถในการบำรุงรักษาของ UI และเพื่อเอาชนะข้อจำกัด คุณต้องมีการออกแบบที่ชาญฉลาด หากคุณปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุด คุณจะต้องทำงานซ้ำน้อยลงหลังการตรวจทาน เพื่อช่วยให้นักออกแบบและผู้ใช้มีช่วงเวลาที่น่าพอใจและประสบการณ์การใช้งานโดยไม่ต้องยุ่งยากใดๆ ขณะทำงานกับ UX /UI ให้เราพิจารณาสิ่งที่ควรทำและไม่ควรทำ เพื่อให้เราช่วยให้พวกเขาได้รับสิ่งที่ต้องการโดยไม่ระคายเคือง หรือ UX ที่ไม่ดี เราไม่ครอบคลุมถึงขอบเขตของธุรกิจหรือโครงการ มีเพียงการตั้งค่า UX/UI ของแพลตฟอร์มเท่านั้น

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

นอกจากนี้แบบฟอร์มอัจฉริยะเหล่านี้เมื่อสร้างขึ้นแล้วสามารถใช้เป็นไฟล์ JSON แบบง่ายๆในการส่งออกหรือนำเข้าจากแพลตฟอร์ม ONEWEB หนึ่งไปยังอีกสภาพแวดล้อมหนึ่งได้อย่างง่ายดาย

แต่ถ้าผู้ใช้ต้องการปรับใช้การกำหนดค่านี้กับ environment รันไทม์อื่น เช่น การใช้งานจริง ผู้ใช้สามารถใช้คุณสมบัติการปรับใช้ใน AppSpace โปรดตรวจสอบ AppSpace Deployment Center เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับการปรับใช้แอพพลิเคชันกับรันไทม์ต่างๆ

Static Page เป็นเหมือนไซต์ตอบสนองทางเดียวซึ่งไม่มีการติดต่อกับฐานข้อมูลหรือแหล่งข้อมูลภายนอก และไม่สามารถจัดเก็บข้อมูลได้ Static Page มีโค้ด HTML ซึ่งกำหนดโครงสร้างและเนื้อหาของเว็บเพจ ทุกครั้งที่โหลดหน้านี้จะมีลักษณะเหมือนเดิม วิธีเดียวที่เนื้อหาของหน้า HTML นี้จะเปลี่ยนแปลงคือหากนักพัฒนาเว็บอัปเดตและเผยแพร่ไฟล์อีกครั้ง ส่งผลให้แต่ละหน้าแสดงข้อมูลเดียวกันแก่ผู้เยี่ยมชมทุกคน

ไซต์แบบสแตติกเป็นประเภทเว็บไซต์พื้นฐานที่สุดและสร้างง่ายที่สุด ไม่เหมือนกับเว็บไซต์ไดนามิกตรงที่ไม่ต้องการการเขียนโปรแกรมบนเว็บหรือการออกแบบฐานข้อมูล ไซต์แบบสแตติกสามารถสร้างได้โดยการสร้างหน้า HTML สองสามหน้าและเผยแพร่ไปยังเว็บเซิร์ฟเวอร์

User Experience (UX) เป็นความรู้สึกที่ผู้คนได้รับจากการใช้แอพพลิเคชัน ผลิตภัณฑ์ หรือเว็บไซต์ใดๆ The User Interface (UI) คือสิ่งที่ผู้คนมีปฏิสัมพันธ์ด้วยซึ่งเป็นส่วนหนึ่งของประสบการณ์นั้น อินเทอร์เฟซผู้ใช้ที่ดีมอบประสบการณ์ที่ "เป็นมิตรกับผู้ใช้" ช่วยให้ผู้ใช้สามารถโต้ตอบกับซอฟต์แวร์หรือฮาร์ดแวร์ได้อย่างเป็นธรรมชาติและเป็นธรรมชาติ โปรแกรมซอฟต์แวร์เกือบทั้งหมดมีส่วนติดต่อผู้ใช้แบบกราฟิกหรือ GUI ซึ่งหมายความว่าโปรแกรมมีการควบคุมแบบกราฟิกซึ่งผู้ใช้สามารถเลือกได้โดยใช้เมาส์หรือแป้นพิมพ์ GUI ทั่วไปของโปรแกรมซอฟต์แวร์ประกอบด้วยแถบเมนู แถบเครื่องมือ หน้าต่าง ปุ่ม และส่วนควบคุมอื่นๆ

การออกแบบ UX เป็นฟิลด์เชิงวิเคราะห์และทางเทคนิคมากกว่า ในขณะที่การออกแบบ UI นั้นใกล้เคียงกับสิ่งที่เราเรียกว่าการออกแบบกราฟิก แม้ว่าความรับผิดชอบจะค่อนข้างซับซ้อนกว่าก็ตาม องค์ประกอบทั้งสองนี้มีความสำคัญต่อผลิตภัณฑ์เนื่องจากทำงานร่วมกันอย่างใกล้ชิด ไม่ต้องสงสัยเลยว่า การออกแบบ UX/UI เป็นส่วนสำคัญในการทำงานแอพพลิเคชันหรือสร้างเว็บไซต์

Page Designer มีคุณสมบัติในตัวเพื่อเพิ่มส่วนหัวและส่วนท้ายให้กับทั้งเว็บเพจและแอพพลิเคชันมือถือ ตั้งแต่เวอร์ชัน 5.0.21.01 ขึ้นไป ส่วนหัวและส่วนท้ายจะถูกสร้างขึ้นเป็นหน้าแยกต่างหากที่สามารถรวมไว้ในหน้าหลักได้

Web App บนเว็บคุณสามารถเปิดหรือปิดการใช้งานส่วนหัวและส่วนท้ายได้โดยสลับตัวเลือกการควบคุม "Layout of page is Standard?" ในหน้าจอการตั้งค่าหน้า

เมื่อเปิดใช้งาน Standard Layout Header และ Footer ของหน้าจะมีลักษณะดังนี้

จากเวอร์ชัน 5.0.21.01 เมื่อคุณสร้างเว็บแอพพลิเคชัน หน้าส่วนหัวและส่วนท้ายจะถูกสร้างขึ้นตามค่าเริ่มต้น ผู้ใช้สามารถคลิกที่ไอคอนแก้ไขและออกแบบส่วนหัวและส่วนท้ายของแอพพลิเคชันได้เหมือนกับหน้าอื่นๆ

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

ภายใน pop-up Link Component ให้เลือก Filter as Page และเลือกหน้า Header & Footer ที่แสดง คลิกปุ่ม Link

ตอนนี้ผู้ใช้สามารถเห็นหน้า Header Footer ในหน้าจอส่วนประกอบของ AppSpace

ผู้ใช้สามารถคลิกที่ไอคอนแก้ไขของเพจและออกแบบ Header ได้เหมือนกับเพจอื่นๆ

Mobile App ในแอพพลิเคชันมือถือ Header และ Footer เป็นส่วนประกอบ คุณสามารถลากและวางลงใน PageContent ได้ตามต้องการ

Page Designer ในปัจจุบันรองรับเพียงสองภาษาคือ ภาษาอังกฤษและภาษาญี่ปุ่น ผู้ใช้งานสามาถทำการเปลี่ยนภาษาได้โดยเปิดเข้าไปใน Page Designer ผ่านทาง Switcher

เปิด Switcher เพื่อจะเข้าไปยัง Page Designer

คลิกปุ่ม About จะเจอกับหน้าต่าง Page Designer

กดที่ Dropdown ตรง Language เพื่อเลือกภาษาระหว่างภาษาอังกฤษ (English ) และภาษาญี่ปุ่น (Japanese )

ตัวอย่างหน้าจอตัวออกแบบแสดงอยู่ด้านล่าง หากคุณเปลี่ยนภาษาของเพจเป็นภาษาญี่ปุ่น (Japanese )

นอกจากไอคอนระบบแล้ว คุณยังสามารถอัปโหลดไอคอนแบบกำหนดเองที่มีรูปแบบไฟล์เป็น SVG ขณะนี้ Page Designer ไม่รองรับไอคอนหลากสี

เปิดแท็บ RESOURCES จากนั้นเลือกไอคอนแท็บย่อย

คลิก Upload Icon จากนั้นเลือกไฟล์ไอคอนหรือ ไอคอน Drag and Drop เข้าสู่หน้าจอ

ตอนนี้ไอคอนเหล่านี้พร้อมใช้งานภายใน Page Designer แล้ว

นอกจากแบบอักษรของระบบแล้ว ผู้ใช้สามารถอัปโหลดแบบอักษรที่กำหนดเองในรูปแบบไฟล์ เช่น TTF, OTF หรือ WOFF.

อัปโหลดอย่างไร

คลิกที่แท็บ RESOURCES และเลือกแท็บย่อย WEBFONTS

คลิก Upload Fonts จากนั้นเลือกไฟล์ฟอนต์ หรือ Drag and Drop ลงในหน้าจอ

ตอนนี้ ฟอนต์ใหม่พร้อมใช้งานแล้วในส่วนฟอนต์ของ Page Designer

Signature pad เป็นส่วนประกอบสำหรับอุปกรณ์เคลื่อนที่ในการเซ็นชื่อและบันทึกลายเซ็นลงในฐานข้อมูล ผู้ใช้สามารถลากและวางองค์ประกอบ Signature Pad ลงในหน้าจอการออกแบบ

ตอนนี้แมปองค์ประกอบ Signature Pad กับ Page State Parameter เพื่อบันทึกค่าลงในสถานะ

เมื่อคลิกปุ่ม Save ในองค์ประกอบ ลายเซ็นจะถูกบันทึกเป็นภาพที่เข้ารหัส base64 ไปยังพารามิเตอร์ State

Page Designer อนุญาตให้ผู้ใช้โหลดรูปภาพแบบไดนามิกจากฐานข้อมูล ในการแสดงรูปภาพในเพจ ผู้ใช้สามารถลากและวางรูปภาพส่วนประกอบและรวมเข้ากับ Microflow สำหรับเว็บแอพพลิเคชัน สำหรับแอพพลิเคชันมือถือ คุณไม่จำเป็นต้องใช้ microflow เพราะคุณสามารถใช้ Local Storage in Page แทนได้

Create Microflow to load image from database ขั้นแรกให้สร้าง Business Object

ลากและวาง Start node, Database node และ End node จากนั้นเชื่อมโยงพวกเขาเหมือนภาพด้านล่าง

คลิกสองครั้งที่โหนดฐานข้อมูลและเปิดแท็บ BusinessObject เลือกทำเครื่องหมายที่กล่อง Output

เปิด Database Parameter แท็บและป้อนข้อมูลที่แสดงด้านล่าง (คำสั่งฐานข้อมูลสามารถเปลี่ยนแปลงได้ขึ้นอยู่กับตารางของผู้ใช้) คลิกที่ Open Mapping Parameter หมายเหตุ: เมื่อดึงข้อมูลไบนารีจากฐานข้อมูล ตรวจสอบให้แน่ใจว่าได้ดึงข้อมูลนี้เป็นข้อมูลที่เข้ารหัส base64 (Encoding command 'data:image/jpg;base64, '||encode(img_data, 'base64') AS img)

คลิกที่ลิงค์ระหว่างการแมปไปยังเอาต์พุต เพิ่ม Parameters ภายใต้ DatabaseDummyObject จากนั้นแมป DatabaseDummyObject กับ Activity BO ตามที่แสดงในภาพด้านล่าง และอย่าลืมคลิก Done

Display an image on Page UI from Microflow ลากและวางองค์ประกอบภาพไปที่หน้าจอการออกแบบ

คลิกที่ปุ่มเพิ่มรายการการกระทำ '+' เลือกแท็บ Microflow โครงการ Microflow และกระบวนการที่คุณสร้าง เขียนเหตุการณ์เป็น 'Load' คลิก Save

สร้างแอพพลิเคชันของคุณเพื่อตรวจสอบผลลัพธ์ที่ออกมา

Pass Parameter เป็นคุณสมบัติในการส่งผ่านพารามิเตอร์จากหน้าหนึ่งไปอีกหน้าหนึ่ง ด้านล่างเป็นขั้นตอนในการส่งพารามิเตอร์จากหน้าหนึ่งไปอีกหน้าหนึ่ง

สร้างสองเพจใน Page Designer Page1 และ Page 2 จากนั้นสร้างพารามิเตอร์สถานะเพจใน Page2

สร้าง Label ในหน้า 2 แมปฟิลด์เหล่านี้กับพารามิเตอร์ของเพจที่สร้างขึ้น

ตอนนี้เปิด Page1 และสร้าง Page State Parameter วางฟิลด์อินพุตบนเพจและแมปกับ state parameters

ตั้งค่าบนหน้าจอพารามิเตอร์การค้นหา

บันทึกและสร้างแอพพลิเคชัน

Testing

บน Page Runtime ป้อนข้อมูลในช่องข้อความและคลิกปุ่ม 'To Page2' เพื่อเปลี่ยนเส้นทางไปยัง Page2

ค่าของชื่อและนามสกุลแสดงในหน้าที่ 2

Local Notification ทำงานเหมือนแอพพลิเคชันเตือนความจำในโทรศัพท์มือถือและอยู่ในแอพพลิเคชันมือถือของคุณเท่านั้น ขณะนี้วิธีเดียวในการกำหนดค่าคือการตั้งค่าด้วยตนเอง คุณต้องกำหนดหัวข้อการแจ้งเตือน รายละเอียดใดๆ และเวลาที่แจ้งเตือน คุณต้องกำหนดค่ารายละเอียดทั้งหมดสำหรับการแจ้งเตือนโดยใช้ JavaScript และปลั๊กอินสำหรับการแจ้งเตือนในเครื่องมีให้ใน Page Designer ดังที่แสดงด้านล่าง

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

เปิด Page Designer คลิกเมนู Theme Designer

คลิก Create New Theme (หรือผู้ใช้สามารถคลิกที่ธีมที่มีอยู่ในรายการธีมเพื่อแก้ไข)

ใส่ชื่อธีมแล้วคลิก Start Design

คุณสามารถออกแบบธีมได้ 14 หมวดหมู่ และธีมเริ่มต้นภายในตัวออกแบบธีมจะแสดงดังต่อไปนี้:

คลิก Save และธีมใหม่จะเริ่มแสดงในรายการธีม

วิธีตั้งค่าธีมให้แอพมือถือ เปิดแอพพลิเคชันมือถือและคลิกที่การตั้งค่า

เลือกธีมในช่องธีม เพื่อเลือกธีมที่ต้องการ

เลือกธีม จากนั้นคลิก Update เปิดหน้า ลากและวางส่วนประกอบเพื่อดูการทำงานของธีมใหม่

Page Designer ให้บริการแปลสำหรับการผลิตเนื้อหาของหน้าใน Multi-language สำหรับเว็บหรือแอพพลิเคชันมือถือ

วิธีลองรับ multiple languages ใน Page

ไปที่แท็ป TRANSLATION

คลิก Add Key เพื่อเพิ่มคีย์การแปลใหม่

คลิก Add language และเลือกภาษาที่คุณต้องการใช้ในเพจของคุณ

ป้อน key และคำแปลสำหรับแต่ละภาษาที่เกี่ยวข้อง

ตั้งค่าภาษาเริ่มต้น (default language)

เปิดหน้าที่คุณต้องการใช้ภาษา

สร้างปุ่มเพื่อเปลี่ยนภาษา

เพิ่ม JavaScript บนปุ่มเพื่อแปลข้อความและจับคู่กับการคลิกของปุ่ม

บันทึกและสร้างแอพพลิเคชัน

Page Designer มีคุณสมบัติในการสร้างฐานข้อมูลในเครื่อง local database เป็นฐานข้อมูลที่อยู่ในเครื่องมือถือเฉพาะที่แอพพลิเคชันทำงานอยู่ ตัวออกแบบแอพสามารถสร้างตาราง จัดการคอลัมน์ และข้อมูลภายใน Page Designer ตัวออกแบบแอพยังสามารถให้ตัวเลือกสำหรับที่จัดเก็บในเครื่องเพื่อซิงค์กับ

ขั้นตอนในการสร้าง local database ในแอพพลิเคชันมือถือ คลิกที่ไอคอนฐานข้อมูล จากนั้นคลิกไอคอนบวก เพื่อสร้างตาราง

ป้อนชื่อคอลเลกชันและเลือกพื้นที่คอลเลกชัน คลิก Start Design สำหรับการซิงค์ข้อมูล โปรดดู

เพิ่มคอลัมน์ในตารางและป้อนข้อมูล

คลิก Save แล้วตารางจะแสดงทางด้านซ้ายใต้ฐานข้อมูล

คลิกที่ไอคอนส่งออก DDL เพื่อส่งออก DDL และสร้างตารางซิงค์บนฐานข้อมูลเซิร์ฟเวอร์ (หากผู้ใช้เลือกที่จะซิงค์ฐานข้อมูลกับเซิร์ฟเวอร์)

วิธีใช้ local table เพื่อแสดงข้อมูลบนหน้าจอ ด้านล่างนี้เป็นขั้นตอนในการแสดงข้อมูลจากที่จัดเก็บในตัวเครื่องบนหน้าจอ

ผู้ใช้สามารถใช้คุณสมบัติเพิ่มการกระทำบนเพจเพื่ออ่านจากฐานข้อมูลในเครื่อง เพิ่มการดำเนินการในเหตุการณ์การโหลดเนื้อหาของหน้า

แมปองค์ประกอบการ์ดบนเพจกับตารางที่อ่านจากฐานข้อมูลโดยใช้ไอคอนเชื่อมต่อกับฐานข้อมูล

แมปฟิลด์ย่อยใน card ไปยังฟิลด์ข้อมูลในตาราง

เพิ่มปุ่มเพื่อซิงค์ข้อมูลกับเซิร์ฟเวอร์ DB หากตัวเลือกการซิงค์ถูกเปิดใช้งาน

เพิ่ม JavaScript เพื่อซิงค์ตาราง

เมื่อคุณสร้างแอพและเรียกใช้งาน มันจะแสดงข้อมูลจากฐานข้อมูลในเครื่องดังที่แสดงด้านล่าง

เมื่อคลิกปุ่ม Sync ระบบจะแสดงข้อมูลจากเซิร์ฟเวอร์มากขึ้น เนื่องจากเซิร์ฟเวอร์มีข้อมูลมากขึ้น

Push Notification คล้ายกับ SMS แต่ข้อความการแจ้งเตือนจะถูกส่งผ่านแอพพลิเคชันที่ติดตั้งตามเวลาจริงไปยังผู้ใช้ทุกคนที่ติดตั้งแอพพลิเคชันและเปิดใช้งานการรับข้อความเหล่านี้ด้วย ไม่ว่ามือถือจะเป็น Android หรือ iOS เช่นการแจ้งเตือนใน Line, Facebook หรือ Instagram ใน Page Designer ผู้ใช้สามารถเปิดใช้งานปลั๊กอินการแจ้งเตือนแบบพุชและกำหนดค่าการแจ้งเตือนโดยการอัปโหลดบริการของ Google จาก Firebase Cloud Messaging หากจำเป็นต้องเปิดใช้งานการแจ้งเตือนแบบพุชสำหรับแอพพลิเคชัน ผู้ใช้ยังต้องรวมเพจกับ Microflow (ซึ่งมีโหนดแบบ Push Notification) เพื่อสร้างการแจ้งเตือนแบบพุชบนเพจ

วิธีเปิดใช้งานปลั๊กอิน Push notification

ด้านล่างนี้คือการกำหนดค่าที่จำเป็นในโหนด Push Notification ภายใน Microflow สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับโหนดการแจ้งเตือนแบบพุช โปรดดูส่วนโหนด Push Notification ภายใต้ Microflow

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

วิธีเปิดใช้งานการซิงค์ เมื่อสร้างคอลเล็กชัน ผู้ใช้สามารถเลือกได้ว่าต้องการซิงค์ข้อมูลหรือไม่โดยเปิดใช้คุณสมบัติ Support Two-ways Data Sync? ผู้ใช้สามารถระบุประเภทของบริการซิงค์เป็นด้วยตนเองเท่านั้นหรืออัตโนมัติ ข้อมูลที่ผู้ใช้จำเป็นต้องป้อนแสดงอยู่ด้านล่าง

หากผู้ใช้เลือกการซิงค์ด้วยตนเอง พวกเขาสามารถสร้างปุ่มเพื่อซิงค์ตารางและเรียกใช้ฟังก์ชัน localStorageSync ภายใน JavaScript

App Icon เป็นภาพเอกลักษณ์ของแอพพลิเคชันของคุณ ไอคอนที่ใช้สำหรับ App drawer คุณสามารถค้นหาได้บนหน้าจอหลักของอุปกรณ์ เช่นเดียวกับ shortcut app

เปิดส่วน App Icon สำหรับแอพพลิเคชันมือถือ

ผู้ใช้สามารถเลือกไอคอนต่างๆ สำหรับ iOS และ Android

ลากและวางไฟล์รูปภาพหรือเรียกดูและเลือกรูปภาพที่จะใช้เป็นไอคอน

ผู้ใช้ยังสามารถอัปโหลดรูปภาพต่างๆ ที่มีความละเอียดต่างกันสำหรับแต่ละขนาดหน้าจอ

Splash Screen เป็นองค์ประกอบควบคุมกราฟิกที่ประกอบด้วยรูปภาพ โลโก้ หรือเวอร์ชันปัจจุบันของแอพพลิเคชัน มักจะปรากฏขึ้นเมื่อมีการเปิดแอพพลิเคชันมือถือที่ติดตั้งไว้

เปิดส่วน SPLASH SCREEN สำหรับแอพพลิเคชันมือถือ

ผู้ใช้สามารถเลือกตาม Device หรือเลือก All ก็ได้

อัปโหลดรูปภาพสำหรับ splash screen

จากเวอร์ชัน 5.0.21.01 ตัวออกแบบหน้ามีคุณลักษณะใหม่ที่เรียกว่าชุด UI เพื่อสร้างส่วนประกอบที่ใช้ซ้ำได้ซึ่งสามารถใช้ร่วมกันในหลายๆ หน้าได้ ส่วนประกอบที่ใช้ซ้ำได้จะต้องมีการทำเครื่องหมายเป็นชุด UI ก่อน หากต้องการสร้างองค์ประกอบ UI เป็น UI Kit โปรดใช้เมนู UI Kit ที่แผงเมนูด้านซ้าย ขั้นตอนในการสร้าง UI Kit ในหน้า

เลือกคอมโพเนนต์ UI ที่คุณต้องการสร้างเป็นชุด UI ที่ใช้ซ้ำได้

คลิกที่ไอคอน UI Kit บนเมนูแถบด้านข้างซ้าย

คลิกที่ไอคอน '+' บนป๊อปอัพ UI KITS

ใน pop-up ให้ป้อนชื่อ Kit ที่คุณต้องการสร้าง

และคลิกปุ่ม 'Create'

เมื่อสร้างสำเร็จแล้ว pop-up สีเขียวจะปรากฏขึ้น ส่วนประกอบที่สร้างขึ้นจะปรากฏใต้แท็บ 'User Customize' ปรับแต่งผู้ใช้ ในหน้าต่าง pop-up UI KITS

ผู้ใช้สามารถใช้งานได้โดยลากจากหน้าต่าง pop-up UI KITS แล้ววางในตำแหน่งที่ต้องการภายใน PageContent

ผู้ใช้ยังสามารถลบ UI Kits ออกจากแอพได้โดยการลบออกจากหน้าต่าง pop-up UI Kits

Export and Import UI Kits from other apps เมื่อผู้ใช้สร้าง UI Kit แล้ว สามารถใช้มันในหน้าปัจจุบัน หรือสามารถส่งออก (Export) และนำเข้า (Import) ไปยังแอพพลิเคชันอื่นในระบบของ ONEWEB หากต้องการส่งออกหรือนำเข้าชุดเครื่องมือ UI Kits แท็บใหม่จะถูกเพิ่มภายใต้แท็บ Resources ในหน้าแรกของ Page Designer

หากต้องการส่งออก (Export) ชุด UI Kits จากแอพ ให้คลิกที่ปุ่ม Export UI Kits

เลือกส่วนประกอบ UI Kit ที่จะรวมไว้ในแพ็คเกจการส่งออก ใส่ package name และ namespace ด้วย คลิก Export เลือกโฟลเดอร์ที่คุณต้องการบันทึก UI Kit

เมื่อส่งออกสำเร็จ pop-up สีเขียวจะปรากฏขึ้น

ในการเพิ่ม UI Kits ให้คลิกที่ปุ่ม Add UI Kits และเลือกแพ็คเกจจากโฟลเดอร์ระบบของคุณ

เมื่อเพิ่มแล้วจะแสดงแพ็คเกจในรายการชุด UI Kits ของคุณ

หากต้องการใช้ชุดเครื่องมือ UI kits ที่นำเข้าในการออกแบบเพจ

ไปที่หน้าเว็บที่คุณต้องการเพิ่มชุดเครื่องมือ UI Kits

คลิกที่เมนู UI Kit บนแถบด้านซ้าย

คลิกที่แท็บ UI Toolkit ภายนอกในหน้าต่างป๊อปอัพ UI Toolkit

มันจะแสดงรายการเครื่องมือ UI Kits ที่มีอยู่สำหรับการนำเข้าแอพ

คุณสามารถลากจาก pop-up UI Kits ไปยังตำแหน่งที่ต้องการภายใน Page Content ของคุณ

Page Designer มีคุณสมบัติในการเพิ่มคำสั่งแบบกำหนดเองให้กับองค์ประกอบใดๆ บนหน้าจอ คำสั่งเหล่านี้เป็นคุณสมบัติแบบกำหนดเองที่เพิ่มเข้าไปในองค์ประกอบ ส่วนนี้แสดงวิธีเพิ่มคำสั่ง PGD ให้กับองค์ประกอบบน Page Designer

วิธีเพิ่ม

เปิดหน้าของคุณใน Page Designer คลิกองค์ประกอบ (element)ที่คุณต้องการเพิ่มคำสั่ง

ป้อน attribute ที่คุณต้องการเพิ่ม แล้วเลือกค่า ผู้ใช้สามารถตั้งค่าคงที่ให้กับคุณสมบัติหรือตั้งค่าจากสถานะ หากตั้งค่าจากสถานะ ให้ใช้ไวยากรณ์ (syntax) {{State.parameterName}} คลิก Done เมื่อเสร็จสิ้น

ตอนนี้บันทึกและสร้างเพจ จากการตรวจสอบ คุณจะเห็นว่ามีการเพิ่ม attribute ลงในแท็ก HTML

Uses of PGD directives PGD Directives สามารถใช้เพื่อเพิ่มการตั้งค่าที่กำหนดเองให้กับองค์ประกอบ เช่น การซ่อนองค์ประกอบตามค่า ผู้ใช้สามารถใช้คำสั่ง ng-hide

ผู้ใช้สามารถใช้ ng-value เพื่อเพิ่มมูลค่าให้กับองค์ประกอบตามเงื่อนไข

ผู้ใช้ยังสามารถเพิ่มมูลค่าจาก State หรือ Store

ผู้ใช้สามารถใช้ ng-class เพื่อตั้งค่าคลาสจากค่าใน State หรือ Store

Page Designer มีหน้าจอ Plugin สำหรับเพิ่มคุณสมบัติเฉพาะให้กับฟังก์ชันที่มีอยู่หรือเพิ่มคุณสมบัติใหม่ให้กับแอพพลิเคชันของคุณ

โดยเปิดแท็บ APP CONFIG จากนั้นคลิก Plugin

เปิดใช้งาน (Enable) ปลั๊กอินที่คุณต้องการใช้และ ปิดใช้งาน (Disable) หากไม่ใช่

คลิกที่ Add More Plugin หากคุณต้องการติดตั้งปลั๊กอินใหม่

คลิกที่ปุ่ม Install เพื่อติดตั้งปลั๊กอินที่มีอยู่แล้ว

ผู้ใช้ยังสามารถแนบปลั๊กอินที่กำหนดเองได้โดยคลิกที่ปุ่ม +Add Plugin

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

เปิดแอพพลิเคชันและไปที่แท็บ SETTINGS ใน Page Designer

คลิกที่ EXTENSIONS แล้วคลิกปุ่ม Add more extensions

ลากและวาง extension ของคุณหรือคลิกที่ Choose file เพื่อเรียกดูไฟล์นามสกุล ".pgx"

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

ตรวจสอบให้แน่ใจว่าได้เพิ่มและเปิดใช้งาน extension ในแอพพลิเคชันของคุณแล้ว

ตอนนี้เปิดหน้าที่คุณต้องการเพิ่มตาราง

ลากและวาง element ตารางใต้ Table Editor ลงใน Page Designer

ตอนนี้คลิกที่แท็บ properties ของตารางและป้อน properties ของตาราง

ผู้ใช้สามารถ Add Data ไปยังตารางหรือกำหนดค่าคุณสมบัติของตารางจากส่วนที่เกี่ยวข้องภายใต้แท็บ properties ของตาราง

บันทึกและสร้างแอพพลิเคชันเพื่อดูข้อมูลตามเวลาจริงในตารางจาก Microflow O/P

สามารถใช้ Page Designer เพื่อสร้างแผนภูมิ (Charts )โดยใช้ส่วนขยาย ChartsJS ส่วนนี้จะอธิบายวิธีการสร้างแผนภูมิบน Page Designer

เปิด Home เพจ Page Designer และไปที่แท็บ RESOURCES

คลิกที่แท็บย่อยของ Extensions และคลิกที่ปุ่ม Add more extension.

ลากและวางไฟล์ extension หรือเรียกดูและเลือกไฟล์ extension PGDChart

คลิกที่ปุ่มติดตั้ง (Install) สำหรับ extension ChartJS ปิดหน้าต่าง

ตรวจสอบให้แน่ใจว่าได้เพิ่มและเปิดใช้งานส่วนขยายในแอพพลิเคชันของคุณแล้ว

ตอนนี้เปิดหน้าเว็บที่คุณต้องการสร้างแผนภูมิ

ลากและวาง element chart ภายใต้ CHART ลงในหน้าจอออกแบบ

ตอนนี้คลิกที่แท็บ properties ของ chart และป้อนคุณสมบัติ (properties) ของ chart

บันทึกและสร้างแอพพลิเคชันเพื่อดูข้อมูลแบบเรียลไทม์บนแผนภูมิจาก Microflow O/P

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

แผงเมนูก่อนหน้าทั้งหมดมีลักษณะเหมือนกันทุกประการยกเว้นตำแหน่ง เพิ่มแผงคอมโพเนนต์ใหม่ แผงชุด UI Kits แผงคุณสมบัติ รูปภาพ และแผงไอคอน ทั้งหมดมีอยู่ในแผง pop-up แล้ว

จากเวอร์ชัน 5.0.21.01 Page Designer ได้อัปเดตหน้าต่างการตั้งค่าโมเดลกล่องให้เป็นกล่องการตั้งค่าการโต้ตอบกับ UI มากขึ้น ผู้ใช้สามารถเพิ่มหรือลดระยะขอบและช่องว่างภายในได้โดยการลากเส้นขอบในด้านที่เกี่ยวข้อง

ผู้ใช้สามารถคลิกสองครั้งที่ด้านที่เกี่ยวข้องเพื่อเปิดช่องป้อนข้อมูลเพื่อป้อนค่าด้วยตนเองได้เช่นกัน

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

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

จาก ONEWEB 4.0.19.11 Page Designer ให้คุณสมบัติในการบันทึกหน้าใดๆ เป็นเทมเพลต ใช้ตัวเลือกแชร์บนเมนู Page Designer เพื่อแชร์เพจของคุณเป็นเทมเพลต ตัวเลือกนี้สามารถใช้ได้ทั้งบนเว็บเพจและมือถือ

สามารถแชร์เพจได้ 3 วิธี

แชร์ภายในแอพพลิเคชัน (Share within application) ในกรณีนี้ ผู้ใช้สามารถใช้เทมเพลตนี้ในหน้าอื่นภายในแอพพลิเคชันเดียวกัน สำหรับตัวเลือกนี้ ผู้ใช้สามารถเลือกช่องทำเครื่องหมาย 'Share in this application only' (ตัวเลือกนี้ถูกเลือกโดยค่าเริ่มต้น) ตอนนี้คลิกที่ปุ่ม Share

แชร์แบบสาธารณะ (Share publicly) ด้วยตัวเลือกนี้ ผู้ใช้สามารถแชร์เพจเป็นเทมเพลตกับผู้ใช้ทุกคนโดยใช้ ONEWEB บนเซิร์ฟเวอร์นั้น แนะนำให้ใช้เฉพาะในกรณีที่ใช้ ONEWEB ในองค์กรหรือบนเซิร์ฟเวอร์เฉพาะเท่านั้น หากใช้บนคลาวด์ที่ใช้ร่วมกัน ตัวเลือกนี้จะใช้เพื่อแบ่งปันเทมเพลตของเพจต่างๆ เป็นเทมเพลตเริ่มต้นสำหรับผู้ใช้ใดๆ สำหรับตัวเลือกนี้ ผู้ใช้สามารถยกเลิกการเลือกช่องทำเครื่องหมาย 'Share in this application only' (ตัวเลือกนี้ถูกเลือกโดยค่าเริ่มต้น) ตอนนี้คลิกที่ปุ่ม Share

การใช้เทมเพลตที่แชร์ในเพจของคุณ (Using shared templates in your pages) หากต้องการใช้เทมเพลตเหล่านี้ในเพจของคุณ ผู้ใช้ควรไปที่เพจที่คุณต้องการใช้ คลิกที่เมนู 'Add Component' และเลือก 'Page Templates' จาก drop-down

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

แชร์เทมเพลตเป็นส่วนขยาย (Share template as an extension) ตัวเลือกนี้ใช้เพื่อแชร์หน้าเว็บของคุณกับผู้พัฒนาเพจรายอื่น คุณสามารถแบ่งปันหน้าเหล่านี้ในแอพพลิเคชันenvironments และเซิร์ฟเวอร์ เมื่อต้องการทำเช่นนี้ผู้ใช้ควรคลิกที่ไอคอนดาวน์โหลดในกล่องโต้ตอบแม่แบบหน้าแชร์ เทมเพลตนี้จะถูกดาวน์โหลดเป็นส่วนขยาย

ผู้ใช้สามารถเลือกไอคอนสำหรับส่วนขยายได้เช่นกัน

ส่วนขยายจะถูกดาวน์โหลดไปยังระบบของผู้ใช้ ผู้ใช้สามารถแบ่งปันกับผู้ใช้ ONEWEB รายอื่น

How to use templates in extension format หากต้องการใช้เทมเพลตที่ได้รับในรูปแบบส่วนขยาย ผู้ใช้จำเป็นต้องติดตั้งส่วนขยายในแอพพลิเคชันของตนก่อน ไปที่แท็บ RESOURCES ของ Page Designer และเลือกแท็บ Extensions คลิกที่ปุ่ม 'Add more extension'

เรียกดูและเลือกส่วนขยายเทมเพลตของคุณแล้วคลิกที่ปุ่ม Install

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

หากต้องการใช้ extension ของหน้านี้ ให้ไปที่หน้าที่ผู้ใช้ต้องการใช้ คลิกที่เมนู 'Add Component' และเลือก 'Page Templates' จาก drop-down

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

ระบบจะเขียนทับหน้าปัจจุบันด้วย extension ดังนั้นจึงมีข้อความยืนยันก่อนที่จะเขียนทับหน้าปัจจุบัน

เมื่อผู้ใช้ยืนยันว่ามีการเขียน extension ลงในเพจแล้ว

การจัดรูปแบบฟิลด์ UI เป็นส่วนสำคัญที่สุดขององค์ประกอบ UI เป็นสิ่งสำคัญในการถ่ายทอดข้อมูลที่ถูกต้องให้กับผู้ใช้ Page Designer มี Expression Editor เพื่อตั้งค่ารูปแบบในองค์ประกอบ UI ใช้ไวยากรณ์ตัวกรอง AngularJS เพื่อตั้งค่านิพจน์

ผู้ใช้สามารถเข้าถึง Expression Editor จากการไอคอน Connect to Data คลิกที่ไอคอน Connect to Data และเลือกแท็บ Expression คลิกที่ปุ่ม Customize expression

ตอนนี้ผู้ใช้สามารถเขียน syntax expression ที่ต้องการในตัว Variable expression editor หรือคลิกที่ Field Type และ Fields เพื่อเลือกฟิลด์ที่คุณต้องการจัดรูปแบบและเพิ่ม expression จัดรูปแบบ ผู้ใช้สามารถเลือกจากตัวแปรสถานะเช่นเดียวกับฟิลด์ Microflow หรือฐานข้อมูลในเครื่อง ผู้ใช้สามารถใช้ syntax expression ตัวกรอง AngularJS ที่ถูกต้องสำหรับการแปลงฟิลด์ ตัวอย่างด้านล่างใช้สำหรับการจัดรูปแบบตัวเลข

สำหรับการจัดรูปแบบสกุลเงินให้ใช้ expression ที่แสดงด้านล่าง

สำหรับการจัดรูปแบบวันที่ให้ใช้ syntax ด้านล่าง

จากเวอร์ชัน 5.0.21.01 Page Designer นำเสนอคุณสมบัติใหม่ที่เรียกว่า Environment Variables เพื่อให้กำหนดค่าต่างๆ สำหรับสภาพแวดล้อมต่างๆ ได้อย่างง่ายดาย เมื่อคุณตั้งค่าตัวแปรในหน้าจอตัวแปรสภาพแวดล้อมแล้ว คุณสามารถใช้ตัวแปรเหล่านี้ภายในแอพพลิเคชันเพจของคุณ เช่น ตัวแปรจาวาสคริปต์ นอกจากนี้ยังมีตัวแปรระดับระบบเพื่อตั้งค่า URL สำหรับ microflow และ IAM2 สำหรับสภาพแวดล้อมต่างๆ เช่น SIT, UAT, PRODUCTION เป็นต้น

ขณะนี้ผู้ใช้สามารถอัปโหลดไฟล์ JavaScript หรือไฟล์ CSS ที่ขึ้นต่อกันไปยังแอพพลิเคชันของตนได้โดยใช้ตัวเลือก Dependencies ในหน้าแรกของ Page Designer

เปิดโฮมเพจ Page Designer และไปที่แท็บ RESOURCES

คลิกที่แท็บย่อย Dependencies และคลิกปุ่ม Add Resource เลือกไฟล์ js หรือ CSS ที่เกี่ยวข้องเพื่อแนบกับแอพพลิเคชัน ไฟล์จะแสดงอยู่ในส่วน dependencies

ผู้ใช้สามารถใช้ functions หรือ CSS classes ภายในหน้าในแอพพลิเคชันได้แล้ว

เมื่อใดก็ตามที่ผู้ใช้สร้าง snapshot ใหม่หรือ patch เวอร์ชันของ Microflow และเพจจะเปลี่ยนไป ดังนั้นอาจมีไมโครโฟลว์หลายเวอร์ชันสำหรับผู้ใช้ ผู้ใช้สามารถเลือกเวอร์ชันของ Microflow ที่จะเรียกใช้จากเพจโดยการตั้งค่าเวอร์ชันในหน้าจอการตั้งค่า Microflow ใน Page Designer

ผู้ใช้สามารถตั้งค่าเวอร์ชัน globally เพื่อใช้เวอร์ชันล่าสุด

หรือผู้ใช้สามารถตั้งค่าเวอร์ชันที่กำหนดเองสำหรับการเรียกใช้ไมโครโฟลว์แต่ละครั้งด้วยตนเองจากเพจ

ตอนนี้ผู้ใช้สามารถย้ายองค์ประกอบที่จะวางในทิศทางการไหลใด ๆ สามารถแสดงลำดับการย้อนกลับหรือจัดเรียงใหม่ตามสไตล์ และสามารถยุบหรือไม่ยุบแบบไดนามิกตามแกนหลักในขณะที่รักษาขนาดข้ามของคอนเทนเนอร์

Default (ไม่ใช้ display flex)

ขั้นตอน ลากและวาง container ลากและวาง items ใน container คลิก container คลิกแท็บ style

Direction row default: Left to right in ltr, right to left in rtl

ขั้นตอน ลากและวาง container ลากและวาง items ใน container คลิก container คลิกแท็บ style ลาก display flex บนเลย์เอาต์ (โดยค่าเริ่มต้นตอนนี้บรรทัดทิศทางและการตัดบรรทัดจะถูกตั้งค่า)

Direction Row-reverse : Right to left in ltr, left to right in rtl

ขั้นตอน ลากและวาง container ลากและวาง items ใน container คลิก container คลิกแท็บ style ลาก display flex บนเลย์เอาต์ (โดยค่าเริ่มต้นตอนนี้บรรทัดทิศทางและการตัดบรรทัดจะถูกตั้งค่า) คลิก Direction row-reverse

Direction Column : same as row but top to bottom

ขั้นตอน ลากและวาง container ลากและวาง items ใน container คลิก container คลิกแท็บ style ลาก display flex บนเลย์เอาต์ (โดยค่าเริ่มต้นตอนนี้บรรทัดทิศทางและการตัดบรรทัดจะถูกตั้งค่า) คลิก Direction column

Direction Column-reverse : same as row but bottom to top

ขั้นตอน ลากและวาง container ลากและวาง items ใน container คลิก container คลิกแท็บ style ลาก display flex บนเลย์เอาต์ (โดยค่าเริ่มต้นตอนนี้บรรทัดทิศทางและการตัดบรรทัดจะถูกตั้งค่า) คลิก Direction column-reverse

Align flex-start รายการจะอยู่ที่จุดเริ่มต้นของแกนข้าม ความแตกต่างระหว่างสิ่งเหล่านี้เป็นเรื่องละเอียดอ่อน และเกี่ยวกับ respecting the flex-direction rules หรือ writing-mode rules

ขั้นตอน ลากและวาง container ลากและวาง items ใน container คลิก container คลิกแท็บ style ลาก display flex บนเลย์เอาต์ (โดยค่าเริ่มต้นตอนนี้บรรทัดทิศทางและการตัดบรรทัดจะถูกตั้งค่า) คลิก Align flex-start

Align Center: items are centered on the cross-axis

ขั้นตอน ลากและวาง container ลากและวาง items ใน container คลิก container คลิกแท็บ style ลาก display flex บนเลย์เอาต์ (โดยค่าเริ่มต้นตอนนี้บรรทัดทิศทางและการตัดบรรทัดจะถูกตั้งค่า) คลิก Align Center

Align Flex-end: รายการจะอยู่ที่ส่วนท้ายของแกนกากบาท ความแตกต่างอีกครั้งนั้นละเอียดอ่อนและเกี่ยวกับ respecting flex-direction rules เทียบกับ writing-mode rules

ขั้นตอน ลากและวาง container ลากและวาง items ใน container คลิก container คลิกแท็บ style ลาก display flex บนเลย์เอาต์ (โดยค่าเริ่มต้นตอนนี้บรรทัดทิศทางและการตัดบรรทัดจะถูกตั้งค่า) คลิก Align flex-end

Align Stretch ยืดให้เต็มคอนเทนเนอร์ (ยังคงคำนึงถึงความกว้างต่ำสุด/ความกว้างสูงสุด)

ขั้นตอน ลากและวาง container ลากและวาง items ใน container คลิก container คลิกแท็บ style ลาก display flex บนเลย์เอาต์ (โดยค่าเริ่มต้นตอนนี้บรรทัดทิศทางและการตัดบรรทัดจะถูกตั้งค่า) คลิก Align stretch

Justify Flex-start items are packed toward the start of the flex-direction.

ขั้นตอน ลากและวาง container ลากและวาง items ใน container คลิก container คลิกแท็บ style ลาก display flex บนเลย์เอาต์ (โดยค่าเริ่มต้นตอนนี้บรรทัดทิศทางและการตัดบรรทัดจะถูกตั้งค่า) คลิก Justify flex-start

Justify center: items are centered along the line

ขั้นตอน ลากและวาง container ลากและวาง items ใน container คลิก container คลิกแท็บ style ลาก display flex บนเลย์เอาต์ (โดยค่าเริ่มต้นตอนนี้บรรทัดทิศทางและการตัดบรรทัดจะถูกตั้งค่า) คลิก Justify center

Justify flex-end: items are packed toward the end of the flex-direction.

ขั้นตอน ลากและวาง container ลากและวาง items ใน container คลิก container คลิกแท็บ style ลาก display flex บนเลย์เอาต์ (โดยค่าเริ่มต้นตอนนี้บรรทัดทิศทางและการตัดบรรทัดจะถูกตั้งค่า) คลิก Justify flex-end

Justify space-between: รายการมีการกระจายอย่างเท่าเทียมกันในบรรทัด รายการแรกอยู่ที่บรรทัดเริ่มต้น รายการสุดท้ายอยู่ที่บรรทัดสิ้นสุด

ขั้นตอน ลากและวาง container ลากและวาง items ใน container คลิก container คลิกแท็บ style ลาก display flex บนเลย์เอาต์ (โดยค่าเริ่มต้นตอนนี้บรรทัดทิศทางและการตัดบรรทัดจะถูกตั้งค่า) คลิก Justify space-between

Justify space-around: รายการจะกระจายอย่างเท่าเทียมกันในบรรทัดโดยมีพื้นที่รอบเท่ากัน โปรดทราบว่าช่องว่างทางสายตานั้นไม่เท่ากัน เนื่องจากสิ่งของทั้งหมดมีพื้นที่เท่ากันทั้งสองด้าน รายการแรกจะมีช่องว่างหนึ่งหน่วยกับขอบคอนเทนเนอร์ แต่มีช่องว่างสองหน่วยระหว่างรายการถัดไป เนื่องจากรายการถัดไปมีระยะห่างของตัวเองที่ใช้

ขั้นตอน ลากและวาง container ลากและวาง items ใน container คลิก container คลิกแท็บ style ลาก display flex บนเลย์เอาต์ (โดยค่าเริ่มต้นตอนนี้บรรทัดทิศทางและการตัดบรรทัดจะถูกตั้งค่า) คลิก Justify space-around

Wrap don’t wrap (default): all flex items will be on one line

ขั้นตอน ลากและวาง container ลากและวาง items ใน container คลิก container คลิกแท็บ style ลาก display flex บนเลย์เอาต์ (โดยค่าเริ่มต้นตอนนี้บรรทัดทิศทางและการตัดบรรทัดจะถูกตั้งค่า)

Wrap flex-start: รายการจะอยู่ที่จุดเริ่มต้นของแกนข้าม ความแตกต่างระหว่างสิ่งเหล่านี้เป็นเรื่องเล็กน้อย และเกี่ยวกับ respecting the flex-direction rules หรือ writing-mode rules

ขั้นตอน ลากและวาง container ลากและวาง items ใน container คลิก container คลิกแท็บ style ลาก display flex บนเลย์เอาต์ (โดยค่าเริ่มต้นตอนนี้บรรทัดทิศทางและการตัดบรรทัดจะถูกตั้งค่า) คลิก Wrap flex-start

Wrap center : items are centered in the cross-axis

ขั้นตอน ลากและวาง container ลากและวาง items ใน container คลิก container คลิกแท็บ style ลาก display flex บนเลย์เอาต์ (โดยค่าเริ่มต้นตอนนี้บรรทัดทิศทางและการตัดบรรทัดจะถูกตั้งค่า) คลิก Wrap center

Wrap flex-end: รายการจะอยู่ที่ส่วนท้ายของแกนกากบาท ความแตกต่างอีกครั้งนั้นละเอียดอ่อนและเกี่ยวกับ respecting flex-direction rules เทียบกับ writing-mode rules

ขั้นตอน ลากและวาง container ลากและวาง items ใน container คลิก container คลิกแท็บ style ลาก display flex บนเลย์เอาต์ (โดยค่าเริ่มต้นตอนนี้บรรทัดทิศทางและการตัดบรรทัดจะถูกตั้งค่า) คลิก Wrap flex-end

Wrap stretch: stretch to fill the container (still respect min-width/max-width)

ขั้นตอน ลากและวาง container ลากและวาง items ใน container คลิก container คลิกแท็บ style ลาก display flex บนเลย์เอาต์ (โดยค่าเริ่มต้นตอนนี้บรรทัดทิศทางและการตัดบรรทัดจะถูกตั้งค่า) คลิก Wrap baseline

Wrap space-between: รายการกระจายอย่างสม่ำเสมอ บรรทัดแรกอยู่ที่จุดเริ่มต้นของคอนเทนเนอร์ในขณะที่บรรทัดสุดท้ายอยู่ที่ส่วนท้าย

ขั้นตอน ลากและวาง container ลากและวาง items ใน container คลิก container คลิกแท็บ style ลาก display flex บนเลย์เอาต์ (โดยค่าเริ่มต้นตอนนี้บรรทัดทิศทางและการตัดบรรทัดจะถูกตั้งค่า) คลิก Wrap space-between

Wrap space-around: รายการกระจายอย่างสม่ำเสมอโดยมีพื้นที่เท่ากันในแต่ละบรรทัด

ขั้นตอน ลากและวาง container ลากและวาง items ใน container คลิก container คลิกแท็บ style ลาก display flex บนเลย์เอาต์ (โดยค่าเริ่มต้นตอนนี้บรรทัดทิศทางและการตัดบรรทัดจะถูกตั้งค่า) คลิก Wrap space-around

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

ในการเพิ่มองค์ประกอบระหว่างสององค์ประกอบ UI ให้มองหาลูกศรสีน้ำเงินตามที่แสดงในภาพด้านล่าง

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

Builder Setting เป็นคุณสมบัติสำหรับโฟลเดอร์แคช build/preview ของตัวออกแบบหน้าที่ชัดเจนบนเซิร์ฟเวอร์

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

ผู้ใช้สามารถปรับแต่งหน้า navbar ตามความต้องการของเว็บไซต์ได้

Using the navbar for navigation in your pages หากต้องการใช้เทมเพลต navbar นี้ในหน้าของคุณ ผู้ใช้ควรไปที่หน้าส่วนหัวในแอพพลิเคชัน

คลิกที่เมนู Page Setting

และเลือก navbar ของคุณจาก drop-down สำหรับรายการเมนู คุณยังสามารถเลือกที่จะวางแถบ navbar ที่ด้านบนหรือด้านล่างของแถบ header ของคุณ

หากผู้ใช้เลือกด้านล่าง แถบ navbar จะปรากฏที่ด้านล่างของ header ดังที่แสดงด้านล่าง

ตั้งแต่เวอร์ชัน 4.0.19.10 ขึ้นไป ผู้ใช้สามารถสร้างแอพพลิเคชันได้จาก AppSpace เท่านั้น จากนั้นผู้ใช้สามารถสร้างหน้าภายในแอพพลิเคชัน เมื่อสร้างเพจแล้ว AppSpace จะนำคุณไปยัง Page Designer เพื่อออกแบบเพจ

ตอนนี้เรามาดูวิธีการสร้างหน้า Hello World อย่างง่าย

วิธีสร้างเว็บเพจอย่างง่ายจาก AppSpace หากต้องการสร้างแอพพลิเคชันบน AppSpace ให้ลงชื่อเข้าใช้ AppSpace ก่อน จากนั้นคลิกที่ปุ่ม Create new app

เมื่อสร้างแอพพลิเคชัน ผู้ใช้สามารถสร้างเป็นเว็บแอพพลิเคชัน (Web App) หรือแอพมือถือ (Mobile App) เลือกแพลตฟอร์มเว็บสำหรับการสมัครของคุณและป้อนรายละเอียด

คลิกที่ปุ่ม Create จากนั้นหน้าจอจะแสดงสถานการณ์สร้างแอพพลิเคชัน

เมื่อสถานะแสดง 100% แสดงว่าแอพพลิเคชันของคุณถูกสร้างขึ้นแล้ว คลิกที่ปุ่ม Done เพื่อปิดหน้าต่างสถานะ

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

คลิกที่ไอคอน Create Pages

ป้อนรายละเอียดเพจและคลิก Start Design เพื่อเปลี่ยนเส้นทางไปยัง Page Designer

เมื่อคุณสร้างหน้าเสร็จแล้ว คุณต้องปรับใช้หน้าเพื่อเข้าถึงผ่าน URL ด้วยเหตุนี้ ONEWEB มีปุ่มสร้างและดาวน์โหลดในเมนูแอพพลิเคชัน

เมื่อคุณคลิกสร้างและดาวน์โหลด ให้รอสักครู่เพื่อสร้างหน้าทั้งหมดในแอพพลิเคชันของคุณ เมื่อเสร็จสิ้น ข้อความ "Build succeed" จะแสดงขึ้น เพื่อระบุว่าสร้างสำเร็จ ไฟล์จะถูกส่งออกเป็นไฟล์ zip และจะดาวน์โหลดไปยังเครื่องของคุณ

หากต้องการดูตัวอย่างหน้านี้บนเบราว์เซอร์ คุณสามารถใช้

URL: http://(IP Applicationserver)/(ApplicationCode) ในกรณีนี้ applicationCode ของคุณคือ 'DemoApplication'

ในการปรับใช้หน้าเว็บนี้กับสภาพแวดล้อมจริง ผู้ใช้สามารถคัดลอกไฟล์ zip ที่ดาวน์โหลดมาไปยังเว็บเซิร์ฟเวอร์ เช่น Apache หรือ IBM HTTP Server และแมปโดเมนสำหรับไซต์ ขณะนี้ผู้ใช้เข้าถึงหน้าเว็บผ่าน URL ของโดเมนแอพ

เมื่ออยู่ในหน้าจอ Page Designer สำหรับออกแบบเว็บเพจ ผู้ใช้สามารถทำตามขั้นตอนด้านล่างเพื่อสร้างเว็บเพจอย่างง่าย

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

เพื่อสร้างตัวอย่างหน้า 'Hello World' คลิกที่ไอคอนเพื่ออัปโหลดรูปภาพใหม่ ไปยังแอพพลิเคชันและเพื่อเรียกดูรูปภาพที่อัปโหลดแล้ว ลากรูปภาพจากแผงรูปภาพทางด้านซ้ายแล้ววางที่ด้านบนของคอนเทนเนอร์ (Container)

พิมพ์ "Hello World" แทน Template Heading

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

มี 2 วิธีในการสร้างแดชบอร์ดในแพลตฟอร์ม ONEWEB

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

การใช้ Charts extension ใน Page Designer จากเวอร์ชัน 4.0.0.19 Page Designer มี charts extensionสำหรับ ONEWEB การใช้ส่วนขยายนี้ ผู้ใช้สามารถสร้างแผนภูมิหรือกราฟแบบไดนามิกที่สามารถรวมไว้ในหน้าเว็บหรือแอพพลิเคชันมือถือได้อย่างง่ายดาย

เราจะดูวิธีสร้าง widget chart ใหม่ในหน้า dashboard ด้วยเทมเพลตของหน้าที่มีอยู่

ข้อกําหนดเบื้องต้น (Prerequisites) ก่อนที่คุณจะเริ่ม tutorial ตรวจสอบให้แน่ใจว่า workstation ของคุณตรงตามข้อกำหนดต่อไปนี้

• เครื่องมือไคลเอ็นต์ฐานข้อมูลเพื่อเชื่อมต่อกับฐานข้อมูลเพื่อเลือก (select), แทรก (insert), อัปเดต (update ) และ ลบ (delete) ข้อมูลในสคีมาแดชบอร์ด

• เว็บเบราว์เซอร์ (แนะนำให้ใช้ Chrome)

ตั้งแต่เวอร์ชัน 4.0.19.10 ขึ้นไป ผู้ใช้สามารถสร้างแอพพลิเคชันได้จาก AppSpace เท่านั้น จากนั้นผู้ใช้สามารถสร้างหน้าภายในแอพพลิเคชัน เมื่อสร้างเพจแล้ว AppSpace จะนำคุณไปยัง Page Designer เพื่อออกแบบเพจ

ตอนนี้ ให้คุณดูวิธีสร้างหน้ามือถือ Hello World อย่างง่าย

วิธีสร้างเพจมือถือจาก AppSpace หากต้องการสร้างแอพพลิเคชันบน AppSpace ให้เข้าสู่ระบบ AppSpace ก่อน จากนั้นคลิกที่ปุ่มสร้างแอพใหม่

เมื่อสร้างแอพพลิเคชัน ผู้ใช้สามารถสร้างเป็นเว็บแอพพลิเคชัน (Web App) หรือแอพมือถือ (Mobile App) เลือกแพลตฟอร์มมือถือสำหรับแอพพลิเคชันของคุณและป้อนรายละเอียด

คลิกปุ่ม Create เพื่อสร้างแอพพลิเคชัน

เมื่อสถานะแสดง 100% แสดงว่าแอพพลิเคชันของคุณถูกสร้างขึ้นแล้ว คลิกที่ปุ่ม Done เพื่อปิดหน้าต่างสถานะ

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

คลิกไอคอน Create Pages

ป้อนรายละเอียดเพจและคลิก Start Design เพื่อเปลี่ยนเส้นทางไปยัง Page Designe

จากเวอร์ชัน 4.0.0.19 ONEWEB Page Designer สามารถสร้างแอพพลิเคชันมือถือเป็น APK สำหรับ androidg หรือ IPA สำหรับ iOS และส่งไปยังร้านค้า หน้าจอสำหรับหน้า CI/CD มีอยู่ในส่วนการปรับใช้ของแอพมือถือ ผู้ใช้สามารถเลือกได้ทั้ง Android หรือ iOS ส่วนต่อไปนี้จะอธิบายขั้นตอนทีละขั้นตอนในการอัปโหลดแอพบนอุปกรณ์เคลื่อนที่ของคุณไปยังร้านค้าสำหรับทั้ง Android และ Ios

วิธีสร้างแอพ Android สำหรับ APK ที่ไม่ได้ลงชื่อคุณสามารถเริ่มสร้างได้ทันที แต่สำหรับ Signed APK คุณต้องเพิ่มรายละเอียดต่อไปนี้เพื่อเริ่มการสร้าง

Keystore file “.jks” Alias name Keystore password Password.

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการลงนามแอพ โปรดติดตาม ลิ้งค์นี้

APK ที่ลงนามแล้วสามารถปล่อยให้ทดสอบภายในบน Google Play Console เพื่อที่คุณต้องทำดังต่อไปนี้

• สร้างบัญชี Google Developer

• สร้างบัญชีบริการสำหรับโครงการ "Google Play Android Developer" คุณจะได้รับอีเมลและคีย์ส่วนตัวในรูปแบบ JSON

• เพิ่มผู้ใช้จากอีเมลที่คุณได้รับในขั้นตอนที่ 2 และให้สิทธิ์สำหรับแอพ

• อัปโหลดคีย์ส่วนตัว (JSON) ไปยัง Page Designer

วิธีสร้างแอพ iOS

ในการสร้างแอพ iOS คุณต้องมีบัญชี Apple Developer โปรดทำตามขั้นตอนด้านล่างเมื่อคุณมีบัญชีนักพัฒนา Apple ที่ถูกต้อง

ส่งออกไฟล์ Certificate ในรูปแบบ ".p12" จากโปรแกรม Keychain Access ใน Mac OS หรือใช้ Certificate Signing Request (CSR) ของ Page Designer เพื่อสร้าง Certificate (.cer) สำหรับข้อมูลเพิ่มเติมเกี่ยวกับใบรับรอง iOS โปรดติดตาม ลิ้งค์นี้

สร้างโปรไฟล์การจัดเตรียมในบัญชี Apple Developer

• สร้างโปรไฟล์การจัดเตรียมในบัญชี Apple Developer

• ลงชื่อเข้าใช้บัญชี Apple Developer ของคุณและเลือกใบรับรอง ตัวระบุ และโปรไฟล์

• เลือกประเภทโปรไฟล์ที่ต้องการและกดดำเนินการต่อ

• เลือก App ID แล้วกด Continue

• เลือกใบรับรอง (ใบรับรองที่ใช้โดยโปรแกรม) ที่คุณต้องการรวมในโพรไฟล์การตั้งค่านี้ แล้วคลิก

• ดำเนินการต่อ

• เลือกอุปกรณ์ที่คุณต้องการรวมอยู่ในโปรไฟล์ ใบรับรองเป็นคู่กุญแจสาธารณะ / ส่วนตัวเพื่อระบุ

• บุคคลที่พัฒนาแอพพลิเคชัน

• สร้างชื่อสำหรับโปรไฟล์ของคุณและคลิก "สร้าง"

อัปโหลดใบรับรองและโปรไฟล์การจัดสรรบนแอพใน Page Designer

ตอนนี้ คุณสามารถสร้าง iOS สำหรับการพัฒนา/การเผยแพร่

IPA ที่สร้างขึ้นสำหรับการจัดจำหน่ายสามารถปล่อยให้ทดสอบบน App Store

• ป้อน Apple ID, App ID และรหัสผ่านเฉพาะแอพพลิเคชันเพื่อเชื่อมต่อกับ App Store

แอพแสดงตัวอย่างบนเบราว์เซอร์ (Preview App on browser) เมื่อคุณสร้างเพจใน Page Designer เสร็จแล้ว คุณสามารถดูตัวอย่างเพจของคุณโดยใช้ยูทิลิตี้ build-in ที่จัดทำโดย Page Designer ที่เรียกว่า PlayMe สำหรับการคลิกที่ปุ่ม PlayMe ที่ด้านบนขวาของหน้าจอการตั้งค่า

นอกจากนี้ยังมีให้ในหน้าจอแอพพลิเคชันใน PageDesigner

เมื่อคุณคลิกที่ PlayMe ให้รอสักครู่เพื่อให้แอพพลิเคชันมือถือของคุณสร้างหน้าทั้งหมดภายในแอพพลิเคชันของคุณ เมื่อเสร็จสิ้น ข้อความ "Build successful" จะแสดงขึ้นโดยเชื่อมโยงกับ URL ซึ่งแสดงว่าสร้างสำเร็จ ขณะนี้ผู้ใช้สามารถดูตัวอย่างแอพได้ที่ URL ที่ให้มาพร้อมกับข้อความ

หากต้องการดูตัวอย่างหน้านี้บนเบราว์เซอร์ในแท็บใหม่หรือหน้าต่างใหม่ ผู้ใช้เพียงแค่เข้าถึง URL: http://(IP Application server)/(Namespace) ในตัวอย่างตัวอย่างนี้ Namespace คือ 'com.team'

ดูตัวอย่างแอพบนมือถือโดยใช้ PlayMe (Preview App on mobile using PlayMe) ผู้ใช้ยังสามารถดาวน์โหลด PlayMe App จาก Google Play

เมื่อติดตั้ง Play Me บนมือถือแล้ว คุณสามารถดูตัวอย่างแอพ ONEWEB ที่คุณสร้างโดยการสแกน QR Code บนแอพ Play Me สำหรับการสร้าง QR Code สำหรับแอพพลิเคชันของคุณ ให้ไปที่แท็บ Deployment ในตัวออกแบบเพจของคุณ

ระบบจะแสดง QR Code เพื่อสแกนแอพพลิเคชัน

ตอนนี้คุณสามารถดูตัวอย่างแอพบนโทรศัพท์มือถือได้แล้ว

Widget Dashboard เป็นเครื่องมือที่ช่วยให้คุณสร้างแผนภูมิหรือแดชบอร์ดพื้นฐานโดยการกำหนดค่าได้อย่างง่ายดาย

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

ส่วนประกอบหน้าแดชบอร์ดหลัก

ส่วนประกอบของ Widget dashboard

เมื่ออยู่ในหน้าจอ Page Designer สำหรับออกแบบเว็บเพจ ผู้ใช้สามารถทำตามขั้นตอนด้านล่างเพื่อสร้างแอพมือถืออย่างง่าย

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

ตอนนี้, เพื่อสร้างตัวอย่าง "Hello World" หน้ามือถือ, คลิกที่ไอคอนเพื่อ อัปโหลดภาพไปยังแอพและเรียกดูรูปภาพที่อัปโหลด ลากรูปภาพจากแผงรูปภาพทางด้านซ้ายแล้ววางที่ด้านบนของคอนเทนเนอร์ (Container)

เมื่อต้องการสร้าง chart widget ให้แทรกข้อมูลลงในตาราง WIDGET_PREF ตามค่าเหล่านี้

เมื่อต้องการสร้างเพจ ให้แทรกข้อมูลลงในตาราง PAGE ตามค่าเหล่านี้

เมื่อต้องการเพิ่ม chart widget บนเพจ ให้แทรกข้อมูลลงในตาราง PAGE_WIDGET_PREF ตามค่าเหล่านี้

ไปที่หน้าแดชบอร์ด http://:/LightWidget/dashboard.do

จากนั้นคลิกหน้า Training ที่คุณกำหนดค่าไว้ ควรแสดงหน้าจอดังรูปนี้

เมื่อต้องการกำหนดค่า chart ให้แทรกข้อมูลลงในตาราง DASH_WIDGET_PROP ตามค่าเหล่านี้

เมื่อต้องการกำหนดค่าชุดข้อมูล ให้แทรกข้อมูลลงในตาราง DASH_WIDGET_CHART_PROP ตามค่าเหล่านี้

คลิกหน้า training อีกครั้ง หน้าจอควรแสดงเป็นภาพด้านล่าง

กราฟแสดงการเปรียบเทียบรายได้ในไตรมาสแรกของแต่ละจังหวัด

เมื่อต้องการสร้างเมนู ให้แทรกข้อมูลลงในตาราง DASHBOARD_MENU ตามค่าเหล่านี้

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

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

เครื่องมือการรายงานคือโปรแกรมที่ช่วยให้ผู้ใช้และนักพัฒนาสามารถออกแบบรายงานโดยใช้ไลบรารีเครื่องมือการรายงาน เครื่องมือการรายงานมีฟังก์ชันที่สำคัญที่สุดทั้งหมดที่จำเป็นสำหรับการสร้างรายงานที่ดีในเวลาที่น้อยลงผ่าน GUI ที่หลากหลายและใช้งานง่าย วิธีนี้สามารถช่วยให้ผู้ที่ไม่รู้จักไลบรารีเครื่องมือการรายงานสามารถสร้างรายงานอย่างง่ายและเข้าใจไวยากรณ์ XML โดยดูโค้ดที่สร้างขึ้น สิ่งนี้ยังช่วยให้ผู้ออกแบบรายงานที่มีทักษะสามารถเขียนรายงานที่ซับซ้อนได้ ซึ่งช่วยประหยัดเวลาได้มาก

หากต้องการเปลี่ยนสีวงกลม ให้แทรกข้อมูลลงในตาราง DSH_WIDGET_DATA_COLOR ตามค่าเหล่านี้

Record 1

Record 2

Record 3

Record 4

คลิกหน้า training อีกครั้ง หน้าจอควรแสดงเป็นภาพด้านล่าง มีการเปลี่ยนสีในแต่ละไตรมาส

เมื่อต้องการแก้ไขชุดข้อมูล ให้อัพเดตข้อมูลในตาราง DASH_WIDGET_CHART_PROP ตามไฮไลต์สีส้มเพื่อเปลี่ยนข้อมูล

คลิกหน้า training อีกครั้ง ควรแสดงหน้าจอดังรูปนี้

แผนภูมิใหม่แสดงรายได้ของกรุงเทพมหานครเปรียบเทียบในแต่ละไตรมาส

หากต้องการเพิ่มอีกชุด ให้เปลี่ยนประเภทแผนภูมิกลับเป็นแผนภูมิเส้น

• หากต้องการเปลี่ยนประเภทแผนภูมิจาก Pie เป็น Line อัปเดตคอลัมน์ DASHTYPE ของตาราง DASH_WIDGET_PROP ที่บันทึกเป็น "line"

• ในการเปลี่ยนประเภทชุดจากแผนภูมิวงกลมเป็นเส้นตรง อัปเดตคอลัมน์ CHART_TYPE ของตาราง DASH_WIDGET_CHART_PROP ที่บันทึกเป็น "line"

• แทรก record อื่นลงในตาราง DASH_WIDGET_CHART_PROP ตามค่าเหล่านี้

คลิกหน้า training อีกครั้ง หน้าจอควรแสดงเป็นภาพด้านล่าง แผนภูมิใหม่แสดงการเปรียบเทียบรายได้ระหว่างกรุงเทพฯ และเชียงใหม่เป็นรายไตรมาส

เปลี่ยนแผนภูมิเป็นแบบเรียงซ้อนของคอลัมน์ (column stack)

• แทรก record อื่นลงในตาราง DASH_WIDGET_CHART_PROP ตามค่าเหล่านี้