Microsoft Flow と Web サイトおよびアプリを統合するIntegrate Microsoft Flow with websites and apps

"フロー ウィジェット" を使用してアプリまたは Web サイトに Microsoft Flow を埋め込むと、ユーザーは簡単に個人的なタスクや仕事のタスクを自動化できるようになります。Embed Microsoft Flow 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. このドキュメントは Microsoft Flow デザイナー内のページを指します。This document points to a page in the Microsoft Flow designer. フロー ウィジェットによって Microsoft Flow の特定の機能がサードパーティ製アプリケーションに統合されます。These widgets integrate specific Microsoft Flow 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 unauthenticated temple, embed it directly the host application in an iframe. JS SDK やアクセス トークンは必要ありません。You don't need a JS SDK or an access token.

シナリオに応じたテンプレートの表示Show templates for your scenarios

開始するには、次のコードを追加し、Web サイトに Microsoft Flow テンプレートを表示します。To start, add this code to show the Microsoft Flow templates on your website:

<iframe src="https://flow.microsoft.com/{locale}/widgets/templates/?q={search term}
&pagesize={number of templates}&destination={destination}"></iframe>
パラメーターParameter 説明Description
localelocale テンプレート ビューを表す 4 文字の言語と地域コード。The four-letter language and region code for the template view. たとえば、en-us は英語 (米国) を表し、de-de はドイツ語を表します。For example, en-us represents American English, and de-de represents German.
search termsearch term ビューに表示するテンプレートの検索語句。The search term for the templates that you want to show in the view. たとえば、Wunderlist のテンプレートを表示するには、wunderlist を検索します。For example, search wunderlist to show templates for Wunderlist.
number of templatesnumber of templates ビューに表示するテンプレートの数。The number of templates that you want to show in the view.
destinationdestination ユーザーがテンプレートを選択したときに開くページ。The page that opens when users select the template. テンプレートの詳細を表示するには details を入力し、Microsoft Flow デザイナーを開くには new を入力します。Enter details to show the details about the template, or enter new to open the Microsoft Flow designer.
parameters.{name}parameters.{name} フローに渡す追加のコンテキスト。Additional context to pass into the flow.
templateCategorytemplateCategory フィルター処理で所与のテンプレート カテゴリに絞り込むFilters to the given template category

宛先パラメーターが new の場合、ユーザーがテンプレートを開くと、Microsoft Flow デザイナーが開きます。If the destination parameter is new, the Microsoft Flow 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

ユーザーが Web サイトやアプリで特定のコンテキストにいる場合、そのコンテキストをフローに渡すことができます。If the user is in a specific context in your website or app, you might want to pass that context to the flow. たとえば、ユーザーが Wunderlist で特定のリストを表示している間に、"リストに項目が追加されたときに通知を受け取る" テンプレートを開くとします。For example, a user might open a template for Notify me when an item is added to a list while looking at a certain list in Wunderlist. 次の手順でリスト 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 でパラメーターを渡します。たとえば、listName というパラメーターがある場合は、&parameters.listName={the name of the list} を追加します。Pass the parameter in the iframe src. For example, add &parameters.listName={the name of the list} if you have a parameter called listName.

完全なサンプルFull sample

ドイツの Wunderlist テンプレートを上位 4 つ表示し、myCoolList のユーザーを開始するには、次のコードを使用します。To show the top four Wunderlist templates in German and to start the user with myCoolList, use this code:

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

認証済みのフロー ウィジェットを使用するUse the authenticated flow widgets

次の表は、ユーザー認証アクセス トークンを使用し、ウィジェットの全機能をサポートする Microsoft Flow ウィジェットの一覧です。The following table shows the list of Microsoft Flow widgets that support the full experience within the widget using user authentication access token. Microsoft Flow の Javascript Software 開発者キット (JS SDK) を使用し、ウィジェットを埋め込み、必要なユーザー アクセス トークンを提供する必要があります。You will need to use Microsoft Flow'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. ユーザーは 1 つ選択し、新しいフローを作成します。The user chooses one to create a new flow.

認証済みの Flow SDK を使用すると、ユーザーは Web サイトまたはアプリから直接フローを作成して管理できます (Microsoft Flow に移動する必要はありません)。Use the authenticated Flow SDK to allow users to create and manage flows directly from your website or app (instead of navigating to Microsoft Flow). 認証済み SDK を使用するには、ユーザーをその Microsoft Account または Azure Active Directory でサインインする必要があります。You'll need to sign the user in with their Microsoft Account or Azure Active Directory to use the authenticated SDK.

注意

ウィジェットを使用するとき、Microsoft Flow ブランドを非表示にする方法はありません。There is no way to hide the Microsoft Flow branding when you use widgets.

ウィジェット アーキテクチャWidget architecture

Microsoft Flow ウィジェットは、Microsoft Flow を参照する iFrame をホスト アプリケーションに埋め込むことで動作します。Microsoft Flow widgets work by embedding an iframe that references Microsoft Flow into a host application. Microsoft Flow ウィジェットから要求されるアクセス トークンはホストから提供されます。The host provides the access token that's required by the Microsoft Flow widget. Microsoft Flow の JS SDK によって、ホスト アプリケーションはウィジェットのライフサイクルを初期化し、管理できます。Microsoft Flow's JS SDK enables the host application to initialize and manage the widget life cycle.

ウィジェット アーキテクチャ

JS SDK の詳細JS SDK details

