Integrace Power Automate s weby a aplikacemiIntegrate Power Automate with websites and apps

Poznámka

Microsoft Flow je nyní Power Automate.Microsoft Flow is now Power Automate. Další informace najdete na tomto blogu.For more information, see this blog.

Tento obsah bude v následujících dnech aktualizován tak, aby reflektoval změnu značky.This content will be updated to reflect the branding change in the coming days.

Zahrňte Power Automate do své aplikace nebo webu pomocí pomůcek Flow a poskytněte tak uživatelům jednoduchý způsob, jak můžou automatizovat své osobní nebo profesionální úkoly.Embed Power Automate into your app or website using flow widgets to give your users a simple way to automate their personal or professional tasks.

Pomůcky Flow jsou prvky iframe v dokumentu hostitele.Flow widgets are iframes located in a host document. Tento dokument odkazuje na stránku v návrháři Power Automate.This document points to a page in the Power Automate designer. Tyto pomůcky integrují určité funkce Power Automate do aplikace třetí strany.These widgets integrate specific Power Automate functionality into the third-party application.

Pomůcky můžou být jednoduché.Widgets can be simple. Třeba pomůcka, která vykreslí seznam šablon bez komunikace mezi hostitelem a prvkem iframe.For example, a widget that renders a list of templates with no communication between the host and iframe. Pomůcky můžou být i složité.Widgets can also be complex. Třeba pomůcka, která zřídí tok ze šablony a pak tok aktivuje prostřednictvím obousměrné komunikace mezi hostitelem a pomůckou.For example, a widget that provisions a flow from a template and then triggers the flow via two-way communication between the host and the widget.

PožadavkyPrerequisites

  • Účet Microsoft neboA Microsoft Account or
  • Pracovní nebo školní účetA work or school account

Použití neověřené pomůckyUse the unauthenticated widget

Pokud chcete použít neověřenou pomůcku šablon, vložte ho přímo do hostitelské aplikace pomocí prvku iframe.To use the unauthenticated templates widget, embed it directly into the host application using an iframe. Nepotřebujete JS SDK ani přístupový token.You don't need the JS SDK or an access token.

Zobrazení šablon pro vaše scénářeShow templates for your scenarios

Nejdřív přidejte tento kód, který na vašem webu zobrazí šablony Power Automate:To start, add this code to show the Power Automate templates on your website:

<iframe src="https://flow.microsoft.com/{locale}/widgets/templates/?q={search term}
&pagesize={number of templates}&destination={destination}&category={category}"></iframe>
ParametrParameter PopisDescription
národní prostředílocale Čtyřpísmenný kód jazyka a oblasti kód pro zobrazení šablony.The four-letter language and region code for the template view. Například en-us představuje americkou angličtinu a de-de němčinu.For example, en-us represents US English, and de-de represents German.
search termsearch term Vyhledávací termín pro šablony, které chcete v zobrazení uvést.The search term for the templates that you want to show in the view. Například vyhledejte SharePoint, když chcete zobrazit šablony pro SharePoint.For example, search SharePoint to show templates for SharePoint.
number of templatesnumber of templates Počet šablon, které chcete zobrazit.The number of templates that you want to show in the view.
cíldestination Stránka, která se otevře, když uživatelé šablonu vyberou.The page that opens when users select the template. Zadáním details můžete zobrazit podrobnosti o šabloně a zadáním new otevřete návrhář Power Automate.Enter details to show the details about the template, or enter new to open the Power Automate designer.
kategoriecategory Vyfiltruje danou kategorii šablony.Filters to the given template category.
parameters.{name}parameters.{name} Další kontext, který chcete toku předat.Additional context to pass into the flow.

Pokud je parametr destination new a uživatelé vyberou šablonu, otevře se návrhář Power Automate.If the destination parameter is new, the Power Automate designer opens when users select a template. Uživatelé pak můžou v návrháři vytvořit tok.Users can then create a flow in the designer. Pokud chcete plnou funkčnost pomůcky, přečtěte si další část.See the next section if you want to have the full experience from the widget.

Předání dalších parametrů šabloně tokuPassing additional parameters to the flow template

