PowerApps|メインフォームをダイアログで立ち上げる方法
PowerAppsのフォーム画面ははデータの編集などに便利です。
通常メインフォームなどで、データを編集します。
JavaScriptでフォーム(データの編集画面)を立ち上げることで、特定のデータを編集する挙動を実現することができます。
そんなとき、ダイアログでフォームを開ければ、より編集画面っぽく出せるようになりますよね。
今回は、PowerAppsのJavaScriptを使用して、フォームをダイアログで開くコード例について紹介していきます。
まだJavaScriptを活用したことがない人はより実装の幅が広がりますので、以下の記事を参考にしながら試してみてください。
モデル駆動型アプリにJavaScriptを適用する方法 - プロラブ (abyblog.online)
モデル駆動型でJavaScriptを呼び出す2つの方法|PowerApps - プロラブ (abyblog.online)
目次(クリックで読みたい部分にジャンプできます)
編集フォームを立ち上げる場合
では、編集フォームを立ち上げます。
フォームを立ち上げる時に必要な情報は以下です。
必要な情報
- フォームのGUID
フォームのGUIDは、フォームをカスタマイズする画面を開いた時のURLに表示されています。
フォームのGUIDが取得できたら、以下のコードに当てはめて使用してください。
function openModalEditForm(executionContext) {
var formContext = executionContext.getFormContext();
// Retrieve the record that was selected
var selectedRecord = formContext.data.entity;
// Open the selected record in a popup
var pageInput = {
pageType: "entityrecord",
entityName: selectedRecord.getEntityName(),
entityId: selectedRecord.getId(),
// フォームのGUIDを入力
formId: "00000-00000-00000-0000-0000",
};
var navigationOptions = {
target: 2, // 1 for inline, 2 for dialog
height: { value: 80, unit: "%" },
width: { value: 25, unit: "%" },
position: 2, // 1 for dialog in center, 2 for far side.
};
Xrm.Navigation.navigateTo(pageInput, navigationOptions).then(
function success() {
//モーダルから戻った時の処理
//parent.location.reload();//リロードする場合
//以下はデータをリフレッシュする場合
formContext.data.refresh(true).then(
function success(result) {
console.log("refresh成功");
console.log("result: " + result);
},
function (error) {
console.log("error: " + error);
}
);
},
function (error) {
console.log("error: " + error);
}
);
}
コード途中の割合でモーダルの大きさやダイアログの位置を調整できます。
Xrm.Navigation.navigateTo(pageInput, navigationOptions).then(
function success() {
の後の処理は、モーダルを閉じた後の処理になります。
モーダルには×ボタンがありますので、そこを押した時に元の画面をどう操作するかを決めることができます。
現在は、refresh関数を使用してデータを更新する処理を入れています。
まとめ
今回は、編集フォームを立ち上げる方法について紹介しました。
編集フォームをダイアログで立ち上げられると、編集している感が出てユーザービリティも向上します。
ぜひ試してみてもらえればと思います!