Integrar o Power Automate a sites e aplicativosIntegrate Power Automate with websites and apps

Observação

O Microsoft Flow agora é o Power Automate.Microsoft Flow is now Power Automate. Para obter informações, confira este blog.For more information, see this blog.

Este conteúdo será atualizado para refletir a alteração de identidade visual nos próximos dias.This content will be updated to reflect the branding change in the coming days.

Insira o Power Automate em seu aplicativo ou site usando widgets de fluxo para oferecer aos seus usuários uma maneira simples de automatizar suas tarefas pessoais ou profissionais.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.

Os widgets de fluxo são iframes localizados em um documento de host.Flow widgets are iframes located in a host document. Este documento aponta para uma página no designer do Power Automate.This document points to a page in the Power Automate designer. Esses widgets integram a funcionalidade específica do Power Automate no aplicativo de terceiros.These widgets integrate specific Power Automate functionality into the third-party application.

Os widgets podem ser simples.Widgets can be simple. Por exemplo, um widget que renderiza uma lista de modelos sem nenhuma comunicação entre o host e o iframe.For example, a widget that renders a list of templates with no communication between the host and iframe. Os widgets também podem ser complexos.Widgets can also be complex. Por exemplo, um widget que provisiona um fluxo de um modelo e, em seguida, dispara o fluxo por meio de uma comunicação bidirecional entre o host e o widget.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.

Pré-requisitosPrerequisites

  • Uma Conta Microsoft ouA Microsoft Account or
  • Uma conta corporativa ou de estudanteA work or school account

Usar o widget não autenticadoUse the unauthenticated widget

Para usar o widget de modelos não autenticados, insira-o diretamente ao aplicativo host usando um iframe.To use the unauthenticated templates widget, embed it directly into the host application using an iframe. Você não precisa do SDK (Software Development Kit) do JS (JavaScript) nem de um token de acesso.You don't need the JS SDK or an access token.

Mostrar modelos de cenáriosShow templates for your scenarios

Para iniciar, adicione este código para mostrar os modelos do Power Automate em seu site: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>
ParâmetroParameter DescriçãoDescription
localidadelocale O código de região e o idioma de quatro letras para o modo de exibição do modelo.The four-letter language and region code for the template view. Por exemplo, en-us representa inglês americano e de-de representa o alemão.For example, en-us represents US English, and de-de represents German.
termo de pesquisasearch term O termo de pesquisa para os modelos que você quer mostrar na exibição.The search term for the templates that you want to show in the view. Por exemplo, pesquise por SharePoint para mostrar modelos do SharePoint.For example, search SharePoint to show templates for SharePoint.
número de modelosnumber of templates O número de modelos que você quer mostrar na exibição.The number of templates that you want to show in the view.
destinodestination A página que é aberta quando os usuários selecionam o modelo.The page that opens when users select the template. Insira details para mostrar os detalhes sobre o modelo ou insira new para abrir o designer do Power Automate.Enter details to show the details about the template, or enter new to open the Power Automate designer.
categoriacategory Filtros para a categoria de modelo fornecida.Filters to the given template category.
parameters.{name}parameters.{name} Contexto adicional para passar para o fluxo.Additional context to pass into the flow.

Se o parâmetro de destino for new, o designer do Power Automate será aberto quando os usuários selecionarem um modelo.If the destination parameter is new, the Power Automate designer opens when users select a template. Os usuários podem criar um fluxo no designer.Users can then create a flow in the designer. Confira a próxima seção se desejar ter a experiência completa do widget.See the next section if you want to have the full experience from the widget.

Passando parâmetros adicionais para o modelo de fluxoPassing additional parameters to the flow template

