入力ウィジェット

入力ウィジェットは、クリックやテキスト入力などのユーザー入力を処理するために使用します。

ボタン ウィジェット ボタン

ユーザーはボタンをクリックして、フォームの送信やメールの送信などの操作を実行します。

使用方法

ボタンをページにドラッグし、プロパティ エディタを使用してテキスト、外観、機能を構成します。

一般的なワークフロー

  • プロパティ エディタで、アプリユーザーによるボタンのクリック(onClick イベント)など、イベントに応じて取るアクションを設定します。
  • データソースやスクリプトにラベルのテキストをバインドします。

スタイル設定

アクションバーのテーマ選択ツールを使用して、ボタンの外観を制御します。

詳細情報

Widget API に、スタイル、プロパティ、メソッド、イベントに関する詳細情報があります。

多くのサンプルテンプレートでボタンが使用されています。

ラベル ウィジェット ラベル

ラベル ウィジェットは、ページ上のオブジェクトにテキストラベルを追加するために使用します。

使用方法

ラベルをページにドラッグし、プロパティ エディタを使用してテキストと外観を構成します。

一般的なワークフロー

  • 画像にキャプションを付けます。
  • ラベルの text プロパティをデータソースにバインドします。

スタイル設定

アクションバーのテーマ選択ツールを使用して、ラベルの外観を制御します。書体とフォントサイズを詳細にカスタマイズできます。

詳細情報

Widgets API に、このウィジェットのスタイル、プロパティ、メソッド、イベントに関する詳細情報があります。

多くのサンプルテンプレートでラベルが使用されています。

テキスト ボックス ウィジェット テキスト ボックス

テキスト ボックス ウィジェットは、テキストの入力と編集を行う場所を指定するために使用します。

使用方法

テキスト ボックスをページにドラッグし、プロパティ エディタを使用してラベル、外観、初期値を構成します。

一般的なワークフロー

  • テキストを入力する場所を指定します。
  • デフォルトの、編集可能なテキスト値をユーザーに対して表示します。
  • 初期値をデータソースにバインドします。

スタイル設定

アクションバーのテーマ選択ツールを使用して、検索アイコン付きなど、さまざまな外観から選択します。

マテリアル ギャラリーのテンプレートに、テキスト ボックスがいくつかあります。

詳細情報

Widget API に、スタイル、プロパティ、メソッド、イベントに関する詳細情報があります。

テキストエリア ウィジェット テキストエリア

テキストエリア ウィジェットは、テキストを入力する大きなスクロール フィールドを指定するために使用します。

使用方法

テキストエリアをページにドラッグし、プロパティ エディタを使用してテキストと外観を構成します。

一般的なワークフロー

  • スクロールが必要になる長いテキスト値を入力できるようにします。
  • ラベルの text プロパティをデータソースにバインドします。

スタイル設定

アクションバーのテーマ選択ツールを使用して、テキストエリアの外観を制御します。

マテリアル ギャラリーのテンプレートに、テキストエリアがいくつかあります。

詳細情報

Widget API に、スタイル、プロパティ、メソッド、イベントに関する詳細情報があります。

チェックボックス ウィジェット チェックボックス

チェックボックス ウィジェットは、バイナリのオンまたはオフの選択をユーザーに提供するために使用します。

使用方法

チェックボックスをページにドラッグし、プロパティ エディタを使用してラベルと初期値を構成します。

一般的なワークフロー

  • 設定を有効または無効にできるようにします。
  • 値をバインドして、特定のオン / オフ機能のステータスを表示します。

スタイル設定

アクションバーのテーマ選択ツールを使用して、ウィジェットをチェックボックスまたはスライダーとして表示します。

マテリアル ギャラリーのテンプレートに、チェックボックスがいくつかあります。

詳細情報

Widget API に、スタイル、プロパティ、メソッド、イベントに関する詳細情報があります。

プルダウン ウィジェット プルダウン

