Integrera Power Automate med webbplatser och appar

Bädda in Power Automate i din app eller webbplats med flödeswidgetar för att ge användare ett enkelt sätt att automatisera sina personliga eller professionella uppgifter.

Flödeswidgetar är iframes som finns i ett dokument för värden. Det här dokumentet pekar på en sida i Power Automate-designern. Dessa widgetar integrerar Power Automate-funktioner i program från tredje part.

Widgetar kan vara enkla. Till exempel en widget som återger en lista över mallar utan någon kommunikation mellan värden och iframe. Widgetar kan också vara komplexa. Till exempel en widget som etablerar ett molnflöde från en mall och därefter utlöser flödet via dubbelriktad kommunikation mellan värden och widgeten.

Förutsättningar

• Ett Microsoft-konto eller
• Ett arbets- eller skolkonto

Använd den oautentiserade widgeten

Om du vill använda den oautentiserade mallwidgeten bäddar du in den direkt i värdprogrammet med hjälp av en iframe. Du behöver varken JS SDK eller någon åtkomsttoken.

Visa mallar för dina scenarier

För att komma igång lägger du till den här koden för att visa Power Automate-mallarna direkt på din webbplats:

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

Om målparametern är new, öppnas Power Automate-designerverktyget när användare väljer en mall. Användaren kan sedan skapa ett molnflöde i designern. Se nästa avsnitt om du vill ha den fullständiga upplevelsen från widgeten.

Skicka ytterligare parametrar till flödesmallen

Om användaren befinner sig i en viss kontext på din webbplats eller i din app, kanske du vill skicka den kontexten till flödet. En användare kan till exempel öppna en mall för när ett objekt skapa när det tittar på en viss lista i SharePoint. Följ de här stegen så kan du skicka listans ID som en parameter till flödet:

1. Definiera parametern i flödesmallen innan du publicerar den. En parameter ser ut som @{parameters('parameter_name')}.
2. Skicka parametern i frågesträngen för iframe src. Lägg exempelvis till &parameters.listName={the name of the list} om du har en parameter med namnet listName.

Fullständigt exempel

Om du vill visa de översta fyra SharePoint-mallarna på tyska och starta användaren med myCoolList använder du den här koden:

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

Använd de autentiserade flödeswidgetarna

I följande tabell listas i Power Automate-widgetar som stöder den fullständiga upplevelsen i widgeten med åtkomsttoken för användarautentisering. Du behöver använda Power Automate Javascript Software Developer Kit (JS SDK) för att bädda in widgetar och tillhandahålla användarens åtkomsttoken som krävs.

Använd den autentiserade Flow-SDK:n för att låta användare skapa och hantera flöden direkt från din webbplats eller app (istället för att navigera till Power Automate). Du behöver logga in användaren med hans/hennes Microsoft-konto eller Azure Active Directory för att använda den autentiserade SDK:n.

Widget-arkitektur

Power Automate-widgetar fungerar genom att du bäddar in en iframe som refererar till Power Automate i ett värdprogram. Värden tillhandahåller åtkomsttoken som krävs av Power Automate-widgeten. Power Automate JS SDK gör det möjligt för värdprogrammet att initiera och hantera widgetens livscykel.

Information om JS SDK

Power Automate-teamet tillhandahåller JS SDK för att underlätta integrering av Flow-widgetar i program från tredje part. Flow JS SDK är tillgänglig som en offentlig länk i Flow-tjänsten och låter värdprogrammet hantera händelser från widgeten och interagera med Flow-programmet genom att skicka åtgärder till widgeten. Widget-händelser och -åtgärder är specifika för widgettypen.

Initiering av widget

Du måste lägga till Flow JS SDK-referensen till i värdprogrammet innan du initierar en widget.

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

Skapa en JS SDK-instans genom att skicka valfritt hostName och nationella inställningsvärden i ett JSON-objekt.

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

