今日は、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の開発に特化しています。

新規事業・スタートアップはスピードが命です。最速で開発を行いご支援します。

また、数々の新規サービス立ち上げ経験から、「ただ作るだけ」ではなく、スタートアップの進め方のコンサルティングからサポート致します。

アプリ・Webサイトの作成のご依頼・ご相談はこちら

相談は無料で承っていますので、気軽にお声がけください。

Twitterからもお気軽にどうぞ https://twitter.com/CitrusApp210