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提供
このページ内
  • View
  • 共通
  • データ
  • パラメータ
  • メニュー
  • Section
  • Component
  1. IDE画面の使い方

View-Section-Componentの関係

このセクションでは、管理画面を構成するView, Section, Componentの関係について説明します。

前へインスペクター次へUI Compoment

最終更新 1 年前

簡単に言えば、Viewは画面、Sectionは画面中の段落、Componentは段落の中の部品という位置付けです。

View


共通

オブジェクト

ビューオジェクトの変数名です。

サブメニューを作成すると、そのViewオブジェクトが自動的に View と名付けられます。

View オブジェクトのプロパティの値は、{{ View.プロパティ名 }} で参照することができます。

他のコンポ―ネントと異なり、View オブジェクトの変数名は変更できません。

データ

タイトル

画面上に表示される、タイトルのテキストです。初期値として、 title が自動で設定されます。

入力欄に設定したテキストが、作成する管理画面のタイトルとして一番上に表示されます。

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

(例)title を {{currentUser.name}} に書き換えると、タイトルとしてログイン中のユーザー名が表示されます。

トグルスイッチをOff にすると、タイトルは非表示になります。

概要説明

ページの概要を説明するテキストです。初期値として、 description が自動で設定されます。

入力欄に設定したテキストが、作成する管理画面の概要としてタイトルの下に表示されます。

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

(例)description を {{currentUser.name}}の作業画面です。に書き換えるえると、ユーザー画面にはユーザーの名前が表示されます。

パラメータ

管理画面が受け取るパラメータを設定できます。

画面パラメータの追加

新たに追加した画面パラメータ名は、自動的に keyName0, keyName1 ... と名付けられます。

画面パラメータ名は、任意の文字列に変更できます。画面パラメータ名に利用できるのは半角英数字のみです。 {{}} 構文は利用できません。

ここでは画面パラメーターの変数名だけを設定します。画面パラメーターの値は、他の画面から取得します。

必須設定

画面パラメータの削除

メニュー

表示名称

Viewが所属しているサブメニュー名です。値を変更すると、サブメニューの名前も連動して変更されます。利用できるのは半角英数字のみです。 {{}} 構文は利用できません。

パス定義

この画面を表示するためのURLのパスです。初期値は、自動生成されたハッシュ値です。任意の値に変更することができます。利用できるのは半角英数字のみです。 {{}} 構文は利用できません。

非表示

トグルスイッチをONにすると、当該画面と、対応するサブメニューがユーザー画面上に表示されなくなります。

外部リンク

トグルスイッチをONにすると、サブメニューが外部リンクになります。メニューをクリックした際に、管理画面を開く代わりに入力欄に設定したURLへ遷移します。

URL入力欄は、 {{ }} 構文を利用できません。

Section

Dashcombが提供しているSectionとはHTMLの <section> や <div> に相当しています。SectionはDashcombが提供しているViewに依存しますので、ViewにSectionやComponentをドラッグ&ドロップすることでセクションが作成されます。また、一つのページの中で複数のSectionはお互いにより独立な意味か機能を持っていますので、それぞれにアクション指定やバリデーション作動させることもできます。

Component

Dashcombが提供しているComponentは画面レイアウトや内容を実装する際に使います。<input>、<button>、<table> などHTMLの主なタグに機能的に似ていますが、Dashcombはそれらよりもっと使いやすく便利なコンポーネントを提供しています。ComponentはDashcombが提供しているViewやSectionに依存しますので、ViewやSectionにComponentをドラッグ&ドロップすることでコンポーネントが作成されます。

Dashcombが提供しているViewとはHTMLのページや画面に相当しています。ViewはDashcombが提供していると紐付けていますので、をクリックすると、該当のViewが表示されています。

View オブジェクトが保持しているプロパティとその値は、 メニューで確認できます。

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

をクリックすると、画面パラメータが追加されます。

をクリックすると、画面パラメータを必須に設定できます。

をクリックすると、画面パラメータが削除されます。

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