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

ในส่วนนี้เราจะดูวิธีการรวม Smart Form เข้ากับฐานข้อมูลเพื่อใช้ไดนามิกบน UI โดยใช้ Microflow

การรวม Smart Form โดยใช้ Microflow

1. ไปที่ App Designer

2. เปิด Entity ของคุณ

3. เลือกองค์ประกอบที่ควรทริกเกอร์การกระทําและคลิกที่ไอคอน integrate (ไอคอนนี้มีอยู่ในทุกช่องและปุ่มทั้งหมด)

1. ON หน้าต่าง Microflow Configuration เลือก "change()" ใน Event และคลิกปุ่ม on Microflow เลือก "Your Project Name" ใน Project เลือก "Your Flow Name" ใน Microflow เลือก "Y" ใน Async ('Y' สำหรับเรียก asynchronous และ 'N' สำหรับ synchronous)

1. แมป Entity Parameters ไปยัง Flow Parameters

1. คลิกที่แท็บ Response และแมป output parameters จาก Microflow ไปยัง Entity parameters

1. คลิก OK และบันทึก Entity คุณได้รวม Smart Form ไปยัง Microflow เรียบร้อยแล้ว

ตอนนี้เมื่อคุณเปิด form ใน Runtime และคลิกที่ปุ่ม มันจะเรียก microflow

สมมติว่าคุณต้องอัปเดตข้อมูลบางอย่างไปยังฐานข้อมูลจากหน้าเว็บหรือแสดงข้อมูลบางส่วนจากระบบอื่นคุณต้องรวม Page เข้ากับ Microflow สมมติว่าเราจําเป็นต้องแสดงข้อมูลเช่นอัตราแลกเปลี่ยนจากเว็บไซต์ Fixer.io เพื่อแสดงแบบไดนามิกบนเพจ สําหรับสิ่งนี้เราสามารถใช้โหนดบริการเว็บใน Microflow (REST หรือ SOAP) เพื่อรับข้อมูลจากเว็บไซต์และรวมเข้ากับ Page Designer

เพจสามารถรวมเข้ากับระบบภายในและภายนอกอื่น ๆ เช่น databases หรือ web services โดยใช้ Microflow เพื่อสร้างหน้าเว็บแบบไดนามิกบน ONEWEB ส่วนนี้จะแสดงวิธีเรียกใช้บริการ Microflow จากเพจ และแสดงข้อมูลที่ส่งคืนโดยบริการบนเพจ

Page ที่จะเรียก Microflow ไปที่ Page Designer และเปิดเพจที่คุณต้องการทําให้เป็นแบบไดนามิก

1. คลิกที่ช่องป้อนข้อมูลเพื่อส่งผ่านไปยัง Microflow ขณะเรียก

2. คลิกที่แท็บ State และคลิกที่ปุ่ม Connect to State

1. เลือก State parameter เพื่อเชื่อมต่อ (การทํา Microflow mapping อนุญาตให้แมปเฉพาะ State parameter กับ microflow input parameter ดังนั้นการส่งผ่านพารามิเตอร์ไปยังผู้ใช้ microflow จําเป็นต้องแมปฟิลด์ input ไปยัง State)

1. คลิกที่องค์ประกอบหรือ container ที่เริ่มต้นการเรียกไปยัง microflow ของคุณ (1) ในตัวอย่างนี้เราเรียกไมโครโฟลว์ด้วยการคลิกปุ่ม

• คลิกที่ Add icon ด้านล่าง Action

• เลือก "click" ใน Event

• เลือกแท็บ "Microflow"

• คลิก Refresh เพื่อโหลด services ที่มีอยู่อีกครั้ง

• เลือก "Your Project Name" ใน Microflow project name

• เลือก "Your process Name" ใน Microflow process name

2. แมป Page Designer parameter ไปยัง Microflow Parameter อย่าลืมบันทึก mapping โดยคลิกที่ไอคอน Save บนหน้าจอ mapping

1. ผู้ใช้สามารถใช้ hook และเพิ่ม functions JavaScript ก่อนและหลังเรียก microflow

2. ผู้ใช้สามารถเปลี่ยนเส้นทางไปยังหน้าอื่นเมื่อเรียกเสร็จ

อัปเดตข้อมูลบน Page จาก Microflow

1. เลือก object บน page ที่แสดงข้อมูลที่มาจาก service

2. คลิกแท็บ Microflow และเลือกค่าจาก Microflow คลิกปุ่ม 'Connect to Data'

1. เลือก field name และคลิก Connect

1. คลิก Done บนกล่องโต้ตอบ Connect to Data

ตอนนี้ Page ถูกรวมเข้ากับ Microflow เรียบร้อยแล้วและสามารถแสดงข้อมูลที่ดึงมาบนหน้าจอ