Å integrere Power Automate med nettsteder og apper

Bygg inn Power Automate i appen eller på nettstedet ved bruk av flytkontrollprogrammer for å gi brukerne en enkel måte å automatisere private eller jobbrelaterte oppgaver på.

Flytkontrollprogrammer er iframes som befinner seg i et vertsdokument. Dette dokumentet peker til en side i utformingsprogrammet for Power Automate. Disse kontrollprogrammene integrerer spesifikk Power Automate-funksjonalitet i tredjepartsprogrammet.

Kontrollprogrammer kan være enkle. Et kontrollprogram som for eksempel gjengir en liste over maler uten kommunikasjon mellom verten og iframe. Kontrollprogrammer kan også være omfattende. Et kontrollprogram som for eksempel klargjør en skyflyt fra en mal, og deretter utløser flyten via toveiskommunikasjon mellom verten og kontrollprogrammet.

Forutsetninger

• En Microsoft-konto eller
• En jobb- eller skolekonto

Bruk det ikke-godkjente kontrollprogrammet

Hvis du vil bruke kontrollprogrammet for uautoriserte maler, kan du bygge det direkte inn i vertsapplikasjonen ved hjelp av en iframe. Du trenger ikke JS SDK eller et tilgangstoken.

Vis maler for scenarioene dine

Legg til denne koden for å vise Power Automate-malene direkte på nettstedet:

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

Hvis målparameteren er new, åpnes utformingsprogrammet for Power Automate når brukere velger en mal. Brukere kan deretter opprette en skyflyt i utformingsprogrammet. Se neste del for å få en gjennomgang av hvordan du bruker kontrollprogrammet.

Send tilleggsparametere til flytmalen

Hvis brukeren er i en bestemt kontekst på nettstedet eller i appen, må du kanskje sende den konteksten til flyten. En bruker kan for eksempel åpne en mal for når et element opprettes, ved å se på en bestemt liste i SharePoint. Følg disse trinnene for å sende liste-ID-en som en parameter til flyten:

1. Definer parameteren i flytmalen før du publiserer den. En paramenter ser ut som @{parameters('parameter_name')}.
2. Send parameteren i spørringsstrengen til iframe src. Du kan for eksempel legge til &parameters.listName={the name of the list} hvis parameteren kalles listName.

Et fullstendig eksempel

Hvis du vil vise de fire beste SharePoint-malene på tysk og starte å bruke myCoolList, bruker du denne koden:

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

Bruk de godkjente flytkontrollprogrammene

Tabellen nedenfor viser listen over Power Automate-kontrollprogrammer som støtter full bruk av kontrollprogrammet ved bruk av brukergodkjente tilgangstoken. Du må bruke Power Automates Javascript Software Developer Kit (JS SDK) til å bygge inn kontrollprogrammer og gi brukeren påkrevd tilgangstoken.

Bruk den godkjente flyt-SDK-en slik at brukere kan opprette og administrere flyter direkte fra nettstedet eller appen (i stedet for å gå til Power Automate). Du må logge på brukeren med Microsoft-kontoen eller Azure Active Directory for å bruke det godkjente SDK-et.

Kontrollprogramarkitektur

Power Automate-kontrollprogrammer fungerer ved å bygge inn en iframe som refererer til Power Automate, i et vertsprogram. Verten gjør tilgjengelig tilgangstokenet som kreves av Power Automate-kontrollprogrammet. Med Power Automates JS SDK kan vertsprogrammet initialisere og administrere livssyklusen til kontrollprogrammet.

Detaljer for JS SDK

Power Automate-teamet gjør tilgjengelig JS SDK-en for å støtte integrering av Flow-kontrollprogrammer i tredjepartsprogrammer. JS SDK-en for Flow er tilgjengelig som en offentlig kobling i Flow-tjenesten. Ved bruk av denne kan vertsprogrammet håndtere hendelser fra kontrollprogrammet og samhandle med Flow-programmet ved å sende handlinger til kontrollprogrammet. Kontrollprogramhendelser og -handlinger er spesifikke for kontrollprogramtypen.

Kontrollprograminitialisering

Referansen til JS SDK-en for Flow må legges til i vertsprogrammet før kontrollprogrammet initialiseres.

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

Opprett en JS SDK-forekomst ved å sende valgfrie hostName-verdier og lokale verdier i et JSON-objekt.

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

