Freigeben über


Integrieren von Power Automate in Websites und Apps

Betten Sie Power Automate mithilfe von flow-Widgets in Ihre App oder Website ein, um Ihren Benutzern eine einfache Möglichkeit zum Automatisieren ihrer persönlichen oder beruflichen Aufgaben zu bieten.

Flow-Widgets sind iframes, die sich in einem Hostdokument befinden. Dieses Dokument verweist auf eine Seite im Power Automate-Designer. Diese Widgets integrieren spezifische Power Automate Funktionalität in die Drittanbieteranwendung.

Manche Widgets sind einfach aufgebaut. So kann ein Widget beispielsweise eine Vorlagenliste ohne Kommunikation zwischen Host und den iframe rendern. Manche Widgets sind aber auch komplex. So kann ein Widget etwa einen Cloud-Flow aus einer Vorlage bereitstellen und ihn anschließend über eine bidirektionale Kommunikation zwischen Host und Widget auslösen.

Voraussetzungen

  • Ein Microsoft-Konto oder
  • ein Geschäfts-, Schul- oder Unikonto

Verwenden von nicht authentifizierten Widgets

Betten Sie die nicht authentifizierte Widget-Vorlagen mithilfe eines iframe direkt in die Hostanwendung ein, um es zu verwenden. Das JavaScript SDK oder ein Zugriffstoken ist dafür nicht erforderlich.

Anzeigen von Vorlagen für Ihre Szenarien

Fügen Sie zunächst diesen Code hinzu, um die Power Automate Vorlagen auf Ihrer Website anzuzeigen:

<iframe src="https://make.powerautomate.com/{locale}/widgets/templates/?q={search term}
&pagesize={number of templates}&destination={destination}&category={category}"></iframe>
Parameter Beschreibung
locale Der aus vier Buchstaben bestehende Sprach- und Regionscode für die Vorlagenansicht. Beispielsweise gibt Englisch (US) und Deutsch an.
Suchbegriff Der Suchbegriff für die Vorlagen, die Sie in der Ansicht anzeigen möchten. Suchen Sie beispielsweise SharePoint, um Vorlagen für SharePoint anzuzeigen.
Anzahl der Vorlagen Die Anzahl der Vorlagen, die in der Ansicht angezeigt werden sollen.
destination Diese Seite wird geöffnet, wenn Benutzer die Vorlage auswählen. Geben Sie details ein, um die Details zur Vorlage anzuzeigen, oder geben Sie new ein, um den Power Automate Designer zu öffnen.
category Filter für die angegebene Vorlagenkategorie.
parameters.{Name} Zusätzlicher Kontext, der in den Flow übergeben werden soll.

Wenn der Zielparameter new ist, wird der Power Automate Designer geöffnet, wenn Benutzer eine Vorlage auswählen. Dort kann der Benutzer dann einen Cloud-Flow erstellen. Wenn die komplette Benutzeroberfläche des Widgets enthalten sein soll, finden Sie weitere Informationen im nächsten Abschnitt.

Übergeben zusätzlicher Parameter an die Flow-Vorlage

Wenn sich der Benutzer in einem bestimmten Kontext auf der Website oder in der App befindet, soll vorzugsweise dieser Kontext an den Flow übergeben werden. Beispielsweise kann ein Benutzer eine Vorlage für When an item is created während der Betrachtung einer bestimmten Liste in SharePoint öffnen. Führen Sie die folgenden Schritte aus, um die Listen-ID als Parameter an den Flow zu übergeben:

  1. Definieren Sie den Parameter in der Flowvorlage, bevor Sie diese veröffentlichen. Ein Parameter sieht wie folgt aus: .
  2. Übergeben Sie den Parameter in die Abfragezeichenfolge von „iframe src“. Fügen Sie beispielsweise hinzu, wenn Sie über den Parameter listName verfügen.

Vollständiges Beispiel

Um die vier wichtigsten SharePoint Vorlagen in Deutsch anzuzeigen und den Benutzer mit myCoolList zu starten, verwenden Sie diesen Code:

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

Verwenden von authentifizierten Flow-Widgets