Se o usuário estiver em um contexto específico em seu site ou aplicativo, passe esse contexto para o fluxo.If the user is in a specific context in your website or app, you might want to pass that context to the flow. Por exemplo, um usuário pode abrir um modelo para Quando um item é criado enquanto olha para uma certa lista em SharePoint.For example, a user might open a template for When an item is created while looking at a certain list in SharePoint. Siga estas etapas para passar a ID da lista como um parâmetro ao fluxo:Follow these steps to pass in the list ID as a parameter to the flow:

  1. Defina o parâmetro no modelo de fluxo antes de publicá-lo.Define the parameter in the flow template before you publish it. Um parâmetro tem aparência @{parameters('parameter_name')}.A parameter looks like @{parameters('parameter_name')}.
  2. Passe o parâmetro na cadeia de consulta do atributo src do iframe.Pass the parameter in the query string of the iframe src. Por exemplo, adicione &parameters.listName={the name of the list} se você tiver um parâmetro chamado listName.For example, add &parameters.listName={the name of the list} if you have a parameter called listName.

Exemplo completoFull sample

Para mostrar os quatro melhores modelos do SharePoint em alemão e iniciar o usuário com myCoolList, use este código: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>

Usar os widgets de fluxo autenticadosUse the authenticated flow widgets

A tabela a seguir mostra a lista de widgets do Power Automate compatíveis com a experiência completa dentro do widget que usa o token de acesso de autenticação do usuário.The following table shows the list of Power Automate widgets that support the full experience within the widget using user authentication access token. Será necessário usar o SDK do JS (Kit do Desenvolvedor de Software do Javascript) do Power Automate para inserir os widgets e fornecer o token de acesso de usuário necessário.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.

Tipo de widgetWidget type Recurso com suporteSupported feature
fluxosflows Mostra uma lista de fluxos em uma guia para fluxos pessoais e compartilhados.Shows a list of flows in a tab for personal and shared flows. Edite um fluxo existente ou crie um fluxo com base em um modelo ou em branco.Edit an existing flow or create a new flow from a template or blank.
flowCreationflowCreation Cria um fluxo com base em uma ID de modelo fornecida pelo aplicativo host.Creates a flow from a template Id that the host application provides.
runtimeruntime Dispara um fluxo de gatilho híbrido ou manual fornecido pelo aplicativo host.Triggers a manual or hybrid-trigger flow that the host application provides.
approvalCenterapprovalCenter Insere solicitações de aprovação e aprovações enviadas.Embeds approval requests and sent approvals.
modelostemplates Mostra uma lista de modelos.Shows a list of templates. O usuário escolhe uma para criar um novo fluxo.The user chooses one to create a new flow.

Use o SDK do Fluxo autenticado para permitir que os usuários criem e gerenciem fluxos diretamente do seu site ou do aplicativo (em vez de navegar até o 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). Será necessário conectar o usuário com sua Conta Microsoft ou com o Azure Active Directory para usar o SDK autenticado.You'll need to sign the user in with their Microsoft Account or Azure Active Directory to use the authenticated SDK.

Observação

Não há como ocultar a marca do Power Automate ao usar widgets.There is no way to hide the Power Automate branding when you use widgets.

Arquitetura do widgetWidget architecture

Os widgets do Power Automate funcionam por meio da inserção de um iframe que referencia o Power Automate em um aplicativo host.Power Automate widgets work by embedding an iframe that references Power Automate into a host application. O host fornece o token de acesso exigido pelo widget do Power Automate.The host provides the access token that's required by the Power Automate widget. O SDK do JD do Power Automate permite que o aplicativo host inicialize e gerencie o ciclo de vida do widget.Power Automate's JS SDK enables the host application to initialize and manage the widget life cycle.

arquitetura do widget

Detalhes do SDK do JSJS SDK details

A equipe do Power Automate fornece o SDK do JS para facilitar a integração de widgets do Flow em aplicativos de terceiros.The Power Automate team provides the JS SDK to facilitate integrating Flow widgets in third-party applications. O SDK do JS de fluxo está disponível como um link público no serviço de fluxo e permite que o aplicativo host processe eventos do widget e interaja com o aplicativo de fluxo enviando ações para o widget.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. Eventos e ações do widget são específicos para o tipo de widget.Widget events and actions are specific to the widget type.

Inicialização do widgetWidget initialization

A referência do SDK do JS do Fluxo precisa ser adicionada ao aplicativo host antes de inicializar o widget.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>

