웹 사이트 및 앱과 Power Automate 통합Integrate Power Automate with websites and apps

참고

Microsoft Flow는 이제 Power Automate입니다.Microsoft Flow is now Power Automate. 자세한 내용은 블로그를 참조하세요.For more information, see this blog.

이 콘텐츠는 향후에 브랜딩 변경을 반영하기 위해 업데이트될 예정입니다.This content will be updated to reflect the branding change in the coming days.

흐름 위젯을 사용하여 Power Automate를 올바르게 앱이나 웹 사이트에 포함하면 사용자가 개인 또는 업무 작업을 간단히 자동화할 수 있습니다.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.

흐름 위젯은 호스트 문서에 있는 iframe입니다.Flow widgets are iframes located in a host document. 이 문서는 Power Automate 디자이너의 페이지를 가리킵니다.This document points to a page in the Power Automate designer. 이러한 위젯은 특정 Power Automate 기능을 타사 애플리케이션에 통합합니다.These widgets integrate specific Power Automate functionality into the third-party application.

위젯은 간단할 수 있습니다.Widgets can be simple. 예를 들어 위젯이 호스트와 iframe 간에 통신 없이 템플릿 목록을 렌더링할 수 있습니다.For example, a widget that renders a list of templates with no communication between the host and iframe. 위젯은 복잡할 수도 있습니다.Widgets can also be complex. 예를 들어 위젯이 템플릿에서 흐름을 프로비저닝한 다음, 호스트와 위젯 간에 양방향 통신을 통해 흐름을 트리거할 수도 있습니다.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.

필수 구성 요소Prerequisites

  • Microsoft 계정 또는A Microsoft Account or
  • 회사 또는 학교 계정A work or school account

인증되지 않은 위젯 사용Use the unauthenticated widget

인증되지 않은 템플릿 위젯을 사용하려면 iframe에서 직접 호스트 애플리케이션에 해당 위젯을 포함합니다.To use the unauthenticated templates widget, embed it directly into the host application using an iframe. JS SDK 또는 액세스 토큰이 필요하지 않습니다.You don't need the JS SDK or an access token.

시나리오에 대한 템플릿 표시Show templates for your scenarios

시작하려면 이 코드를 추가하여 웹 사이트에 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>
매개 변수Parameter 설명Description
로캘locale 템플릿 보기에 대한 4자리 문자와 지역 코드.The four-letter language and region code for the template view. 예를 들어 en-us는 미국 영어를, de-de는 독일어를 나타냅니다.For example, en-us represents US English, and de-de represents German.
검색어search term 보기에 표시하려는 템플릿에 대한 검색어.The search term for the templates that you want to show in the view. 예를 들어, SharePoint를 검색하면 SharePoint에 대한 템플릿을 표시합니다.For example, search SharePoint to show templates for SharePoint.
템플릿 수number of templates 보기에 표시하려는 템플릿의 수The number of templates that you want to show in the view.
대상destination 사용자가 템플릿을 선택하면 열리는 페이지입니다.The page that opens when users select the template. 템플릿에 대한 세부 정보를 표시하려면 details를 입력하고, Power Automate 디자이너를 열려면 new를 입력합니다.Enter details to show the details about the template, or enter new to open the Power Automate designer.
범주category 지정된 템플릿 범주에 대한 필터입니다.Filters to the given template category.
parameters.{name}parameters.{name} 흐름에 전달할 추가 컨텍스트.Additional context to pass into the flow.

대상 매개 변수가 new이면 사용자가 템플릿을 선택할 때 Power Automate 디자이너가 열립니다.If the destination parameter is new, the Power Automate designer opens when users select a template. 그런 다음, 사용자는 해당 디자이너에서 흐름을 만들 수 있습니다.Users can then create a flow in the designer. 위젯의 전체 환경은 다음 섹션을 참조하세요.See the next section if you want to have the full experience from the widget.

흐름 템플릿에 추가 매개 변수 전달Passing additional parameters to the flow template

