テーブルコンテナ

750 views

テーブルコンテナ

テーブルの外枠に対応したコントロールです。

[テーブルコンテナ]と［テーブル］の組み合わせで配置されます。

コンポーネントを配置すると、<Div> と <mat-table>、<mat-header-row>、<mat-row>も配置され、デフォルトで以下のコードが定義されます。

<mat-table #table [dataSource]=”dataSource” matSort matSortDisableClear (matSortChange)=”tableService.sortData($event)” data-comp-id=”table.2″>

<mat-header-row *matHeaderRowDef=”displayedColumns”></mat-header-row>

<mat-row *matRowDef=”let row; columns: displayedColumns;” [ngClass]=”{ ‘selected’: selection.isSelected(row)}” [magicRow]=”row?.rowId” (click)=”row? tableService.selectRow(row.rowId) : null”></mat-row>

</mat-table>

</div>

テーブル構築の流れ

Magic xpa側

以下のような明細を題材とします。

Magic xpa側のフォーム画面にて設定します。

ツールボックス一覧からテーブルをキャンバスにドラックして配置します
項目からテーブル内に表示したい項目を配置します
※この時配置した項目はSmartUX側で同期した際、その並び通りに表示されます

SmartUX側

コンテナを配置します。
またはコンポーネントとして追加した際にデフォルトで配置されています。
モデル項目から配置したとき以外は、以下のマッピング作業が必要となります。
歯車ボタンをクリックしてData Mappingにフォーム名を指定。
(名前の右に「Form」と表示されている項目を選択する)

テーブルコンテナをドラッグ＆ドロップする。
方法は２通りあります。

モデル項目の中からテーブルに当たる項目を配置する
UXウィジェット一覧内のテーブルコンテナを配置する

Data Mappingにテーブル名を指定し、指定後「XPAとカラムを同期」をクリック。
「XPAとカラムを同期」をクリックすることで、Magic xpa側で配置した内容をそのまま引き継ぎます。

Magicで設定されたテーブルが反映されています。
データマッピングの直後はカラム(列)の数やカラム名が紐づきます。
内容を表示するためには、一度プレビュー表示をする必要があります。【手順⑩】

プレビュー表示を終了する場合、方法が２通りあります。

画像のように右ペインに表示されている「ライブコンポーネント」からデザイナーモードを開く方法【手順⑪～⑬】
左ペインのコンポーネント一覧から該当(または別のコンポーネント)をクリックして開く

SmartUX側と関連するプロパティを設定する

⁂必要に応じてご活用ください。

テーブルに表示する内容を編集できるようにするか、照会だけ行い編集できないようにするかの設定です。

Magic xpa側

テーブル項目（［エディット］コントロール）のプロパティ設定

SmartUX側

修正許可が”True”の場合は、以下のようにテーブルの項目内で編集が出来ます。

Magic xpa側

修正許可が”False”の場合

テーブル項目のデータ表示のみで、編集ができない状態になります。

SmartUX側のテーブルコラムの幅設定する方法

右ペインのアウトライン項目から幅を設定したい「table-column.番号」を見つけます
「プロパティシート」ボタンをクリックします。
プロパティシートの項目が表示されるので、スタイルのーバーライド内にある「Column Width」を編集します。

Column Widthの所に入力して設定します。
入力例：”100px”
設定した後はコラムの所に以下のコードが定義されます。
プレビュー表示でも確認し、希望の幅を調整しましょう。

テーブルは以下のプロパティがあります。

プロパティ	内容
Data Mapping	Magic プログラムで定義された［テーブル］コントロールを指定します。歯車ボタンをクリックするとコントロール一覧が表示されます。ここから選択することができます。
Id	識別用のコードです。HTML 内で “id” の値として定義されます。［アウトライン］タブ上で表示されます。
Class	任意のクラスを定義することができます。
XPAとカラムを同期	[Data Mapping]に［テーブル］コントロールが定義されている場合に有効です。クリックするとMagic xpa プログラムの［テーブル］コントロールとの同期処理を実行し、キャビネットにテーブルが定義されます。これによって、テーブルカラムやページネータも追加されます。

テーブルのコラムは以下のプロパティがあります。

プロパティ	内容
Column Mapping	Magic プログラムで定義された［カラム］コントロールを指定します。歯車ボタンをクリックするとコントロール一覧が表示されます。ここから選択することができます。
Id	識別用のコードです。HTML 内で “id” の値として定義されます。［アウトライン］タブ上で表示されます。
Column Sort	ソート可能かどうかを指定します。
Magic ifRowCreated	カラムセル内のコンテナに mg.ifRowCreated 関数によって行が作成されたかどうかの判定処理を追加します。
Column Title	カラムのタイトルとして表示するテキストを指定します。ここに入力した値は、”カラムヘッダセル”の”Column Title” にも反映されます。
Column Width	カラムの幅を指定します。
Class	任意のクラスを定義することができます。