Crie uma instância de SDK do JS passando o hostName opcional e os valores de localidade em um objeto 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'
}); 
NomeName Obrigatório/OpcionalRequired/Optional DescriçãoDescription
hostName OpcionalOptional Nome do host do Power Automate, por exemplo, https://flow.microsoft.comPower Automate host name, for example, https://flow.microsoft.com
locale OpcionalOptional Localidade do cliente para o widget (o padrão é en-Us se não especificado)Client locale for the widget (defaults to en-Us if not specified)

Após a criação da instância do SDK do JS, será possível inicializar e inserir um widget do Power Automate em um elemento pai no aplicativo host.Once the JS SDK instance is created you can initialize and embed a Power Automate widget in a parent element in the host application. Para fazer isso, adicione um div HTML:To do so, add an HTML div:

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

Em seguida, inicialize o widget do Power Automate com o método renderWidget() do SDK do JS .Then, initialize the Power Automate widget with the JS SDK renderWidget() method. Forneça o tipo de widget e as configurações correspondentes.Be sure to provide the widget type and corresponding settings.

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

Veja um estilo de exemplo para o contêiner que você pode modificar para corresponder às dimensões do aplicativo host.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>

Estes são os parâmetros para renderWidget():These are the parameters for renderWidget():

ParâmetroParameter Obrigatório/OpcionalRequired/Optional DescriçãoDescription
container ObrigatóriaRequired ID de um elemento DIV na página do host em que o widget será inserido.Id of a DIV element on the host page where the widget will be embedded.
environmentId OpcionalOptional Os widgets precisam de um ID do ambiente. Se você não fornecer um ID, um ambiente padrão será usado.Widgets need an environment Id. If you don't provide an Id, a default environment is used.
flowsSettings OpcionalOptional Objeto de configurações do Power AutomatePower Automate settings object
templateSettings OpcionalOptional Objeto de configurações do modeloTemplate settings object
approvalSettings OpcionalOptional Objeto de configurações de aprovaçãoApproval settings object

Tokens de acessoAccess tokens

Após a execução do renderWidget() do SDK do JS, o SDK do JS inicializará um iframe que aponta para a URL do widget do Power Automate.After the JS SDK renderWidget() runs, the JS SDK initializes an iframe which points to the Power Automate widget URL. Essa URL contém todas as configurações nos parâmetros da cadeia de caracteres de consulta.This URL contains all the settings in the query string parameters. O aplicativo host precisa obter um token de acesso do Power Automate para o usuário (token JWT do Azure Active Directory com o público-alvo https://service.flow.microsoft.com) antes que ele inicialize o widget.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. O widget gera um evento GET_ACCESS_TOKEN para solicitar um token de acesso do host.The widget raises a GET_ACCESS_TOKEN event to request an access token from the host. O host precisa manipular o evento e passar o token para o widget: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>'
    });
});

O aplicativo host é responsável por manter o token e por passá-lo com uma data de expiração válida para o widget quando solicitado.The host application is responsible for maintaining the token and passing it with a valid expiry date to the widget when requested. Se o widget for aberto por períodos maiores, o host deverá verificar se o token expirou e atualizá-lo, se necessário, antes de passá-lo para o widget.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.

Detectando se o widget está prontoDetecting if the widget is ready

Após a inicialização bem-sucedida, o widget gerará um evento para notificar que o widget está pronto.After successful initialization, the widget raises an event to notify that the widget is ready. O host pode escutar o evento WIDGET_READY e executar qualquer código de host adicional.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
});

Configurações do widgetWidget settings

FlowsSettingsFlowsSettings

FlowsSettings pode ser usado para personalizar a funcionalidade do widget do Power Automate.FlowsSettings can be used to customize the functionality of the Power Automate widget.