사용자가 웹 사이트나 앱에서 특정 컨텍스트에 있는 경우 해당 컨텍스트를 흐름에 전달하려 할 수 있습니다.If the user is in a specific context in your website or app, you might want to pass that context to the flow. 예를 들어, 사용자는 SharePoint에서 특정 목록을 보면서 항목이 만들어진 경우에 대한 템플릿을 열 수 있습니다.For example, a user might open a template for When an item is created while looking at a certain list in SharePoint. 이 단계에 따라 목록 ID를 매개 변수로 흐름에 전달할 수 있습니다.Follow these steps to pass in the list ID as a parameter to the flow:

  1. 게시하기 전에 흐름 템플릿의 매개 변수를 정의합니다.Define the parameter in the flow template before you publish it. 매개 변수는 @{parameters('parameter_name')}같은 형태입니다.A parameter looks like @{parameters('parameter_name')}.
  2. iframe src 쿼리 문자열로 매개 변수를 전달합니다.Pass the parameter in the query string of the iframe src. 예를 들어 listName이라는 매개 변수가 있으면 &parameters.listName={the name of the list}를 추가합니다.For example, add &parameters.listName={the name of the list} if you have a parameter called listName.

전체 샘플Full sample

독일어로 상위 4개 SharePoint 템플릿을 표시하고 myCoolList로 사용자를 시작하려면 이 코드를 사용하세요.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>

인증된 흐름 위젯 사용Use the authenticated flow widgets

다음 표에서는 사용자 인증 액세스 토큰을 사용하여 위젯 내에서 전체 환경을 지원하는 Power Automate 위젯 목록을 보여줍니다.The following table shows the list of Power Automate widgets that support the full experience within the widget using user authentication access token. Power Automate의 JS SDK(Javascript 소프트웨어 개발자 키트)를 사용하여 위젯을 포함하고 필수 사용자 액세스 토큰을 제공해야 합니다.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.

위젯 형식Widget type 지원되는 기능Supported feature
흐름flows 개인 및 공유 흐름에 대한 탭에서 흐름 목록을 보여줍니다.Shows a list of flows in a tab for personal and shared flows. 기존 흐름을 편집하거나 템플릿 또는 비어 있는 항목에서 새 흐름을 만듭니다.Edit an existing flow or create a new flow from a template or blank.
flowCreationflowCreation 호스트 애플리케이션에서 제공하는 템플릿 ID에서 흐름을 만듭니다.Creates a flow from a template Id that the host application provides.
런타임runtime 호스트 애플리케이션에서 제공하는 수동 또는 하이브리드 트리거 흐름을 트리거합니다.Triggers a manual or hybrid-trigger flow that the host application provides.
approvalCenterapprovalCenter 승인 요청을 포함하고 승인을 보냅니다.Embeds approval requests and sent approvals.
템플릿templates 템플릿 목록을 보여줍니다.Shows a list of templates. 사용자는 하나를 선택하여 새 흐름을 만듭니다.The user chooses one to create a new flow.

Power Automate를 탐색하는 대신 인증된 흐름 SDK를 사용하여 사용자가 웹 사이트나 앱에서 직접 흐름을 만들고 관리할 수 있습니다.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). 인증된 SDK를 사용하려면 사용자가 해당 Microsoft 계정이나 Azure Active Directory에 로그인해야 합니다.You'll need to sign the user in with their Microsoft Account or Azure Active Directory to use the authenticated SDK.

참고

위젯을 사용할 때 Power Automate 브랜딩을 숨기는 방법은 없습니다.There is no way to hide the Power Automate branding when you use widgets.

위젯 아키텍처Widget architecture

Power Automate 위젯은 Power Automate를 참조하는 iframe을 호스트 애플리케이션에 포함시켜서 작동합니다.Power Automate widgets work by embedding an iframe that references Power Automate into a host application. 해당 호스트는 Power Automate 위젯에 필요한 액세스 토큰을 제공합니다.The host provides the access token that's required by the Power Automate widget. Power Automate의 JS SDK를 사용하면 호스트 애플리케이션이 위젯 수명 주기를 초기화하고 관리할 수 있습니다.Power Automate's JS SDK enables the host application to initialize and manage the widget life cycle.

위젯 아키텍처

JS SDK 세부 정보JS SDK details

Power Automate 팀에서는 JS SDK를 제공하여 타사 애플리케이션에서 Flow 위젯을 용이하게 통합합니다.The Power Automate team provides the JS SDK to facilitate integrating Flow widgets in third-party applications. 흐름 JS SDK는 흐름 서비스에서 공용 링크로 사용할 수 있으며 호스트 애플리케이션이 위젯에 작업을 전송하여 위젯의 이벤트를 처리하고 흐름 애플리케이션과 상호 작용할 수 있도록 지원합니다.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. 위젯 이벤트 및 작업은 위젯 형식에 특정됩니다.Widget events and actions are specific to the widget type.

