ブリッジを使用して4Dからデータを取得する

この例題ではdax_bridge.getRecordコマンドを使用して4Dからレコードを取得する方法をお見せします。この例題ではContactsテーブルの名前を表示するデータグリッドが左に表示されます。名前がクリックされるたびにバックエンドデータベースの呼び出しが行われ、 'myArea' div要素にレコード詳細が表示されます。

dax_bridge.getRecord コマンド

dax_bridge.getRecord(selectionName, recordId, getRecordHandler, passedValue) コマンドは4Dからレコードを1つ取得するために使用します。

データグリッド設定

データグリッドにはContactsテーブルの名前データのみが表示されます。グリッドは 'choice' divに表示されます。0, 2, そして 3列はコードで隠されています。行がクリックされるたびにmyClick()関数が呼び出されるよう、.onDataRowClickイベントがグリッドに登録されます。

Begin JavaScript code:
var ContactsGrid = new dax_dataGrid('Contacts', $('choice'), 0, 0);
   ContactsGrid.go();
   ContactsGrid.hideColumn(0);
   ContactsGrid.hideColumn(2);
   ContactsGrid.hideColumn(3);
   ContactsGrid.onDataRowClick = myClick;
End JavaScript code

クリックイベント

データグリッドの行がクリックされるたびに、myClick() JavaScript関数が実行されます。この例ではmyClick関数はまず、 'myArea' div要素の.innerHTMLプロパティにバックエンドからデータ取得中であることを設定し、そして dax_bridge.getRecord コマンドを発行します。4Dからのレスポンスが来たとき、 getRecordHandler 関数が実行されます。

Begin JavaScript code:
function myClick(row, recordId){
   $('myArea').innerHTML = "fetching data from backend";
   dax_bridge.getRecord('Contacts', recordId, getRecordHandler);
}
End JavaScript code

getRecordHandler

ハンドらは dax_bridge.getRecord コマンドの3番目の引数です。これは4Dからのレスポンスが到着した際に実行されるJavaScript関数です。この例題では、ハンドラはデータをフォーマットし、 'myArea' divのinnerHTMLプロパティにデータを書き込みます。

Begin JavaScript code:

function getRecordHandler(parsedRecord){
   $output = '';
   $output = $output + '&nbsp;&nbsp;<strong>' + parsedRecord[0].fields[0].value + '<\/strong><br>';
   $output = $output + '&nbsp;&nbsp;' + parsedRecord[0].fields[1].value + ''<br>'';
   $output = $output + '&nbsp;&nbsp;' + parsedRecord[0].fields[2].value + ',';
   $output = $output + '&nbsp;&nbsp;' + parsedRecord[0].fields[3].value;
   $output = $output + '&nbsp;&nbsp;' + parsedRecord[0].fields[4].value + '<br>';
   $output = $output + '&nbsp;&nbsp;' + 'Phone: ' + parsedRecord[0].fields[5].value + '<br>';
   $output = $output + '&nbsp;&nbsp;' + parsedRecord[0].fields[6].value + '<br><br>';
   $output = $output + '<div style=\"margin-left: 305px;\"><img src=\"' + parsedRecord[0].fields[7].value + '\"><\/div>';
   $('myArea').innerHTML = $output;
}
End JavaScript code