flowsSettings?: {
    createFromBlankTemplateId?: string;
    flowsFilter?: string;sc
    tab?: string;
};
ParâmetroParameter Obrigatório/OpcionalRequired/Optional DescriçãoDescription
createFromBlankTemplateId ObrigatóriaRequired Use a GUID do modelo quando o usuário selecionar o botão Criar de um modelo em branco no widget de FluxoUse the template's GUID when the user selects the Create from blank button on the Flow widget
flowsFilter OpcionalOptional O widget do Power Automate aplica o filtro fornecido ao listar fluxos.The Power Automate widget applies the provided filter when listing flows. Por exemplo, mostre fluxos que referenciam um site específico do 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 OpcionalOptional Padroniza a guia ativa a ser mostrada no widget de Power Automate.Defaults the active tab to show in the Power Automate widget.
Por exemplo,For example,
tab:'sharedFlows' exibe a guia Equipetab:'sharedFlows' displays the Team tab
e tab:'myFlows' exibe a guia Meus fluxos.and tab:'myFlows' Displays the My flows tab.

TemplatesSettingsTemplatesSettings

Isso se aplica a todos os widgets que permitem que você crie fluxos com base em um modelo, incluindo widgets de Fluxos, FlowCreation e de Modelos.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;
};
ParâmetroParameter Obrigatório/OpcionalRequired/Optional DescriçãoDescription
defaultParams OpcionalOptional Os parâmetros de tempo de design a serem usados ao criar um fluxo com base em um modelo, por exemplo: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 OpcionalOptional Os valores válidos são “novo” ou “detalhes”.Valid values are 'new' or 'details'. Quando definidos como “detalhes”, uma página de detalhes é mostrada ao criar um fluxo com base em um modelo.When set to 'details', a detail page is shown when creating a flow from a template.
pageSize OpcionalOptional Número de modelos a ser exibido.Number of templates to display. Tamanho padrão = 6Default size = 6
searchTerm OpcionalOptional Exibir modelos que correspondem ao termo de pesquisa fornecidoDisplay templates that match the provided search term
templateCategory OpcionalOptional Exibir modelos em uma categoria específicaDisplay templates in a specific category

ApprovalCenterSettingsApprovalCenterSettings

Aplica-se a widgets ApprovalCenter.Applies to ApprovalCenter widgets.

approvalCenterSettings?: {
   approvalsFilter?: string;
   tab?: string;but
   autoNavigateToDetails?: boolean;
   showSimpleEmptyPage? boolean;
   hideLink?: boolean
};
ParâmetroParameter Obrigatório/OpcionalRequired/Optional DescriçãoDescription
hideLink OpcionalOptional Quando definido como true, o widget oculta os links de aprovação recebida e enviadaWhen set to true, the widget hides the received and the sent approval links
autoNavigateToDetails OpcionalOptional Quando definido como true, o widget abre automaticamente os detalhes de aprovação quando há somente uma aprovaçãoWhen set to true, the widget automatically opens the approval details when only one approval exists
approvalsFilter OpcionalOptional O widget de aprovação aplicará o filtro de aprovação especificado ao listar as aprovações, por exemplo: O widget de aprovação aplicará o filtro de aprovação especificado ao listar as aprovações, por exemplo: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 OpcionalOptional Guia ativa padrão a ser mostrada no widget de Fluxo.Default active tab to show in the Flow widget.
Valores válidos: “receivedApprovals”, “sentApprovals”Valid values : 'receivedApprovals', 'sentApprovals'
showSimpleEmptyPage OpcionalOptional Mostra uma página vazia quando não há aprovaçõesShows an empty page when there are no approvals
hideInfoPaneCloseButton OpcionalOptional Oculta o botão Fechar do painel de informações (ou o host já tem um botão Fechar)Hides the info-pane Close button (or the host already has a Close button)

Eventos de widgetWidget events

O widget do Power Automate dá suporte a eventos que permitem que o host escute eventos de ciclo de vida do widget.The Power Automate widget supports events that let the host listen to widget life-cycle events. O widget do Power Automate dá suporte a dois tipos de eventos: eventos de notificação unidirecionais (por exemplo, Widget_Ready) e eventos gerados do widget para efetuar fetch dos dados do host (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). O host precisa usar o método widget.listen() para escutar eventos específicos gerados do widget.The host needs to use the widget.listen() method to listen to specific events raised from the widget.