위젯 초기화Widget initialization

Flow JS SDK 참조는 위젯을 초기화하기 전에 호스트 애플리케이션에 추가되어야 합니다.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>

JSON 개체에서 선택적 호스트 이름 및 로캘 값을 전달하여 JS SDK 인스턴스를 만듭니다.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'
}); 
이름Name 필수/선택 사항Required/Optional 설명Description
hostName 선택 참석자Optional Power Automate 호스트 이름(예: https://flow.microsoft.com)Power Automate host name, for example, https://flow.microsoft.com
locale 선택 참석자Optional 위젯의 클라이언트 로캘(지정하지 않으면 기본값인 en-Us로 설정됨)Client locale for the widget (defaults to en-Us if not specified)

JS SDK 인스턴스가 생성되면 호스트 애플리케이션의 부모 요소에서 Power Automate 위젯을 초기화하고 포함할 수 있습니다.Once the JS SDK instance is created you can initialize and embed a Power Automate widget in a parent element in the host application. 이렇게 하려면 HTML div를 추가합니다.To do so, add an HTML div:

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

그런 다음 JS SDK renderWidget() 메서드를 사용하여 Power Automate 위젯을 초기화합니다.Then, initialize the Power Automate widget with the JS SDK renderWidget() method. 위젯 형식 및 해당하는 설정을 제공해야 합니다.Be sure to provide the widget type and corresponding settings.

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

호스트 애플리케이션의 차원과 일치하도록 수정할 수 있는 컨테이너의 샘플 스타일은 다음과 같습니다.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>

renderWidget()의 매개 변수는 다음과 같습니다.These are the parameters for renderWidget():

매개 변수Parameter 필수/선택 사항Required/Optional 설명Description
container 필수 참석자Required 위젯이 포함될 호스트 페이지에 있는 DIV 요소의 ID입니다.Id of a DIV element on the host page where the widget will be embedded.
environmentId 선택 참석자Optional 위젯에는 환경 ID가 필요합니다. ID를 제공하지 않으면 기본 환경이 사용됩니다.Widgets need an environment Id. If you don't provide an Id, a default environment is used.
flowsSettings 선택 참석자Optional Power Automate 설정 개체Power Automate settings object
templateSettings 선택 참석자Optional 템플릿 설정 개체Template settings object
approvalSettings 선택 참석자Optional 승인 설정 개체Approval settings object

액세스 토큰Access tokens

JS SDK renderWidget()이 실행된 후에 JS SDK는 Power Automate 위젯 URL을 가리키는 iframe을 초기화합니다.After the JS SDK renderWidget() runs, the JS SDK initializes an iframe which points to the Power Automate widget URL. 이 URL에는 쿼리 문자열 매개 변수의 모든 설정이 포함됩니다.This URL contains all the settings in the query string parameters. 호스트 애플리케이션은 위젯을 초기화 전에 사용자(대상(https://service.flow.microsoft.com)을 사용하는 Azure Active Directory JWT 토큰)에게 Power Automate 액세스 토큰을 제공해야 합니다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. 위젯은 호스트의 액세스 토큰을 요청하는 GET_ACCESS_TOKEN 이벤트를 발생시킵니다.The widget raises a GET_ACCESS_TOKEN event to request an access token from the host. 호스트는 이벤트를 처리하고 위젯에 토큰을 전달해야 합니다.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>'
    });
});

호스트 애플리케이션은 요청된 경우 토큰을 유지 관리하고 유효한 만료 날짜와 함께 위젯에 전달하는 작업을 담당합니다.The host application is responsible for maintaining the token and passing it with a valid expiry date to the widget when requested. 장기간 위젯이 열려 있으면 호스트는 토큰이 만료되었는지를 확인하고 위젯에 전달하기 전에 필요한 경우 토큰을 새로 고쳐야 합니다.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.

위젯이 준비되었는지 검색Detecting if the widget is ready

위젯이 성공적으로 초기화되면 위젯이 준비되었음을 알리는 이벤트를 발생시킵니다.After successful initialization, the widget raises an event to notify that the widget is ready. 호스트는 WIDGET_READY 이벤트를 수신 대기하고 추가 호스트 코드를 실행할 수 있습니다.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
});