In der folgenden Tabelle ist die Liste der Power Automate Widgets aufgeführt, die die vollständige Erfahrung innerhalb des Widgets mithilfe des Benutzerauthentifizierungszugriffstokens unterstützen. Sie müssen das JavaScript Software Developer Kit (JS SDK) von Power Automate verwenden, um die Widgets einzubetten und das erforderliche Benutzerzugriffstoken bereitzustellen.

Typ des Widget Unterstützte Funktion
flows Zeigt auf einer Registerkarte eine Liste der Flows für persönliche und freigegebene Flows an. Sie können einen vorhandenen Flow bearbeiten oder einen neuen Flow aus einer Vorlage oder ohne Vorlage erstellen.
flowCreation Erstellt einen Cloud-Flow aus einer Vorlagen-ID, die von der Hostanwendung bereitgestellt wird.
runtime Löst einen manuellen Flow oder einen hybrid ausgelösten Flow aus, der von der Hostanwendung bereitgestellt wird.
approvalCenter Bettet Genehmigungsanforderungen und gesendete Genehmigungen ein.
templates Zeigt eine Liste der Vorlagen an. Der Benutzer wählt eine Vorlage aus, um einen neuen Flow zu erstellen.

Verwenden Sie das authentifizierte Flow SDK, um Benutzern das Erstellen und Verwalten von Flüssen direkt von Ihrer Website oder App zu ermöglichen (anstatt zu Power Automate zu navigieren). Sie müssen den Benutzer mit ihrem Microsoft-Konto anmelden oder Microsoft Entra, um das authentifizierte SDK zu verwenden.

Notiz

Es gibt keine Möglichkeit, das Power Automate Branding auszublenden, wenn Sie Widgets verwenden.

Architektur des Widget

Power Automate Widgets funktionieren, indem ein iFrame eingebettet wird, der auf Power Automate in eine Hostanwendung verweist. Der Host stellt das Zugriffstoken bereit, das vom Power Automate Widget benötigt wird. Mit dem JS SDK von Power Automate kann die Hostanwendung den Widgetlebenszyklus initialisieren und verwalten.

Diagramm der Power Automate Widgetarchitektur.

Details zum JS SDK

Das Power Automate Team stellt das JS SDK bereit, um die Integration von Flow-Widgets in Drittanbieteranwendungen zu erleichtern. Das Flow JS SDK ist als öffentlicher Link im Flow-Dienst verfügbar. Damit kann die Hostanwendung Ereignisse aus dem Widget verarbeiten und mit der Flow-Anwendung interagieren, indem es Aktionen an das Widget sendet. Widget-Ereignisse und -Aktionen richten sich nach dem Typ des Widget.

Initialisierung des Widget

Fügen Sie der Hostanwendung den Verweis auf die JS SDK vor der Initialisierung des Widgets hinzu.

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

Notiz

  • Die empfohlene Methode zum Einbinden des Flow JS SDK in Ihre Anwendung ist die Verwendung der obigen Referenz. Das Hinzufügen einer lokalen Kopie des Flow JS SDK zu Ihrer Anwendung oder Webseite kann dazu führen, dass Sie im Laufe der Zeit eine ältere, nicht unterstützte Version des SDK verwenden, was zu Funktionsunterbrechungen führt.
  • Power Automate speichert einige Daten, z. B. Benutzeridentität und -einstellungen, lokal unter Nutzung Ihrer Browserfunktionen. Probleme treten auf, wenn der Browser die Speicherung solcher lokalen Daten blockiert oder Cookies von Drittanbietern, die von Power Automate festgelegt werden. Damit das Widget ordnungsgemäß geladen wird, müssen Benutzer Cookies von Drittanbietern in Ihrem Browser aktivieren.

Erstellen Sie eine JS SDK-Instanz, indem Sie Werte für die optionalen Parameter „hostName“ und „locale“ in einem JSON-Objekt übergeben.

var sdk = new MsFlowSdk({
    hostName:'https://make.powerautomate.com',
    locale:'en-US'
}); 
Name erforderlich/optional Beschreibung
hostName Optional Power Automate Hostname, z. B. https://make.powerautomate.com
locale Optional Das Clientgebietsschema für das Widget (standardmäßig , wenn nicht angegeben)