Pokud je uživatel na vašem webu nebo v aplikaci v určitém kontextu, můžete chtít tento kontext předat toku.If the user is in a specific context in your website or app, you might want to pass that context to the flow. Například uživatel může otevřít šablonu pro Když je vytvořena položka při pohledu na určitý seznam v SharePoint.For example, a user might open a template for When an item is created while looking at a certain list in SharePoint. Pomocí těchto kroků můžete toku předat ID seznamu jako parametr:Follow these steps to pass in the list ID as a parameter to the flow:

  1. Než šablonu publikujete, definujte v ní požadovaný parametr.Define the parameter in the flow template before you publish it. Parametr má tvar @{parameters('parameter_name')}.A parameter looks like @{parameters('parameter_name')}.
  2. Předejte parametr v řetězci dotazu atributu src značky iframe.Pass the parameter in the query string of the iframe src. Například přidejte &parameters.listName={the name of the list}, pokud máte parametr s názvem listName.For example, add &parameters.listName={the name of the list} if you have a parameter called listName.

Úplná ukázkaFull sample

K zobrazení prvních čtyř šablon SharePoint v němčině a spuštění uživatele s parametrem myCoolList použijte tento kód:To show the top four SharePoint templates in German and to start the user with myCoolList, use this code:

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

Použití ověřených pomůcek FlowUse the authenticated flow widgets

Následující tabulka obsahuje seznam pomůcek Power Automate, které podporují plnou funkčnost v rámci pomůcky pomocí přístupového tokenu k ověřování uživatelů.The following table shows the list of Power Automate widgets that support the full experience within the widget using user authentication access token. K vložení pomůcek a poskytnutí požadovaného přístupového tokenu uživatele je potřeba použít Javascript Software Developer Kit (JS SDK) služby Power Automate.You will need to use Power Automate's JavaScript Software Developer Kit (JS SDK) to embed the widgets and provide the required user access token.

Typ pomůckyWidget type Podporovaná funkceSupported feature
flowsflows Zobrazí seznam toků na kartě pro osobní a sdílené toky.Shows a list of flows in a tab for personal and shared flows. Můžete upravit existující tok nebo vytvořit nový tok ze šablony nebo z prázdné šablony.Edit an existing flow or create a new flow from a template or blank.
flowCreationflowCreation Vytvoří tok z ID šablony poskytnutého hostitelskou aplikací.Creates a flow from a template Id that the host application provides.
runtimeruntime Aktivuje ruční nebo hybridní aktivační tok poskytnutý hostitelskou aplikací.Triggers a manual or hybrid-trigger flow that the host application provides.
approvalCenterapprovalCenter Vloží žádosti o schválení a odeslaná schválení.Embeds approval requests and sent approvals.
šablonytemplates Zobrazí seznam šablon.Shows a list of templates. Uživatel si některou vybere k vytvoření nového toku.The user chooses one to create a new flow.

Pomocí sady Flow SDK s ověřováním můžete umožnit uživatelům vytvářet a spravovat toky přímo z webu nebo aplikace (aniž by museli přejít na Power Automate).Use the authenticated Flow SDK to allow users to create and manage flows directly from your website or app (instead of navigating to Power Automate). K použití sady SDK musí být uživatel přihlášený pomocí svého účtu Microsoft nebo Azure Active Directory.You'll need to sign the user in with their Microsoft Account or Azure Active Directory to use the authenticated SDK.

Poznámka

Při používání pomůcek nejde žádným způsobem skrýt značku Power Automate.There is no way to hide the Power Automate branding when you use widgets.

Architektura pomůckyWidget architecture

Pomůcky Power Automate fungují tak, že se vloží prvek iframe, který službu Power Automate odkáže do hostitelské aplikace.Power Automate widgets work by embedding an iframe that references Power Automate into a host application. Hostitel poskytne přístupový token vyžadovaný pomůckou Power Automate.The host provides the access token that's required by the Power Automate widget. JS SDK Power Automate umožňuje hostitelské aplikaci inicializovat a spravovat životní cyklus pomůcky.Power Automate's JS SDK enables the host application to initialize and manage the widget life cycle.

architektura pomůcky

Podrobnosti o JS SDKJS SDK details

Tým Power Automate poskytuje JS SDK k usnadnění integrace pomůcek Flow v aplikacích třetích stran.The Power Automate team provides the JS SDK to facilitate integrating Flow widgets in third-party applications. JS SDK služby Flow je k dispozici jako veřejný odkaz ve službě Flow a umožňuje hostitelské aplikaci zpracování událostí z pomůcky a interakci s aplikací Flow odesíláním akcí do pomůcky.The Flow JS SDK is available as a public link in the Flow service and lets the host application handle events from the widget and interact with the Flow application by sending actions to the widget. Události a akce pomůcky jsou specifické pro daný typ pomůcky.Widget events and actions are specific to the widget type.

Inicializace pomůckyWidget initialization

Před inicializací pomůcky se do hostitelské aplikace musí přidat referenční informace JS SDK služby Flow.The Flow JS SDK reference needs to be added to the host application before initializing the widget.

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

