【NoCode Glide入門】Text entryの表示変更、Hint text、入力の必須化などまとめ
この記事の目次
動画
Text entryの基本
Text entryは文字を入力するためのものです。
ListやChecklistなどで項目を追加するときなどに使います。
実際に使ってみましょう。
『Simple Store』テンプレートをコピーして、
変更できるようにしておいてください。
それではやっていきましょう。
まずは項目を追加できるようにしていきます。
ADDを押して
『Allow users to add items』にチェックを入れましょう。
すると新しい項目を追加する画面が表示されます。
ここにText Entryを表示させて、入力された文字列を項目として追加できるようにしましょう。
右上のプラスボタンを押します。
するとComponent一覧が出てくるので、『Text Entry』を押しましょう。
すると、文字を入力できるようになります。
入力された文字は、追加を押すと
User Inputに指定されている列に追加されます。
今回の場合は『Item』が指定されているので、『Item』に追加されます。
試しに『着物』と入力し、
『追加』ボタンを押しましょう。
すると、スプレッドシートの『Item』に『着物』が追加されます。
ItemはListと連動しているので、Listにも着物が追加されています。
Text entryの表示を変える
次にText entryの表示を変えていきます。
プラスボタンを押して、
Text Entryをクリックしましょう。
すると、Text Entryの詳細を見ることができます。
Text Entryの表示はTitleの値と対応しています。
今回は『Text』としたので、Text Entryは
『Text』と表示されています。
表示を『Item』と変えてみましょう。
するとText Entryが『Item』と表示されるようになります。
Text entryのHint Textを表示する
次にText entryのHint Textを表示してみましょう。
Hint Textというのは入力欄の背景に表示される入力を促すテキストのことです。
Hint Textは薄い文字で表示されます。
Hint Textを表示したい場合は『Hint Text』に文字を入力するだけです。
今回は『itemを入力してください』と記述してみましょう。
するとHint Textが表示されます。
Text entryの入力を必須にする
Text entryは追加する時に、他のComponentがあれば、何も入力せずに空欄で追加することができます。
例えば、新しくText Entryを追加して、文字を打ち込んだ場合、
Text Entryの値が空でも
『追加』を押すことができます。
Text entryが空欄では追加できないようにするには、Requiredにチェックを入れる必要があります。
古い方の『Text Entry』をクリックして、
『Required』にチェックを入れましょう。
するとRequiredにチェックが入ったText entryに『必須』と表示されます。
これで、他のText entryに文字が入力されていても、
『必須』と表示されているText entryに文字が入力されていなければ、
『追加』を押せなくなりました。
