ノーコード ラボ

No Code のツールやアプリについて紹介します

Bubble 値を受け渡す「Data to send」を使いこなそう!

前回の記事で、ページ間の値の受け渡し方法である「QueryString」と「Data to send」をご紹介しましたが、今回は後者の「Data to send」について、もう少し詳しくご紹介したいと思います。

blog.nocodelab.jp

「Data to send」まとめ

「Data to send」で出来ること(メリット)

  • データベースから取得したカレント行のデータを丸ごと別ページへ送信することができる。
  • 受け取った側でのデータ更新が簡単。
  • 受け渡している値が見えないのでセキュリティ的にも安心。

では、ここで具体的なサンプルを見ていきましょう。 例えば、従業員テーブルのデータを更新するページを作成する場合、従業員テーブルのデータは以下の状態とします。

従業員No アカウント 名前 住所 電話
1 test001 テスト太郎 東京都港区 999(999)1000
2 test002 テスト花子 東京都渋谷区 999(999)9999

従業員リストから、データの送信先である更新ページには、選択した従業員No の「名前」「住所」「電話」といった情報をまとめて送ることができ、また更新時も、再度データベースからデータを取得するといった手間もなく、受け取ったデータを直接更新するだけでデータベースに反映されます。

サンプルプログラム

Data タブの設定

従業員No(No)、アカウント(Account)、従業員名(Name)、住所(Address)、電話(Tel)のフィールドを持つ、従業員テーブル(Employee)を作成しておきます。

f:id:yksmt:20190906113757p:plain

Design タブの設定

従業員リストページ(index)に Repeating Group を一つ配置し、従業員テーブル(Employee)から取得したデータを表示します。 従業員データの更新ページへ遷移するための「参照」ボタンを合わせて配置します。

f:id:yksmt:20190903163245p:plain

従業員データの更新ページ(employee)を作成します。この時の注意点として、employee ページのプロパティである「Type of content」を従業員テーブルである「Employee」としておきましょう。このプロパティと index ページから送信されてくるタイプが一致することで、「Data to send」が使用できるようになります。index ページから取得した、従業員Noや名前を表示するにはInput エレメントの「Initial content」に「Current Page Employee's No」や「Current Page Employee's Account」と設定します。

f:id:yksmt:20190906114220p:plain

Workflow タブの設定

index ページのワークフローです。「Navigation」から「Go to page」を選択し、「Destination」で送信先である「employee」を選択します。 「Data to send」で「Current cell's Employee」と選択するだけで、従業員テーブルのカレント行の情報をまとめて送信することができます。

f:id:yksmt:20190903164238p:plain

次に受け取り側である、従業員データの更新ページ(employee)の設定です。 更新ボタンをクリックしたイベントの「Click here to add and action...」から「Data(Things)」の「Make changes to thing...」を選択します。「Thing to change」で「Current Page Employee」と設定し、Input に入力された従業員データを割り当てるだけで、データベースへの更新設定が完了します。

f:id:yksmt:20190906114329p:plain

サンプルプログラムまとめ

以上のように「Data to send」では、データベースの設定を送信側ページで行い、受信側ページでは送信されてきたデータを参照し更新します。「Data to send」は内部的にはGETメソッドを使用していますが、URLにデータの Unique ID を含めて送信しているため、受信側でデータを特定し更新することができるようですね。

例)sample.com/employee/1567492771100x918860155246398200

また補足として、Data to send 時、Unique ID に加えて、別のテキストフィールドの値を含めることも可能です。例えばアカウントをURLに含めたいといった場合は「Type of content」の設定と合わせて「Field for readable URL」に「Account」と設定することで、アカウントを含んだURLが発行されます。以下は「Account」フィールドの値が「test001」のURLになります。

例)sample.com/employee/test001-1567492771100x918860155246398200

f:id:yksmt:20190906114802p:plain

URLからこの値を取得したい場合は、「Get path form page URL」で「Type」を「Path」の「text」で取得することができます。

f:id:yksmt:20190906115253p:plain

では、次は逆に「Data to send」で出来ないことを見ていきましょう。

「Data to send」で出来ないこと

  • 複数のテーブルのデータを送ることはできない。

サンプルプログラムのindex ページの「Type of content」で「Employee」と設定したように、 Page プロパティの「Type of content」で設定できるテーブルは1種類です。その為、複数のテーブルのデータをまとめて送ることはできません。もし「Employee」以外のデータも送信したいといった場合は、追加で「QueryString」を利用して送信するか、もしくは「Data to send」で送信したデータを元に、受信側の employee ページでデータベースから検索をする必要があります。

まとめ

いかがでしたか?本記事では前回の復習を兼ねて「Data to send」について、ご紹介しました。「Data to send」をうまく使えば、データベースの更新が驚くほど簡単に実現できます。Bubble 開発には欠かせない機能ですので、しっかりと押さえておきましょう。では、次回もどうぞお楽しみに!