脱!教養ゼロママ

もう恥ずかしくない!教養のあるママを目指してます!

MENU

スイッチボタンを設定してみる|初心者のアプリ開発|Adalo

f:id:yuka-edu:20211003110555p:plain

こんにちは!ゆかゆかです。

 

今日はスイッチボタンを設定してみます。

 

スイッチボタンはスマホの設定とかでよく見かけるやつですね。

右と左のスライドでON/OFFを切り替えられるようにします。

 

今回は、写真共有アプリ用の写真で

公開ON/OFFを設定できるスイッチボタンを用意してみます。

 

 

1. Adaloの設定

MarketplaceからSwichをダウンロード

まずはMarketplaceからSwichをインストールしてください。

  1. + ボタン > ADD COMPORNENT > EXPLORE MARKETPLACE を選択
  2. Switch をINSTALL

f:id:yuka-edu:20211003130708j:plain

スイッチ用項目の準備

続いて、スイッチに使用する項目を用意していきます。

「TRUE / FALSE」項目を用意すればスイッチを使用できます。

 

  1. 任意のデータコレクションの + ADD PROPERTY を選択

f:id:yuka-edu:20211003130658j:image

 

  1. True / False を選択

f:id:yuka-edu:20211003130715j:image

 

  1. 項目名を設定
  2. SAVEを選択

今回は、写真共有アプリ用の写真を公開を制御する項目を用意します。

f:id:yuka-edu:20211003130655j:image

 

左の画面の写真をタップして、写真の詳細に飛んだ時に

公開のOn/Off スイッチを設定してみます!

f:id:yuka-edu:20211003130712j:image

  1. + を選択
  2. ADD COMPONENT を選択
  3. Installed > Switch を選択

f:id:yuka-edu:20211003130703j:image

 

画面の右上に設置しました。

  1. What does this switch change? を選択

f:id:yuka-edu:20211003130705j:image

 

  1. Current 写真(オブジェクト名) > 公開(先ほど作った項目)を選択

f:id:yuka-edu:20211003130729j:image

 

Actions when switch turned ON

スイッチがOnになった時の設定をしていきます。

  1. + ADD ACTION を選択
  2. Update > Current 写真

f:id:yuka-edu:20211003130700j:image

 

  1. 公開項目にTrueを設定

f:id:yuka-edu:20211003130723j:image

これで、スイッチをOnにした時に公開項目がOnになる設定ができました。

 

Actions when switch turned OFF

続いて、スイッチがOffになった時の設定をしていきます。

  1. + ADD ACTION を選択
  2. Update > Current 写真

f:id:yuka-edu:20211003130710j:image

 

  1. 公開項目にFalseを設定

f:id:yuka-edu:20211003130727j:image

これで、スイッチをOffにした時に公開項目がOffになる設定ができました。

 

まとめ

On / Off できるスイッチボタンを設定してみました。

通常のフォームのラジオボタンでも悪くはないですが、より視覚的で良いですよね。

お役に立てると嬉しいです。

 

♡・・*・・♡・・*・・♡・・*・・♡・・*・・♡・・*

最後までご覧いただき、ありがとうございました。

 

 

▽ NoCodeアプリ Adalo

www.adalo.com