위젯 설정Widget settings

FlowsSettingsFlowsSettings

FlowsSettings를 사용하여 Power Automate 위젯 기능을 사용자 지정할 수 있습니다.FlowsSettings can be used to customize the functionality of the Power Automate widget.

flowsSettings?: {
    createFromBlankTemplateId?: string;
    flowsFilter?: string;sc
    tab?: string;
};
매개 변수Parameter 필수/선택 사항Required/Optional 설명Description
createFromBlankTemplateId 필수 참석자Required 사용자가 Flow 위젯에서 빈 항목에서 만들기 단추를 선택하면 템플릿의 GUID를 사용합니다Use the template's GUID when the user selects the Create from blank button on the Flow widget
flowsFilter 선택 참석자Optional Power Automate 위젯은 흐름을 나열할 때 제공된 필터를 적용합니다.The Power Automate widget applies the provided filter when listing flows. 예를 들어 특정 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 선택 참석자Optional Power Automate 위젯에서 표시할 활성 탭을 기본값으로 지정합니다.Defaults the active tab to show in the Power Automate widget.
예를 들어For example,
tab:'sharedFlows' 는 팀 탭을 표시하고tab:'sharedFlows' displays the Team tab
tab:'myFlows'는 내 흐름 탭을 표시합니다.and tab:'myFlows' Displays the My flows tab.

TemplatesSettingsTemplatesSettings

그러면 Flows, FlowCreation, 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;
};
매개 변수Parameter 필수/선택 사항Required/Optional 설명Description
defaultParams 선택 참석자Optional 템플릿의 흐름을 만들 때 사용할 디자인 타임 매개 변수입니다. 예: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 선택 참석자Optional 유효한 값은 '신규' 또는 '세부 정보'입니다.Valid values are 'new' or 'details'. '세부 정보'로 설정한 경우 세부 정보 페이지는 템플릿의 흐름을 만들 때 표시됩니다.When set to 'details', a detail page is shown when creating a flow from a template.
pageSize 선택 참석자Optional 표시할 템플릿 수입니다.Number of templates to display. 기본 크기 = 6Default size = 6
searchTerm 선택 참석자Optional 제공된 검색 용어와 일치하는 템플릿을 표시합니다.Display templates that match the provided search term
templateCategory 선택 참석자Optional 특정 범주에서 템플릿을 표시합니다.Display templates in a specific category

ApprovalCenterSettingsApprovalCenterSettings

ApprovalCenter 위젯에 적용합니다.Applies to ApprovalCenter widgets.

approvalCenterSettings?: {
   approvalsFilter?: string;
   tab?: string;but
   autoNavigateToDetails?: boolean;
   showSimpleEmptyPage? boolean;
   hideLink?: boolean
};
매개 변수Parameter 필수/선택 사항Required/Optional 설명Description
hideLink 선택 참석자Optional true로 설정하면 위젯은 받고 보낸 승인 링크를 숨깁니다.When set to true, the widget hides the received and the sent approval links
autoNavigateToDetails 선택 참석자Optional true로 설정하면 하나의 승인만 있으면 위젯은 자동으로 승인 세부 정보를 엽니다.When set to true, the widget automatically opens the approval details when only one approval exists
approvalsFilter 선택 참석자Optional 예를 들어 승인을 나열할 때 승인 위젯은 지정된 승인 필터를 적용합니다.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 선택 참석자Optional Flow 위젯에서 표시할 활성 탭을 기본값으로 지정합니다.Default active tab to show in the Flow widget.
유효한 값: 'receivedApprovals', 'sentApprovals'Valid values : 'receivedApprovals', 'sentApprovals'
showSimpleEmptyPage 선택 참석자Optional 승인이 없을 때 빈 페이지를 보여줍니다.Shows an empty page when there are no approvals
hideInfoPaneCloseButton 선택 참석자Optional 정보 창 닫기 단추를 숨깁니다(또는 호스트에 이미 닫기 단추가 있음).Hides the info-pane Close button (or the host already has a Close button)

위젯 이벤트Widget events

Power Automate 위젯은 호스트가 위젯 수명 주기 이벤트를 수신 대기하도록 하는 이벤트를 지원합니다.The Power Automate widget supports events that let the host listen to widget life-cycle events. Power Automate 위젯은 단방향 알림 이벤트(예: Widget_Ready) 및 호스트에서 데이터를 가져올 위젯에서 발생된 이벤트(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). 호스트는 widget.listen() 메서드를 사용하여 위젯에서 발생된 특정 이벤트를 수신 대기하도록 해야 합니다.The host needs to use the widget.listen() method to listen to specific events raised from the widget.

