รวม Power Automate เข้ากับเว็บไซต์และแอป

บทความ
08/22/2022

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

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

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

ข้อกำหนดเบื้องต้น

บัญชี Microsoft หรือ
บัญชีที่ทำงานหรือโรงเรียน

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

แสดงโครงแบบสำหรับสถานการณ์ของคุณ

ในการเริ่มต้น เพิ่มรหัสนี้เพื่อแสดงโครงแบบ Power Automate ในเว็บไซต์ของคุณ:

<iframe src="https://flow.microsoft.com/{locale}/widgets/templates/?q={search term}
&pagesize={number of templates}&destination={destination}&category={category}"></iframe>

พารามิเตอร์	คำอธิบาย
locale	รหัสภาษาและภูมิภาคที่ประกอบด้วยสี่ตัวอักษรสำหรับมุมมองโครงแบบ ตัวอย่างเช่น `en-us` แสดงถึงภาษาอังกฤษอเมริกัน และ`de-de` แสดงถึงภาษาเยอรมัน
search term	คำค้นหาสำหรับโครงแบบที่คุณต้องการให้แสดงในมุมมอง ตัวอย่างเช่น ค้นหา `SharePoint` เพื่อแสดงโครงแบบสำหรับ SharePoint
number of templates	จำนวนโครงแบบที่คุณต้องการให้แสดงในมุมมอง
destination	เพจที่เปิดขึ้นเมื่อผู้ใช้เลือกโครงแบบนั้น ป้อน `details` เพื่อแสดงรายละเอียดเกี่ยวกับโครงแบบ หรือป้อน `new` เพื่อเปิดตัวออกแบบ Power Automate
category	กรองตามหมวดหมู่โครงแบบที่กำหนด
parameters.{name}	บริบทเพิ่มเติมเพื่อส่งผ่านลงในโฟลว์

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

การส่งผ่านพารามิเตอร์เพิ่มเติมไปยังโครงแบบโฟลว์

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

กำหนดพารามิเตอร์ในโครงแบบโฟลว์ก่อนที่คุณจะเผยแพร่ พารามิเตอร์มีลักษณะเหมือน @{parameters('parameter_name')}
ส่งผ่านพารามิเตอร์ในสตริงการสอบถามของ iframe src ตัวอย่างเช่น เพิ่ม &parameters.listName={the name of the list} ถ้าคุณมีพารามิเตอร์ที่เรียกว่า listName

ตัวอย่างแบบเต็ม

ในการแสดงโครงแบบ SharePoint ที่นิยมสูงสุดสี่โครงแบบในภาษาเยอรมัน และเพื่อเริ่มต้นผู้ใช้ด้วย myCoolList ให้ใช้โค้ดนี้:

<iframe src="https://flow.microsoft.com/de-de/widgets/templates/?q=sharepoint%20&pagesize=4&destination=details&parameters.listName=myCoolList"></iframe>

ใช้วิดเจ็ตโฟลว์ที่ได้รับการรับรองความถูกต้อง

ตารางต่อไปนี้แสดงรายการของวิดเจ็ต Power Automate ที่สนับสนุนประสบการณ์เต็มรูปแบบภายในวิดเจ็ตโดยใช้โทเค็นการเข้าถึงการรับรองความถูกต้องของผู้ใช้ คุณจะต้องใช้ Javascript Software Developer Kit (JS SDK) ของ Power Automate เพื่อฝังวิดเจ็ต และให้โทเค็นการเข้าถึงของผู้ใช้ที่ต้องการ

ชนิดวิดเจ็ต	คุณลักษณะที่สนับสนุน
flows	แสดงรายการของโฟลว์ในแท็บสำหรับโฟลว์ส่วนบุคคลและโฟลว์ที่ใช้ร่วมกัน แก้ไขโฟลว์มีอยู่ หรือสร้างโฟลว์ใหม่จากโครงแบบหรือว่างเปล่า
flowCreation	สร้างโฟลว์ระบบคลาวด์จากไอดีเท็มเพลที่มีโฮสต์โปรเเกรมประยุกต์
runtime	ทริกเกอร์โฟลว์ด้วยตนเองหรือทริกเกอร์แบบไฮบริดที่มีแอปพลิเคชันโฮสต์
approvalCenter	ฝังคำขออนุมัติและส่งการอนุมัติ
templates	แสดงรายการของโครงแบบ ผู้ใช้เลือกหนึ่งรายการเพื่อสร้างโฟลว์ใหม่

