(※このトピックスは、Valence開発元(米CNX社)のブログ記事を翻訳・再編集したものとなります。原文記事は、コチラとなります。)
Valence の App Builder で作成されるグリッドアプリは、スクロール可能な大量の業務データを表示するだけでなく、アクションボタンを組み込むことによってさらに便利に使えるように構成することができます。
Valence 5.2 で導入された「アイコン列(icon columns)」は、グリッドの各行の左端または右端に表示されるクリック可能なボタン付きの列です。
ユーザーはこれらの直感的なボタンを使って、ドリルダウン画面の表示、別アプリの起動、RPG プログラムの呼び出しなど、さまざまなアクションを1クリックで実行できます。
とはいえ、状況によってはこれらのアイコンボタンを非表示にしたり無効化したい場合もあるでしょう。
たとえば、特定の行に対して処理が不適切な場合や、ユーザーがその機能へのアクセス権を持っていない場合などです。
今月のヒントでは、Valence 6.3 で新たに追加された機能を含む、アイコン列ボタンの制御方法について紹介していきます。
まずはアイコン列の基本設定をおさらい…
覚えておきたいのは、アイコン列は Grid ウィジェットではなく、アプリケーションレベルで設定するという点です。
つまり、グリッドにアイコンボタンを追加するには、NAB のアプリビュー内で動作内容に対して定義を行います。
アイコン列は左端または右端、もしくはその両方に配置することが可能です。
以下の例では、App Builder の Designer のアプリ画面において右側に6つのアイコン列が配置されている様子が表示されています。

この例における動作内容の設定は、次のような構成になっております….

上のスクリーンショットでは、6つあるアイコン列のうち4つに「editParcels」という機能名が割り当てられているのが確認できます。ここから、すべての行に対してどのアイコンを表示するかを制御する最初のヒントに入ります。
この機能を有効または無効にすることで、または対応するアプリ変数の true/false の値を変更することで、グリッド内のすべての行に対して該当のアイコンを一括で表示・非表示にすることが可能です。
アプリ変数は自動的に「nabFeature」という接頭語付きで生成されるため、今回の例では nabFeatureeditParcels という名前になります。
たとえば editParcels が無効になっている場合、ユーザーに表示されるボタンは残りの2つのみとなり、それらはアイコン列に割り当てられたスペース内で均等に配置されます。

ここで、「editParcels」の機能をオン/オフするさまざまな方法を簡単に振り返ってみましょう:
- App Variables セクションで、「nabFeatureeditParcels」に true または false の初期値を設定する。
- 動作内容内の Execute Script 関数で、setAppVar(‘nabFeatureeditParcels’, xxxxx) を使用して設定する。(xxxxx は true または false)
- RPG の Startup プログラムや Form Helper プログラム内で、enableFeature(‘editParcels’) または disableFeature(‘editParcels’) を使用する。(たとえばユーザーの権限に応じて切り替える)
- Click、Filter、Validation のヘルパープログラム内で、レスポンスに以下を含めて機能を制御する。
- SetResponse(‘enableFeature’:’editParcels’)
- SetResponse(‘disableFeature’:’editParcels’)
- NAB から呼び出される多くの RPG プログラムでは、アプリ変数に対するレスポンスを以下のように返すことも可能
- SetResponse(‘appVar’:’nabFeatureeditParcels’:’true’)
- SetResponse(‘appVar’:’nabFeatureeditParcels’:’false’)
これらの方法を使うことで、ユーザー権限や操作状況に応じて、アイコン列の表示を柔軟に制御することができます。
通常多くのケースでは、アイコン列のボタンの表示や有効/無効を、その行の内容(データ)に基づいて制御したいと考えるでしょう。
ボタンを完全に非表示にすることもできますし、無効化(グレーアウト)して表示だけ残すことも可能です。
非該当のボタンを非表示にすればグリッドの見た目はスッキリしますが、あえて無効のまま表示することで「この操作ができない理由がある」ことをユーザーに視覚的に伝えるという使い方も有効です。
(例:すでに支払い済みの請求書には「削除」ボタンが表示されているが、クリックはできない)
このような条件に応じた表示・無効化の制御は、動作内容 セクション内の各アイコン列ボタンの定義部分にある「Condition(条件)」タブで設定します。

このスクリーンショットにあるように、「Condition(条件)」タブでは、2つの条件設定が可能です。
- 「条件が true の場合にボタンを有効化/false の場合に無効化」するためのもの
- 「条件が true の場合にボタンを表示/false の場合に非表示」にするためのもの
両方を設定することもできますが、ボタンが非表示になっている場合は、たとえ有効状態でも表示されない(非表示が優先)という点に注意してください。
条件式の中では、対応する行の列の値を {中かっこ} で囲んで参照できます。
たとえば、例にある ACTIVE というフラグ列は {ACTIVE} として使われています。
また、右側の「Available Fields(利用可能フィールド)」一覧から列名をクリックすれば、その列名が自動的に条件式に挿入されるため便利です。
さらに、アプリ変数も参照可能で、その場合は [角かっこ] を使って [appVarName] のように書きます。
重要なポイントとして、これらの条件式はすべて 標準の JavaScript 構文で記述する必要があります。
具体的にはこのような演算時を用います。
<
,>
,<=
,>=
:比較演算子&&
:かつ(AND)||
:または(OR)===
:等しい!=
:等しくない
最後に、すべてのアイコン列をプログラムから非表示にして、グリッドの幅をデータ列に再割り当てしたい場合はどうするか?
そのためには、Valence App Builder 6.3 で追加された新しいリンク変数を使用します。
App Builder の Designer 内で該当グリッドウィジェットにカーソルを合わせ、「Link(リンク)…」をクリックすることでアクセスできます。

続いて表示されるポップアップ画面では、「Hide Columns(カラムを非表示)」セクションをクリックし、
グリッド内のアイコン列が配置されている側に応じて、nabIconColLeft または nabIconColRight というアプリ変数を探します。
該当の変数に、制御に使用するアプリ変数を割り当てます。
その後、対応するアプリ変数の値を false に設定すると、該当側のアイコン列は完全に非表示になり、その分のスペースが他のデータ列に再配分されます。

これらのヒントを活用すれば、アイコン列ボタンを適切に非表示または無効化しながら、ワンクリック操作の利便性をグリッドアプリに加える工夫がきっと見つかるはずです。
ユーザーにとって直感的でスマートな操作感を提供しつつ、状況に応じた柔軟な制御も実現できます。