UsoUsage

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

Eventos com suporte pelo tipo de widgetSupported events by widget type

Evento de widgetWidget event DetalhesDetails
WIDGET_READY Widget carregado com sucessoWidget loaded successfully
WIDGET_RENDERED Widget carregado e a renderização de interface do usuário está concluídaWidget loaded and UI rendering is complete
GET_ACCESS_TOKEN Solicitação de widget para inserir token de acesso de usuárioWidget request for embed user-access token
GET_STRINGS Permite que o host substitua um conjunto de cadeias de caracteres de interface do usuário mostrado no widgetAllows host to override a set of UI strings shown in the widget

Widget de runtimeRuntime widget

Evento de widgetWidget event DetalhesDetails DadosData
RUN_FLOW_STARTED Disparados e a execução de fluxo foi iniciadaTriggered and the flow run was started
RUN_FLOW_COMPLETED Execução de fluxo disparada com êxitoFlow run triggered successfully
RUN_FLOW_DONE_BUTTON_CLICKED O usuário selecionou o botão Concluído na execução de fluxoUser selected Done button on flow run
RUN_FLOW_CANCEL_BUTTON_CLICKED O usuário selecionou o botão Cancelar na execução de fluxoUser selected Cancel button on flow run
FLOW_CREATION_SUCCEEDED O fluxo foi criado com êxitoThe flow was created successfully { flowUrl: string, flowId: string, fromTemplate: string }
WIDGET_CLOSE Acionado quando o host deveria fechar o widgetFired when the host should close the widget

Widget de criação de fluxoFlow Creation widget

Evento de widgetWidget event DetalhesDetails DadosData
FLOW_CREATION_FAILED Falha na criação do fluxoFlow creation failed
WIDGET_CLOSE Acionado quando o host deveria fechar o widgetFired when host should close the widget
TEMPLATE_LOAD_FAILED Falha no carregamento do modeloThe template failed to load
FLOW_CREATION_SUCCEEDED O fluxo foi criado com êxitoThe flow was created successfully { flowUrl: string, flowId: string,fromTemplate?: string }

Widget de aprovaçãoApproval widget

Evento de widgetWidget event DetalhesDetails
RECEIVED_APPROVAL_STATUS_CHANGED Status de aprovação recebida alteradoReceived approval status changed
SENT_APPROVAL_STATUS_CHANGED Status de aprovação enviada alteradoSent approval status changed

O evento GET_STRINGS permite que você personalize o texto para alguns dos elementos de interface do usuário mostrados no widget.GET_STRINGS event lets you customize text for some of the UI elements shown in the widget. As cadeias de caracteres a seguir podem ser personalizadas:The following strings can be customized:

Chave da cadeia de caracteresString key Usar no widgetUse in the widget
FLOW_CREATION_CREATE_BUTTON Texto exibido no botão Criar fluxo no widget de criação de fluxo e de runtimeText displayed on the create flow button in both flow creation and runtime widget
FLOW_CREATION_CUSTOM_FLOW_NAME O valor inicial a ser usado para o nome do fluxo no widget de criação de fluxo.The initial value to use for the flow name in the flow creation widget. Usado somente quando a configuração allowCustomFlowName está habilitada.Only used when the allowCustomFlowName setting is enabled.
FLOW_CREATION_HEADER Cabeçalho a ser usado ao criar um fluxo no widget de criação de fluxo e de runtimeHeader to use when creating a flow in both the flow creation and runtime widget
INVOKE_FLOW_HEADER Cabeçalho a ser usado ao invocar um fluxo no widget de runtimeHeader to use when invoking a flow in the runtime widget
INVOKE_FLOW_RUN_FLOW_BUTTON Texto exibido no botão usado para invocar/executar um fluxo no widget de runtimeText displayed on the button used to invoke/run a flow in the runtime widget

ExemploExample

Chame widgetDoneCallback passando um objeto JSON com pares de chave-valor de chave de cadeia de caracteres e o texto para substituir o valor padrão.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>"
    });
});