Nachdem die JS SDK-Instanz erstellt wurde, können Sie ein Power Automate Widget in ein übergeordnetes Element in der Hostanwendung initialisieren und einbetten. Fügen Sie hierzu ein HTML-div-Element hinzu:

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

Initialisieren Sie dann das Power Automate Widget mit der JS SDK-renderWidget()-Methode. Dazu müssen Sie den Typ des Widget und die entsprechenden Einstellungen angeben.

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

Passen Sie das folgende Beispiel für einen Container so an, dass er den Dimensionen der Hostanwendung entspricht.

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

Die folgende Tabelle enthält Parameter für :

Parameter erforderlich/optional Beschreibung
container Erforderlich ID eines div-Elements auf der Hostseite, auf der das Widget eingebettet wird.
environmentId Optional Widgets benötigen eine Umgebungs-ID. Wenn Sie keine ID angeben, wird eine Standardumgebung verwendet.
flowsSettings Optional Power-Automate-Einstellungsobjekt
templatesSettings Optional Vorlageneinstellungsobjekt
approvalCenterSettings Optional Genehmigungseinstellungsobjekt

Zugriffstoken

Nachdem das JS SDK renderWidget() ausgeführt wurde, initialisiert das JS SDK einen iframe, der auf die Power Automate Widget-URL verweist. Diese URL enthält in den Parametern der Abfragezeichenfolge alle Einstellungen. Die Hostanwendung muss ein Power Automate Zugriffstoken für den Benutzer abrufen (Microsoft Entra ID JWT-Token mit Zielgruppe https://service.flow.microsoft.com), bevor es das Widget initialisiert. Das Widget löst ein -Ereignis aus, um vom Host ein Zugriffstoken anzufordern. Der Host muss das Ereignis verarbeiten und das Token an das Widget übergeben:

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

Die Hostanwendung muss das Token verwalten und auf Anforderung mit einem gültigen Ablaufdatum an das Widget übergeben. Wenn das Widget für längere Zeit geöffnet ist, sollte der Host überprüfen, ob das Token noch gültig ist und es gegebenenfalls vor der Übergabe an das Widget aktualisieren.

Feststellen, ob das Widget bereit ist

Nach erfolgreicher Initialisierung löst das Widget ein Ereignis aus, um mitzuteilen, dass es bereit ist. Der Host kann auf das -Ereignis lauschen und einen beliebigen zusätzlichen Hostcode ausführen.

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

Einstellungen des Widget

FlowsSettings

FlowsSettings können verwendet werden, um die Funktionalität des Power Automate Widgets anzupassen.

flowsSettings?: {
    createFromBlankTemplateId?: string;
    flowsFilter?: string;sc
    tab?: string;
};
Parameter erforderlich/optional Beschreibung
createFromBlankTemplateId Erforderlich Verwenden Sie die Vorlagen-GUID, wenn der Benutzer die Schaltfläche Ohne Vorlage neu erstellen für das Flow-Widget auswählt
flowsFilter Optional Das widget Power Automate wendet den bereitgestellten Filter beim Auflisten von Flüssen an. Zeigen Sie beispielsweise Flüsse an, die auf eine bestimmte SharePoint Website verweisen.
flowsFilter: "operations/any(operation: operation/sharepoint.site eq 'https://microsoft.sharepoint.com/teams/ProcessSimple' )"
tab Optional Standardmäßig wird die aktive Registerkarte im Power Automate-Widget angezeigt.
Zum Beispiel
wird die Registerkarte „Team“ angezeigt
und mit die Registerkarte „Meine Flows“.

TemplatesSettings

Gilt für alle Widgets, mit der Flows aus einer Vorlage erstellt werden können, einschließlich der Widgets „Flows“, „FlowCreation“ und „Templates“.

templatesSettings?: {
    defaultParams?: any;
    destination?: string;
    pageSize?: number;
    searchTerm?: string;
    templateCategory?: string;
    useServerSideProvisioning?: boolean;
    enableDietDesigner?: boolean;
};
Parameter erforderlich/optional Beschreibung
defaultParams Optional Entwurfszeitparameter, die beim Erstellen eines Cloud-Flow aus einer Vorlage verwendet werden können, z.B.:
defaultParams: {'parameters.sharepoint.site': 'https://microsoft.sharepoint.com/teams/ProcessSimple', 'parameters.sharepoint.list': '00001111-aaaa-2222-bbbb-3333cccc4444' }
destination Optional Gültige Werte sind „Neu“ und „Details“. Bei Festlegung auf „Details“ wird beim Erstellen eines Cloud-Flows aus einer Vorlage eine Detailseite angezeigt.
pageSize Optional Anzahl der Vorlagen, die angezeigt werden soll. Standardgröße = 6
searchTerm Optional Zeigt Vorlagen an, die dem angegebenen Suchbegriff entsprechen
templateCategory Optional Zeigt Vorlagen in einer bestimmten Kategorie an

ApprovalCenterSettings

Gilt für ApprovalCenter-Widgets.

approvalCenterSettings?: {
   approvalsFilter?: string;
   tab?: string;but
   showSimpleEmptyPage? boolean;
   hideLink?: boolean
};
Parameter erforderlich/optional Beschreibung
hideLink Optional Bei Festlegung auf blendet das Widget die Links der empfangenen und gesendeten Genehmigungen aus
approvalsFilter Optional Das Widget für die Genehmigung wendet beim Auflisten der Genehmigungen den angegebenen Genehmigungsfilter an, z. B.:
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 Optional Standardmäßig wird die aktive Registerkarte im Flow-Widget angezeigt.
Gültige Werte sind „receivedApprovals“ und „sentApprovals“
showSimpleEmptyPage Optional Zeigt eine leere Seite an, wenn keine Genehmigungen vorhanden sind
hideInfoPaneCloseButton Optional Blendet die Schaltfläche „Schließen“ im Infofenster aus (oder der Host verfügt bereits über die Schaltfläche „Schließen“)

Widget-Ereignisse

Das Power Automate Widget unterstützt Ereignisse, die dem Host das Lauschen auf Widget-Lebenszyklusereignisse ermöglichen. Das Power Automate Widget unterstützt zwei Arten von Ereignissen: Unidirektionale Benachrichtigungsereignisse (z. B. Widget_Ready) und Ereignisse, die vom Widget ausgelöst werden, um Daten vom Host abzurufen (Get_Access_Token). Der Host muss die Methode „widget.listen()“ verwenden, um auf bestimmte Ereignisse zu lauschen, die vom Widget ausgelöst wurden.

Verbrauch

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

Unterstützte Ereignisse nach Typ des Widget

Widget-Ereignis Informationen
WIDGET_READY Widget wurde erfolgreich geladen
WIDGET_RENDERED Widget wurde geladen, und das Rendern der Benutzeroberfläche ist abgeschlossen
GET_ACCESS_TOKEN Widgetanforderung für Embed-Benutzerzugriffstoken
GET_STRINGS Ermöglicht dem Host, mehrere im Widget angezeigte UI-Zeichenfolgen zu überschreiben

Runtime-Widget

Widget-Ereignis Informationen Daten
RUN_FLOW_STARTED Wurde ausgelöst, und die Flowausführung wurde gestartet
RUN_FLOW_COMPLETED Flowausführung wurde erfolgreich ausgelöst
RUN_FLOW_DONE_BUTTON_CLICKED Schaltfläche „Fertig“ wurde vom Benutzer bei der Flowausführung ausgewählt
RUN_FLOW_CANCEL_BUTTON_CLICKED Schaltfläche „Abbrechen“ wurde vom Benutzer bei der Flowausführung ausgewählt
FLOW_CREATION_SUCCEEDED Der Flow wurde erfolgreich erstellt { flowUrl: string, flowId: string, fromTemplate: string }
WIDGET_CLOSE Wird ausgelöst, wenn der Host das Widget schließen soll

Widget zur Flow-Erstellung

Widget-Ereignis Informationen Daten
FLOW_CREATION_FAILED Fehler beim Erstellen des Flows
WIDGET_CLOSE Wird ausgelöst, wenn der Host das Widget schließen soll
TEMPLATE_LOAD_FAILED Fehler beim Laden der Vorlage
FLOW_CREATION_SUCCEEDED Der Flow wurde erfolgreich erstellt { flowUrl: string, flowId: string,fromTemplate?: string }

Widget für die Genehmigung

Widget-Ereignis Informationen
RECEIVED_APPROVAL_STATUS_CHANGED Status der empfangenen Genehmigungen hat sich geändert
SENT_APPROVAL_STATUS_CHANGED Status der gesendeten Genehmigungen hat sich geändert

GET_STRINGS Ereignis lässt Sie den Text für einige der im Widget angezeigten Benutzeroberflächen-Elemente anpassen. Die folgenden Zeichenfolgen können angepasst werden:

Zeichenfolgenschlüssel Verwendung im Widget
FLOW_CREATION_CREATE_BUTTON Text, der auf der Schaltfläche „Flow erstellen“ im Widget zur Flow-Erstellung und im Widget für die Laufzeit angezeigt wird
FLOW_CREATION_CUSTOM_FLOW_NAME Anfangswert für den Flownamen im Widget zur Flow-Erstellung. Wird nur verwendet, wenn die Einstellung „allowCustomFlowName“ aktiviert ist.
FLOW_CREATION_HEADER Header für die Erstellung eines Cloud-Flows im Widget zur Flow-Erstellung und im Widget für die Laufzeit.
INVOKE_FLOW_HEADER Header für den Aufruf eines Cloud-Flows im Widget für die Laufzeit.
INVOKE_FLOW_RUN_FLOW_BUTTON Text, der auf der Schaltfläche zum Aufrufen/Ausführen eines Cloud-Flows im Widget für die Laufzeit angezeigt wird.

Beispiel

Rufen Sie auf, indem Sie ein JSON-Objekt mit Schlüssel-Wert-Paaren aus Zeichenfolgenschlüssel und Text übergeben, um den Standardwert zu überschreiben.

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>"
    });
});

