10
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

GxPの上野です。

この記事はグロースエクスパートナーズ アドベントカレンダーの4日目の記事となります。

現在案件で使用しているretoolについてご紹介したいと思います。

概要はnyasbaさんのこちらの記事で詳しくわかりやすく説明されています。

私は開発でretoolを使用していく中で「こういう時どうすればいいんだろう?」
と思ったこととその対処法をまとめていきたいと思います。

retoolはあらかじめ用意されたフォームやテーブルやボタンなどの
コンポーネントを組み合わせてwebアプリを作成していくツールです。

チュートリアルはこちら

retoolの開発画面の初期状態はこんな感じです。
new.PNG

画面右側にあるコンポーネントをドラッグ&ドロップして
追加していくことで自分がイメージする画面を形にすることができます。
form.PNG

またデータベースに接続してSQLを書くことで画面に表示するデータ
や画面で加工したいデータを取得できます。
SQLを動かすタイミングも画面の初期表示時、特定のボタンが押されたとき
テーブルの値が変わったときなど選ぶことができます
query.png

必要事項を全部入力したときだけボタンを押せるようにしたいとき

モーダルを実装するときに入力項目がすべて入力されている場合のみ
ボタンを押せるようにするよう実装する必要がありました。

入力フォームやプルダウンを選択し、INTERACTION -> Event Handlersを
クリックするとボタンの制御の設定を行うことができます。

下の画像では
・item1の入力フォームに文字が入力されている
・item2のプルダウンで値が選択されている
・item3のプルダウンで値が選択されている

の3つの条件を満たしているときにbutton1を活性化するよう制御しています

modal.png

プルダウンで選んだ値によってフォームを制御したいとき

下の画像のように職業の選択肢が3つ(会社員、自営業、その他)あり、
その他を選んだ時だけ自由記述のフォームを活性化したい、といったケースがあると思います。
job.PNG

その時はテキストフォームのINTERACTION -> Read Onlyで
「その他」以外の選択肢が選ばれたときは入力できないよう制御することができます。

job2.PNG

プルダウンで選んだ値によってフォームをクリアしたいとき

先ほどの続きでプルダウンで「その他」を選択して値を入力した後、
プルダウンを「会社員」や「自営業」に変更した場合はテキストフォームは
空欄に戻す必要があります。

その場合はセレクトボックスのINTERACTION -> Event Handlersで
「その他」以外の値が選択されたときはテキストフォームの値をクリアするよう
設定できます

job3.PNG

Javascriptの実装経験がある皆さんは
retoolを活用することで楽しくwebアプリを開発することができるのではないかと思います。

10
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?