Ações de widgetWidget actions

O host usa ações de widget para enviar uma mensagem ou uma ação específica ao widget.The host uses widget actions to send a specific action or message to the widget. O widget SDK do JS fornece o método notify() para enviar uma mensagem ou um conteúdo JSON para o widget.Widget JS SDK provides the notify() method to send a message or a JSON payload to the widget. Cada ação do widget é compatível com uma assinatura de conteúdo específica.Each widget action supports a specific payload signature.

UsoUsage

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

ExemploExample

Invocar um fluxo enviando o comando a seguir para um widget de runtimeInvoke a flow by sending the following command to a runtime widget

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

Widget de runtimeRuntime widget

Ação de widgetWidget action DetalhesDetails Interface de parâmetroParameter interface
triggerFlow Dispara uma execução de fluxoTriggers a flow run { flowName: string, implicitData?: string }
triggerFlowByTemplate Dispara uma execução de fluxo por modeloTriggers a flow run by template { templateId: string, implicitData?: string, designTimeParameters?: Record<string, any> }
getTriggerSchema Obtém o esquema de gatilho para um fluxoGets trigger schema for a flow { flowName: string, }
closeWidget Cancela qualquer atividade pendente e gera um evento WIDGET_CLOSECancels any pending activity and raises a WIDGET_CLOSE event

Widget de criação de fluxoFlow Creation widget

Ação de widgetWidget action DetalhesDetails Interface de parâmetroParameter interface
createFlowFromTemplate Cria um fluxo para o modelo selecionadoCreates a flow for the selected template { templateName: string, designTimeParameters?: Record<string, any> }
createFlowFromTemplateDefinition Cria um fluxo para a definição de modelo selecionadaCreates a flow for the selected template definition { templateDefinition: string }
closeWidget Cancela qualquer atividade pendente e gera um evento WIDGET_CLOSECancels any pending activity and raises a WIDGET_CLOSE event

Widget de aprovaçãoApproval widget

Ação de widgetWidget action DetalhesDetails Interface de parâmetroParameter interface
closeInfoPane Fecha o painel de informações que exibe os detalhes da aprovaçãoCloses the info-pane displaying approval details N/DN/A

Configurando seu aplicativo clienteConfiguring your client application

Será necessário configurar seu aplicativo cliente com Escopos de serviço de fluxo (permissões delegadas).You will need to configure your client application with Flow Service Scopes (Delegated Permissions). Se o aplicativo do AAD Azure Active Directory usado para integração de widget usar um fluxo de autorização de “concessão de código”, o aplicativo AAD precisará ser reconfigurado com permissões delegadas compatíveis com o Power Automate.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. Isso oferece permissões delegadas que permitem ao aplicativo:This provides delegated permissions that let the application:

  • Gerenciar aprovaçõesManage approvals
  • Ler aprovaçõesRead approvals
  • Ler atividadesRead activities
  • Gerenciar fluxosManage flows
  • Ler fluxosRead flows

