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. 管理画面の逆引きレシピ

データベース経由のCRUD操作の実現方法

前へDashcombのSQL AIアシスタントで、自然言語でSQLクエリを素早く書く次へ画面遷移の実現方法

最終更新 1 年前

Dashcombではデータベース経由のCRUD操作が簡単に実現できます。CRUD操作とはデータを操作する際の種別で、Create(作成)、Read(参照)、Update(更新)、及びDelete(削除)です。IDE画面のコンポーネントをドラッグ&ドロップして、DBデータの収集や表示、アクションの指定、通知の表示などが実現できます。

準備

  • DBレコードの作成用、参照用、更新用、及び削除用のDBクエリを作っておきます。

    • 作成方法や注意事項はを参照してください。

実現

  • CRUD操作は新規作成、参照表示(N件、1件)、参照&更新、削除機能を分けて、画面ベースの実現方法をご紹介します。


  • Create(新規作成機能)

      • 引数 {{input.value}} をSQL文に埋め込みます。

      • 引数 {{select.value}} をSQL文に埋め込みます。

    • 「クエリ」に作成系のDBクエリを指定します。(バリデーションなどを加えるのも可能)

    • 「保存」ボタンを押すと、シンプルな新規作成機能の画面が出来上がります。


  • Read(参照表示機能 N件)

      • 引数 {{input.value}} をSQL文に埋め込みます。

    • 「クエリ」に表示系のDBクエリを指定します。(バリデーションなどを加えるのも可能)

    • 「保存」ボタンを押すと、複数データの参照表示機能の画面が出来上がります。

  • Read(参照表示機能 1件)

    • 「クエリ」に一意制約の表示系DBクエリを指定します。

    • 「保存」ボタンを押すと、ユニークデータの参照表示機能の画面が出来上がります。



  • Update(参照&更新機能)

      • 一意検索の結果 {{query.data.コラム名}} をデフォルト値に入力します。


  • Read(参照表示機能 1件)で作成された詳細表示用のボタンをクリックし、一意検索用のキーを取得して、この詳細画面に渡します。

  • 「クエリ」に更新系のDBクエリを指定します。(バリデーションなどを加えるのも可能)

  • 「保存」ボタンを押すと、シンプルな参照更新機能の画面が出来上がります。


  • Delete(削除機能)

    • 「クエリ」に一意制約の削除系DBクエリを指定します。

    • 「保存」ボタンを押すと、ユニークデータの削除機能の画面が出来上がります。

参照項目

Dashcombのやをドラッグ&ドロップし、新規作成用の画面を作成します。

Dashcombのなどをドラッグ&ドロップし、入力ボックスを作成します。

Dashcombのなどをドラッグ&ドロップし、選択ボックスを作成します。

Dashcombのをドラッグ&ドロップし、新規登録用ボタンを作成します。

アクションの「タイプ」に「クエリ実行」を選びます。

詳細はにご参照ください。

Dashcombのやをドラッグ&ドロップし、参照表示用の画面を作成します。

Dashcombのなどをドラッグ&ドロップし、検索用入力ボックスを作成します。

Dashcombのなどをドラッグ&ドロップし、表示リストを作成します。

検索結果 {{query.data}} をの「ソースデータ」に埋め込みます。

Dashcombのをドラッグ&ドロップし、検索用ボタンを作成します。

アクションの「タイプ」に「クエリ実行」を選びます。

詳細はにご参照ください。

Read(参照表示機能 N件)で作成されたのアクションに詳細表示用のボタンを追加して、アクション「タイプ」に「クエリ実行」を選びます。

詳細はにご参照ください。

Dashcombのやをドラッグ&ドロップし、参照&更新用の詳細画面を作成します。

Dashcombのなどをドラッグ&ドロップし、入力ボックスを作成します。

詳細はにご参照ください。

Dashcombのをドラッグ&ドロップし、更新用ボタンを作成します。

アクションの「タイプ」に「クエリ実行」を選びます。

詳細はにご参照ください。

Read(参照表示機能 N件)で作成されたのアクションに削除用のボタンを追加して、アクション「タイプ」に「クエリ実行」を選びます。

詳細はにご参照ください。

View
Section
Input
Select
Button
Button
アクションエディタ
View
Section
Input
Table
Table
Button
Button
アクションエディタ
Table
アクションエディタ
View
Section
Input
画面遷移の実現方法
Button
Button
アクションエディタ
Table
アクションエディタ
Tableの使い方
アクションエディタ
コラムエディタ
ViewやSection
DBクエリの追加