今日は、Adaloでチェックしたリスト項目の背景色を変える(グレイアウトする)方法について書いていきたいと思います。
ゴールイメージ
完成イメージはこんな感じです。
何かしらのカテゴリーをデータベースに持ち、Adaloのcustom listに表示させます。
toggle ボタンを配置して、ON・OFFを切り替えて、チェックがONになったタイミングで背景色を変えるようにするイメージです。

準備:データベース
まずはデータベースを用意しましょう。
シンプルに以下のようにCagegoriesというカテゴリを保存する領域だけ用意します。


Custom listを配置
まずはcustom list を配置します。
Categoriesのリストにし、リストにはカテゴリ名だけ表示させます。
toggle buttonを設置しUsersと紐づけてON/OFFの設定をします。


こんな感じですね。
リストの要素をグループ化してコピー
このリストの要素、rectangle、label、toggle buttonをmake groupして一つのグループにします。
そしてそれをコピーし縦に二つ並べます。
この時、両方のグループともがリストの配下にいることを確認しましょう。

こんな感じです。
sometimes visibleで両方のグループの表示の切り替えを設定
あとは、出しわけです。
sometimes visibleで以下のように設定します。
白い方のグループは「current categries のuserに自分(logged in user)が含まれていない時」。
グレイの方のグループは「current categries のuserに自分(logged in user)が含まれている時」。


Youtube動画で確認したい方はこちら
Youtubeの動画でも、リストのチェックのON/OFFによるグレイアウト機能について説明していますのでご参考まで。
ノーコードAdaloスクールはこちら
独学に限界を感じて誰かに教えて欲しい!という方はこちらからどうぞ。
Adalo公式エキスパートが初心者向けに1 on 1 で丁寧に優しく解説します。
https://adaloschool.citrusapp.jp/
最速・格安のアプリ/Webサイト開発の無料相談はこちら
合同会社CitrusApp(シトラス・アップ)では、新規事業・スタートアップ向けにコストを抑えたアプリ、WebサービスやLPの開発に特化しています。
新規事業・スタートアップはスピードが命です。最速で開発を行いご支援します。
また、数々の新規サービス立ち上げ経験から、「ただ作るだけ」ではなく、スタートアップの進め方のコンサルティングからサポート致します。
相談は無料で承っていますので、気軽にお声がけください。
