技術者ブログ – OutSystems Data Gridにおける列自動生成

技術者ブログとして日ごろ取り組んでいる学習内容をご紹介します。今回は、OutSystems Data Gridにおける列自動生成について説明します。

OutSystems Data Gridは、OutSystemsのプログラムの中で表示・操作できる、Excelのようなグリッドになります。
本記事は、OutSystems Data Gridについての知識を前提とします。

問題設定

例えば、以下のようなグリッドがあるとします。

通常の作成方法は、以下になると思います。

表示するデータを、グリッドの構造に合わせたStructureに設定して、リスト化して、ArrangeDataでJSONの変換して、結果のJSONをグリッドのデータとして設定する
グリッドに、表示する列の件数分、列ウィジェットを配置して、それぞれのヘッダ、列幅、表示条件などを設定する

上記のような、列が6件のグリッドの場合、さほど難しくないと思いますが、表示したい列の数が可変の場合、作成が難しくなります。

表示できる最大数を決定して、「1.」のStructureの項目数と、「2.」の列ウィジェットは、それぞれ、その最大数の件数分を用意しなければなりません。そして、各列の表示条件を、表示したい個数に合わせて制御しなければなりません。結果として、最大数の件数分の列が存在しているが、表示した件数分のみが見えています。

特に「2.」については、グリッドの仕様が少しでも複雑（重複ヘッダで、その文言が動的など）でしたら、必要な作業量が著しく増えていきます。

決定した最大数が、例えば100件ぐらいでしたら、多少時間がかかりますが、できなくはない程度になると思いますが、以前、最大数が1500件近くになる場合に直面したことがあります。その際に、グリッドの列をJavaScriptで生成できないか、調べてみました。

自動生成の結果、上記の通常の作成方法の「1.」は、そのまま実施しなければなりませんが、「2.」の方が、簡単になります。

前提

以下のようなグリッドでは、赤枠の列を自動生成の対象します。（左3列は、通常通り配置した列となります。自動生成の列は、右となります。）

自動生成の列のセルを編集不可とします。グリッドの列順を変更不可とします。

グリッドで表示するデータは、取得済みで、上記の①のようにグリッドに設定します。

ヘッダの文言（「グループ1」、「データX」、「名名名」など）を可変として、取得済みで、JavaScriptにインプットできる形で持っています。（実装例のJavaScriptコードの中で、このようなインプット部分を太文字にします。）

実装のJavaScriptで、dataGridという変数を使います。dataGridは、以下のように取得できます。（gridIdは、設定したグリッドのIdとします。）

var dataGrid = OutSystems.GridAPI.GridManager.GetGridById('gridId').provider;

事前調査

以下のリンクで、dataGridのcolumnsに列をpushできることが分かりました。

https://www.outsystems.com/forums/discussion/80001/outsystems-data-grid-is-is-possible-to-add-columns-dynamically-on-datagrid/

dataGridを細かく調査すれば、columnsの他に、columnGroupsもあると分かって、columnGroupsに対するpushで、グループ化された重複ヘッダの列群を作成できるのではないかと考えました。

実装の流れ

データ取得後のOn After Fetchアクションで、以下のように実装していきます。

「グループ1」の最初の列

// pushする要素を作成
var newColGroup = new wijmo.grid.ColumnGroup (
	{header: 'グループ1', align: 'left', columns: [
		{header: 'データX', align: 'left', columns: [
			{header: '名', binding: 'Data1', width: 100, align: 'left', isReadOnly: true}
		]}
	]}
)

// newColGroupをcolumnGroupsにpush
dataGrid.columnGroups.push(newColGroup);

「グループ1」の二つ目の列

// pushする要素を作成
var newColGroup = new wijmo.grid.ColumnGroup (
	{header: 'データ1', align: 'left', columns: [
		{header: '名名', binding: 'Data2', width: 100, align: 'left', isReadOnly: true}
	]}
)

// newColGroupを対象のcolumnGroupsのcolumnsにpush
// columnGroups[3]は、作成した「グループ1」はcolumnGroupsの中でインデックス3のため
dataGrid.columnGroups[3].columns.push(newColGroup);

「グループ2」の列

// pushする要素を作成
var newColGroup = new wijmo.grid.ColumnGroup (
	{header: 'グループ2', align: 'left', columns: [
		{header: 'データV', align: 'left', columns: [
			{header: '名名名', binding: 'Data3', width: 100, align: 'left', isReadOnly: true}
		]}
	]}
)

// newColGroupをcolumnGroupsにpush
dataGrid.columnGroups.push(newColGroup);

上記のように、グループ化された、重複ヘッダの列を1つずつ作成していきます。newColGroupの構造、push先のところを適宜調整すれば、異なる構造の列群を作成できると思われます。

追加対応

列自動生成にあたり、以下の2点を留意しなければなりません。

変数dataGridは、グリッドをJavaScriptオブジェクトとして取得したものになります。データ取得後のOn After Fetchアクションが実行される時点で、グリッドが存在しなければなりません。一つの対応方法として、データ取得アクションのタイミングをOnly on Demandに設定して、OnReadyアクションで実行することができます。

グリッドに、セルが編集可能な列がある場合、セル編集後、行全体に対して実施されるセル編集有無チェックは、自動生成列のセルをチェックしようとしたら、エラーとなります。（本記事で例として使ったグリッドでは、「設定」列が編集可能とします。）

対応するには、グリッドのOnInitializeアクションのJavaScriptで、以下のように編集有無チェックを調整します。

// 通常のセル編集有無チェック
var originalCheck = OutSystems.GridAPI.GridManager.GetGridById('gridId').features.dirtyMark._isDirtyCell;

// チェックを調整
// 自動生成列のセルを、即座に編集なしとする
// 列インデックス3以上は、自動生成の列のため、「columnIndex > 2」で制御
var newCheck = function (rowIndex, columnIndex) {
	if (columnIndex > 2) {
		return false;
	} else {
		var checkResult = originalCheck.call(this, rowIndex, columnIndex);
		return checkResult;
	}
}

// 調整したチェックをグリッドに設定
OutSystems.GridAPI.GridManager.GetGridById('gridId').features.dirtyMark._isDirtyCell = newCheck;

次回の技術者ブログをお楽しみに。