Microsoft Flow チームから、サードパーティ製アプリケーションに Flow ウィジェットを統合する目的で JS SDK が提供されます。The Microsoft Flow team provides the JS SDK to facilitate integrating Flow widgets in third-party applications. Flow JS SDK は Flow サービスのパブリック リンクトして利用できます。また、この SDK によって、ホスト アプリケーションはウィジェットからのイベントを処理し、ウィジェットにアクションを送信することで Flow アプリケーションとやり取りできます。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 (名前)Name 必須/省略可能Required/Optional 説明Description
hostName 省略可能Optional Microsoft Flow のホスト名 (例: https://flow.microsoft.com)Microsoft Flow host name, for example, https://flow.microsoft.com
locale 省略可能Optional ウィジェットのクライアント ロケール (渡されない場合は en-Us)Client locale for the widget (defaults to en-Us if not passed)

JS SDK インスタンスが作成されると、Microsoft Flow ウィジェットを初期化し、ホスト アプリケーションの親要素に埋め込むことができます。Once the JS SDK instance is created you can initialize and embed a Microsoft Flow 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() メソッドで Microsoft Flow ウィジェットを初期化します。Then, initialize the Microsoft Flow widget with the JS SDK renderWidget() method. 必ずウィジェットの種類と対応する設定を指定してください。Be sure to provide the widget type and corresponding settings.

var widget = sdk.renderWidget('<widgettype>', {
        container: 'flow-div',
        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 Microsoft Flow 設定オブジェクトMicrosoft Flow settings object
templateSettings 省略可能Optional テンプレート設定オブジェクトTemplate settings object
approvalSettings 省略可能Optional 承認設定オブジェクトApproval settings object

アクセス トークンAccess tokens

JS SDK renderWidget() の実行後、JS SDK によって iFrame が初期化され、それが Microsoft Flow ウィジェット URL を指し示します。After the JS SDK renderWidget() runs, the JS SDK initializes an iframe which points to the Microsoft Flow widget URL. この URL には、クエリ文字列パラメーターのすべての設定が含まれています。This URL contains all the settings in the query string parameters. ホスト アプリケーションは、ウィジェットを初期化する前に、ユーザーの Microsoft Flow アクセス トークン (Azure Active Directory JWT と対象ユーザー https://service.flow.microsoft.com)) を取得する必要があります。The host application needs to get a Microsoft Flow 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 を使用し、Microsoft Flow ウィジェットの機能をカスタマイズできます。FlowsSettings can be used to customize the functionality of the Microsoft Flow 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 Microsoft Flow ウィジェットは、フローを一覧表示するとき、指定されたフィルターを適用します。The Microsoft Flow 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 Microsoft Flow ウィジェットに表示するようにアクティブ タブを初期設定します。Defaults the active tab to show in the Microsoft Flow 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 有効な値は "new" または "details" です。Valid values are 'new' or 'details'. "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 に設定されると、承認が 1 つだけ存在するとき、ウィジェットによって承認詳細が自動的に開きます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

Microsoft Flow ウィジェットは、ホストがウィンドウのライフサイクル イベントを待ち受けることを許可するイベントに対応しています。The Microsoft Flow widget supports events that let the host listen to widget life-cycle events. Microsoft Flow ウィジェットは、2 種類のイベントに対応しています: 一方向通知イベント (Widget_Ready など) と、ウィジェットから発生し、ホストからデータを取得するイベント (Get_Access_Token)。The Microsoft Flow 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

widgetDoneCallback を呼び出し、JSON オブジェクト、文字列キーのキーと値のペア、テキストを渡し、既定値をオーバーライドします。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 からは、メッセージまたは JSON ペイロードをウィジェットに送信する notify() メソッドが提供されます。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

Flow サービス スコープ (委任されたアクセス許可) でクライアント アプリケーションを構成する必要があります。You will need to configure your client application with Flow Service Scopes (Delegated Permissions). ウィジェット統合に使用される Azure Active Directory (AAD) アプリで "コード付与" 認可フローが使用される場合、AAD アプリは、Microsoft Flow でサポートされている委任されたアクセス許可で事前構成する必要があります。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 Microsoft Flow. これにより委任されたアクセス許可が与えられ、アプリケーションに次のことが許可されます。This provides delegated permissions that let the application:

  • 承認を管理するManage approvals
  • 承認を読み取るRead approvals
  • アクティビティを読み取るRead activities
  • フローを管理するManage flows
  • フローを読み取るRead flows

次の手順に従って 1 つまたは複数の委任されたアクセス許可を選択します。Follow these steps to select one or more delegated permissions:

  1. 行きます https://portal.azure.comGo 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. [Microsoft Flow service](Microsoft Flow サービス) を見つけて選択します。Search for Microsoft Flow service and select it. 注: Microsoft Flow サービスを表示するには、テナントで少なくとも 1 人の AAD ユーザーが Flow ポータル (https://flow.microsoft.com) にサインインしている必要があります。Note: Before you can see Microsoft Flow 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 Single Page Application (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 Portal にサインインします。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] セクションの下で、Web プラットフォームを選択し、Web サーバーに基づいてアプリケーションの 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 ファイルを開き、applicaionConfig を変更し、先に登録したアプリケーション ID に clientID を更新します。Open the index.html file under the FlowSDKSample folder and modify the applicaionConfig 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. [Load Flows widget](フロー ウィジェットを読み込む) または [Load Templates widget](テンプレート ウィジェットを読み込む) を選択し、対応するウィジェットを埋め込みます。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 言語Language
bg-bgbg-bg ブルガリア語 (ブルガリア)Bulgarian (Bulgaria)
ca-esca-es カタルニア語 (スペイン)Catalan (Spain)
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 (Spain)
fi-fifi-fi フィンランド語 (フィンランド)Finnish (Finland)
fr-frfr-fr フランス語 (フランス)French (France)
gl-esgl-es ガリシア語 (スペイン)Galician (Spain)
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)