モデル駆動型のステージボタンを非表示にする方法(JS)｜次のステージへ進む、アクティブに設定【PowerApps】

2024年3月10日 2024年4月22日

abyblog

モデル駆動型のビジネスプロセスフローを実装すると、

以下のようなステージボタンが既定でついています。

次のステージに進む
アクティブに設定
終了

これらのボタンは、標準で設定されるため非表示にするには標準のコマンドからはできません。

そのため、JavaScriptを使用して非表示に設定する必要があります。

今回は、JavaScriptを使用して、フォームのステージボタンを非表示にする方法について紹介していきます。

非表示にするボタン

今回は、以下の３種類のボタンを非表示にします。

付録

このボタンを押すと、上記の３種類のボタンは再び表示されてしまいます。

なので、このボタンを非表示にする方法も併せて紹介します。

２種類のコードがあるので、どちらか好きな方を選んでください。

目次（クリックで読みたい部分にジャンプできます）

1 ステージボタンを非表示にする手順
2 ①JavaScriptコードを準備する（コピペ）
3 ②モデル駆動型のフォームの「OnLoad」「OnSave」イベントに適用する
4 まとめ

ステージボタンを非表示にする手順

ステージボタンを非表示にする方法の全体像をまず把握しておきましょう。

全体像

①JavaScriptコードを準備する（コピペ）

②モデル駆動型のフォームの「OnLoad」「OnSave」イベントに適用する。

この２つの手順で進めます。

JavaScriptコードを実装する必要があるので、
少し心配するかもしれませんが、コピペでそのまま行うことができますので、ぜひチャレンジしてみてください。

特にJavaScriptの知識が必要なわけではないです！

①JavaScriptコードを準備する（コピペ）

まずは、JavaScriptを準備します。

コードは既に準備済みなので、そのまま使用します。

「ステージボタンのみ非表示」「ステージボタン＆モーダル開くボタンを非表示」にするかどちらかを選んでください。

ステージボタンのみを非表示するコード

function HideSetAcgtiveButton(executionContext) {
    var formContext = executionContext.getFormContext();
    formContext.data.process.addOnStageSelected(onStageClicked);
    formContext.data.process.addOnStageChange(onStageClicked);
}

function onStageClicked(executionContext) {
    var formContext = executionContext.getFormContext();
    var hide = true;
    var interval = null;

    interval = setInterval(function () {
        var element = parent.document.getElementById("MscrmControls.Containers.ProcessStageControl-businessProcessFlowFlyoutFooterContainer");
        if (element != null && hide == true) {
            hide = false;
            element.style.display = "none";
            clearInterval(interval);
        }
    }, 10);
}

ステージボタン＆モーダル開くボタンも非表示するコード

function HideSetAcgtiveButton(executionContext) {
    var formContext = executionContext.getFormContext();
    //onStageClicked(executionContext);
    formContext.data.process.addOnStageSelected(onStageClicked);
    formContext.data.process.addOnStageChange(onStageClicked);
}

function onStageClicked(executionContext) {
    var formContext = executionContext.getFormContext();
    var hide = true;
    var interval = null;

    interval = setInterval(function () {
        var element = parent.document.getElementById("MscrmControls.Containers.ProcessStageControl-businessProcessFlowFlyoutFooterContainer");
        var element2 = parent.document.getElementById("MscrmControls.Containers.ProcessStageControl-stageDockModeButton");
        if (element != null && hide == true) {
            hide = false;
            element.style.display = "none";
            if (element2 != null) {
                element2.style.display = "none";
            }
            clearInterval(interval);
        }
    }, 10);
}

このどちらかのコードを後々準備するPowerApps内のテキストエディタにまるっと貼り付けます。