Widget-Aktionen

Widget-Aktionen ermöglichen dem Host, eine bestimmte Aktion oder Nachricht an das Widget zu senden. Das JS SDK des Widgets stellt die -Methode bereit, um eine Nachricht oder JSON-Nutzlast an das Widget zu senden. Jede Widget-Aktion unterstützt eine bestimmte Nutzlastsignatur.

Verbrauch

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

Beispiel

Rufen Sie einen Cloud-Flow auf, indem Sie den folgenden Befehl an ein Widget für die Laufzeit senden:

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

Runtime-Widget

Widget-Aktion Informationen Parameterschnittstelle
triggerFlow Löst eine Cloud-Flowausführung aus { flowName: string, implicitData?: string }
triggerFlowByTemplate Löst eine Cloud-Flowausführung nach Vorlage aus. { templateId: string, implicitData?: string, designTimeParameters?: Record<string, any> }
getTriggerSchema Ruft ein Triggerschema für einen Cloud-Flow ab. { flowName: string, }
closeWidget Bricht alle ausstehenden Aktivitäten ab und löst ein WIDGET_CLOSE-Ereignis aus

Widget zur Flow-Erstellung

Widget-Aktion Informationen Parameterschnittstelle
createFlowFromTemplate Erstellt einen Cloud-Flow für die ausgewählte Vorlagendefinition. { templateName: string, designTimeParameters?: Record<string, any> }
createFlowFromTemplateDefinition Erstellt einen Cloud-Flow für die ausgewählte Vorlagendefinition. { templateDefinition: string }
closeWidget Bricht alle ausstehenden Aktivitäten ab und löst ein WIDGET_CLOSE-Ereignis aus