Sigas estas etapas para selecionar uma ou mais permissões delegadas:Follow these steps to select one or more delegated permissions:

  1. Acessar https://portal.azure.comGo to https://portal.azure.com
  2. Selecione Azure Active Directory.Select Azure Active Directory.
  3. Selecione Registros de aplicativo em Gerenciar.Select App registrations under Manage.
  4. Insira o aplicativo de terceiros a ser configurado para Escopos de serviço de fluxo.Enter the third-party application to be configured for Flow service scopes.
  5. Selecione Configurações.Select Settings. arquitetura do widgetwidget architecture
  6. Selecione Permissões necessárias em Acesso à API/Select Required permissions under API access/
  7. Selecione Adicionar.Select Add.
  8. Escolha Selecionar uma API.Choose Select an API. arquitetura do widgetwidget architecture
  9. Procure o serviço do Power Automate e selecione-o.Search for Power Automate service and select it. Observação: antes de ver o serviço do Power Automate, seu locatário precisa ter pelo menos um usuário do AAD conectado ao portal do fluxo (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. Escolha os escopos de fluxo necessários para seu aplicativo e, em seguida, selecione Salvar.Choose the required Flow scopes for your application then select Save. arquitetura do widgetwidget architecture

Agora seu aplicativo obterá um token de Serviço de fluxo que contém as permissões delegadas na declaração 'scp' no token JWT.Your application will now get a Flow Service token that contains delegated permissions in the 'scp' claim in the JWT token.

Aplicativo de exemplo inserindo widgets de fluxoSample application embedding flow widgets

Um SPA (Aplicativo de Página Única) JavaScript de exemplo é fornecido na seção de recursos para você poder experimentar a inserção de widgets de fluxo em uma página de host.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. O uso do aplicativo de exemplo requer o registro de um aplicativo AAD com fluxo de concessão implícita habilitado.Using the sample application requires registering an AAD application with implicit grant flow enabled.

Registrando um aplicativo AADRegistering an AAD app

  1. Entre no Portal do Azure.Sign in to the Azure portal.
  2. No painel de navegação esquerdo, selecione Azure Active Directory e, em seguida, selecione Registros de aplicativo (Versão prévia) > Novo registro.In the left navigation pane, select Azure Active Directory, then select App registrations (Preview) > New registration.
  3. Quando a página Registrar um aplicativo for exibida, insira um nome para seu aplicativo.When the Register an application page appears, enter a name for your application.
  4. Em Tipos de conta com suporte, selecione Contas em qualquer diretório organizacional.Under Supported account types, select Accounts in any organizational directory.
  5. Na seção URL de redirecionamento, selecione a plataforma da Web e defina o valor para a URL o aplicativo' com base em seu servidor Web.Under the Redirect URL section, select the web platform and set the value to the application's URL based on your web server. Configure esse valor como http://localhost:30662/ para executar o aplicativo de exemplo.Configure this value to http://localhost:30662/ to run the sample app.
  6. Selecione Registrar.Select Register.
  7. Na página Visão geral do aplicativo, anote o valor da ID do aplicativo (cliente).On the app Overview page, note the application (client) ID value.
  8. O exemplo requer que o fluxo de concessão implícita esteja habilitado.The sample requires implicit grant flow to be enabled. No painel de navegação esquerdo do aplicativo registrado, selecione Autenticação.In the left navigation pane of the registered application, select Authentication.
  9. Em Configurações avançadas, em Concessão implícita, marque as caixas de seleção Tokens de ID e Tokens de acesso.In Advanced settings, under Implicit grant, enable both ID tokens and Access tokens checkboxes. Os tokens de ID e de acesso são necessários, pois o aplicativo precisa conectar os usuários e chamar a API do fluxo.ID tokens and access tokens are required since this app needs to sign in users and call Flow API.
  10. Selecione Salvar.Select Save.

Executando o exemploRunning the sample

  1. Baixe o exemplo e copie-o para uma pasta local em seu dispositivo.Download the sample and copy it to a local folder on your device.
  2. Abra o arquivo index.html na pasta FlowSDKSample e modifique o applicationConfig para atualizar o clientID para a ID do aplicativo registrada anteriormente.Open the index.html file under the FlowSDKSample folder and modify the applicationConfig to update the clientID to the application ID you registered earlier. arquitetura do widgetwidget architecture
  3. O aplicativo de exemplo é configurado para usar os escopos de fluxo Flows.Read.All e Flow.Manage.All.The sample app is configured to use Flow scopes Flows.Read.All and Flow.Manage.All. É possível configurar escopos adicionais atualizando a propriedade flowScopes no objeto applicationConfig.You can configure additional scopes by updating the flowScopes property in applicationConfig object.
  4. Execute estes comandos para instalar a dependência e execute o aplicativo de exemplo:Run these commands to install the dependency and run the sample app:

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

  5. Abra o navegador e, em seguida, insira http://localhost:30662Open the browser and then enter http://localhost:30662
  6. Selecione o botão Entrar para se autenticar no AAD e adquirir um token de acesso de fluxo.Select the Sign in button to authenticate to AAD and acquire a flow access token.
  7. A caixa de texto Token de acesso contém o token de acesso.The Access Token text box contains the access token. arquitetura do widgetwidget architecture
  8. Selecione Carregar widget de fluxos ou Carregar widget de modelos para inserir os widgets correspondentes.Select Load Flows widget or Load Templates widget to embed the corresponding widgets. arquitetura do widgetwidget architecture

Link de download do aplicativo de exemplo.Sample application download link.

RecursosResources

Páginas de teste do widgetWidget test pages

Descubra mais sobre a integração e as configurações do widget:Find out more about widget integration and settings:

Localidades de widget com suporteSupported widget locales

Se a localidade inicializada não estiver listada, o padrão do fluxo será a localidade com suporte mais próxima.If the initialized locale isn't listed, Flow will default to the closest supported locale.

LocalidadeLocale LanguageLanguage
bg-bgbg-bg Búlgaro (Bulgária)Bulgarian (Bulgaria)
ca-esca-es Catalão (Catalunha)Catalan (Catalan)
cs-czcs-cz Tcheco (República Tcheca)Czech (Czech Republic)
da-dkda-dk Dinamarquês (Dinamarca)Danish (Denmark)
de-dede-de Alemão (Alemanha)German (Germany)
el-grel-gr Grego (Grécia)Greek (Greece)
en-Usen-Us Inglês (Estados Unidos)English (United States)
es-eses-es Espanhol (Castelhano)Spanish (Castilian)
et-eeet-ee Estoniano (Estônia)Estonian (Estonia)
eu-eseu-es Basco (Basco)Basque (Basque)
fi-fifi-fi Finlandês (Finlândia)Finnish (Finland)
fr-frfr-fr Francês (França)French (France)
gl-esgl-es Galego (Galícia)Galician (Galician)
hi-HUhi-HU Húngaro (Hungria)Hungarian (Hungary)
hi-inhi-in Híndi (Índia)Hindi (India)
hr-hrhr-hr Croata (Croácia)Croatian (Croatia)
id-Idid-Id Indonésio (Indonésia)Indonesian (Indonesia)
it-Itit-It Italiano (Itália)Italian (Italy)
jp-Jpjp-Jp Japonês (Japão)Japanese (Japan)
kk-kzkk-kz Cazaque (Cazaquistão)Kazakh (Kazakhstan)
ko-krko-kr Coreano (Coreia)Korean (Korea)
lt-LTlt-LT Lituano (Lituânia)Lithuanian (Lithuania)
lv-lvlv-lv Letão (Letônia)Latvian (Latvia)
ms-myms-my Malaio (Malásia)Malay (Malaysia)
nb-nonb-no Norueguês (Bokmål)Norwegian (Bokmål)
nl-nlnl-nl Holandês (Países Baixos)Dutch (Netherlands)
pl-plpl-pl Polonês (Polônia)Polish (Poland)
pt-brpt-br Português (Brasil)Portuguese (Brazil)
pt-ptpt-pt Português (Portugal)Portuguese (Portugal)
ro-roro-ro Romeno (Romênia)Romanian (Romania)
ru-ruru-ru Russo (Rússia)Russian (Russia)
sk-sksk-sk Eslovaco (Eslováquia)Slovak (Slovakia)
sl-sisl-si Esloveno (Eslovênia)Slovenian (Slovenia)
sr-cyrl-rssr-cyrl-rs Sérvio (Cirílico, Sérvia)Serbian (Cyrillic, Serbia)
sr-latn-rssr-latn-rs Sérvio (Latino, Sérvia)Serbian (Latin, Serbia)
sv-sesv-se Sueco (Suécia)Swedish (Sweden)
th-thth-th Tailandês (Tailândia)Thai (Thailand)
tr-trtr-tr Turco (Turquia)Turkish (Turkey)
uk-uauk-ua Ucraniano (Ucrânia)Ukrainian (Ukraine)
vi-vnvi-vn Vietnamita (Vietnã)Vietnamese (Viet Nam)