사용법Usage

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

위젯 형식별로 지원되는 이벤트Supported events by widget type

위젯 이벤트Widget event 자세히Details
WIDGET_READY 위젯이 성공적으로 로드되었습니다.Widget loaded successfully
WIDGET_RENDERED 위젯이 로드되고 UI 렌더링이 완료되었습니다.Widget loaded and UI rendering is complete
GET_ACCESS_TOKEN 포함된 사용자 액세스 토큰에 대한 위젯 요청Widget request for embed user-access token
GET_STRINGS 호스트가 위젯에서 표시된 일련의 UI 문자열을 재정의할 수 있습니다.Allows host to override a set of UI strings shown in the widget

런타임 위젯Runtime widget

위젯 이벤트Widget event 자세히Details 데이터Data
RUN_FLOW_STARTED 트리거되고 흐름 실행이 시작되었습니다.Triggered and the flow run was started
RUN_FLOW_COMPLETED 흐름 실행이 성공적으로 트리거되었습니다.Flow run triggered successfully
RUN_FLOW_DONE_BUTTON_CLICKED 사용자가 흐름 실행에서 완료 단추를 선택했습니다.User selected Done button on flow run
RUN_FLOW_CANCEL_BUTTON_CLICKED 사용자가 흐름 실행에서 취소 단추를 선택했습니다.User selected Cancel button on flow run
FLOW_CREATION_SUCCEEDED 흐름이 성공적으로 만들어졌습니다.The flow was created successfully { flowUrl: string, flowId: string, fromTemplate: string }
WIDGET_CLOSE 호스트가 위젯을 닫아야 할 때 발생합니다.Fired when the host should close the widget

흐름 생성 위젯Flow Creation widget

위젯 이벤트Widget event 자세히Details 데이터Data
FLOW_CREATION_FAILED 흐름을 생성하지 못했습니다.Flow creation failed
WIDGET_CLOSE 호스트가 위젯을 닫아야 할 때 발생합니다.Fired when host should close the widget
TEMPLATE_LOAD_FAILED 템플릿을 로드하지 못했습니다.The template failed to load
FLOW_CREATION_SUCCEEDED 흐름이 성공적으로 만들어졌습니다.The flow was created successfully { flowUrl: string, flowId: string,fromTemplate?: string }

승인 위젯Approval widget

위젯 이벤트Widget event 자세히Details
RECEIVED_APPROVAL_STATUS_CHANGED 받은 승인 상태가 변경되었습니다.Received approval status changed
SENT_APPROVAL_STATUS_CHANGED 보낸 승인 상태가 변경되었습니다.Sent approval status changed

GET_STRINGS 이벤트를 통해 위젯에 표시된 일부 UI 요소에서 텍스트를 사용자 지정할 수 있습니다.GET_STRINGS event lets you customize text for some of the UI elements shown in the widget. 다음 문자열을 사용자 지정할 수 있습니다.The following strings can be customized:

문자열 키String key 위젯에서 사용Use in the widget
FLOW_CREATION_CREATE_BUTTON 흐름 생성 및 런타임 위젯의 흐름 만들기 단추에 표시된 텍스트입니다.Text displayed on the create flow button in both flow creation and runtime widget
FLOW_CREATION_CUSTOM_FLOW_NAME 흐름 생성 위젯에서 흐름 이름에 사용할 초기 값입니다.The initial value to use for the flow name in the flow creation widget. allowCustomFlowName 설정을 사용하는 경우에만 사용됩니다.Only used when the allowCustomFlowName setting is enabled.
FLOW_CREATION_HEADER 흐름 생성 및 런타임 위젯에서 흐름을 만들 때 사용할 헤더입니다.Header to use when creating a flow in both the flow creation and runtime widget
INVOKE_FLOW_HEADER 런타임 위젯에서 흐름을 호출할 때 사용할 헤더입니다.Header to use when invoking a flow in the runtime widget
INVOKE_FLOW_RUN_FLOW_BUTTON 런타임 위젯에서 흐름을 호출/실행하는 데 사용된 단추에 표시된 텍스트입니다.Text displayed on the button used to invoke/run a flow in the runtime widget

