Formaのエラーメッセージの表示順を変える方法

intra-martのFormaDesigerで、入力チェックエラー時のエラーメッセージの表示順を変える方法を紹介します。

やりたいこと

FormaDesignerで作った画面で、入力チェックエラーの表示の順番を変えたい、と思ったことありませんか?

例えば以下のような画面の場合。画面項目の並びとエラーメッセージの表示順が合っていません。

画面項目の並び順と同じく、エラーメッセージも

  • 新住所
  • 郵便番号
  • 電話番号
  • 旧住所

の順で出したいですよね。どうやったら変更できるのでしょうか。

f:id:hamaguchiyu:20191220173741p:plain

やること

アイテムの配置順を変える

やり方としては、Fromaのフォーム編集画面で「アイテムの配置順」を変えるという方法があります。「アイテムの配置順」はアイテムを選択し、右クリックで開いたメニューから変更できます。

今回の場合は「郵便番号」に対し、「背面へ移動」× 2回を行っています。

f:id:hamaguchiyu:20191220174244p:plain

変更したアイテムの配置順はラベル一覧で確認することができます。配置順を変えた結果、ラベル一覧の順番も以下のように変わっています。

f:id:hamaguchiyu:20191220173841p:plain

結果

f:id:hamaguchiyu:20191220173904p:plain

アイテムの配置順を変えたことでエラーメッセージも

  • 新住所
  • 郵便番号
  • 電話番号
  • 旧住所

の順で表示されるようになりました。