ギャラリー と タブリスト 初期値を指定する方法

はじめに

今回はギャラリーとモダンコントロールの「Tab List」（タブ一覧と日本語では表記）の初期選択値を指定する方法の一例をご紹介します。タブリストの場合は工夫が必要な点が主にお伝えしたい内容です。

ギャラリーやタブリストの初期値は最初のレコード

あまり意識はしませんが、ギャラリーやタブリストの初期選択値は最初のレコードとなっています。
Defaultプロパティ（タブリストの場合はDefaultSelectedItems）は初期状態ではなにも指定は入っていません。
通常は1つ目が選択されていればいいケースが多いのでわざわざ初期値を指定しなくて済むのでよいですね。

ギャラリーの場合：Defaultプロパティ　→初期状態では空
最初のレコードが選択された状態となっている。

タブリストの場合：DefaultSelectedItemsプロパティ　→初期状態では空
最初のレコードが選択された状態となっている。

選択後は初期選択値に勝手には戻らない

初期選択値なのでレコードを選択した場合は、その後は初期状態（ひとつ目）には戻りません。
例えばギャラリーでレコードを選択し別画面で保存（SubmitForm）し、一覧へ戻す場合などそのまま選択された状態です。

ギャラリーの例

レコードを選択して編集画面へ遷移、保存して一覧へ自動で戻す処理の場合
→ギャラリーで選択したレコード状態のまま

NOTE※新規作成ボタンでレコードを作成して一覧へ戻る場合もその前に選択したレコードが選択された状態なので、その場合は作成したレコードを選択した状態にしたいはあるかと思います。
その辺はこの後に記載しています。

タブリストの場合も同様→困るケースがある

同様にタブリストについても選択された状態が残っています。
サンプルのように一つ目から選択してほしい場合は元に戻したい！というケースがあるかと思います。

→以下ではフォーム画面をタブリストで3つに表示項目を切り替えれるようにしています。
そして一覧から別のレコードを選択し直した場合も最後に選択されたタブが選択されたままになっています。

以下の例（一覧画面のタブは意味ないが検証のため）では、レコードを選択して詳細画面へ進み、
3つ目のタブまで進めて入力、保存する。→一覧へ自動で戻す。
→この場合に一覧画面のタブは選択していたままの状態ですね。まあこれはいいとして
→再度別のレコードを選択したり、新規作成する場合など、フォーム画面へ遷移した際に3つ目の表示のままとなっています。これがちょっと困りますよね。一つ目のタブに戻ってほしいかと思います。

別のレコードを選択した場合に3つ目のタブのまま（出来れば1つ目のタブにしたい）

新規作成ボタンで作成へ進む際、3つ目から表示されてしまうのでこのケースは特に困る

ギャラリーはResetで初期状態へ戻せるが。。

ギャラリーの場合だとReset関数が効くので、Defaultの状態（Defaultプロパティで指定している状態→なにも指定してなければ1つ目）に戻せます。

以下の例では一覧画面のOnVisibleでReset（ギャラリー名）でリセットをし、表示順を作成日降順としているため、新規作成して一覧へ戻った場合に初期化されて作成したレコードが一番上に来て選択された状態となっています。
ただOnVisibleでこうすると一覧から選択→フォーム画面で戻る→選択していたレコードが毎回クリアされて一番目に戻る挙動となるので、やるなら新規作成時のみにしたりがいいかと。

リセットをかけて初期状態へ戻すことは可能

Defaultプロパティ用の変数を使って指定する

上記よりはこちらの方法の方がいいかなと思います。
選択や作成したアイテムを格納する変数を用意して、ギャラリーのDefaultプロパティに指定する。
更新時、作成時にはそのレコードをその変数に設定（フォームのLastSubmitで指定）すれば最後のレコードが選択された状態に出来ます。上記で紹介したような実装よりはこっちの方がいいかなと思います。

★自動生成で作成されるアプリの場合、（同画面ですが）このような実装となっています。

TIPSまたは特に何もしない実装でもいいかなーと思います。もともと選択したままの状態となっているので。
新規作成した場合にそれを選択した状態にしたい場合は。というところでしょうか。

ギャラリーのDefaultプロパティに変数を指定

フォームのOnSuccessプロパティにその変数にLastSubmitを指定（最後に作成/更新したレコードが格納される）

一覧に戻ると作成した場合はそのレコード、編集の場合は選択していたレコードが選択された状態となる。

NOTEただこの場合には指定したレコードがスクロールの一番上に表示される感じになるので、それがちょっとやだなという場合はやらないという方針もありだと思います。
（例えば10番目のレコードを編集→戻るとその10番目のレコードまでスクロールされて一番上に表示される感じになる）

タブリストの場合はReset関数が効かない！→が以下のようにすれば対応可能！

さて、本題になります。
上記のようにギャラリーの場合はReset関数が効くので初期状態へ戻せます。またはDefaultプロパティに変数指定すればOKです。

が、タブリストの場合、Resetが効きません（この記事記載時点。将来的にどうかは不明確）

DefaultSelectedItemsプロパティを使う！だがそれだけではだめ！

Reset関数が効かない。。と一旦困ったんですが、それならDefaultSelectedItems（ギャラリーでいうDefaultプロパティ）を指定して更新すればよいかと普通に思って実装。
→あれ？最初しか効かないぞ！！となりました。

ボタンで変数を指定、レコードのひとつめ。DefaultSelectedItemsに指定→この時は選択された。
が、2つ目を選択してボタンをクリックしてもひとつめには戻らない！

一旦変数の中身が変わらないと効かない！のでBlankにしてから再指定する！

これはタイマーや音楽再生などのStartに変数を指定して動かす場合も同様なんですが、変数が同じ値のままの場合だと効かないというケースです。
上記のケースだとTrue→Trueに更新しても変化なしなので、True→False →Trueとする必要があります。

タブリストの場合も同様に初期値用の変数の値が変わらないと変化しません！なので、

① 一旦Blank()で空にする
②次に初期値を指定する（例では一つ目のレコード）とすれば効くようになります！

画面のOnVisibleで指定しておけばOK

上記のように一旦ブランクを入れ、すぐ本来の値（大体はひとつ目かと）を指定してあげれば効きます。
通常は画面表示した場合にそうなっていればOKだと思うので、画面のOnVisibleに書いてあげればよいかと思います。

フォーム画面の場合（同様にOnVisibleでタブリストのItemsに指定しているレコードの一つ目となるように指定している）

→画面表示時にちゃんとひとつ目のタブが表示されるようになりました！

タブリストの調整時、以下だと壊れたのでご注意

上記の検証などでタブリストのDefaultSelectedItemsプロパティを調整していた際に、
以下のように普通に配列の値を指定した場合になぜか表示できないというエラーになりました。。汗
なぜかこの書き方だとNGの様です。なのでご注意ください。

→こうなった場合は、
上記プロパティを一旦空にして、Itemsプロパティを一旦空→再度同じものを指定する。などで復活出来ました。

おわりに

ということでタブリストとギャラリーの初期値の設定方法のご紹介でした。
本来タブリストがリセットが効かないのでその対処方法のみ書こうと思ってましたが、ギャラリーについても一応記載しておこうかとなりちょっと長くなりました。。
また、初期値を空にするケースも最初入れていたんですが、その点だけ知りたい人もいるかなと思い以下の記事に分けました。そちらもぜひご参考ください。それでは！

関連記事

タブリスト：

ギャラリー：