プルダウン ウィジェットは、オプションの一覧から選択できるようにするために使用します。このウィジェットは、可能性のある値のセットから値を割り当てるときや、単一のリレーション エンドを設定するときに役立ちます。

使用方法

プルダウン ウィジェットをページにドラッグし、プロパティ エディタを使用してオプションを構成します。

一般的なワークフロー

  • ユーザーがいくつかあるオプションから 1 つを選択できるようにします。
  • プルダウン リストにデータモデルのアイテムを入力します。

プルダウン ウィジェットの重要なプロパティを次に示します。

プロパティ 説明
value ユーザーのプルダウン選択に基づいて、databound プロパティに割り当てられた値
options プルダウンの内容を構成するオプションの文字列表現の配列
names options のデフォルト文字列の代わりに表示される文字列の配列。配列は options と同じ長さにする必要があります。
allowNull オンになっている場合にプルダウンの初期の valuenull に設定するチェックボックス
nullItemName プルダウンの null 値に対して表示される文字列。多くの場合、ユーザー選択のプロンプトとして使用されます。

プルダウン バインディングの例を次に示します。

この簡単な例では、リストの ColorNames プロパティの射影で表される Colors リストから FavoriteColor を選択できます。

  • value: @datasource.item.FavoriteColor
  • options: @datasources.Color.items
  • names: @datasources.Color.items..ColorNames

この例では、Currency フィールドを possibleValues プロパティにリストされている通貨の 1 つに割り当てられます。

  • value: @datasource.item.Currency
  • options: @datasource.model.fields.Currency.possibleValues

この例では、InternetSpeed を配列リテラルからなる JavaScript 式にバインドできます。

  • value: @datasource.item.InternetSpeed
  • options: ["Google Fiber", "Cable Modem", "DSL", "Dial up"];

スタイル設定

アクションバーのテーマ選択ツールを使用して、プルダウンの外観を制御します。

マテリアル ギャラリーのテンプレートで、プルダウン ウィジェットが使用されています。

詳細情報

Widget API に、スタイル、プロパティ、メソッド、イベントに関する詳細情報があります。

日付ボックス ウィジェット 日付ボックス

日付ボックス ウィジェットは、日付を入力できるようにするために使用します。ユーザーは手動で日付を入力できるほか、カレンダー アイコンをクリックすることで日付選択ツールを表示できます。

使用方法

日付ボックス ウィジェットをページにドラッグし、プロパティ エディタを使用して日付形式やタイムゾーンなどのオプションを構成します。

一般的なワークフロー

  • 表、フォーム、テキストエリアに日付を入力できるようにします。

スタイル設定

アクションバーのテーマ選択ツールを使用して、日付ボックスの外観を制御します。

出張承認のテンプレートに、日付ボックスがいくつかあります。

詳細情報

Widget API に、スタイル、プロパティ、メソッド、イベントに関する詳細情報があります。

ラジオボタン グループ ウィジェット ラジオボタン グループ

ラジオボタン グループ ウィジェットは、事前構成済みオプションの 1 つを選択するために使用します。

使用方法

ラジオボタン グループ ウィジェットをページにドラッグし、プロパティ エディタを使用して値とオプションを構成します。

一般的なワークフロー

ラジオボタン グループを使用すると、ユーザーは options の配列から value を 1 つ選択できます。

スタイル設定

アクションバーのテーマ選択ツールを使用して、ウィジェットを水平に表示するか垂直に表示するかを制御します。

詳細情報

Widget API に、スタイル、プロパティ、メソッド、イベントに関する詳細情報があります。

評価ウィジェット 評価

評価ウィジェットは、ページ上の別のオブジェクトに評価を付けられるようにするために使用します。

使用方法

評価ウィジェットをページにドラッグし、プロパティ エディタを使用して、星の総数や、ウィジェットの読み込み時に選択される星の数などのオプションを構成します。

一般的なワークフロー

  • 星の数を設定して値をデータソースにバインドします。

スタイル設定

アクションバーのテーマ選択ツールを使用して、ウィジェットで星とハートのどちらを使用するかを選択します。