ใช้ Flow SDK ที่ได้รับการรับรองความถูกต้อง เพื่ออนุญาตให้ผู้ใช้สามารถสร้างและจัดการโฟลว์ได้โดยตรงจากเว็บไซต์หรือแอปของคุณ (แทนการนำทางไปยัง Power Automate) คุณจะต้องลงชื่อผู้ใช้ด้วยบัญชี Microsoft หรือ Azure Active Directory เพื่อใช้ SDK ที่ได้รับการรับรองความถูกต้อง

Note

ไม่มีทางที่จะซ่อนการสร้างแบรนด์ Power Automate ได้ เมื่อคุณใช้วิดเจ็ต

วิดเจ็ต Power Automate ทำงานโดยการฝัง iframe ที่อ้างถึง Power Automate ลงในแอปพลิเคชันโฮสต์ โฮสต์จัดเตรียมโทเค็นการเข้าถึงที่วิดเจ็ต Power Automate ต้องการ JS SDK ของ Power Automate เปิดใช้งานแอปพลิเคชันโฮสต์เพื่อเริ่มต้นและจัดการวงจรชีวิตของวิดเจ็ต

แผนภาพของสถาปัตยกรรมวิดเจ็ต Power Automate

รายละเอียด JS SDK

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

คุณต้องเพิ่มการอ้างอิง JS SDK ของโฟลว์ในแอปพลิเคชันโฮสต์ก่อนเริ่มต้นวิดเจ็ต

<script src="https://flow.microsoft.com/Content/msflowsdk-1.1.js"></script>

สร้างอินสแตนซ์ JS SDK โดยส่งค่า hostName ทางเลือกและค่าโลคอลในออบเจ็กต์ JSON

var sdk = new MsFlowSdk({
    hostName:'https://flow.microsoft.com',
    locale:'en-US'
});

ชื่อ	บังคับ/ไม่บังคับ	คำอธิบาย
`hostName`	เลือกได้	ชื่อโฮสต์ Power Automate ตัวอย่างเช่น https://flow.microsoft.com
`locale`	เลือกได้	ตำแหน่งที่ตั้งไคลเอ็นต์สำหรับวิดเจ็ต (ค่าเริ่มต้นคือ `en-Us` หากไม่ได้ระบุ)

เมื่อมีการสร้างอินสแตนซ์ JS SDK แล้ว คุณสามารถเริ่มต้นและฝังวิดเจ็ต Power Automate ได้ในองค์ประกอบหลักในแอปพลิเคชันโฮสต์ หากต้องการทำเช่นนั้น ให้เพิ่ม HTML div:

<div id="flowDiv" class="flowContainer"></div>

จากนั้น เริ่มใช้งานวิดเจ็ต Power Automate ด้วยวิธีการ JS SDK renderWidget() ตรวจสอบให้แน่ใจว่าได้ระบุประเภทวิดเจ็ตและการตั้งค่าที่เกี่ยวข้อง

var widget = sdk.renderWidget('<widgettype>', {
        container: 'flowDiv',
        flowsSettings: {},
        templatesSettings: {},
        approvalCenterSettings: {},
        widgetStyleSettings: {}
});

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

<head>
    <style>
        .flowContainer iframe {
            width: 400px;
            height: 1000px;
            border: none;
            overflow: hidden;
    }
    </style>
</head>

ต่อไปนี้คือพารามิเตอร์สำหรับ renderWidget():

พารามิเตอร์	บังคับ/ไม่บังคับ	คำอธิบาย
`container`	จำเป็น	รหัสขององค์ประกอบ DIV บนหน้าโฮสต์ที่จะมีการฝังวิดเจ็ต
`environmentId`	เลือกได้	วิดเจ็ตต้องการรหัสสภาพแวดล้อม หากคุณไม่ได้ระบุรหัส ระบบจะใช้สภาพแวดล้อมเริ่มต้น
`flowsSettings`	เลือกได้	ออบเจ็กต์การตั้งค่า Power Automate
`templatesSettings`	เลือกได้	ออบเจ็กต์การตั้งค่าโครงแบบ
`approvalCenterSettings`	เลือกได้	ออบเจ็กต์การตั้งค่าการอนุมัติ

โทเค็นการเข้าถึง

