（※このトピックスは、Valence開発元（米CNX社）のブログ記事を翻訳・再編集したものとなります。原文記事は、コチラとなります。）
間違いなく、Nitro App Builder（NAB） を使って作成された Valence アプリの中で最も広く利用されているコンポーネントは、信頼性の高い「Grid(グリッド)」です。
まるで“強化版サブファイル”のようなこの多機能であるグリッドウィジェットは、業務データの一覧表示をブラウザ上で直感的に提供できるだけでなく、Excel や PDF への直接ダウンロードといった利便性も備えています。
とはいえ、既に多くの機能を持っているこのGridにも、私たちはさらなる改善の余地を見出し開発者とエンドユーザーの両方にとってより良い体験を提供する方法を日々模索し続けています。
そこで今月のヒントでは、2025年にリリースされた Valence 6.3 の初期メンテナンスビルドにおいて導入された、特に注目すべきグリッド関連の最新UI機能を振り返ってご紹介します。
Nitro App Builder に最近追加されたグリッド機能により、次のことが可能になりました。
行と列を多く表示する
データをグリッドに表示する際、「少ない方が見やすい（less is more）」という考え方は、多くの場合において最も使いやすい方法とされており、NABグリッドウィジェットでもこれがデフォルトのUI設定になっています。
しかし、時には「もっと行や列を表示してほしい」とユーザーから強く求められることがあります。
そのために「Slim View(スリムビュー)」という機能が以前から用意されており、これを選択すると行や列の間の余白が減り、より多くの情報を表示できるようになります。
それでも「もっと詰め込めないか」という要望がある場合のために、新たに「Ultra Slim(ウルトラスリム)」が追加されました。
これを使用すると、グリッドの表示領域内に非常に多くの行と列を詰め込むことができます。
ただし、使いすぎには注意が必要です。アプリ全体に情報過多の印象を与え、ユーザーにとって見づらくなる恐れがあるためです！
ページサイズをユーザーが選択する
これまで、グリッドに表示される長いリストのページサイズは、開発者であるあなたがあらかじめ固定で指定する必要がありました。
しかし、最新のビルドでは、ユーザー自身がページサイズを指定できるようになりました。
これを実現するには、「Page Size Selection」 チェックボックスを、1ページあたりの表示件数設定のすぐ下にあるオプションでオンにします。
これにより、ユーザーは実行時にデフォルトのページング設定を上書きして、表示件数を自由に選択できるようになります。
非常に長いセルデータへの対応
列の幅が狭くてセル内の内容がすべて表示できない場合、セル内のテキストは自動的に省略され、末尾に「…」が表示されます。
これまでは、完全な値を確認するには列の幅を広げる必要がありました（グリッドで列のサイズ変更が有効になっている場合に限ります）。
しかし、最新のビルドでは、セルの上にカーソルを置くだけで省略された値の全文がツールチップとして自動表示されるようになりました。
なお、特定のグリッドでこのデフォルト動作を無効にしたい場合は、グリッドの「UI」タブの一番下にある「Disable tooltips for overflowing cell content(オーバーフローするセルコンテンツのツールチップを無効にする)」にチェックを入れることで無効化できます。
列幅の最小値を設定する
グリッドの列にflexで列幅を設定すると、特定のピクセル幅を固定するのではなく、画面の解像度やブラウザサイズに応じて列幅が比率で調整されるため、さまざまな表示環境に簡単に対応できます。
しかし、比率によって列が縮小されすぎると、かえって不便になる場合があります。たとえば、日付の値が右端で切れて「…」が表示されるといったケースです。
こうした事態を防ぐために、どんなに縮小されても列がこれ以下にはならないという「最小幅（ピクセル）」をグリッド設定で指定できるようになりました。
例えば、日付列の場合は80ピクセルを最小幅として指定すれば、「区切り文字を含む8桁の日付」が十分に表示できるサイズになります。
グローバル検索機能の改良
便利で簡単にオンにできるグローバル検索フィールドには、これまで2つの調整できない特性がありました。
- 常にグリッドヘッダーの右端に配置されていたこと
- ユーザーが数回キー入力を行った後に一時的な停止が検出されると、自動的にEnterキーが押されて検索が開始されること
しかし、今では検索フィールドを左端に配置することができ、さらにユーザーがEnterキーを押して検索を開始するように設定できるようになりました。これには、それぞれ「Search Align Left(検索左揃え)」および「Search only on Enter(エンターキー押下時のみ検索)」チェックボックスを使用します。
レコードをクリップボードに一括コピー
これまで「Allow copy of row data(行データのコピーを許可）」という名前で提供されていた機能は、セルをクリックしてその内容をクリップボードにコピーできる便利なものでしたが、今回のアップデートでより直感的な機能へと強化されました。
このプロパティは、より汎用的な名称である「Allow copy of data(データのコピーを許可)」に変更され、グリッド全体（表示中のページのみ、またはすべてのデータ）をクリップボードにコピーできる設定が可能になりました。コピーされたデータは、列の区切りが保たれたまま Excel などのアプリに直接貼り付けることができます。
この機能を有効にすると、ツールバーに専用のクリップボードアイコンが表示され、ユーザーにグリッドからデータをコピーできることが簡単に伝えられます。
実行時にチェックボックスを無効にする
これまでは、チェックボックスの表示／非表示は作成時にのみ決定されるものでした。
しかし現在は、アプリ実行時に動的に調整できるようになっています。
これを実現するには、アプリ内のグリッドのリンクプロパティにある「Hide Columns」セクションで、新しいプロパティ「nabCheckboxSel」にアプリ変数を割り当てます。
そして、そのアプリ変数の値を ‘true’ に設定すると、ユーザーからチェックボックス選択用の列を非表示にすることができます。
なお、チェックボックス選択を最初に有効化した後に一度アプリを保存しなければ、「nabCheckboxSel」プロパティが表示されない場合がありますのでご注意ください。
同じ要領で、左寄せ／右寄せのアイコン列を非表示にしたい場合は、それぞれ「nabIconColLeft」および「nabIconColRight」を使用して制御できます。
行のクリック動作をダブルクリックで行う
これまではシングルクリックで動作を起動していましたが、グリッドの行をダブルクリックさせて動作を実行させることが可能になりました。
この設定は、アプリビュー内でグリッドウィジェットを選択し、「Settings(設定）」セクションで切り替えることができます。
フロントエンドで最小値を指定する
Edit Grid において、これまではプログラムやスクリプトを用意して制御する必要があった数値フィールドの最小値をアプリのフロントエンド側で個別に設定できるようになりました。
この設定は、Edit(編集)タブのプロパティ内にある歯車アイコン（設定アイコン）から変更することができます。
グリッドは、私たちがリリースする各アップデートの中でも特に多くの改良や注目を集めます。
リリース済みの Valence の各ビルドはもちろん、今後リリース予定のビルドに含まれる最新のグリッド機能や修正内容を確認したい場合は、ぜひ Valenceフォーラムをチェックしてください。