Widget für die Genehmigung

Widget-Aktion Informationen Parameterschnittstelle
closeInfoPane Schließt die im Infofenster angezeigten Genehmigungsdetails Nicht zutreffend

Konfigurieren der Clientanwendung

Konfigurieren Sie zunächst Ihre Clientanwendung mit den Bereichen des Flow-Diensts (delegierte Berechtigungen). Wenn die für die Widgetintegration verwendete Microsoft Entra-App (Microsoft Entra ID) einen Autorisierungsfluss für die Codeerteilung verwendet, muss die Microsoft Entra-App mit delegierten Berechtigungen vorkonfiguriert werden, die von Power Automate unterstützt werden. Mit den hierbei bereitgestellten delegierten Berechtigungen kann die Anwendung:

  • Genehmigungen verwalten
  • Genehmigungen lesen
  • Aktivitäten lesen
  • Flows verwalten
  • Flows lesen

Mit den folgenden Schritten können Sie eine oder mehrere delegierte Berechtigungen auswählen:

  1. Zu wechseln
  2. Wählen Sie Microsoft Entra ID aus.
  3. Wählen Sie App registrations unter Manage aus.
  4. Geben Sie die Drittanbieteranwendung ein, die für die Bereiche des Flow-Diensts konfiguriert werden soll.
  5. Wählen Sie Einstellungen aus. ![Screenshot, der das Symbol "Einstellungen" für die Anwendung anzeigt.](../media/embed-flow-dev/Microsoft Entra ID-App-Settings.png)
  6. Wählen Sie Erforderliche Berechtigungen unter API-Zugriff
  7. Wählen Sie Hinzufügen.
  8. Wählen Sie API auswählen aus. ![Screenshot: Auffinden erforderlicher Berechtigungen, Hinzufügen und Auswählen einer API.](../media/embed-flow-dev/Microsoft Entra ID-App-Select-an-API.png)
  9. Suchen Sie nach Power Automate Service und wählen Sie ihn aus. Hinweis: Bevor Sie den Power Automate-Dienst sehen können, muss Ihr Mandant mindestens einen Microsoft Entra-Benutzer beim Flow-Portal angemeldet haben (https://make.powerautomate.com)
  10. Wählen Sie die für Ihre Anwendung erforderlichen Flow-Bereiche aus, und klicken Sie dann auf Speichern. ! [Screenshot der delegierten Berechtigungen.](.. /media/embed-flow-dev/Microsoft Entra ID-App-DelegatedPermissions.png)

Ihre Anwendung erhält nun ein Flow-Diensttoken mit delegierten Berechtigungen im SCP-Anspruch im JWT-Token.

Beispielanwendung zum Einbetten von Flow-Widgets

Der Ressourcenabschnitt enthält ein Beispiel für eine Single-Page-Webanwendung (SPA) für JavaScript. Damit können Sie Erfahrungen mit dem Einbetten von Flow-Widgets in eine Hostseite sammeln. Für die Verwendung der Beispielanwendung ist die Registrierung einer Microsoft Entra-Anwendung mit aktiviertem implizierten Genehmigungsfluss erforderlich.

Registrieren einer Microsoft Entra-App

  1. Melden Sie sich beim portal Azure an.
  2. Wählen Sie im linken Navigationsbereich Microsoft Entra und dann App registrations (Vorschau) > Neue Registrierung aus.
  3. Geben Sie auf der Seite Anwendung registrieren einen Namen für Ihre Anwendung ein.
  4. Klicken Sie unter Unterstützte Kontotypen in einem beliebigen Organisationsverzeichnis auf Konten.
  5. Wählen Sie im Abschnitt Umleitungs-URL die Webplattform aus, und legen Sie den Wert für die URL der Anwendung auf Ihrem Webserver fest. Konfigurieren Sie diesen Wert auf , um die Beispiel-App auszuführen.
  6. Wählen Sie Registrieren aus.
  7. Notieren Sie sich den Wert der Anwendungs-ID (Client-ID) auf der Übersichts-Seite der App.
  8. Für das Beispiel muss der Flow zur impliziten Genehmigung aktiviert sein. Wählen Sie im linken Navigationsbereich der registrierten Anwendung die Option Authentifizierung aus.
  9. Aktivieren Sie in den Erweiterten Einstellungen unter Implizite Genehmigung die beiden Kontrollkästchen bei ID-Token und Zugriffstoken. ID-Token und Zugriffstoken sind erforderlich, da die App Benutzer anmeldet und die Flow-API aufruft.
  10. Wählen Sie Speichern aus.

Ausführen des Beispiels

  1. Laden Sie das Beispiel herunter, und kopieren Sie es in einen lokalen Ordner auf Ihrem Gerät.
  2. Öffnen Sie im Ordner „FlowSDKSample“ die Datei „index.html“, und ändern Sie so ab, dass auf die Anwendungs-ID aktualisiert wird, die Sie zuvor registriert haben. Screenshot der Indexpunkt-HTML-Datei, die die Client-ID lokalisiert.
  3. Die Beispiel-App ist so konfiguriert, dass sie die Flow-Bereiche Flows.Read.All und Flow.Manage.All verwendet. Sie können zusätzliche Bereiche konfigurieren, indem Sie die Eigenschaft flowScopes im Objekt applicationConfig aktualisieren.
  4. Führen Sie diese Befehle zum Installieren der Abhängigkeit und zum Ausführen der Beispiel-App aus:

    npm install Knoten server.js

  5. Öffnen Sie den Browser, und geben Sie ein
  6. Wählen Sie die Schaltfläche Sign in aus, um sich bei Microsoft Entra zu authentifizieren und ein Cloud Flow-Zugriffstoken abzurufen.
  7. Das Textfeld Zugriffstoken enthält das Zugriffstoken. Screenshot, der die Box Zugriffstoken zeigt, die ein Zugriffstoken enthält.
  8. Klicken Sie auf Flows-Widget laden oder auf Vorlagen-Widget laden, um die entsprechenden Widgets einzubetten. Screenshot mit Schaltflächen zum Einbetten des „Flows laden“-Widgets oder des „Vorlage laden“-Widgets.

Ressource

Widget-Testseiten

Auf den folgenden Seiten finden Sie Informationen zur Integration des Widget und zu Einstellungen des Widget:

  • Widget-Vorlagen:
  • FlowCreation-Widget:
  • Runtime-Widget:
  • Genehmigungscenter-Widget:
  • Flows-Widget:

Unterstützte Widgetgebietsschemas

Wird das initialisierte Gebietsschema nicht aufgeführt, verwendet Flow standardmäßig das nächstgelegene unterstützte Gebietsschema.

Standort Language
bg-bg Bulgarisch (Bulgarien)
ca-es Katalanisch (Katalanisch)
cs-cz Tschechisch (Tschechische Republik)
da-dk Dänisch (Dänemark)
de-de Deutsch (Deutschland)
el-gr Griechisch (Griechenland)
en-US Englisch (Vereinigte Staaten)
es-es Spanisch (Kastilisch)
et-ee Estnisch (Estland)
eu-es Baskisch (Baskenland)
fi-fi Finnisch (Finnland)
fr-fr Französisch (Frankreich)
gl-es Galizisch (Galizisch)
hi-HU Ungarisch (Ungarn)
hi-in Hindi (Indien)
hr-hr Kroatisch (Kroatien)
id-id Indonesisch (Indonesien)
it-it Italienisch (Italien)
jp-JP Japanisch (Japan)
kk-kz Kasachisch (Kasachstan)
ko-kr Koreanisch (Korea)
lt-LT Litauisch (Litauen)
lv-lv Lettisch (Lettland)
ms-my Malaiisch (Malaysia)
nb-no Norwegisch (Bokmål)
nl-nl Niederländisch (Niederlande)
pl-pl Polnisch (Polen)
pt-br Portugiesisch (Brasilien)
pt-pt Portugiesisch (Portugal)
ro-ro Rumänisch (Rumänien)
ru-ru Russisch (Russland)
sk-sk Slowakisch (Slowakei)
sl-si Slowenisch (Slowenien)
sr-cyrl-rs Serbisch (Kyrillisch, Serbien)
sr-latn-rs Serbisch (Lateinisch, Serbien)
sv-se Schwedisch (Schweden)
th-th Thailändisch (Thailand)
tr-tr Türkisch (Türkei)
uk-ua Ukrainisch (Ukraine)
vi-vn Vietnamesisch (Vietnam)

Die Verwendung des Power Automate Embed SDK wird unter die Microsoft-Software-Lizenzbedingungen behandelt.