หลังจากรัน JS SDK renderWidget() แล้ว JS SDK จะเริ่มต้น iframe ซึ่งชี้ไปยัง URL วิดเจ็ตของ Power Automate URL นี้มีการตั้งค่าทั้งหมดในพารามิเตอร์สตริงของการสอบถาม แอปพลิเคชันโฮสต์ต้องได้รับโทเค็นการเข้าถึง Power Automate สำหรับผู้ใช้ (โทเค็น Azure Active Directory JWT ที่มีผู้ชม https://service.flow.microsoft.com) ก่อนที่จะเริ่มต้นวิดเจ็ต วิดเจ็ตยกระดับเหตุการณ์ GET_ACCESS_TOKEN เพื่อร้องขอโทเค็นการเข้าถึงจากโฮสต์ โฮสต์ต้องการจัดการเหตุการณ์และส่งโทเค็นไปยังวิดเจ็ต:

widget.listen("GET_ACCESS_TOKEN", function(requestParam, widgetDoneCallback) {
    widgetDoneCallback(null, {
        token:  '<accesstokenFromHost>'
    });
});

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

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

widget.listen("WIDGET_READY", function() {
    console.log("The flow widget is now ready.");
    // other host code on widget ready
});

FlowsSettings

FlowsSettings สามารถใช้เพื่อปรับแต่งฟังก์ชันการทำงานของวิดเจ็ต Power Automate

flowsSettings?: {
    createFromBlankTemplateId?: string;
    flowsFilter?: string;sc
    tab?: string;
};

พารามิเตอร์	บังคับ/ไม่บังคับ	คำอธิบาย
`createFromBlankTemplateId`	จำเป็น	ใช้ GUID ของโครงแบบเมื่อผู้ใช้เลือกปุ่ม สร้างจากว่างเปล่า บนวิดเจ็ตโฟลว์
`flowsFilter`	เลือกได้	วิดเจ็ต Power Automate ใช้ตัวกรองที่มีให้ เมื่อแสดงรายการโฟลว์ ตัวอย่างเช่น แสดงโฟลว์ที่อ้างอิงถึงไซต์ SharePoint ที่เจาะจง `flowsFilter: "operations/any(operation: operation/sharepoint.site eq 'https://microsoft.sharepoint.com/teams/ProcessSimple' )"`
`tab`	เลือกได้	กำหนดแท็บที่ใช้งานอยู่ให้เป็นค่าเริ่มต้นเพื่อแสดงในวิดเจ็ต Power Automate ตัวอย่างเช่น `tab:'sharedFlows'` แสดงแท็บทีม และ `tab:'myFlows'` แสดงแท็บโฟลว์ของฉัน

TemplatesSettings

ซึ่งจะใช้กับวิดเจ็ตทั้งหมดที่ให้คุณสร้างโฟลว์จากโครงแบบ รวมถึงวิดเจ็ตโฟลว์ การสร้างโฟลว์ และโครงแบบ

templatesSettings?: {
    defaultParams?: any;
    destination?: string;
    pageSize?: number;
    searchTerm?: string;
    templateCategory?: string;
    useServerSideProvisioning?: boolean;
    enableDietDesigner?: boolean;
};

พารามิเตอร์	บังคับ/ไม่บังคับ	คำอธิบาย
`defaultParams`	ไม่จำเป็น	ออกแบบพารามิเตอร์เวลาที่จะใช้เมื่อสร้างโฟลว์ระบบคลาวด์จากเท็มเพลต ตัวอย่างเช่น: `defaultParams: {'parameters.sharepoint.site': 'https://microsoft.sharepoint.com/teams/ProcessSimple', 'parameters.sharepoint.list': 'b3a5baa8-fe94-44ca-a6f0-270d9f821668' }`
`destination`	ไม่จำเป็น	ค่าที่ถูกต้องคือ 'ใหม่' หรือ 'รายละเอียด' เมื่อตั้งค่าเป็น 'รายละเอียด' หน้ารายละเอียดจะปรากฏขึ้นเมื่อสร้างโฟลว์ระบบคลาวด์จากเท็มเพลต
`pageSize`	ไม่จำเป็น	จำนวนของโครงแบบที่ต้องการแสดง ขนาดเริ่มต้น = 6
`searchTerm`	เลือกได้	แสดงโครงแบบที่ตรงกับคำค้นหาที่ระบุ
`templateCategory`	เลือกได้	แสดงโครงแบบในประเภทเฉพาะ

ApprovalCenterSettings

นำวิดเจ็ต ApprovalCenter ไปใช้งาน

approvalCenterSettings?: {
   approvalsFilter?: string;
   tab?: string;but
   showSimpleEmptyPage? boolean;
   hideLink?: boolean
};

พารามิเตอร์	บังคับ/ไม่บังคับ	คำอธิบาย
`hideLink`	เลือกได้	เมื่อตั้งค่าเป็น `true` วิดเจ็ตจะซ่อนลิงก์ที่ได้รับและส่งการอนุมัติ
`approvalsFilter`	ระบุหรือไม่ก็ได้	วิดเจ็ตการอนุมัติจะใช้ตัวกรองการอนุมัติที่ระบุเมื่อแสดงรายการการอนุมัติ ตัวอย่างเช่น: วิดเจ็ตการอนุมัติจะใช้ตัวกรองการอนุมัติที่ระบุเมื่อแสดงรายการการอนุมัติ ตัวอย่างเช่น: `approvalsFilter: 'properties/itemlink eq \'https://microsoft.sharepoint.com/teams/ProcessSimple/_layouts/15/listform.aspx?PageType=4&ListId=737e30a6-5bc4-4e9c-bcdc-d34c5c57d938&ID=3&ContentTypeID=0x010010B708969A9C16408696FD23801531C6\''` `approvalsFilter: 'properties/itemlinkencoded eq \'{Your base64 encoded item link url} \''`
`tab`	เลือกได้	กำหนดแท็บที่ใช้งานอยู่ให้เป็นค่าเริ่มต้นเพื่อแสดงในวิดเจ็ตโฟลว์ ค่าที่ถูกต้อง : 'receivedApprovals', 'sentApprovals'
`showSimpleEmptyPage`	เลือกได้	แสดงหน้าว่างเมื่อไม่มีการอนุมัติ
`hideInfoPaneCloseButton`	เลือกได้	ซ่อนปุ่มปิดบานหน้าต่างข้อมูล (หรือโฮสต์ที่มีปุ่มปิดอยู่แล้ว)

วิดเจ็ต Power Automate สนับสนุนเหตุการณ์ที่อนุญาตให้โฮสต์รับข้อมูลเหตุการณ์วงจรชีวิตของวิดเจ็ต วิดเจ็ต Power Automate สนับสนุนเหตุการณ์สองชนิด: เหตุการณ์การแจ้งเตือนทางเดียว (เช่น Widget_Ready) และเหตุการณ์ที่ยกมาจากวิดเจ็ตเพื่อดึงข้อมูลจากโฮสต์ (Get_Access_Token) โฮสต์จำเป็นต้องใช้วิธี widget.listen() เพื่อฟังเหตุการณ์เฉพาะที่ยกระดับจากวิดเจ็ต

การใช้งาน

widget.listen("<WIDGET_EVENT>", function() {
    console.log("The flow widget raised event");
});

เหตุการณ์ของวิดเจ็ต	คำอธิบาย
`WIDGET_READY`	วิดเจ็ตที่โหลดเสร็จเรียบร้อยแล้ว
`WIDGET_RENDERED`	วิดเจ็ตที่โหลดและการแสดงผล UI เสร็จสมบูรณ์แล้ว
`GET_ACCESS_TOKEN`	คำขอวิดเจ็ตสำหรับโทเค็นการเข้าถึงผู้ใช้แบบฝัง
`GET_STRINGS`	ช่วยให้โฮสต์แทนที่ชุดของสตริง UI ที่แสดงในวิดเจ็ตได้

เหตุการณ์ของวิดเจ็ต	คำอธิบาย	ข้อมูล
`RUN_FLOW_STARTED`	ถูกทริกเกอร์และเริ่มการทำงานของโฟลว์
`RUN_FLOW_COMPLETED`	ทริกเกอร์การเรียกใช้โฟลว์เรียบร้อยแล้ว
`RUN_FLOW_DONE_BUTTON_CLICKED`	ผู้ใช้เลือกปุ่มเสร็จสิ้นบนโฟลว์ที่เรียกใช้
`RUN_FLOW_CANCEL_BUTTON_CLICKED`	ผู้ใช้เลือกปุ่มยกเลิกบนโฟลว์ที่เรียกใช้
`FLOW_CREATION_SUCCEEDED`	มีการสร้างโฟลว์เรียบร้อยแล้ว	`{ flowUrl: string, flowId: string, fromTemplate: string }`
`WIDGET_CLOSE`	เริ่มทำงานเมื่อโฮสต์ควรปิดวิดเจ็ต

เหตุการณ์ของวิดเจ็ต	คำอธิบาย	ข้อมูล
`FLOW_CREATION_FAILED`	การสร้างโฟลว์ล้มเหลว
`WIDGET_CLOSE`	ส่งออกเมื่อโฮสต์ควรปิดวิดเจ็ต
`TEMPLATE_LOAD_FAILED`	ไม่สามารถโหลดโครงแบบได้
`FLOW_CREATION_SUCCEEDED`	มีการสร้างโฟลว์เรียบร้อยแล้ว	`{ flowUrl: string, flowId: string,fromTemplate?: string }`

เหตุการณ์ของวิดเจ็ต	คำอธิบาย
`RECEIVED_APPROVAL_STATUS_CHANGED`	สถานะรับการอนุมัติมีการเปลี่ยนแปลงแล้ว
`SENT_APPROVAL_STATUS_CHANGED`	สถานะการส่งการอนุมัติมีการเปลี่ยนแปลงแล้ว

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

คีย์สตริง	ใช้ในวิดเจ็ต
`FLOW_CREATION_CREATE_BUTTON`	ข้อความที่แสดงบนปุ่มสร้างโฟลว์ทั้งในวิดเจ็ตการสร้างโฟลว์และรันไทม์
`FLOW_CREATION_CUSTOM_FLOW_NAME`	ค่าเริ่มต้นที่ใช้สำหรับชื่อโฟลว์ในวิดเจ็ตการสร้างโฟลว์ ใช้เฉพาะเมื่อเปิดใช้งานการตั้งค่า allowCustomFlowName เท่านั้น
`FLOW_CREATION_HEADER`	ส่วนหัวที่จะใช้เมื่อสร้างโฟลว์ระบบคลาวด์ในทั้งวิดเจ็ตการสร้างโฟลว์และรันไทม์
`INVOKE_FLOW_HEADER`	ส่วนหัวที่ใช้เมื่อเรียกใช้โฟลว์ระบบคลาวด์ในวิดเจ็ตรันไทม์
`INVOKE_FLOW_RUN_FLOW_BUTTON`	ข้อความที่ปรากฏบนปุ่มที่ใช้เพื่อเรียกใช้/รันโฟลว์ระบบคลาวด์ในวิดเจ็ตรันไทม์

ตัว อย่าง เช่น

เรียก widgetDoneCallback ผ่านออบเจ็กต์ JSON ด้วยคู่ของคีย์ค่าของคีย์สตริงและข้อความเพื่อแทนที่ค่าเริ่มต้น

widget.listen("GET_STRINGS", function(requestParam, widgetDoneCallback) {
    widgetDoneCallback(null, {
         "FLOW_CREATION_HEADER": "<string override would go here>",
        "INVOKE_FLOW_RUN_FLOW_BUTTON":  "<string override would go here>"
    });
});

โฮสต์ใช้การดำเนินการของวิดเจ็ตเพื่อส่งการดำเนินการหรือข้อความเฉพาะไปยังวิดเจ็ต JS SDK ของวิดเจ็ตให้วิธี notify() เพื่อส่งข้อความหรือส่วนข้อมูล JSON ไปยังวิดเจ็ต การดำเนินการของวิดเจ็ตแต่ละรายการสนับสนุนลายเซ็นของส่วนข้อมูลที่ระบุ

การใช้

widget.notify('<WIDGET_ACTION>', parameterMatchingParameterInterface)
    .then(result => console.log(result))
    .catch(error => console.log(error))

ตัว อย่าง เช่น

เรียกใช้โฟลว์ระบบคลาวด์โดยการส่งคำสั่งต่อไปนี้ไปยังวิดเจ็ตรันไทม์

widget.notify('triggerFlow', { flowName: flowName, implicitData:implicitData });

การดำเนินการของวิดเจ็ต	Details	ส่วนติดต่อพารามิเตอร์
`triggerFlow`	ทริกเกอร์การเรียกใช้โฟลว์ระบบคลาวด์	`{ flowName: string, implicitData?: string }`
`triggerFlowByTemplate`	ทริกเกอร์การเรียกใช้โฟลว์ระบบคลาวด์ตามเท็มเพลต	`{ templateId: string, implicitData?: string, designTimeParameters?: Record<string, any> }`
`getTriggerSchema`	รับสคีมาทริกเกอร์สำหรับโฟลว์ระบบคลาวด์	`{ flowName: string, }`
`closeWidget`	ยกเลิกกิจกรรมที่ค้างอยู่และยกระดับเหตุการณ์ WIDGET_CLOSE

การดำเนินการของวิดเจ็ต	Details	ส่วนติดต่อพารามิเตอร์
`createFlowFromTemplate`	สร้างโฟลว์ระบบคลาวด์สำหรับเทมเพลตที่เลือก	`{ templateName: string, designTimeParameters?: Record<string, any> }`
`createFlowFromTemplateDefinition`	สร้างโฟลว์ระบบคลาวด์สำหรับนิยามเทมเพลตที่เลือก	`{ templateDefinition: string }`
`closeWidget`	ยกเลิกกิจกรรมที่ค้างอยู่และยกระดับเหตุการณ์ WIDGET_CLOSE

การดำเนินการของวิดเจ็ต	คำอธิบาย	ส่วนติดต่อพารามิเตอร์
`closeInfoPane`	ปิดหน้าต่างข้อมูลที่แสดงรายละเอียดการอนุมัติ	ไม่มีข้อมูล

กำหนดค่าแอปพลิเคชันไคลเอ็นต์ของคุณ

คุณจะต้องกำหนดค่าแอปพลิเคชันไคลเอนต์ของคุณด้วยขอบเขตบริการของโฟลว์ (สิทธิ์ที่ได้รับมอบ) หากแอป Azure Active Directory (AAD) ที่ใช้สำหรับการรวมวิดเจ็ต ใช้โฟลว์การอนุญาต 'การให้สิทธิ์รหัส' แอป AAD จะต้องได้รับการกำหนดค่าล่วงหน้าที่มีสิทธิ์ที่ได้รับมอบสิทธิ์ซึ่งได้รับการสนับสนุนโดย Power Automate ซึ่งเป็นสิทธิ์ที่ได้รับมอบหมายเพื่ออนุญาตแอปพลิเคชัน:

จัดการการอนุมัติ
อ่านการอนุมัติ
อ่านกิจกรรม
จัดการโฟลว์
อ่านโฟลว์

ทำตามขั้นตอนเหล่านี้เพื่อเลือกสิทธิ์ที่ได้รับมอบหมายตั้งแต่หนึ่งรายการขึ้นไป:

ไปที่ https://portal.azure.com
เลือก Azure Active Directory
เลือก การลงทะเบียนแอป ภายใต้ จัดการ
ป้อนแอปพลิเคชันบุคคลที่สามที่จะกำหนดค่าสำหรับขอบเขตบริการของโฟลว์
เลือก การตั้งค่า
เลือก สิทธิ์ที่จำเป็น ภายใต้ การเข้าถึง API/
เลือก เพิ่ม
คลิก เลือก API
ค้นหา บริการ Power Automate และเลือก หมายเหตุ: ก่อนที่คุณจะสามารถเห็นบริการ Power Automate ผู้เช่าของคุณต้องมีผู้ใช้ AAD อย่างน้อยหนึ่งรายที่ลงชื่อเข้าใช้พอร์ทัล Flow (https://flow.microsoft.com)
เลือกขอบเขตโฟลว์ที่จำเป็นสำหรับแอปพลิเคชันของคุณ จากนั้นเลือก บันทึก

แอปพลิเคชันของคุณจะได้รับโทเค็นบริการโฟลว์ที่มีสิทธิ์ที่ได้รับมอบหมายในการเรียกร้อง 'scp' ในโทเค็น JWT

แอปพลิเคชันตัวอย่างที่ฝังวิดเจ็ตโฟลว์

ตัวอย่างเว็บแอปพลิเคชันที่เป็นแบบซิงเกิลเพจที่เขียนด้วยภาษา (SPA) JavaScript มีให้ในส่วนทรัพยากรเพื่อให้คุณสามารถทดลองกับวิดเจ็ตโฟลว์ที่ฝังในหน้าโฮสต์ การใช้แอปพลิเคชันตัวอย่างต้องลงทะเบียนแอปพลิเคชัน AAD ด้วยการเปิดใช้งานโฟลว์การให้สิทธิ์ที่ชัดเจน

ลงทะเบียนแอป AAD

ลงชื่อเข้าใช้ พอร์ทัล Azure
ในบานหน้าต่างนำทางด้านซ้าย ให้เลือก Azure Active Directory จากนั้นเลือก การลงทะเบียนแอป (การแสดงตัวอย่าง) > การลงทะเบียนใหม่
เมื่อหน้า ลงทะเบียนแอปพลิเคชัน ปรากฏขึ้น ให้ป้อนชื่อแอปพลิเคชันของคุณ
ภายใต้ ประเภทบัญชีที่รองรับ ให้เลือก บัญชี ในไดเรกทอรีองค์กร
ในส่วน Redirect URL ให้เลือกแพลตฟอร์มเว็บและตั้งค่าเป็น URL ของแอปพลิเคชัน' ตามเว็บเซิร์ฟเวอร์ของคุณ กำหนดค่านี้เป็น http://localhost:30662/ เพื่อเรียกใช้แอปตัวอย่าง
เลือก ลงทะเบียน
บนหน้า ภาพรวม ให้สังเกตค่ารหัสแอปพลิเคชัน (ไคลเอนต์)
ตัวอย่างต้องเปิดใช้งาน โฟลว์การให้สิทธิ์ที่ชัดเจน ในบานหน้าต่างนำทางด้านซ้ายของแอปพลิเคชันที่ลงทะเบียน ให้เลือก การรับรองความถูกต้อง
ใน การตั้งค่าขั้นสูง ภายใต้ การให้สิทธิ์ที่ชัดเจน เปิดใช้งานทั้งกล่องทำเครื่องหมาย โทเค็นรหัส และ โทเค็นการเข้าถึง คุณต้องใช้โทเค็นรหัสและโทเค็นการเข้าถึงเนื่องจากแอปนี้ต้องลงชื่อเข้าใช้ผู้ใช้และเรียก API ของโฟลว์
เลือก บันทึก

กำลังเรียกใช้ตัวอย่าง

ดาวน์โหลดตัวอย่างและคัดลอกไปยังโฟลเดอร์ตำแหน่งที่ตั้งบนอุปกรณ์ของคุณ
เปิดไฟล์ index.html ภายใต้โฟลเดอร์ FlowSDKSample และแก้ไข applicationConfig เพื่ออัปเดต clientID เป็นรหัสแอปพลิเคชันที่คุณลงทะเบียนไว้ก่อนหน้านี้
มีการกำหนดค่าแอปตัวอย่างให้ใช้ขอบเขตโฟลว์ Flows.Read.All และ Flow.Manage.All คุณสามารถกำหนดค่าขอบเขตเพิ่มเติมโดยการอัปเดตคุณสมบัติ flowScopes ในออบเจ็กต์ applicationConfig
รันคำสั่งเหล่านี้เพื่อติดตั้งการขึ้นต่อกันและเรียกใช้แอปตัวอย่าง:

>ติดตั้ง npm > node server.js
เปิดเบราว์เซอร์ และป้อน http://localhost:30662
เลือกปุ่ม ลงชื่อเข้าใช้ เพื่อรับรองความถูกต้อง AAD และรับโทเค็นการเข้าถึงโฟลว์ระบบคลาวด์
กล่องข้อความ โทเค็นการเข้าถึง ประกอบด้วยโทเค็นการเข้าถึง
เลือก วิดเจ็ตโหลดโฟลว์ หรือ วิดเจ็ตโหลดเทมเพลต เพื่อฝังวิดเจ็ตที่เกี่ยวข้อง

ลิงก์ดาวน์โหลด แอปพลิเคชันตัวอย่าง

แหล่งข้อมูล

ค้นหาข้อมูลเพิ่มเติมเกี่ยวกับการรวมและการตั้งค่าวิดเจ็ต:

วิดเจ็ตโครงแบบ: <https://flow.microsoft.com/test/templateswidget/>
วิดเจ็ต FlowCreation: <https://flow.microsoft.com/test/flowcreationwidget/>
วิดเจ็ตรันไทม์: <https://flow.microsoft.com/test/runtimewidget/>
วิดเจ็ตศูนย์การอนุมัติ: <https://flow.microsoft.com/test/approvalcenterwidget/>
วิดเจ็ตโฟลว์: <https://flow.microsoft.com/test/managewidget/>

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

ตำแหน่งที่ตั้ง	Language
bg-bg	บัลแกเรีย (บัลแกเรีย)
ca-es	คาตาลัน (คาตาลัน)
cs-cz	เช็ก (สาธารณรัฐเช็ก)
da-dk	เดนมาร์ก (เดนมาร์ก)
de-de	เยอรมัน (เยอรมนี)
el-gr	กรีก (กรีซ)
en-Us	อังกฤษ (สหรัฐ)
es-es	ภาษาสเปน (ชาวคาสตีล)
et-ee	เอสโตเนีย (เอสโตเนีย)
eu-es	บาสก์ (บาสก์)
fi-fi	ฟินแลนด์ (ฟินแลนด์)
fr-fr	ฝรั่งเศส (ฝรั่งเศส)
gl-es	เกลิเซียน (เกลิเซียน)
hi-HU	ฮังการี (ฮังการี)
hi-in	ฮินดี (อินเดีย)
hr-hr	โครเอเชีย (โครเอเชีย)
id-Id	อินโดนีเซีย (อินโดนีเซีย)
it-It	อิตาลี (อิตาลี)
jp-Jp	ญี่ปุ่น (ญี่ปุ่น)
kk-kz	คาซัคสถาน (คาซัคสถาน)
ko-kr	เกาหลี (เกาหลี)
lt-LT	ลิทัวเนีย (ลิทัวเนีย)
lv-lv	ลัตเวีย (ลัตเวีย)
ms-my	มลายู (มาเลเซีย)
nb-no	นอร์เวย์ (บ็อกมัล)
nl-nl	ดัตช์ (เนเธอร์แลนด์)
pl-pl	โปแลนด์ (โปแลนด์)
pt-br	โปรตุเกส (บราซิล)
pt-pt	โปรตุเกส (โปรตุเกส)
ro-ro	โรมาเนีย (โรมาเนีย)
ru-ru	รัสเซีย (รัสเซีย)
sk-sk	สโลวัก (สโลวัก)
sl-si	สโลวีเนีย (สโลวีเนีย)
sr-cyrl-rs	เซอร์เบีย (ซิริลลิก เซอร์เบีย)
sr-latn-rs	เซอร์เบีย (ละติน เซอร์เบีย)
sv-se	สวีเดน (สวีเดน)
th-th	ไทย (ไทย)
tr-tr	ตุรกี (ตุรกี)
uk-ua	ยูเครน (ยูเครน)
vi-vn	ภาษาเวียดนาม (เวียดนาม)

การใช้ Power Automate Embed SDK อยู่ภายใต้ ข้อกำหนดสิทธิ์การใช้งานซอฟต์แวร์ของ Microsoft

Note

บอกให้เราทราบเกี่ยวกับภาษาที่คุณต้องการในคู่มือ ทำแบบสำรวจสั้นๆ (โปรดทราบว่าแบบสำรวจนี้เป็นภาษาอังกฤษ)

แบบสำรวจนี้ใช้เวลาทำประมาณเจ็ดนาที ไม่มีการเก็บข้อมูลส่วนบุคคล (คำชี้แจงสิทธิ์ส่วนบุคคล)

แชร์ผ่าน

รวม Power Automate เข้ากับเว็บไซต์และแอป

ข้อกำหนดเบื้องต้น

ใช้วิดเจ็ตที่ไม่ได้รับการรับรองความถูกต้อง

แสดงโครงแบบสำหรับสถานการณ์ของคุณ

การส่งผ่านพารามิเตอร์เพิ่มเติมไปยังโครงแบบโฟลว์

ตัวอย่างแบบเต็ม

ใช้วิดเจ็ตโฟลว์ที่ได้รับการรับรองความถูกต้อง

สถาปัตยกรรมวิดเจ็ต

รายละเอียด JS SDK

การเริ่มต้นวิดเจ็ต

โทเค็นการเข้าถึง

กำลังตรวจสอบว่าวิดเจ็ตพร้อมหรือไม่

การตั้งค่าวิดเจ็ต

FlowsSettings

TemplatesSettings

ApprovalCenterSettings

เหตุการณ์ของวิดเจ็ต

การใช้งาน

เหตุการณ์ที่ได้รับการสนับสนุนจากชนิดของวิดเจ็ต

วิดเจ็ตรันไทม์

วิดเจ็ตการสร้างโฟลว์

วิดเจ็ตการอนุมัติ

ตัว อย่าง เช่น

การดำเนินการของวิดเจ็ต

การใช้

ตัว อย่าง เช่น

วิดเจ็ตรันไทม์

วิดเจ็ตการสร้างโฟลว์

วิดเจ็ตการอนุมัติ

กำหนดค่าแอปพลิเคชันไคลเอ็นต์ของคุณ

แอปพลิเคชันตัวอย่างที่ฝังวิดเจ็ตโฟลว์

ลงทะเบียนแอป AAD

กำลังเรียกใช้ตัวอย่าง

แหล่งข้อมูล

หน้าทดสอบวิดเจ็ต

ตำแหน่งที่ตั้งวิดเจ็ตที่รองรับ

แหล่งทรัพยากรเพิ่มเติม