編集可能な表の作成

ユーザーが1つのトランザクションのすべての変更をバックエンド・サービスに送信する前に、複数の既存の行を編集できる編集可能な表を作成できます。

この編集可能表の実装では、サービス・データ・プロバイダ(SDP)によるバッファリング・データ・プロバイダが使用されます。バッファリング・データ・プロバイダは、基礎となるデータ・プロバイダのバッファリングを提供するラッパーで、後で編集をデータ・ソースにコミットできます。基礎となるデータ・プロバイダ(この場合はサービス・データ・プロバイダ)がデータのフェッチを担当し、バッファリング・データ・プロバイダが基礎となるデータとバッファリングされた編集をマージして、データの統合セットとして表示されます。

従業員の編集可能な行を表示する表を作成する方法を次に示します。すべての変更は、ユーザーが「保存」ボタンをクリックするまでバッファに格納され、RESTコールによって変更がバックエンド・サービスにポストされます。ここで使用される例は、Visual Builderクックブックの「バッチ編集可能表(BDP)」レシピに従っています。このレシピでは、検証の実装方法や新しい行の作成方法など、追加機能を示します。

表をページに追加し、「データの追加」クイック・スタートを使用してデータに接続します。クイック・スタートは、表コンポーネントに自動的にバインドされる変数を作成します。この変数はサービス・データ・プロバイダ・タイプに基づいているため、バッファリング・データ・プロバイダ・タイプに基づいて変数を作成し、新しい変数を参照するように表を設定する必要があります。
1. 表コンポーネントをページにドラッグ・アンド・ドロップし、データの追加クイック・スタートを使用してそのページにデータを追加します。
2. バッファリング・データ・プロバイダ・タイプに基づく「変数の作成」 (employeesBDPなど)。新しく作成した変数の「プロパティ」ペインで、dataProviderコンストラクタ・パラメータをemployeeListSDPにマップします:
  
  図dataprovider-mapping.pngの説明
3. 表の「データ」タブで、employeeListSDPではなく[[ $variables.employeesBDP.instance ]]を指すようにdataプロパティを変更します。
  
  図bdp-instance1.pngの説明
表の編集イベントを処理し、表を編集可能にするイベント・リスナーおよびアクション・チェーンを作成します。
1. エンドポイントからのカスタム・タイプ (GET /Employee/{Employee_Id}エンドポイントに基づくEmployeeTypeタイプなど)を作成し、カスタム・タイプに割り当てられるcurrentRowBufferという名前のページ変数を作成します。
2. 次に、ojBeforeRowEditイベント・リスナーを表に追加し、TableBeforeRowEditChainで、currentRowBufferページ変数に割り当てられた現在の行データ(rowData)を含む変数の割当てアクションを追加します。
  
  図assignvar-ojbeforerowedit.pngの説明
3. ojBeforeRowEditEndイベント・リスナーを表に追加し、TableBeforeRowEditEndアクション・チェーンで、2つの新しいパラメータを入力パラメータとして追加します:
  - EmployeeType型のcurrentRowBuffer
    
    図ojbeforeroweditend-add-params.pngの説明
  - Any型のevent
4. これら2つの新しいパラメータをマップするには、「イベント・リスナー」タブを開き、tableBeforeRowEditEndイベントの下のTableBeforeRowEditEndアクション・チェーンを選択します。アクション・チェーンの「プロパティ」ペインで、新しいパラメータをそれぞれ$variables.currentRowBufferおよび$eventにマップします。
  
  図tablebeforeroweditend-mapping.pngの説明
5. TableBeforeRowEditEndアクション・チェーンで、Ifアクションを追加し、cancelEditパラメータがfalseかどうかをテストします。 falseの場合は、変更をemployeesBDPに格納する必要があります。
  変更の格納は、変数employeesBDPおよび関数updateItemのコール変数アクションを使用して、パラメータとともに実装されます:
```
{ metadata: { key: rowKey}, data: currentRowBuffer}
```
  図tablebeforeroweditend-actionchain-callvar.pngの説明
6. ojBeforeRowEditイベントとojBeforeRowEditEndイベントの両方で、編集可能な表機能が機能するには、非同期動作が有効になっている必要があります。これを行うには、ページのJSONビューに切り替え、eventListenersの下のtableBeforeRowEditおよびtableBeforeRowEditEndを見つけて、両方のイベントに"asyncBehavior": "enabled"を追加します:
```
  "eventListeners": {
    "tableBeforeRowEdit": {
      "asyncBehavior": "enabled",
      "chains": [{ ... }]
    },
    "tableBeforeRowEditEnd": {
      "asyncBehavior": "enabled",
      "chains": [{ ... }]
    }     
```
7. 表のプロパティで、「編集モード」を「行編集」に設定します(オプションが選択されていない場合)。
8. 表セルを拡張して編集可能にします:
  1. テキスト・コンポーネントを、編集可能にする必要がある最初の表の列にドラッグ・アンド・ドロップします。これにより、列のセル・テンプレートが生成されます。
  2. 構造ビューで、「テキストのバインド」ノードを右クリックし、「囲む」および「条件」を選択して、テキスト・コンポーネントをレンダリングするタイミングの条件を生成します。「Bind If」条件を[[$current.mode === 'navigation']]に設定します。表の行が読取り専用モードのナビゲーションの場合、テキスト・コンポーネントによって列値がレンダリングされます。
  3. 入力テキスト(または他のコンポーネント)をバインド・テキスト・ノードと同じセル・テンプレートにドロップし、If条件で再度ラップしますが、今回は、表の行が編集モードの場合に編集可能な入力テキスト・コンポーネントを表示するように条件を[[$current.mode === 'edit']]に設定します。
  4. 入力テキスト・コンポーネントの「ラベルのヒント」およびReadOnlyプロパティを削除します。「データ」タブの「値」プロパティを、currentRowBufferの対応するプロパティにバインドします。たとえば、{{ $variables.currentRowBuffer.firstName }}です。
  同様のステップを使用して、他の表の列を編集可能にします。
表の変更を追跡して保存します。変更の保存には、バッファリング・データ・プロバイダ・インスタンスから変更を収集し、変更を送信済としてマークし、1つのトランザクションですべての変更を格納する単一の「バッチRESTコール・ペイロード」を作成し、最後にバッファリング・データ・プロバイダの変更済アイテムを送信済としてマークします。
1. ボタンをドラッグし、ページ上の表の上にドロップします。ボタンのプロパティで、「ラベル」をSaveに変更します。
2. ボタンの「イベント」タブで、On 'ojAction'イベントのイベント・リスナーを追加し、対応するアクション・チェーンの名前をSubmitChangesに変更します。
3. SubmitChangesアクション・チェーンで、サポートするJavaScript関数を追加します:
  - すべての変更を含むペイロードを生成するcreateBatchPayloadファンクション。バッファリング・データ・プロバイダに格納されているすべての変更には、APIコールgetSubmittableItemsを使用してアクセスします。
  - バッファリング・データ・プロバイダ・アイテムをsubmitting、submittedまたはunsubmitted状態に設定するsetStatusToファンクション。バッファリング・データ・プロバイダでは、変更がデータ・ソースにコミットされる前に、編集項目のステータスをsetItemStatus APIコールを介して設定する必要があります。
  サンプル・コードについては、クックブックのバッチ編集可能な表レシピを参照してください。
4. これらの関数を使用すると、状態の変更、データの保存およびエラー状態の処理を行うためのアクション・チェーンを構築できます。サンプル・コードについては、クックブックのバッチ編集可能な表レシピを参照してください。