API経由のCRUD操作の実現方法
DashcombではAPI経由のCRUD操作が簡単に実現できます。CRUD操作とはデータを操作する際の種別で、Create(作成)、Read(参照)、Update(更新)、及びDelete(削除)です。IDE画面のコンポーネントをドラッグ&ドロップして、APIデータの収集や表示、アクションの指定、通知の表示などが実現できます。
準備
接続用REST APIや接続設定をしておきます。
APIデータの作成用、参照用、更新用、及び削除用の管理画面を作っておきます。
実現
CRUD操作は新規作成、参照表示(N件、1件)、参照&更新、削除機能を分けて、画面ベースの実現方法をご紹介します。
Create(新規作成機能)
管理画面のクエリ領域で「API」タブをクリックします。
「+」アイコンを押して、API名を作成します。(例えば
api_add
)データソースリストから用意したREST APIを選びます。
「実行前アクション」に「アクション無し」、「確認」、「承認」を選べることができます。
ここでは初期の「アクション無し」を選びます。
続いては「POST」を選んで、エンドポイントに
/hoge
などを入力します。DashcombのInputなどをドラッグ&ドロップし、入力ボックスを作成します。
引数
{{input名.value}}
を「POST」のJSON入力ボックスなどに埋め込みます。
APIを「保存」します。
DashcombのButtonをドラッグ&ドロップし、新規登録用ボタンを作成します。
Buttonアクションの「タイプ」に「クエリ実行」を選びます。
「クエリ」に先ほど作成したAPI(例では
api_add
)を指定します。(バリデーションなどを加えるのも可能)詳細はアクションエディタにご参照ください。
「保存」ボタンを押すと、シンプルな新規作成機能の画面が出来上がります。
Read(参照表示機能 N件)
管理画面のクエリ領域で「API」タブをクリックします。
「+」アイコンを押して、API名を作成します。(例えば
api_list
)データソースリストから用意したREST APIを選びます。
「実行前アクション」に「アクション無し」、「確認」、「承認」を選べることができます。
ここでは初期の「アクション無し」を選びます。
続いては「GET」を選んで、エンドポイントに
/hoge
などを入力します。APIを「保存」します。
「保存」ボタンを押すと、複数データの参照表示画面が出来上がります。
Read(参照表示機能 1件)
管理画面のクエリ領域で「API」タブをクリックします。
「+」アイコンを押して、API名を作成します。(例えば
api_detail
)データソースリストから用意したREST APIを選びます。
「実行前アクション」に「アクション無し」、「確認」、「承認」を選べることができます。
ここでは初期の「アクション無し」を選びます。
続いては「GET」を選んで、エンドポイントに一意検索の条件
/hoge?filters=id[equals]{{table1.selectedRow.id}}
などを入力します。APIを「保存」します。
Read(参照表示機能 N件)で作成されたTableのアクションに詳細表示用のボタンを追加して、アクション「タイプ」に「クエリ実行」を選びます。
「クエリ」に
api_detail
を指定します。詳細はアクションエディタにご参照ください。
DashcombのInputなどをドラッグ&ドロップし、入力ボックスを作成します。
そのデフォルト値に
{{api_detail.data.contents[0].id}}
、{{api_detail.data.contents[0].name}}
などを入力します。
「保存」ボタンを押すと、ユニークデータの参照表示画面が出来上がります。
Update(参照&更新機能)
Read(参照表示機能 1件)で作成された詳細表示用のボタンをクリックし、一意検索用のキーを取得して、引数としてこの詳細画面に渡します。
詳細は画面遷移の実現方法にご参照ください。
管理画面のクエリ領域で「API」タブをクリックします。
「+」アイコンを押して、API名を作成します。(例えば
api_update
)データソースリストから用意したREST APIを選びます。
「実行前アクション」に「アクション無し」、「確認」、「承認」を選べることができます。
ここでは初期の「アクション無し」を選びます。
続いては「PATCH」を選んで、エンドポイントに
/hoge/{{渡された引数}}
などを入力します。DashcombのInputなどをドラッグ&ドロップし、入力ボックスを作成します。
一意検索の結果
{{api_detail.data.contents[0].コラム名}}
をデフォルト値に入力します。引数
{{input名.value}}
を「PATCH」のJSON入力ボックスなどに埋め込みます。
APIを「保存」します。
DashcombのButtonをドラッグ&ドロップし、更新用ボタンを作成します。
Buttonアクションの「タイプ」に「クエリ実行」を選びます。
「クエリ」に
api_update
を指定します。(バリデーションなどを加えるのも可能)詳細はアクションエディタにご参照ください。
「保存」ボタンを押すと、シンプルな参照更新機能の画面が出来上がります。
Delete(削除機能)
管理画面のクエリ領域で「API」タブをクリックします。
「+」アイコンを押して、API名を作成します。(例えば
api_delete
)データソースリストから用意したREST APIを選びます。
「実行前アクション」に「アクション無し」、「確認」、「承認」を選べることができます。
ここでは初期の「アクション無し」を選びます。
続いては「DELETE」を選んで、エンドポイントに一意検索の条件
/hoge/{{table1.selectedRow.id}}
などを入力します。Read(参照表示機能 N件)で作成されたTableのアクションに削除用のボタンを追加して、アクション「タイプ」に「クエリ実行」を選びます。
「クエリ」に
api_delete
を指定します。詳細はアクションエディタにご参照ください。
「保存」ボタンを押すと、ユニークデータの削除機能が出来上がります。
参照項目
最終更新