예제Example

기본값을 재정의하려면 문자열 키 및 텍스트의 키-값 쌍을 포함하는 JSON 개체를 전달하여 widgetDoneCallback을 호출합니다.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>"
    });
});

위젯 작업Widget actions

호스트는 위젯 작업을 사용하여 위젯에서 특정 작업이나 메시지를 보냅니다.The host uses widget actions to send a specific action or message to the widget. 위젯 JS SDK는 notify() 메서드를 제공하여 위젯에 메시지 또는 JSON 페이로드를 보냅니다.Widget JS SDK provides the notify() method to send a message or a JSON payload to the widget. 각 위젯 작업은 특정 페이로드 서명을 지원합니다.Each widget action supports a specific payload signature.

사용법Usage

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

예제Example

런타임 위젯에 다음 명령을 전송하여 흐름을 호출합니다.Invoke a flow by sending the following command to a runtime widget

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

런타임 위젯Runtime widget

위젯 작업Widget action 자세히Details 매개 변수 인터페이스Parameter interface
triggerFlow 실행 흐름을 트리거합니다.Triggers a flow run { flowName: string, implicitData?: string }
triggerFlowByTemplate 템플릿별로 실행 흐름을 트리거합니다.Triggers a flow run by template { templateId: string, implicitData?: string, designTimeParameters?: Record<string, any> }
getTriggerSchema 흐름에 대한 트리거 스키마를 가져옵니다.Gets trigger schema for a flow { flowName: string, }
closeWidget 보류 중인 작업을 취소하고 WIDGET_CLOSE 이벤트를 발생시킵니다.Cancels any pending activity and raises a WIDGET_CLOSE event

흐름 생성 위젯Flow Creation widget

위젯 작업Widget action 자세히Details 매개 변수 인터페이스Parameter interface
createFlowFromTemplate 선택한 템플릿에 대한 흐름을 만듭니다.Creates a flow for the selected template { templateName: string, designTimeParameters?: Record<string, any> }
createFlowFromTemplateDefinition 선택한 템플릿 정의에 대한 흐름을 만듭니다.Creates a flow for the selected template definition { templateDefinition: string }
closeWidget 보류 중인 작업을 취소하고 WIDGET_CLOSE 이벤트를 발생시킵니다.Cancels any pending activity and raises a WIDGET_CLOSE event

승인 위젯Approval widget

위젯 작업Widget action 자세히Details 매개 변수 인터페이스Parameter interface
closeInfoPane 승인 세부 정보를 표시하는 정보 창을 닫습니다.Closes the info-pane displaying approval details 해당 없음N/A

클라이언트 애플리케이션 구성Configuring your client application

흐름 서비스 범위(위임된 권한)를 사용하여 클라이언트 애플리케이션을 구성해야 합니다.You will need to configure your client application with Flow Service Scopes (Delegated Permissions). 위젯 통합에 사용된 AAD(Azure Active Directory) 앱이 '코드 부여' 권한 부여 흐름을 사용하는 경우 AAD 앱은 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. 그러면 애플리케이션이 다음 작업을 수행할 수 있는 위임된 권한을 제공합니다.This provides delegated permissions that let the application:

  • 승인 관리Manage approvals
  • 승인 읽기Read approvals
  • 작업 읽기Read activities
  • 흐름 관리Manage flows
  • 흐름 읽기Read flows

하나 이상의 위임된 권한을 선택하려면 다음 단계를 수행합니다.Follow these steps to select one or more delegated permissions:

  1. https://portal.azure.com(으)로 이동Go to https://portal.azure.com
  2. Azure Active Directory를 선택합니다.Select Azure Active Directory.
  3. 관리에서 앱 등록을 선택합니다.Select App registrations under Manage.
  4. Flow 서비스 범위에 구성할 타사 애플리케이션을 입력합니다.Enter the third-party application to be configured for Flow service scopes.
  5. 설정을 선택합니다.Select Settings. 위젯 아키텍처widget architecture
  6. API 액세스/에서 필수 사용 권한을 선택합니다.Select Required permissions under API access/
  7. 추가를 선택합니다.Select Add.
  8. API 선택을 선택합니다.Choose Select an API. 위젯 아키텍처widget architecture
  9. Power Automate 서비스를 검색하고 선택합니다.Search for Power Automate service and select it. 참고: Power Automate 서비스를 확인하기 전에 테넌트에서는 하나 이상의 AAD 사용자가 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. 애플리케이션에 대한 필수 Flow 범위를 선택한 다음, 저장을 선택합니다.Choose the required Flow scopes for your application then select Save. 위젯 아키텍처widget architecture