Når JS SDK-forekomsten er oppretter, kan du initialisere og bygge inn et Power Automate-kontrollprogram i et overordnet element i vertsprogrammet. Dette gjør du ved å legge til et HTML-div:

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

Deretter kan du initialisere kontrollprogrammet for Power Automate med JS SDK renderWidget()-metoden. Sørg for at du oppgir kontrollprogramtype og tilsvarende innstillinger.

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

Her ser du en eksempelstil for beholderen som du kan endre, slik at den samsvarer med dimensjonene til vertsprogrammet.

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

Dette er parametrene for renderWidget():

Tilgangstokener

Etter at JS SDK-et renderWidget() kjøres, initialiserer JS SDK-et en iframe som peker til nettadressen for Power Automate-kontrollprogrammet. Denne nettadressen inneholder alle innstillingene i parametrene til spørringsstrengen. Verstprogrammet må få et Power Automate-tilgangstoken for brukeren (Azure Active Directory JWT-token med publikum https://service.flow.microsoft.com) før det initialiserer kontrollprogrammet. Kontrollprogrammet starter en GET_ACCESS_TOKEN-hendelse for å be om et tilgangstoken fra verten. Verten må håndtere hendelsen og sende tokenet til kontrollprogrammet.

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

Vertsprogrammet er ansvarlig for å opprettholde tokenet og sende det med en gyldig utløpsdato til kontrollprogrammet ved forespørsel. Hvis kontrollprogrammet er åpent for lengre perioder, bør verten kontrollere om tokenet er utløpt og oppdatere tokenet hvis det er behov for det, før det sendes til kontrollprogrammet.

Registrer om kontrollprogrammet er klart

Etter en vellykket initialisering starter kontrollprogrammet en hendelse for å varsle at kontrollprogrammet er klart. Verten kan lytte til WIDGET_READY-hendelsen og utføre en ekstra vertskode.

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

Innstillinger for kontrollprogram

FlowsSettings

FlowsSettings kan brukes til å tilpasse funksjonaliteten til Power Automate-kontrollprogrammet.

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

TemplatesSettings

Dette gjelder for alle kontrollprogrammer som lar deg opprette flyter fra en mal, inkludert Flyter-, FlowCreation- og Maler-kontrollprogrammene.

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

ApprovalCenterSettings

Gjelder for ApprovalCenter-kontrollprogrammet.

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

Kontrollprogramhendelser

Power Automate-kontrollprogrammet støtter hendelser som lar verten lytte til livssyklushendelser for kontrollprogrammet. Power Automate-kontrollprogrammet støtter to typer hendelser: enveis varslingshendelser (for eksempel, Widget_Ready) og hendelser som starter fra kontrollprogrammet for å hente data fra verten (Get_Access_Token). Verten må bruke widget.listen()-metoden til å lytte til bestemte hendelser som starter fra kontrollprogrammet.

Bruk

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

Støttede hendelser etter kontrollprogramtype

Kontrollprogram for kjøretid

Kontrollprogram for oppretting av flyt

Kontrollprogram for godkjenning

Med GET_STRINGS-hendelser kan du tilpasse tekst for noen av UI-elementene som vises i kontrollprogrammet. De følgende strengene kan tilpasses:

Eksempel

Kall widgetDoneCallback som sender et JSON-objekt med nøkkelverdipar av strengnøkkel og tekst som skal overstyre standardverdien.

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

Kontrollprogramhandlinger

Verten bruker kontrollprogramhandlinger til å sende en bestemt handling eller melding til kontrollprogrammet. Kontrollprogrammet JS SDK inneholder notify()-metoden for å sende en melding eller en JSON-nyttelast til kontrollprogrammet. Hver kontrollprogramhandling støtter en bestemt nyttelastsignatur.

Bruk

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

Eksempel

Starte en skyflyt ved å sende følgende kommando til et kontrollprogram for kjøretid

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

Kontrollprogram for kjøretid

Kontrollprogram for oppretting av flyt

Kontrollprogram for godkjenning

Konfigurer klientprogrammet

Du må konfigurere klientprogrammet med Flow-tjenesteområde (delegerte tillatelser). Hvis Azure Active Directory-appen (ADD) som brukes for kontrollprogramintegreringen bruker kodetilordning-godkjenningsflyt, må ADD-appen forhåndskonfigureres med delegerte tillatelser som støttes av Power Automate. Dette gir delegerte tillatelser som lar programmet:

• behandle godkjenninger
• lese godkjenninger
• lese aktiviteter
• administrere flyter
• lese flyter

Følg denne fremgangsmåten for å velge én eller flere delegerte tillatelser:

1. Gå til https://portal.azure.com
2. Velg Azure Active Directory.
3. Velg App-registreringer under Behandle.
4. Angi tredjepartsprogrammet som skal konfigureres for Flow-tjenesteområder.
5. Velg Innstillinger.
6. Velg Nødvendige tillatelser under API-tilgang/
7. Velg Legg til.
8. Velg Velg en API.
9. Søk etter Power Automate-tjeneste, og velg den. Obs! Før du kan se Power Automate-tjenesten, må minst én AAD-bruker være pålogget Flow-portalen i leieren (https://flow.microsoft.com)
10. Velg de nødvendige Flow-områdene for programmet, og velg Lagre.

Programmet får nå et token for Flow-tjenesten som inneholder delegerte tillatelser i 'SCP'-kravet i JWT-tokenet.

Eksempelprogram for å bygge inn flytkontrollprogrammer

Et eksempel på et JavaScript Single Page Application (SPA) er angitt i ressursdelen, slik at du kan eksperimentere med innebygging av flytkontrollprogrammer på en vertsside. Hvis du ønsker å bruke et eksempelprogram, må du registrere et AAD-program som har implisitt tillatelsesflyt aktivert.

Registrer en AAD-app

1. Logg på Azure-portalen.
2. Velg Azure Active Directory i den venstre navigasjonsruten, deretter velger du Appregistreringer (forhåndsversjon) > Ny registrering.
3. Når Registrer et program-siden vises, oppgir du et navn for programmet.
4. Velg Kontoer under Støttede kontotyper i en hvilken som helst organisasjonsmessig katalog.
5. Velg nettplattformen under URL for omdirigering, og angi verdien til programmets' nettadresse basert på nettserveren din. Konfigurer denne verdien til http://localhost:30662/ for å kjøre eksempelappen.
6. Velg Registrer.
7. Legg merke til ID-verdien til programmet (klienten) på Oversikt-siden i appen.
8. Eksemplet krever at implisitt tillatelsesflyt er aktivert. Velg Godkjenning i den venstre navigasjonsruten i det registrerte programmet.
9. Merk av for både ID-tokener og Tilgangstokener i Avanserte innstillinger under Implisitt tillatelse. ID-tokener og tilgangstokener er nødvendig fordi appen må logge på brukere og påkalle Flow-API-et.
10. Velg Lagre.

Kjører eksemplet

1. Last ned eksemplet og kopier det til en lokal mappe på enheten din.
2. Åpne filen index.html under FlowSDKSample-mappen, og endre applicationConfig for å oppdatere clientID til program-ID-en du registrerte tidligere.
3. Eksempelappen er konfigurert slik at den bruker Flow-områdene Flows.Read.All og Flow.Manage.All. Du kan konfigurere ytterligere områder ved å oppdatere flowScopes-egenskapen i applicationConfig-objektet.
4. Kjør disse kommandoene for å installere avhengigheten, og kjør eksempelappen:

   > npm install > node server.js

5. Åpne nettleseren og angi deretter http://localhost:30662
6. Velg Logg på-knappen for å godkjenne til AAD og kreve et skyflyttilgangstoken.
7. Tilgangstoken-tekstboksen inneholder tilgangstokenet.
8. Velg Last Flyter-kontrollprogrammet eller Last Maler-kontrollprogrammet for å bygge inn tilsvarende kontrollprogrammer.

Nedlastingskobling til eksempelprogram.

Ressurser

Testsider for kontrollprogram

Finn ut mer om kontrollprogramintegrering og -innstillinger:

• Maler-kontrollprogram: <https://flow.microsoft.com/test/templateswidget/>
• FlowCreation-kontrollprogram: <https://flow.microsoft.com/test/flowcreationwidget/>
• Kontrollprogram for kjøretid: <https://flow.microsoft.com/test/runtimewidget/>
• Godkjenningssenter-kontrollprogram: <https://flow.microsoft.com/test/approvalcenterwidget/>
• Flyter-kontrollprogram: <https://flow.microsoft.com/test/managewidget/>

Støttede nasjonale innstillinger for kontrollprogram

Hvis den initialiserte nasjonale innstillingen ikke er oppført, bruker Flow den nærmeste nasjonale innstillingen som standard.

Bruk av Power Automate Embed SDK dekkes av lisensvilkårene for Microsoft-programvare.