Vytvořte instanci JS SDK předáním volitelných hodnot hostName (název hostitele) a locale (národní prostředí) v objektu JSON.Create a JS SDK instance by passing optional hostName and locale values in a JSON object.

var sdk = new MsFlowSdk({
    hostName:'https://flow.microsoft.com',
    locale:'en-US'
}); 
NázevName Povinné/volitelnéRequired/Optional PopisDescription
hostName Nepovinní účastníciOptional Název hostitele Power Automate, např. https://flow.microsoft.comPower Automate host name, for example, https://flow.microsoft.com
locale Nepovinní účastníciOptional Klientské národní prostředí pomůcky (v případě nezadání je výchozí hodnota en-Us)Client locale for the widget (defaults to en-Us if not specified)

Jakmile se vytvoří instance JS SDK, můžete pomůcku Power Automate inicializovat a vložit do nadřazeného prvku v hostitelské aplikaci.Once the JS SDK instance is created you can initialize and embed a Power Automate widget in a parent element in the host application. To uděláte přidáním značky HTML div:To do so, add an HTML div:

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

Pak inicializujte pomůcku Power Automate pomocí metody JS SDK renderWidget().Then, initialize the Power Automate widget with the JS SDK renderWidget() method. Nezapomeňte uvést typ pomůcky a odpovídající nastavení.Be sure to provide the widget type and corresponding settings.

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

Tady je ukázka stylu pro kontejner, který můžete upravit tak, aby odpovídal rozměrům hostitelské aplikace.Here's a sample style for the container that you can modify to match with the host application's dimensions.

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

Tohle jsou parametry pro renderWidget():These are the parameters for renderWidget():

ParametrParameter Povinné/volitelnéRequired/Optional PopisDescription
container Povinní účastníciRequired ID prvku DIV na stránce hostitele, kde bude pomůcka vložená.Id of a DIV element on the host page where the widget will be embedded.
environmentId Nepovinní účastníciOptional Pomůcky potřebují ID prostředí. Pokud ID nezadáte, použije se výchozí prostředí.Widgets need an environment Id. If you don't provide an Id, a default environment is used.
flowsSettings Nepovinní účastníciOptional Power Automate objekt nastaveníPower Automate settings object
templateSettings Nepovinní účastníciOptional Objekt nastavení šablonyTemplate settings object
approvalSettings Nepovinní účastníciOptional Objekt nastavení schváleníApproval settings object

Přístupové tokenyAccess tokens

