Dashcomb Help Center
  • 初めてのDashcomb体験
  • IDE画面と利用者画面
  • IDE画面の使い方
    • IDE画面のメニュー構成
      • ユーザーメニュー
      • コンポーネント
      • インスペクター
    • View-Section-Componentの関係
    • UI Compoment
      • Button
      • Input
      • Textarea
      • Label
      • Markdown
      • Select
      • Radio
      • Checkbox
      • Switch
      • Date Picker
      • Time Picker
      • Table
      • Image
      • Uploader
      • Importer
      • Divider
    • BI Component
      • 棒グラフ
      • 折り線グラフ
      • 円グラフ
    • Layout component
      • Section
      • Row
    • 連携機能パネル
      • DBクエリ
      • API
      • クラウドストレージ
      • オートメーション
      • JavaScript
    • プロパティパネル
      • アクションエディタ
      • コラムエディタ
      • テキスト/コードエディタ
    • オブジェクトやデータの参照
    • Edit Lock機能
    • その他のメニュー
      • バッチ処理
      • データソース
        • データベースと接続する
        • API と接続する
        • クラウドストレージと接続する
      • 権限グループ
      • バージョン管理
      • 設定
      • 料金と支払
  • 利用者画面の使い方
    • 画面領域の紹介
  • 管理画面の逆引きレシピ
    • ユーザー入力を検証する方法
    • ユーザーがCSVファイルやJSONファイルをデータベースにインポートできるようにする
    • データを視覚化し、簡単に洞察を得る
    • 承認ワークフローで、データの正確性と責任の所在を確保する
    • DashcombのSQL AIアシスタントで、自然言語でSQLクエリを素早く書く
    • データベース経由のCRUD操作の実現方法
    • 画面遷移の実現方法
    • API経由のCRUD操作の実現方法
    • APIのリクエストに複雑なデータを入れる
    • 簡単なCDNのファイル管理
    • Tableの数字をフォーマット
    • Tableに画像を表示
    • Data Sourceを追加
    • 画面にDBクエリの追加
    • 画面にクラウドストレージの追加
    • CSV/JSONデータのインポートとダウンロード
    • 承認フローを作成
    • Firebase連携したい
    • 踏み台サーバーを作る
    • 画像をS3, GCSにアップロード
    • Tableの行ごとの選択に応じて内容を変える
    • 動作成功後、失敗後自動的に次の動作を発火する
    • APIの認証情報を設定する
    • ひらがなのみ・カタカナのみのバリデーション
    • ページ読み込み時に実行する処理を設定する
    • ラベル文字をJavaScriptで設定
    • selectedOptionの属性をJSで取得する
GitBook提供
このページ内
  • プロパティ
  • 共通
  • オブジェクト
  • データ
  • アクション
  • 外観
  1. IDE画面の使い方
  2. UI Compoment

Textarea

前へInput次へLabel

最終更新 1 年前

TextareaはInputと似ている機能です。Dashcombが提供しているTextareaは、通常のHTMLのTextareaをベースにしています。管理画面の用途に合わせて、バリデーションの機能を内蔵しています。用途によって、複数のバリデーションのパターンから選んで設定できます。

バリデーションは Dashcombが提供している標準的なバリデーション以外にも、正規表現を使って独自のバリデーションパターンを設定できます。


プロパティ

Textareaコンポーネントには、以下のプロパティが含まれています。

共通

オブジェクト

テキストエリアオブジェクトの変数名です。Textareaコンポーネントをドラッグ&ドロップすると、そのオブジェクトが自動的に textarea1、textarea2... と名付けられます。

ここで設定した変数名は、構文 {{オブジェクト名.プロパティ}} でオブジェクトを参照するために利用できます。

(例){{textarea.value}} で textarea1 の表示状態の真偽値を取得することができます。

非表示

トグルスイッチをONにすると、テキストエリアが非表示になります。

現在の設定値は、{{オブジェクト名.readonly}} で参照できます。

無効

トグルスイッチをONにすると、テキストエリアが無効になり、入力できなくなります。

通常のhtmlのtextarea 要素のdisabled 属性に該当します。

現在の設定値は、{{オブジェクト名.disabled}} で参照できます。

読取専用