애플리케이션은 JWT 토큰의 'scp' 클레임에서 위임된 권한이 포함된 Flow 서비스 토큰을 가져옵니다.Your application will now get a Flow Service token that contains delegated permissions in the 'scp' claim in the JWT token.

샘플 애플리케이션에 포함된 흐름 위젯Sample application embedding flow widgets

호스트 페이지에서 포함된 흐름 위젯 포함을 시험할 수 있도록 리소스 섹션에 JavaScript SPA(단일 페이지 애플리케이션) 샘플이 제공됩니다.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. 샘플 애플리케이션을 사용하려면 암시적 허용 흐름을 사용하여 AAD 애플리케이션을 등록해야 합니다.Using the sample application requires registering an AAD application with implicit grant flow enabled.

AAD 앱 등록Registering an AAD app

  1. Azure 포털에 로그인합니다.Sign in to the Azure portal.
  2. 왼쪽 탐색 창에서 Azure Active Directory를 선택한 다음, 앱 등록 (미리 보기) > 새 등록을 선택합니다.In the left navigation pane, select Azure Active Directory, then select App registrations (Preview) > New registration.
  3. 애플리케이션 등록 페이지가 나타나면 애플리케이션의 이름을 입력합니다.When the Register an application page appears, enter a name for your application.
  4. 지원되는 계정 형식에서 조직 디렉터리에 있는 계정을 선택합니다.Under Supported account types, select Accounts in any organizational directory.
  5. 리디렉션 URL 섹션에서 웹 플랫폼을 선택하고, 웹 서버에 따라 값을 애플리케이션'의 URL 값으로 설정합니다.Under the Redirect URL section, select the web platform and set the value to the application's URL based on your web server. 이 값을 http://localhost:30662/로 구성하여 샘플 앱을 실행합니다.Configure this value to http://localhost:30662/ to run the sample app.
  6. 등록을 선택합니다.Select Register.
  7. 개요 페이지에서 애플리케이션(클라이언트) ID 값을 적어둡니다.On the app Overview page, note the application (client) ID value.
  8. 샘플에서는 암시적 허용 흐름을 사용하도록 설정해야 합니다.The sample requires implicit grant flow to be enabled. 등록된 애플리케이션의 왼쪽 탐색 창에서 인증을 선택합니다.In the left navigation pane of the registered application, select Authentication.
  9. 고급 설정암시적 권한 부여에서 ID 토큰액세스 토큰을 확인란을 모두 사용하도록 설정합니다.In Advanced settings, under Implicit grant, enable both ID tokens and Access tokens checkboxes. 이 앱에서 사용자가 로그인하고 Flow API를 호출해야 하므로 ID 토큰 및 액세스 토큰이 필요합니다.ID tokens and access tokens are required since this app needs to sign in users and call Flow API.
  10. 저장을 선택합니다.Select Save.

샘플 실행Running the sample

  1. 샘플을 다운로드하고 디바이스에서 로컬 폴더로 복사합니다.Download the sample and copy it to a local folder on your device.
  2. FlowSDKSample 폴더 아래에 있는 index.html 파일을 열고 applicationConfig를 수정하여 clientID를 이전에 등록한 애플리케이션 ID로 업데이트합니다.Open the index.html file under the FlowSDKSample folder and modify the applicationConfig to update the clientID to the application ID you registered earlier. 위젯 아키텍처widget architecture
  3. 샘플 앱은 Flow 범위 Flows.Read.AllFlow.Manage.All을 사용하도록 구성됩니다.The sample app is configured to use Flow scopes Flows.Read.All and Flow.Manage.All. applicationConfig 개체에서 flowScopes 속성을 업데이트하여 추가 범위를 구성할 수 있습니다.You can configure additional scopes by updating the flowScopes property in applicationConfig object.
  4. 종속성을 설치하고 샘플 앱을 실행하려면 다음 명령을 실행합니다.Run these commands to install the dependency and run the sample app:

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

  5. 브라우저를 연 다음, http://localhost:30662를 입력합니다.Open the browser and then enter http://localhost:30662
  6. 로그인 단추를 선택하여 AAD로 인증하고 흐름 액세스 토큰을 획득합니다.Select the Sign in button to authenticate to AAD and acquire a flow access token.
  7. 액세스 토큰 텍스트 상자에는 액세스 토큰이 포함됩니다.The Access Token text box contains the access token. 위젯 아키텍처widget architecture
  8. 흐름 위젯 로드 또는 템플릿 위젯 로드를 선택하여 해당하는 위젯을 포함합니다.Select Load Flows widget or Load Templates widget to embed the corresponding widgets. 위젯 아키텍처widget architecture

