キャンバスアプリ 下書き・本番モードの実装サンプル（Required調整）

はじめに

キャンバスアプリのフォームのサンプルをもとに便利なプロパティを紹介していますが、
今回はカードのRequiredプロパティ（必須かどうか）を調整して下書き・本番モード切替えのサンプルをご紹介します。
状態に応じて項目の必須かどうかを切り替える実装についてです。

サンプル動画

サンプルではValidプロパティのほか、タブリストで表示切替え、下書き・本番モード切替え、Updatesプロパティを使って確認フォームを作るサンプルとなっています。

カードのRequiedプロパティについて

フォームのカードにはその項目が必須かどうかを定義する「Requied」プロパティがあります。

特に何もしていない状態ではデータソースの設定が反映されています。
以下では氏名はSPOリストで必須となっているため、作成するフォームでもRequiedはTrueとなっています。

カードにはStarVisbleというコントロールが入っていて、RequiedがTrueの場合に※マークが表示されるようになってます。（以下は目立つように赤っぽく色変えているが普通は黒色）

必須の場合の挙動

RequiedがTrueで必須項目の場合は※マークがついています。
未入力でSubmitFormするとエラーチェックでエラーとなりデータは更新されずに、
以下のように対象箇所にエラー表示をしてくれます。（エラーメッセージ、赤枠表示など）
自分でわざわざカスタムする必要がないのでとても便利に作られてますね。

TIPS※すごい前はこのエラーメッセージもいまいちで英語列名だったりしました💦
結構前から日本語でちゃんと「列名が必要です。」と出てくれるので気にしなくてよくなりました。

フォーム上のみでRequiedの調整が可能

SPOリスト側は任意（必須ではない）状態でも、フォーム上のRequiedをTrueにして必須とすることが可能です。

変更には一旦プロパティのロックの解除をします。（通常状態からカスタムする場合はこのロックを解除します。）
以下のようにメールアドレスカードのRequiedをfalse　→Trueに変更などが出来ます。

そうすると同じようにこちらもSubmitFormをした場合は未入力の場合はエラーとみなしてくれます。

下書きモード・本番モードで必須項目を調整するサンプル

よくあるケースとして、下書きのような状態ではまだ未入力でＯＫだが、最終的に提出する際には必須としたい場合があると思います。またはステップごとに必須となる項目が異なるなどあるかと思います。

そういった実装の場合はSPOリスト側は基本任意にしておいて、フォーム側を状態に応じて必須か否かを切り替えてあげることで、状況に応じた入力制御の実装が可能となります。

スイッチを追加：変数を調整して下書き、本番を切り替える

このサンプルでは以下のようにスイッチを追加して、OnCheck時にFalseとして本番モード、
OnUnCheck時（デフォルト）にTrueとして下書きモードとなるように変数：DraftModeを作って調整しています。

Requiedに変数を指定してTrue/Falseを切り替える

下書きモードの時は任意、本番モードの時は必須にしたい項目のカードのRequiedに以下のように変数を指定します。

この状態でスイッチを下書き→確定と変更すると、以下のように必須に変わり、入力がない場合はエラーとなります。

TIPS例ではスイッチで切り替えていますが、下書き保存ボタン、確定保存ボタンなどの処理にも書けます。
SubmitForm前に上記のDraftMode変数を切り替える処理を入れれば、下書きなら空でもOKで保存、確定なら未入力となりエラーとする。という実装が出来ますね。

他の項目に応じて必須を調整するサンプル

他にも他の項目の選択値に応じて、必須にすることも可能ですね。
以下では「区分」の選択値が “社員”の場合は、「所属/部署」が必須となるようにしています。
併せて下書きモードの判定も加えています。

上記のように状態や他の選択値など、さまざまな状況に応じて調整が可能です。

おわりに

今回はカードのRequiedプロパティを調整して下書きモードを作ったり、他調整を行う実装についてご紹介しました。
業務アプリでは以前からよく実装される内容かと思いますし、他にも似た記事が以前からあると思いますが、今回作ったサンプルアプリで他の実装と合わせて入れてみたのでこちらもご紹介してみました。

これらをうまく使って実装すれば、モードに応じた入力制御や、入力内容やステージに応じた入力制御の実装が出来ると思いますので、ご参考になれば幸いですー。それでは！

関連記事

フォームの便利なプロパティ：Valid

フォームの便利なプロパティ：Updates

キャンバスアプリ タブリストで表示項目切替え

フォームのレイアウトサンプル：レイアウトの基本を載せてます。

フォーム関連：