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

การรวม Page กับ Microflow

Last updated 2 years ago

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

Page สำหรับเรียก Microflow

ไปที่ Page Designer และเปิดเพจที่คุณต้องการสร้างไดนามิก

คลิกที่ input field ข้อมูลที่คุณต้องการส่งไปยัง Microflow เมื่อเรียกใช้

เลือก State parameter ที่จะเชื่อม (การเชื่อมต่อ Microflow อนุญาตให้เชื่อมต่อเฉพาะ state parameters กับ microflow input parameter เท่านั้น ดังนั้นในการส่ง parameter ไปยังผู่ใช้ microflow จำเป็นต้องเชื่อมต่อ input field กับ State)

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

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

ผู้ใช้สามารถขอและเพิ่มฟังก์ชัน JavaScript ทั้งก่อนและหลังการเรียก microflow ผู้ใช้ยังสามารถเปลี่ยนเส้นทางไปยังหน้าอื่นเมื่อเรียกใช้สำเร็จ

Update ข้อมูลบน Page จาก Microflow เลือก object ในหหน้าที่แสดงข้อมูลที่มาจาก service

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

คลิก 'Done' ใน Connect to Data dialog

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

คลิกไอคอน Connect to data เลือกแท็บ State และคลิกที่ปุ่ม Connect to State

คลิก บนแถบเครื่องมือที่เมนูด้านซ้าย เพื่อเปิดแถบการกำหนดค่า interaction & data flow (2) คลิกที่ไอคอน Add + icon ด้านล่าง Action เลือก "click" ใน Event. เลือกแท็บ "Microflow" คลิก Refresh เพื่อโหลด services ที่มีอยู่ เลือก "Project Name ของคุณ" ใน Microflow project name Select "Process Name ของคุณ" ใน Microflow process name

คลิก เพื่อเปิดหน้าต่าง Mapping Window (3)

คลิกไอคอน Connect to Data คลิกแท็บ Microflow เลือกค่าจาก Microflow คลิกที่ปุ่ม 'Connect to Data'