ベンダー評価のテンプレートで、星評価が使用されています。

詳細情報

Widget API に、スタイル、プロパティ、メソッド、イベントに関する詳細情報があります。

スライダー ウィジェット スライダー

スライダー ウィジェットは、値の範囲から選択できるようにするために使用します。

使用方法

スライダー ウィジェットをページにドラッグし、プロパティ エディタを使用して値の範囲などのオプションを構成します。

一般的なワークフロー

  • 値の範囲を設定してデータソースにバインドします。

スタイル設定

このウィジェットにスタイル設定オプションはありません。

マテリアル ギャラリーのテンプレートに、スライダー ウィジェットがあります。

詳細情報

Widget API に、スタイル、プロパティ、メソッド、イベントに関する詳細情報があります。

候補ボックス ウィジェット 候補ボックス

候補ボックス ウィジェットは、事前構成済みの値でテキスト フィールドに入力できるようにするために使用します。

使用方法

候補ボックス ウィジェットをページにドラッグし、プロパティ エディタを使用してオプションを構成します。

一般的なワークフロー

  • value プロパティを使用して値を指定し、options を使用して候補の値を指定します。options のアイテムの種類は、value のアイテムの種類と一致する必要があります。
  • 候補ボックスを構成して、指定できる値を持つフィールドや関係からの候補を表示する、または既存のモデルのレコードに対する候補を表示できます。これは現在のところ、候補テキスト フィールドの UI を使用することでしか実施できません。

スタイル設定

アクションバーのテーマ選択ツールを使用して、候補ボックスの外観を制御します。

ベンダー評価のテンプレートで、候補ボックス ウィジェットが使用されています。

詳細情報

Widget API に、スタイル、プロパティ、メソッド、イベントに関する詳細情報があります。

テキスト エディタ ウィジェット テキスト エディタ

テキスト エディタ ウィジェットは、長いテキスト エントリを書いて書式設定できるテキスト エディタを提供するために使用します。

使用方法

テキスト エディタ ウィジェットをページにドラッグし、プロパティ エディタを使用してオプションを構成します。

一般的なワークフロー

  • スクロールが必要になる長いテキスト値を入力できるようにします。
  • ラベルの text プロパティをデータソースにバインドします。

スタイル設定

アクションバーのテーマ選択ツールを使用して、テキスト エディタの外観を制御します。

ベンダー評価のテンプレートで、テキスト エディタ ウィジェットが使用されています。

詳細情報

Widget API に、スタイル、プロパティ、メソッド、イベントに関する詳細情報があります。

複数選択ウィジェット 複数選択

複数選択ウィジェットを使用すると、ユーザーはオプションの配列から複数のアイテムを選択できます。

使用方法

複数選択ウィジェットをページに追加し、プロパティ エディタを使用してオプションを構成します。

アプリユーザーが選択できるオプションを設定するには、options プロパティを設定します。[options] をクリックし、バインディング コードエディタで次のいずれかを入力します。

  • ["east", "north", "south", "west"] などのオプションの配列
  • 次の構文を使用した、データソース フィールド内の items へのバインディング

    @datasource.items..field-name

    .. は、フィールドの値のコンパイル済みリストにアクセスできるようにする射影演算子です。たとえば、モデルに Region という名前のフィールドがある場合、すべてのレコードの Region の値に複数選択オプションを設定できます。そのためには、バインディング @datasource.items..Region を使用します。あるレコードの Region が「east」で、別のレコードでは「north」、「south」の場合、アプリではオプションとして「east」、「north」、「south」を選択できます。

ユーザーが選択した値を保存するには、データ バインディングで values プロパティを設定します。ユーザーが複数の文字列を選択した場合は、配列に変換する必要があります。配列を作成する手段の 1 つとして、strToArray バインディング変換を使用する方法があります。

@datasource.item.field-name#strToArray()

options のアイテムの種類は、values のアイテムの種類と一致する必要があります。

一般的なワークフロー

  • 繰り返しフィールドに値を割り当てる、または多のリレーション エンドを設定するために使用します。