トグルスイッチをONにすると、テキストエリアが読取専用になり、値を変更できなくなります。

通常のhtmlのtextarea要素のreadonly属性に該当します。

現在の設定値は、{{オブジェクト名.readonly}} で参照できます。

入力必須

トグルスイッチをONにすると、テキストエリアが必須入力になります。

通常のhtmlのtextarea要素のrequired属性に該当します。

現在の設定値は、{{オブジェクト名.required}} で参照できます。

データ

ラベル文字

テキストエリアの項目名を表すラベルテキストです。Textareaコンポーネントをドラッグ&ドロップすると、自動的に TextArea に設定されます。

TextArea を任意の文字列に入れ替えることはもちろん、構文 {{オブジェクト名.プロパティ}} を入れることにより、動的に設定することができます。

入力ヒント

テキストエリアのプレースホルダーです。テキストエリアに何も入力されていない場合に、入力例として表示されます。

通常のhtmlのtextarea要素のplaceholder属性に該当します。

{{オブジェクト名.プロパティ}} 構文を用いて、動的に設定することができます。

現在の設定値は、{{オブジェクト名.placeholder}} で参照できます。

デフォルト値

テキストエリアのデフォルト値です。画面を開いた時点で、value属性に自動的に設定される値を指定します。初期値は空文字列("")です。

{{オブジェクト名.プロパティ}} 構文を用いて、動的に設定することができます。

現在の設定値は、{{オブジェクト名.defaultValue}} で参照できます。

最小文字数

入力を受付ける最小文字数を数値で指定します。

最大文字数

入力を受付ける最大文字数を数値で指定します。

かな/カナ

制限なし, ひらがなのみ, カタカナのみ から選択します。

正規表現(機能のON/OFF)

正規表現でのバリデーションを設定することができます。トグルスイッチをONにすると、設定欄が表示されます。

正規表現

バリデーションに利用する正規表現の式を記入します。

正規表現式に加えて、{{オブジェクト名.プロパティ}} 構文を用いて、バリデーションの条件を動的に設定することができます。

{{currentUser.name}}+[a-zA-Z0-9_.+-]+@gmail.com を入力することで、Gmailかどうか、もしくは現在の使用者の名前に似ているメールアドレスかどうかの検証ができます。

エラーメッセージ

正規表現による文字列を検証の結果、エラーになった場合に表示するメッセージを記入します。

{{オブジェクト名.プロパティ}} によって、動的に設定することも可能です。

(例){{currentUser.name}}さん、Gmailを入力してください を入力することで、エラーメッセージに現在のユーザーの名前を動的に入れることができます。

アクション

Textareaコンポーネントのアクションは、以下を設定することができます。

onChange

テキストエリアのonChange イベントの発生時(Textareaの入力内容が変更された時)に、指定アクションを実行できます。

onForcus

テキストエリアのonForcus イベントの発生時(Textareaがフォーカス状態になった時)に、指定アクションを実行できます。

onBlur

テキストエリアのonBlur イベントの発生時(Textareaがフォーカス状態でなくなった時)に、指定アクションを実行できます。

onEnter

テキストエリアのonEnter イベントの発生時(Textareaがフォーカス状態でEnterキーを押された時)に、指定アクションを実行できます。

外観

高さ

Textareaコンポーネントの高さを指定します。初期設定では2行に設定されており、最小設定は1行です。

ラベル

テキストエリアのラベルテキストの表示・非表示を切り替えます。

トグルスイッチをOFFにすると、テキストエリアのラベルが非表示になりますが、テキストエリア本体に影響はありません。

以下の項目で表示を調整できます。

項目名
設定内容

ラベル整列

ラベルテキストの行内の表示位置を設定できます。右寄せ、左寄せ、中央揃え の3つから選択できます。

ラベル位置

ラベルテキストと入力欄の並べ方を設定できます。上下並べ、または左右並べから選択できます。

ラベル横幅

ラベル位置を「左右並べ」に設定したときの、ラベルテキストの表示領域の横幅を指定できます。初期値は33%です。

利用できるオブジェクトとプロパティは、 で確認できます。

{{}} 構文については、 のページを参照してください。

インスペクターメニュー
オブジェクトやデータの参照