ゴール
サイトのボタンを押すとPowerAutomateが起動し、フローのレスポンスをサイトに表示する
使うもの
- ソリューション
- PagesアクションがトリガーのPowerAutomate
- JavaScript
手順
PowerAutomate作成
1. フローを追加、または新規作成
[クラウドフロー]タブから、フローを追加します
今回は事前に作成しておいた食べ物情報取得フローを使います
その他のクラウドフローには、トリガーがPagesアクション ＆ Pagesと同じソリューションに含まれる 場合に表示されるようですが
時々表示されなくなるので、ここで新規作成する方がいいと思いました(原因はわかりませんでした)
フローの内容
画面から渡された選択肢に一致する食べ物を、食べ物テーブルから検索して結果を画面に戻すフローです
ちなみに、新しいデザイナーではPagesアクションが使えないみたいなので、旧デザイナーを使いましょう
2. URLをコピー
JavaScriptでこのURLを叩きます
あとでコピーしても大丈夫ですが、せっかく追加したのでコピーしておくと良いです
JavaScript実装
[コードの編集]からVScodeを開きます
３. ボタンと選択肢を配置
トリガーのためのボタンと選択肢を作成します
ボタンにデフォルトパーツと同じclassをつけると、見た目が統一されるのでおすすめです
<div class="col-lg-12 columnBlockLayout" style="flex-grow: 1; display: flex; flex-direction: column; min-width: 250px; word-break: break-word;">
<select id="selectBox" class="select-box">
<option value="1">ご飯</option>
<option value="2">果物</option>
<option value="3">肉</option>
<option value="4">野菜</option>
</select>
<button id="triggerButton" class="btn button1">ボタン</button>
</div>
<div id="resultArea"></div>
5. ボタンの要素取得
※ここからはJSパートです
得意な方はお好きなように書いて大丈夫です
<ページ名>.js に書きますが、HTMLのscriptタグに書いても大丈夫です（公式ドキュメントではHTMLファイルに書いてます）
先ほど設定したidの要素を取得します
var trigger = document.getElementById("trigger");
6. ボタンが押されたらフローをURLを叩く
ボタンが押されたら、「2. URLをコピー」でコピーしたURLを叩きます
今回は、画面に入力された値をパラメータとして渡し、PAからのレスポンスが正常の場合は値を画面に表示します
triggerButton.addEventListener("click", function(event) {
// デフォルトのリンク動作を防ぐ
event.preventDefault();
// 選択ボックスの値を取得
var selectBox = document.getElementById("selectBox");
var selectedValue = selectBox.value;
// Power AutomateのURL
var _url = "https://site-xxxx.powerappsportals.com/_api/cloudflow/v1.0/trigger/c5dc3ad1-f44b-ef11-a316-00224862xxxx";
// パラメータ作成
var data = {};
data["SelectedValue"] = selectedValue;
var payload = {};
payload.eventData = JSON.stringify(data);
// Power Automateを起動
shell.ajaxSafePost({
type: "POST",
url: _url,
contentType: "application/json",
data: JSON.stringify(payload)
})
.done(function (response) {
// 送信成功時の処理
var res = JSON.parse(response);
// 結果を表示する要素リセット
var resultArea = document.getElementById("resultArea");
resultArea.innerHTML = "";
// レスポンスの結果をセミコロンで分割して配列に変換
var resultArray = res.result.split(';');
// 各結果をpタグに追加して表示
resultArray.forEach(function(item) {
var itemDiv = document.createElement("p");
itemDiv.textContent = item.trim();
resultArea.appendChild(itemDiv);
});
})
.fail(function () {
// 送信失敗時の処理
console.log("[ERROR]");
});
});結果
ボタン押す前
ボタン押した後
参考ページ
https://learn.microsoft.com/ja-jp/power-pages/configure/power-automate-how-to