スタイル設定

アクションバーのテーマ選択ツールを使用して、複数選択ウィジェットの外観を制御します。

選択オプションのチュートリアルで、複数選択ウィジェットの設定方法を説明しています。ベンダー評価のテンプレートでは、複数選択ウィジェットが使用されています。

詳細情報

Widget API に、スタイル、プロパティ、メソッド、イベントに関する詳細情報があります。

ドライブ選択ツール ウィジェット ドライブ選択ツール

ドライブ選択ツール ウィジェットは、ドライブ内のファイルを探してアプリにアップロードできるようにするために使用します。

使用方法

  1. ユーザーとして実行するようにアプリを構成します。
  2. ドライブ選択ツール ウィジェットをページにドラッグし、プロパティ エディタを使用してオプションを構成します。

一般的なワークフロー

このウィジェットは次に示すものを返します。

  • ファイル名
  • ファイルへのリンクに使用できるファイル URL
  • ファイル オブジェクトの取得に使用できるファイル ID。これにより、次のような演算子を呼び出すことができます。
    • File.setOwner(user)
    • File.setStarred(starred)
    • File.setTrashed(trashed)
    • File.makeCopy()
    • File.getDownloadUrl()

このウィジェットを使用するには、アプリをユーザーとして実行するように構成する必要があります。

デフォルトでは、ドライブ選択ツール ウィジェットを使用すると、ユーザーは Google ドライブのファイルやユーザーのパソコンのファイルを選択して Google ドライブにアップロードできます。ドライブ選択ツールの [Drive Picker] プロパティ グループには、ビューにタブを追加する views プロパティがあります。たとえば、ドライブ選択ツールのタブにユーザーの Google ドライブ フォルダを表示するには、views プロパティに FOLDERS を追加します。Google 画像検索タブを追加するには、IMAGE_SEARCH を追加します。ユーザーの Google ドライブのスプレッドシートのみを表示するタブを表示するには、SPREADSHEETS を追加します。ドライブ選択ツール ウィジェット内のビューの詳細については、選択ツールのクラスのリファレンスをご覧ください。

Drive Picker プロパティ グループの features プロパティを使用すると、ビューの動作を変更できます。たとえば MULTISELECT_ENABLED を追加すると、ユーザーは一度に複数のアイテムを選択できます。ドライブ選択ツール ウィジェットの機能の詳細については、選択ツールのクラスのリファレンスをご覧ください。

フォルダビューを追加すると、ドライブ選択ツールはユーザーが最後に表示したフォルダを記憶し、ユーザーがドライブ選択ツールボタンを再度クリックするとそのフォルダが表示されます。ウィジェット上部のナビゲーション パスに表示されているフォルダ名をクリックすると、そのフォルダに直接移動できます。

スタイル設定

アクションバーのテーマ選択ツールを使用して、ドライブ選択ツールの外観を制御します。

ベンダー評価のテンプレートで、ドライブ選択ツール ウィジェットが使用されています。

詳細情報

Widget API に、スタイル、プロパティ、メソッド、イベントに関する詳細情報があります。

ユーザー選択ツール ウィジェット ユーザー選択ツール

ユーザー選択ツール ウィジェットを使用すると、ユーザーは組織内の他のユーザーを見つけられます。ユーザーの種類として、ウィジェットは写真、名前、メールアドレスを伴うオートコンプリート候補を表示します。

使用方法

  1. アプリにディレクトリ モデルを追加します。
  2. ユーザー選択ツール ウィジェットをページにドラッグし、プロパティ エディタを使用してオプションを構成します。

一般的なワークフロー

  • 選択したユーザーのメールアドレスを、モデルのフィールドにバインドします。

スタイル設定

アクションバーのテーマ選択ツールを使用して、ユーザー選択ツールの外観を制御します。

ドキュメント承認のテンプレートで、ユーザー選択ツール ウィジェットが使用されています。

詳細情報

Widget API に、スタイル、プロパティ、メソッド、イベントに関する詳細情報があります。