샘플 애플리케이션 다운로드 링크Sample application download link.

리소스Resources

위젯 테스트 페이지Widget test pages

위젯 통합 및 설정에 대해 자세히 알아봅니다.Find out more about widget integration and settings:

지원되는 위젯 로캘Supported widget locales

초기화된 로캘이 나열되지 않은 경우 Flow는 가장 가까이 지원되는 로캘을 기본값으로 지정합니다.If the initialized locale isn't listed, Flow will default to the closest supported locale.

로캘Locale LanguageLanguage
bg-bgbg-bg 불가리아어(불가리아)Bulgarian (Bulgaria)
ca-esca-es 카탈로니아어(카탈로니아)Catalan (Catalan)
cs-czcs-cz 체코어(체코 공화국)Czech (Czech Republic)
da-dkda-dk 덴마크어(덴마크)Danish (Denmark)
de-dede-de 독일어(독일)German (Germany)
el-grel-gr 그리스어(그리스)Greek (Greece)
en-Usen-Us 영어(미국)English (United States)
es-eses-es 스페인어(카스티야어)Spanish (Castilian)
et-eeet-ee 에스토니아어(에스토니아)Estonian (Estonia)
eu-eseu-es 바스크어(바스크)Basque (Basque)
fi-fifi-fi 핀란드어(핀란드)Finnish (Finland)
fr-frfr-fr 프랑스어(프랑스)French (France)
gl-esgl-es 갈리시아어(갈리시아어)Galician (Galician)
hi-HUhi-HU 헝가리어(헝가리)Hungarian (Hungary)
hi-inhi-in 힌디어(인도)Hindi (India)
hr-hrhr-hr 크로아티아어(크로아티아)Croatian (Croatia)
id-Idid-Id 인도네시아어(인도네시아)Indonesian (Indonesia)
it-Itit-It 이탈리아어(이탈리아)Italian (Italy)
jp-Jpjp-Jp 일본어(일본)Japanese (Japan)
kk-kzkk-kz 카자흐어(카자흐스탄)Kazakh (Kazakhstan)
ko-krko-kr 한국어(한국)Korean (Korea)
lt-LTlt-LT 리투아니아어(리투아니아)Lithuanian (Lithuania)
lv-lvlv-lv 라트비아어(라트비아)Latvian (Latvia)
ms-myms-my 말레이어(말레이시아)Malay (Malaysia)
nb-nonb-no 노르웨이어(복말)Norwegian (Bokmål)
nl-nlnl-nl 네덜란드어(네덜란드)Dutch (Netherlands)
pl-plpl-pl 폴란드어(폴란드)Polish (Poland)
pt-brpt-br 포르투갈어(브라질)Portuguese (Brazil)
pt-ptpt-pt 포르투갈어(포르투갈)Portuguese (Portugal)
ro-roro-ro 루마니아어(루마니아)Romanian (Romania)
ru-ruru-ru 러시아어(러시아)Russian (Russia)
sk-sksk-sk 슬로바키아어(슬로바키아)Slovak (Slovakia)
sl-sisl-si 슬로베니아어(슬로베니아)Slovenian (Slovenia)
sr-cyrl-rssr-cyrl-rs 세르비아어(키릴 자모, 세르비아)Serbian (Cyrillic, Serbia)
sr-latn-rssr-latn-rs 세르비아어(라틴 문자, 세르비아)Serbian (Latin, Serbia)
sv-sesv-se 스웨덴어(스웨덴)Swedish (Sweden)
th-thth-th 태국어(타이)Thai (Thailand)
tr-trtr-tr 터키어(터키)Turkish (Turkey)
uk-uauk-ua 우크라이나어(우크라이나)Ukrainian (Ukraine)
vi-vnvi-vn 베트남어(베트남)Vietnamese (Viet Nam)