はじめに
Adaptive Cardsのデザイナーを使っていて、最も縁遠い存在なのはおそらく Action.ToggleVisibility と Action.ShowCard ではないでしょうか！（私見）
この2つはプロパティペインに設定が足りないので、CARD PAYLOAD EDITORを直接編集しなければいけません。
また、ToggleVisibility は例がないとわからないです、特に TargetElement が。
今回はこの2つを利用して、カードの表示切替を実現してみたいと思います。試した結果は以下のツイートをご覧ください。
上：ShowCardで切替
— Hiro (@mofumofu_dance) 2020年7月28日
下：ToggleVisibilityで切替
3つ以上の切り替えの場合にはShowCardで切り替えないといけないかな。 https://t.co/cUjSRTo3EC pic.twitter.com/0ftFytzKrR
ToggleVisibility
ToggleVisibility は対象となるパーツの表示/非表示を切り替えるアクションです。
Action なので、画像やボタンに設定することができ、対象になるパーツの Id を複数指定できます。
表示/非表示の切り替えを試すために以下のようなカードを例として考えます。
ToggleVisibility を利用するには対象のパーツのIdを指定しなければいけませんが、プロパティペインにはその欄がないので、CARD PAYLOAD EDITOR を使って対象のパーツIdも含めて以下のように設定しましょう。
{
"type": "ActionSet",
"actions": [
{
"type": "Action.ToggleVisibility",
"title": "Button1",
"targetElements":[
"item2",
"button2"
]
}
],
"id": "button1"
}
以上のように設定したとき、Button1をクリックすると Item2 と Button2 の表示・非表示が切り替わり、Button2 をクリックすると Item1 と Button1 の表示・非表示が切り替わります。
Initially Visible
各パーツのプロパティには 「Initially Visible」があります。 これはカードを最初に表示したときの表示/非表示です。
これをうまくつかうと、最初のツイートのように、あたかも表示が切り替わったように見せることができます。
item1とbutton2 の Initially Visible を False にしましょう。
さらにこの時、button1 と button2 の対象パーツは以下のように設定します。(全部です)
{
"type": "ActionSet",
"actions": [
{
"type": "Action.ToggleVisibility",
"title": "Button1",
"targetElements":[
"item1",
"button1",
"item2",
"button2"
]
}
],
"id": "button1"
}
すると、今度は表示・非表示の遷移は以下の図のようになります。
まとめ
上で見てきたように、Initially Visible プロパティと、ToggleVisible の 対象パーツを工夫することで、カードの見た目をガラリと変えることが可能になりました。
ただし注意点として、カード全体の表示切替は、2つの状態間の遷移でのみ有効 ということです。
今回の例でいえば、 「Item1, Button1 が表示された (Item2, Button2が隠れた) 状態」 と 「Item2, Button2 が表示された (Item1, Button1が隠れた)状態 」 間の切り替えです。 これに新たなItem3, Button3のような要素が加わってくると、ToggleVisibilityでの対応は難しいかと思います。
そのような3つ以上の状態を遷移させる場合の例は次回、ShowCardで解説します。
今回のカードは以下に置いておきました。
[追記] 今回作成したカードがAdaptive Cardsのサンプルを集めているサイトに掲載されました！