När JS SDK-instansen har skapats kan du initiera och bädda in en Power Automate-widget i ett överordnat element i värdprogrammet. Det gör du genom att lägga till en HTML-div:

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

Initiera sedan Power Automate-widgeten med JS SDK renderWidget()-metoden. Kom ihåg att tillhandahålla widgettypen och motsvarande inställningar.

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

Här är ett exempelformat för den container som du kan ändra för att matcha med värdprogrammets mått.

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

Här är parametrarna för renderWidget():

Åtkomsttoken

Efter JS SDK renderWidget() körts initierar JS SDK en iframe som pekar mot Power Automate-widgetens URL. Denna URL innehåller alla inställningar i frågesträngsparametrarna. Värdprogrammet behöver hämta en Power Automate-åtkomsttoken för användaren (Azure Active Directory JWT-token med målgruppen https://service.flow.microsoft.com) innan det initierar widgeten. Widgeten signalerar en GET_ACCESS_TOKEN-händelse och begär en åtkomsttoken från värden. Värden måste hantera händelsen och skickar token till widgeten:

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

Värdprogrammet ansvarar för underhåll av token och skickar den med ett giltigt utgångsdatum för widgeten på begäran. Om widgeten är öppen under längre perioder ska värden kontrollera om token har upphört att gälla och uppdatera token om det behövs innan den skickas till en widget.

Identifiera om widgeten är klar

Efter lyckad initiering utlöser widgeten en händelse för att meddela att widgeten är klar. Värden kan lyssna på WIDGET_READY-händelsen och köra eventuell extra värdkod.

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

Widgetinställningar

FlowsSettings

FlowsSettings kan användas för att anpassa funktionerna i Power Automate-widgeten.

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

TemplatesSettings

Detta gäller för alla widgetar som hjälper dig att skapa flöden från en mall, flöden, FlowCreation och mallwidgetar.

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

ApprovalCenterSettings

Gäller för ApprovalCenter-widgetar.

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

Widget-händelser

Power Automate-widgeten har stöd för händelser som gör att värden kan lyssna på widgetens livscykelhändelser. Power Automate-widgeten stöder två typer av händelser: enkelriktade meddelanden (till exempel Widget_Ready) och händelser som skapats från widgeten för att hämta data från värden (Get_Access_Token). Värden måste använda widget.listen()-metoden för att lyssna på specifika händelser som genereras från widgeten.

Användning

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

Händelser som stöds efter typ av widget

Körningswidget

Widget för att skapa flöde

Widget för godkännande

Med händelsen GET_STRINGS kan du anpassa text för några av de UI-element som visas i widgeten. Du kan anpassa följande strängar:

Exempel

Anropa widgetDoneCallback för att skicka ett JSON-objekt med nyckel/ värde-par för strängnyckeln och text för att åsidosätta standardvärdet.

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-åtgärder

Värden använder widgetåtgärder för att skicka en specifik åtgärd eller ett meddelande till en widget. JS SDK för widget innehåller notify()-metoden för att skicka ett meddelande eller en JSON-nyttolast för widgeten. Varje widgetåtgärd har stöd för en specifik nyttolastsignatur.

Användning

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

Exempel

Anropa ett molnflöde genom att skicka kommandot till en körningswidget

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

Körningswidget

Widget för att skapa flöde

Widget för godkännande

Konfigurera din klientapp

Du måste konfigurera klientprogrammet med Flow-tjänstens omfång (delegerade behörigheter). Om appen Azure Active Directory (AAD) som används för widgetintegreringen använder ett auktoriseringsflöde för ”beviljande av kod” måste AAD-apparna vara förkonfigurerade med delegerade behörigheter som stöds av Power Automate. Detta ger delegerade behörigheter som gör att appen kan:

• Hantera godkännanden
• Läsa godkännanden
• Läsa aktiviteter
• Hantera flöden
• Läsa flöden

Följ dessa steg för att välja en eller flera delegerade behörigheter:

1. Gå till https://portal.azure.com
2. Markera Azure Active Directory.
3. Välj Appregistreringar under Hantera.
4. Ange program från tredje part som ska konfigureras för Flow-tjänstens omfång.
5. Välj Inställningar.
6. Välj Nödvändiga behörigheter under API-åtkomst/
7. Markera Lägg till.
8. Välj Välj en API.
9. Sök efter Power Automate-tjänsten och markera den. Obs! Innan du kan se Power Automate-tjänsten måste din klient ha minst en AAD-användare som är inloggad på Flow-portalen (https://flow.microsoft.com)
10. Välj de obligatoriska Flow-omfången för programmet och välj sedan Spara.

Ditt program kommer nu att få en token för Flow-tjänsten som innehåller delegerade behörigheter i 'scp-anspråket i JWT-token.

Exempelprogram som bäddar in flödeswidgetar

Ett JavaScript-exempel på SPA (enkelsidigt program) finns i resursavsnittet så att du kan experimentera med att bädda in flödeswidgetar i en värdsida. Om du använder exempelprogrammet måste du registrera ett AAD-program med implicit beviljande av flöde aktiverat.

Registrera en AAD-app

1. Logga in på Azure-portal.
2. I det vänstra navigeringsfönstret väljer du Azure Active Directory och sedan Appregistreringar (förhandsversion) > Ny registrering.
3. När sidan Registrera ett program visas anger du ett namn för ditt program.
4. Under Kontotyper som stöds väljer du Konton i valfri organisationskatalog.
5. I avsnittet Omdirigerings-URL markerar du webbplattformen och anger värdet för programmet's URL baserad på webbservern. Konfigurera det här värdet till http://localhost:30662/ för att köra exempelappen.
6. Välj Registrera.
7. På sidan Översikt noterar du appens (klientens) ID-värde.
8. Exemplet kräver att implicit beviljande av flöde är aktiverat. I det vänstra navigeringsfönstret för det registrerade programmet väljer du Autentisering.
9. I Avancerade inställningar, under Implicit beviljande, aktiverar du både kryssrutan ID-token och Åtkomsttoken. ID-token och åtkomsttoken krävs eftersom den här appen behöver logga in användare och anropa flödes-API:et.
10. Välj Spara.

Köra exemplet

1. Ladda ned exemplet och kopiera det till en lokal mapp på din enhet.
2. Öppna filen index.html under mappen FlowSDKSample och ändra applicationConfig för att uppdatera clientID till det program-ID som du registrerade tidigare.
3. Exempelappen har konfigurerats för att använda Flow-omfången Flows.Read.All och Flow.Manage.All. Du kan konfigurera ytterligare omfång genom att uppdatera flowScopes-egenskapen i applicationConfig-objektet.
4. Kör följande kommandon för att installera beroendet och köra exempelappen:

   > npm install > node server.js

5. Öppna webbläsaren och ange http://localhost:30662
6. Välj knappen Logga in för att autentisera till AAD och hämta en åtkomsttoken för molnflödet.
7. Textrutan Åtkomsttoken innehåller åtkomsttoken.
8. Välj Läs in flödeswidget eller Läs in mallwidget för att bädda in motsvarande widgetar.

Nedladdningslänk för exempelprogram.

Resurser

Widget-testsidor

Lär dig mer om widgetintegrering och -inställningar:

• Mallar för widget: <https://flow.microsoft.com/test/templateswidget/>
• FlowCreation-widget: <https://flow.microsoft.com/test/flowcreationwidget/>
• Körningswidget: <https://flow.microsoft.com/test/runtimewidget/>
• Widget för godkännandecentret: <https://flow.microsoft.com/test/approvalcenterwidget/>
• Flödeswidget: <https://flow.microsoft.com/test/managewidget/>

Nationella inställningar som stöds av widget

Om de initierade nationella inställningarna inte visas används som standard de närmaste nationella inställningar som stöds.

Användning av Power Automate bädda in SDK omfattas av Licensvillkor för Programvara från Microsoft.