Po spuštění metody JS SDK renderWidget() inicializuje JS SDK prvek iframe, který odkazuje na adresu URL pomůcky Power Automate.After the JS SDK renderWidget() runs, the JS SDK initializes an iframe which points to the Power Automate widget URL. Tato adresa URL obsahuje všechna nastavení v parametrech řetězce dotazu.This URL contains all the settings in the query string parameters. Hostitelská aplikace potřebuje před inicializací pomůcky získat přístupový token Power Automate pro uživatele (token JWT Azure Active Directory s cílovou skupinou https://service.flow.microsoft.com).The host application needs to get a Power Automate access token for the user (Azure Active Directory JWT token with audience https://service.flow.microsoft.com) before it initializes the widget. Pomůcka vyvolá událost GET_ACCESS_TOKEN k vyžádání přístupového tokenu od hostitele.The widget raises a GET_ACCESS_TOKEN event to request an access token from the host. Hostitel musí událost zpracovat a předat token pomůcky:The host needs to handle the event and pass the token to the widget:

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

Hostitelská aplikace zodpovídá za udržování tokenu a jeho předání do pomůcky s platným datem vypršení platnosti, když ji o to pomůcku požádá.The host application is responsible for maintaining the token and passing it with a valid expiry date to the widget when requested. Pokud je pomůcka otevřená delší dobu, měl by hostitel zkontrolovat, jestli nevypršela platnost tokenu, a v případě potřeby token aktualizovat, než ho do pomůcky předá.If the widget is open for longer periods, the host should check if the token is expired and refresh the token if it's needed before passing it to the widget.

Zjištění, jestli je pomůcka připravenaDetecting if the widget is ready

Po úspěšné inicializaci pomůcky vyvolá událost, pomocí které informuje, že je připravený.After successful initialization, the widget raises an event to notify that the widget is ready. Hostitel může naslouchat události WIDGET_READY a spustit libovolný další kód hostitele.The host can listen to the WIDGET_READY event and execute any additional host code.

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

Nastavení pomůckyWidget settings

FlowsSettingsFlowsSettings

FlowsSettings slouží k přizpůsobení funkcí pomůcky Power Automate.FlowsSettings can be used to customize the functionality of the Power Automate widget.

flowsSettings?: {
    createFromBlankTemplateId?: string;
    flowsFilter?: string;sc
    tab?: string;
};
ParametrParameter Povinné/volitelnéRequired/Optional PopisDescription
createFromBlankTemplateId Povinní účastníciRequired Použije identifikátor GUID šablony, když uživatel v pomůcce Flow vybere tlačítko Vytvořit z prázdné.Use the template's GUID when the user selects the Create from blank button on the Flow widget
flowsFilter Nepovinní účastníciOptional Pomůcka Power Automate použije zadaný filtr při výpisu toků.The Power Automate widget applies the provided filter when listing flows. Můžete třeba zobrazit toky, které odkazují na konkrétní web SharePoint.For example, show flows that reference a specific SharePoint site.
flowFilter: "operations/any(operation: operation/sharepoint.site eq 'https://microsoft.sharepoint.com/teams/ProcessSimple' )"
tab Nepovinní účastníciOptional Výchozí aktivní karta, která se má zobrazit v pomůcce Power Automate.Defaults the active tab to show in the Power Automate widget.
Příklad:For example,
tab:'sharedFlows' zobrazí kartu Týmtab:'sharedFlows' displays the Team tab
a tab:'myFlows' zobrazí kartu Moje toky.and tab:'myFlows' Displays the My flows tab.

TemplatesSettingsTemplatesSettings

Platí pro všechny pomůcky, které vám umožní vytvářet toky ze šablony, včetně pomůcek Flows, FlowCreation a Templates.This applies to all widgets that enable you to create flows from a template, including Flows, FlowCreation, and Templates widgets.

templatesSettings?: {
    defaultParams?: any;
    destination?: string;
    pageSize?: number;
    searchTerm?: string;
    templateCategory?: string;
    useServerSideProvisioning?: boolean;
    enableDietDesigner?: boolean;
};
ParametrParameter Povinné/volitelnéRequired/Optional PopisDescription
defaultParams Nepovinní účastníciOptional Parametry doby návrhu, které se mají použít při vytváření toku ze šablony, například:Design time parameters to use when creating a flow from a template, for example:
defaultParams: {'parameters.sharepoint.site': 'https://microsoft.sharepoint.com/teams/ProcessSimple', 'parameters.sharepoint.list': 'b3a5baa8-fe94-44ca-a6f0-270d9f821668' }
destination Nepovinní účastníciOptional Platné hodnoty jsou „new“ (nové) nebo „details“ (detaily).Valid values are 'new' or 'details'. Pokud nastavíte „details“, při vytváření toku ze šablony se zobrazí stránka podrobností.When set to 'details', a detail page is shown when creating a flow from a template.
pageSize Nepovinní účastníciOptional Počet šablon k zobrazení.Number of templates to display. Výchozí velikost = 6Default size = 6
searchTerm Nepovinní účastníciOptional Zobrazí šablony, které odpovídají zadanému hledanému výrazu.Display templates that match the provided search term
templateCategory Nepovinní účastníciOptional Zobrazení šablony v konkrétní kategorii.Display templates in a specific category

ApprovalCenterSettingsApprovalCenterSettings

Platí pro pomůcky ApprovalCenter.Applies to ApprovalCenter widgets.

approvalCenterSettings?: {
   approvalsFilter?: string;
   tab?: string;but
   autoNavigateToDetails?: boolean;
   showSimpleEmptyPage? boolean;
   hideLink?: boolean
};
ParametrParameter Povinné/volitelnéRequired/Optional PopisDescription
hideLink Nepovinní účastníciOptional Pokud nastavíte true, pomůcka skryje přijaté a odeslané odkazy na schválení.When set to true, the widget hides the received and the sent approval links
autoNavigateToDetails Nepovinní účastníciOptional Pokud nastavíte true, pomůcka automaticky otevře podrobnosti o schválení, když existuje jenom jedno schválení.When set to true, the widget automatically opens the approval details when only one approval exists
approvalsFilter Nepovinní účastníciOptional Pomůcka pro schválení při výpisu schválení použije zadaný filtr schválení, třeba:The approval widget will apply the specified approval filter when listing the approvals, for example: The approval widget will apply the specified approval filter when listing the approvals, for example:
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 Nepovinní účastníciOptional Výchozí aktivní karta, která se má zobrazit v pomůcce FlowDefault active tab to show in the Flow widget.
Platné hodnoty: „receivedApprovals“, „sentApprovals“Valid values : 'receivedApprovals', 'sentApprovals'
showSimpleEmptyPage Nepovinní účastníciOptional Zobrazí prázdnou stránku, když nejsou žádná schválení.Shows an empty page when there are no approvals
hideInfoPaneCloseButton Nepovinní účastníciOptional Skryje tlačítko Zavřít informačního podokna (nebo už hostitel tlačítko Zavřít má).Hides the info-pane Close button (or the host already has a Close button)

Události pomůckyWidget events

Pomůcka Power Automate podporuje události, které hostiteli umožňují naslouchat událostem životního cyklu pomůcky.The Power Automate widget supports events that let the host listen to widget life-cycle events. Pomůcka Power Automate podporuje dva typy událostí: události jednosměrných oznámení (třeba Widget_Ready) a události vyvolané z pomůcky k načtení dat z hostitele (Get_Access_Token).The Power Automate widget supports two types of events: one-way notification events (for example, Widget_Ready) and events raised from the widget to fetch data from the host (Get_Access_Token). K naslouchání konkrétním událostem vyvolaným pomůckou musí hostitel používat metodu widget.listen().The host needs to use the widget.listen() method to listen to specific events raised from the widget.

VyužitíUsage

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

Podporované události podle typu pomůckySupported events by widget type

Událost pomůckyWidget event PodrobnostiDetails
WIDGET_READY Pomůcka byla úspěšně načtena.Widget loaded successfully
WIDGET_RENDERED Pomůcka byla načtena a dokončilo se vykreslení uživatelského rozhraní.Widget loaded and UI rendering is complete
GET_ACCESS_TOKEN Žádost pomůcky o přístupový token vložení uživateleWidget request for embed user-access token
GET_STRINGS Umožňuje hostiteli přepsat sadu řetězců uživatelského rozhraní zobrazených v pomůcceAllows host to override a set of UI strings shown in the widget

Pomůcka pro spuštěníRuntime widget

Událost pomůckyWidget event PodrobnostiDetails DataData
RUN_FLOW_STARTED Proběhla aktivace a zahájilo se spuštění toku.Triggered and the flow run was started
RUN_FLOW_COMPLETED Spuštění toku se úspěšně aktivovalo.Flow run triggered successfully
RUN_FLOW_DONE_BUTTON_CLICKED Uživatel vybral tlačítko Hotovo při spuštění toku.User selected Done button on flow run
RUN_FLOW_CANCEL_BUTTON_CLICKED Uživatel vybral tlačítko Zrušit při spuštění toku.User selected Cancel button on flow run
FLOW_CREATION_SUCCEEDED Tok se úspěšně vytvořil.The flow was created successfully { flowUrl: string, flowId: string, fromTemplate: string }
WIDGET_CLOSE Aktivuje se, když by měl hostitel zavřít pomůcku.Fired when the host should close the widget

Pomůcka pro vytvoření tokuFlow Creation widget

Událost pomůckyWidget event PodrobnostiDetails DataData
FLOW_CREATION_FAILED Tok se nepovedlo vytvořit.Flow creation failed
WIDGET_CLOSE Aktivuje se, když by měl hostitel zavřít pomůcku.Fired when host should close the widget
TEMPLATE_LOAD_FAILED Šablonu se nepovedlo načíst.The template failed to load
FLOW_CREATION_SUCCEEDED Tok se úspěšně vytvořil.The flow was created successfully { flowUrl: string, flowId: string,fromTemplate?: string }

Pomůcka pro schváleníApproval widget

Událost pomůckyWidget event PodrobnostiDetails
RECEIVED_APPROVAL_STATUS_CHANGED Změnil se stav přijatého schválení.Received approval status changed
SENT_APPROVAL_STATUS_CHANGED Změnil se stav odeslaného schválení.Sent approval status changed

Událost GET_STRINGS umožňuje přizpůsobit text pro některé prvky uživatelského rozhraní zobrazené v pomůcce.GET_STRINGS event lets you customize text for some of the UI elements shown in the widget. Můžete přizpůsobit tyto řetězce:The following strings can be customized:

Klíč řetězceString key Použití v pomůcceUse in the widget
FLOW_CREATION_CREATE_BUTTON Text zobrazený na tlačítku pro vytvoření toku v pomůcce pro vytvoření toku i v pomůcce pro spuštěníText displayed on the create flow button in both flow creation and runtime widget
FLOW_CREATION_CUSTOM_FLOW_NAME Počáteční hodnota, která se má použít pro název toku v pomůcce pro vytvoření toku.The initial value to use for the flow name in the flow creation widget. Používá se jenom v případě, že je povolené nastavení allowCustomFlowName.Only used when the allowCustomFlowName setting is enabled.
FLOW_CREATION_HEADER Záhlaví, které se má použít při vytváření toku v pomůcce pro vytvoření toku i v pomůcce pro spuštěníHeader to use when creating a flow in both the flow creation and runtime widget
INVOKE_FLOW_HEADER Záhlaví, které se má použít při vyvolání toku v pomůcce pro spuštěníHeader to use when invoking a flow in the runtime widget
INVOKE_FLOW_RUN_FLOW_BUTTON Text zobrazený na tlačítku pro vyvolání nebo spuštění toku v pomůcce pro spuštěníText displayed on the button used to invoke/run a flow in the runtime widget

PříkladExample

Volejte widgetDoneCallback, kterým se předá objekt JSON s páry klíč-hodnota klíče a textu řetězce k přepsání výchozí hodnoty.Call widgetDoneCallback passing a JSON object with key-value pairs of string key and text to override the default value.

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

Akce pomůckyWidget actions

Hostitel používá akce pomůcky k odeslání určité akce nebo zprávy do pomůcky .The host uses widget actions to send a specific action or message to the widget. JS SDK pomůcky poskytuje metodu notify() k odeslání zprávy nebo datové části JSON do pomůcky.Widget JS SDK provides the notify() method to send a message or a JSON payload to the widget. Každá akce pomůcky podporuje konkrétní podpis datové části.Each widget action supports a specific payload signature.

VyužitíUsage

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

PříkladExample

Vyvolejte tok odesláním následujícího příkazu do pomůcky pro spuštění.Invoke a flow by sending the following command to a runtime widget

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

Pomůcka pro spuštěníRuntime widget

Akce pomůckyWidget action PodrobnostiDetails Rozhraní parametruParameter interface
triggerFlow Aktivuje spuštění toku.Triggers a flow run { flowName: string, implicitData?: string }
triggerFlowByTemplate Aktivuje spuštění toku pomocí šablony.Triggers a flow run by template { templateId: string, implicitData?: string, designTimeParameters?: Record<string, any> }
getTriggerSchema Získá schéma aktivační události pro tok.Gets trigger schema for a flow { flowName: string, }
closeWidget Zruší všechny čekající aktivity a vyvolává událost WIDGET_CLOSE.Cancels any pending activity and raises a WIDGET_CLOSE event

Pomůcka pro vytvoření tokuFlow Creation widget

Akce pomůckyWidget action PodrobnostiDetails Rozhraní parametruParameter interface
createFlowFromTemplate Vytvoří tok pro vybranou šablonu.Creates a flow for the selected template { templateName: string, designTimeParameters?: Record<string, any> }
createFlowFromTemplateDefinition Vytvoří tok pro definici vybrané šablony.Creates a flow for the selected template definition { templateDefinition: string }
closeWidget Zruší všechny čekající aktivity a vyvolává událost WIDGET_CLOSE.Cancels any pending activity and raises a WIDGET_CLOSE event

Pomůcka pro schváleníApproval widget

Akce pomůckyWidget action PodrobnostiDetails Rozhraní parametruParameter interface
closeInfoPane Zavře informační podokno zobrazující podrobnosti o schválení.Closes the info-pane displaying approval details Nelze použítN/A

Konfigurace klientské aplikaceConfiguring your client application

Je potřeba nakonfigurovat klientskou aplikaci pomocí oborů služby Flow (delegovaných oprávnění).You will need to configure your client application with Flow Service Scopes (Delegated Permissions). Pokud aplikace Azure Active Directory (AAD) použitá pro integraci pomůcky autorizační tok „udělení kódu“, musí být aplikace AAD předem nakonfigurovaná pomocí delegovaných oprávnění, která Power Automate podporuje.If the Azure Active Directory (AAD) app used for the widget integration uses a 'code grant' authorization flow, the AAD app needs to be preconfigured with delegated permissions that are supported by Power Automate. To poskytuje delegovaná oprávnění, která aplikaci umožňují:This provides delegated permissions that let the application:

  • Spravovat schváleníManage approvals
  • Číst schváleníRead approvals
  • Číst aktivityRead activities
  • Spravovat tokyManage flows
  • Číst tokyRead flows

Podle tohoto postupu vyberte jedno nebo více delegovaných oprávnění:Follow these steps to select one or more delegated permissions:

  1. Přejít na https://portal.azure.comGo to https://portal.azure.com
  2. Vyberte možnost Azure Active Directory.Select Azure Active Directory.
  3. Pod Spravovat vyberte Registrace aplikací.Select App registrations under Manage.
  4. Zadejte aplikaci třetí strany, která se má nakonfigurovat pro obory služby Flow.Enter the third-party application to be configured for Flow service scopes.
  5. Vyberte Nastavení.Select Settings. architektura pomůckywidget architecture
  6. Vyberte Požadována oprávnění pod Přístup přes rozhraní API/Select Required permissions under API access/
  7. Vyberte Přidat.Select Add.
  8. Zvolte Vyberte rozhraní API.Choose Select an API. architektura pomůckywidget architecture
  9. Vyhledejte a vyberte službu Power Automate.Search for Power Automate service and select it. Poznámka: Služba Power Automate se zobrazí, jen když váš tenant má aspoň jednoho uživatele AAD přihlášeného k portálu Flow (https://flow.microsoft.com)Note: Before you can see Power Automate service, your tenant needs to have at least one AAD user signed into the Flow portal (https://flow.microsoft.com)
  10. Zvolte požadované obory Flow pro vaši aplikaci a pak vyberte Uložit.Choose the required Flow scopes for your application then select Save. architektura pomůckywidget architecture

Aplikace teď získají token služby Flow, který obsahuje delegovaná oprávnění v oboru 'scp' v tokenu JWT.Your application will now get a Flow Service token that contains delegated permissions in the 'scp' claim in the JWT token.

Ukázková aplikace pro vkládání pomůcek FlowSample application embedding flow widgets

V části Prostředky je k dispozici ukázková jednostránková aplikace v JavaScriptu, abyste mohli experimentovat s vkládáním pomůcek Flow na stránce hostitele.A sample JavaScript Single Page Application (SPA) is provided in the resources section so you can experiment with embedding flow widgets in a host page. Použití ukázkové aplikace vyžaduje registraci aplikace AAD s povoleným tokem implicitního udělení oprávnění.Using the sample application requires registering an AAD application with implicit grant flow enabled.

Registrace aplikace AADRegistering an AAD app

  1. Přihlaste se k portálu Azure.Sign in to the Azure portal.
  2. V levém navigačním podokně vyberte Azure Active Directory a pak vyberte Registrace aplikací (Preview) > Nová registraceIn the left navigation pane, select Azure Active Directory, then select App registrations (Preview) > New registration.
  3. Když se zobrazí stránka Zaregistrovat aplikaci, zadejte název pro vaši aplikaci.When the Register an application page appears, enter a name for your application.
  4. Pod Podporovanými typy účtů vyberte Účty v libovolném organizačním adresáři.Under Supported account types, select Accounts in any organizational directory.
  5. V části Identifikátor URI pro přesměrování vyberte webovou platformu a nastavte hodnotu na adresu URL aplikace' založenou na vašem webovém serveru.Under the Redirect URL section, select the web platform and set the value to the application's URL based on your web server. Tuto hodnotu konfigurujte jako http://localhost:30662/ ke spuštění ukázkové aplikace.Configure this value to http://localhost:30662/ to run the sample app.
  6. Vyberte Zaregistrovat.Select Register.
  7. Na stránce aplikace Přehled si poznamenejte hodnotu ID aplikace (klienta).On the app Overview page, note the application (client) ID value.
  8. Ukázka vyžaduje povolený tok implicitního udělení oprávnění.The sample requires implicit grant flow to be enabled. V levém navigačním podokně zaregistrované aplikace vyberte Ověřování.In the left navigation pane of the registered application, select Authentication.
  9. V Upřesnit nastavení v části Implicitní udělení oprávnění zaškrtněte políčka Tokeny ID a Přístupové tokeny.In Advanced settings, under Implicit grant, enable both ID tokens and Access tokens checkboxes. Tokeny ID a přístupové tokeny jsou povinné, protože tato aplikace potřebuje přihlásit uživatele a volat rozhraní API Flow.ID tokens and access tokens are required since this app needs to sign in users and call Flow API.
  10. Zvolte Uložit.Select Save.

Spuštění ukázkyRunning the sample

  1. Stáhněte si ukázku a zkopírujte ji do místní složky na vašem zařízení.Download the sample and copy it to a local folder on your device.
  2. Otevřete soubor index.html ve složce FlowSDKSample a upravte applicationConfig tak, že clientID aktualizujete na ID aplikace, kterou jste předtím zaregistrovali.Open the index.html file under the FlowSDKSample folder and modify the applicationConfig to update the clientID to the application ID you registered earlier. architektura pomůckywidget architecture
  3. Ukázková aplikace je nakonfigurovaná tak, aby používala obory Flow Flows.Read.All a Flow.Manage.All.The sample app is configured to use Flow scopes Flows.Read.All and Flow.Manage.All. Další obory můžete konfigurovat aktualizováním vlastnosti flowScopes v objektu applicationConfig.You can configure additional scopes by updating the flowScopes property in applicationConfig object.
  4. Spuštěním těchto příkazů nainstalujte závislost a spusťte ukázkovou aplikaci:Run these commands to install the dependency and run the sample app:

    > npm install > node server.js> npm install > node server.js

  5. Otevřete prohlížeč a zadejte http://localhost:30662Open the browser and then enter http://localhost:30662
  6. Pomocí tlačítka Přihlásit se proveďte ověření v AAD a získejte přístupový token toku.Select the Sign in button to authenticate to AAD and acquire a flow access token.
  7. Textové pole Access Token (Přístupový token) obsahuje přístupový token.The Access Token text box contains the access token. architektura pomůckywidget architecture
  8. Pomocí Load Flows widget (Načíst pomůcku toků) nebo Load Templates widget (Načíst pomůcku šablon) vložte odpovídající pomůcky.Select Load Flows widget or Load Templates widget to embed the corresponding widgets. architektura pomůckywidget architecture

Ukázkovou aplikaci můžete stáhnout zde.Sample application download link.

ProstředkyResources

Testovací stránky pomůckyWidget test pages

Přečtěte si další informace o integraci a nastavení pomůcek:Find out more about widget integration and settings:

Podporovaná národní prostředí pomůcekSupported widget locales

Pokud není inicializované národní prostředí uvedené, Flow ve výchozím nastavení použije nejbližší podporované národní prostředí.If the initialized locale isn't listed, Flow will default to the closest supported locale.

Národní prostředíLocale LanguageLanguage
bg-bgbg-bg Bulharština (Bulharsko)Bulgarian (Bulgaria)
ca-esca-es Katalánština (Katalánsko)Catalan (Catalan)
cs-czcs-cz Čeština (Česká republika)Czech (Czech Republic)
da-dkda-dk Dánština (Dánsko)Danish (Denmark)
de-dede-de Němčina (Německo)German (Germany)
el-grel-gr Řečtina (Řecko)Greek (Greece)
en-Usen-Us Angličtina (USA)English (United States)
es-eses-es Španělština (kastilština)Spanish (Castilian)
et-eeet-ee Estonština (Estonsko)Estonian (Estonia)
eu-eseu-es Baskičtina (baskičtina)Basque (Basque)
fi-fifi-fi Finština (Finsko)Finnish (Finland)
fr-frfr-fr Francouzština (Francie)French (France)
gl-esgl-es Galicijština (Galicie)Galician (Galician)
hi-HUhi-HU Maďarština (Maďarsko)Hungarian (Hungary)
hi-inhi-in Hindština (Indie)Hindi (India)
hr-hrhr-hr Chorvatština (Chorvatsko)Croatian (Croatia)
id-Idid-Id Indonéština (Indonésie)Indonesian (Indonesia)
it-Itit-It Italština (Itálie)Italian (Italy)
jp-Jpjp-Jp Japonština (Japonsko)Japanese (Japan)
kk-kzkk-kz Kazachština (Kazachstán)Kazakh (Kazakhstan)
ko-krko-kr Korejština (Korea)Korean (Korea)
lt-LTlt-LT Litevština (Litva)Lithuanian (Lithuania)
lv-lvlv-lv Lotyština (Lotyšsko)Latvian (Latvia)
ms-myms-my Malajština (Malajsie)Malay (Malaysia)
nb-nonb-no Norština (Bokmål)Norwegian (Bokmål)
nl-nlnl-nl Holandština (Nizozemsko)Dutch (Netherlands)
pl-plpl-pl Polština (Polsko)Polish (Poland)
pt-brpt-br Portugalština (Brazílie)Portuguese (Brazil)
pt-ptpt-pt Portugalština (Portugalsko)Portuguese (Portugal)
ro-roro-ro Rumunština (Rumunsko)Romanian (Romania)
ru-ruru-ru Ruština (Rusko)Russian (Russia)
sk-sksk-sk Slovenština (Slovensko)Slovak (Slovakia)
sl-sisl-si Slovinština (Slovinsko)Slovenian (Slovenia)
sr-cyrl-rssr-cyrl-rs Srbština (cyrilice, Srbsko)Serbian (Cyrillic, Serbia)
sr-latn-rssr-latn-rs Srbština (latinka, Srbsko)Serbian (Latin, Serbia)
sv-sesv-se Švédština (Švédsko)Swedish (Sweden)
th-thth-th Thajština (Thajsko)Thai (Thailand)
tr-trtr-tr Turečtina (Turecko)Turkish (Turkey)
uk-uauk-ua Ukrajinština (Ukrajina)Ukrainian (Ukraine)
vi-vnvi-vn Vietnamština (Vietnam)Vietnamese (Viet Nam)