PowerApps ポータルで一時保存機能を実現する

はじめに

PowerApps ポータルで試したことを備忘録として残していきたいと思います。
今回はポータル画面で入力途中でデータを保存する一時保存機能の実現方法です。入力項目の多い画面で一時的に保存する方法で、一時保存ボタンを配置してクライアント側の入力チェックをバイパスしてデータを保存するための方法です。

前提

• ポータルの基本フォームで指定しているモデル駆動のフォームに一時保存を判定する項目を含める（以下のコードでは test_app_draft が該当の項目になります）
• JavaScriptのコードは基本フォームのカスタム JavaScriptに記述

コード

ポイントは draftSubmit 関数で、一時保存ボタンをクリックしたタイミングで該当項目を一時保存の状態にしてクライアント側の検証なしでサブミットしています。この関数をクリックで実行するボタンを画面上にJavaScriptで配置します。
あとは、今回は一時保存する項目(test_app_draft)はサブミットさせる必要があるのでフォームに含めて画面ロード時に非表示しています。JavaScriptのみで操作する項目に対してよく利用するテクニックです。

$(document).ready(function () {
    $("#test_app_draft).val("100000001"); //送信済状態のステータス
    $("#test_app_draft").hide();
    $("#test_app_draft_label").hide();
    draftSubmit = function() { 
        $("#test_app_draft").val("100000000"); //一時保存状態のステータス
        var buttonName = $("#UpdateButton").attr("name");
        WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(buttonName, "", true, "", "", false, true)); 
    };
    var button ="<input type='button' class='btn btn-primary button submit-btn' value='一時保存' onclick='draftSubmit();'/>";
    $(".form-action-container-left").append(button);
});

おわりに

WebForm_DoPostBackWithOptions関数はASP.NET WebFormで用意されたものなのでポータルはASP.NET WebFormは構築されているようですね。