ノーコードAdaloで、カテゴリのリストに対し、選択したカテゴリをハイライトさせる方法について書いていきたいと思います。
どういうことかというと、
↑こんな感じにSports、Animal、Foodなどのカテゴリのリストがあり、それを選択した時に青くなるように作ってみたいと思います。
準備：データベース作成
データベース構成は至ってシンプル。
カテゴリを入れるCategoriesと、投稿記事を入れるPostsを用意します。
Categories
Posts
カテゴリリストを作成
まずはこんな感じでcustom listを配置し、細長くして、subtitleは消しちゃいます。
ListはCategoryのリストにします。
次に、以下のようにrectangleとlabelをグループ化します。
ここからがポイントです。その今作ったグループをCtr-C／Ctr-Vでコピペします。そしてコピーされたリストを下にずらし、ピッタリ上下に隣り合わせてくっつけます。
そして、下の方のリストをハイライト用として色を変えます。
あとは、それぞれのTitleにcurrent categoryのnameを入れておきましょう。
今の状態を保存するためinput boxを用意
こんな感じでinput boxを置きます。ここに選択されたカテゴリを保持するためです。
input boxをおいたら次は、リストを選択した時にカテゴリを保存するアクションを定義します。
↑このように、リストの白い方のGroupを選択した際にchange input valueでinput boxの値に「Current Categoryのname」を入れておきます。
sometimes visibleで通常リストとハイライトリストを切り替え
以下のように、白い方の通常リストの条件をつけます。「Current CategoryのNameがinput boxのカテゴリと同じじゃない時」に表示します。
あとは、青い方（ハイライト用）もこれと反対のロジック（Current CategoryのNameがinput boxのカテゴリと同じ時に表示）を入れてあげればOKです。
右側のリスト（絞り込まれた記事表示用）を作成して完了。
あとは、右側のリストを以下のように作成して完了です！
こちらは簡単なので細かい説明は省きますね。
Adaloの解説Youtube動画も参考まで
Youtube動画でもAdaloで選択したカテゴリをハイライトさせる方法を解説しています。
ご参考まで！
アプリ・Webサービスの開発の無料相談はこちら
Adalo、bubble、STUDIOなどのノーコードを使うことで、リスクを抑えてスピーディにビジネスアイデアを形にすることができます。
弊社はスタートアップ・新規事業向けにコストを抑えた最速のアプリ・Webサービスの開発、さらにはサービス立ち上げのコンサルティングから提案を行なっております。
アプリ、Webサービス、LPなどの構築に興味のある方は、ぜひこちらからご気軽にご相談ください。