【JPIERE-0653(v12)】ブラウザズーム(関連する情報をブラウザの別タブに開く)

 時々、iDempiere/JPiereのデータを左右にならべて見比べたい(参照したい)時があります。

1枚のディスプレイの左半分に受注伝票を表示し、右半分に関連する情報として取引先マスタを表示しているイメージ
1枚のディスプレイの左半分に受注伝票を表示し、右半分に関連する情報として取引先マスタを表示しているイメージ

 iDempiereでは、同じテナント(クライアント)であれば、同じブラウザの別タブでログインして、2つ以上のブラウザのタブで同時に操作することができます。そのためブラウザのタブを並べて配置することで見比べる(参照する)ことができます。しかし、これはそれぞれのタブで見比べたいレコードを検索して表示しなくてはいけないので、見比べるデータを探すという少し手間がかかります。

 そこで簡単にできる方法がiDempiereの標準機能に用意されています。

 ウィンドウの右端にある分数をクリックして表示されるレコード情報ポップアップウィンドウの下部にある[レコードのURL]をクリックすると、選択しているレコードのURLがクリップボードにコピーされるので、それをブラウザのタブを開いてアドレスバーに貼り付けるだけで、同じレコードがブラウザの別タブにすぐに表示できます。そこから関連するレコードにズームなどすれば簡単にデータを見比べることができます。

レコード情報ポップアップの下部にある[レコードのURL]
レコード情報ポップアップの下部にある[レコードのURL]

 これだけでもかなり便利だと思いますが、この方法では見比べたい左右のブラウザのタブに、いったん同じデータが表示されます。そして一方のブラウザを見比べたいデータに変更する操作が必要になります。

【補足説明】ver8.2以前は直接別タブが開く

ver8.2以前は、レコード情報ポップアップの下部にある[レコードのURL(PermaLink)]をクリックすると直接ブラウザの別タブが開くようになっています。ver9以降はモバイル端末の操作性を考えて、クリップボードにコピーする仕様に改善されたようです。

 

 見比べたいデータは概ね関連するデータであり、ウィンドウに表示されている各フィールドからズームして表示することが多いのではないかと思います。そのような場合にボタンを押すだけですぐに見比べられる状態にできればより便利だと思います。

関連する情報をブラウザの別タブに開く(ブラウザズーム)

ウィンドウでボタンをクリックするだけで、関連する情報をブラウザの別タブに開くことができる機能を作成しました。これをブラウザズームと言う事にしたいと思います。

ブラウザズームを使用すると、ズーム対象となっているフィールドのレコードであれば、ボタンを押すだけでブラウザの別タブに表示させることができます。

上記のイメージであれば、プロセスアイコンに割り当たっている"ブラウザズーム(取引先マスタ)"ボタンを押すと、取引先フィールドに入力されているレコードをブラウザの別タブに表示します。あとはそれぞれのブラウザのタブを左右に並べるだけで、簡単に見比べることができます。

受注伝票からブラウザズームしてブラウザの別タブに取引先マスタを表示し左右に並べたイメージ
受注伝票からブラウザズームしてブラウザの別タブに取引先マスタを表示し左右に並べたイメージ

 フィールドにボタンとして配置してもブラウザズームをすることができます。ボタンをクリックしてブラウザのタブを並べるだけで見比べられる状態になるので便利かなと思います。

 Windows11とかであれば、画面の上部にディスプレイの表示レイアウトを簡単に設定できる機能があるので、左右の2分割で表示するのはとても簡単です。

設定方法

ブラウザズームは、フォームをプロセスに割り当てて、そのプロセスをタブのプロセスアイコンやフィールドのボタンに割り当てて使用します。

フォームの設定

ブラウザのズームの処理を行うフォームのクラスを設定します。このクラスは汎用的に使用できますので1つだけフォームとして登録します。※このカスタマイズ番号以降のダンプファイルにはこの設定が含まれています。

フォームの設定
フォームの設定

 

プロセスの設定

プロセスはブラウザズームしたいテーブルと、ブラウザズームして表示したいレコードIDを持っているカラム毎に登録することを想定しています。

ここに掲載するイメージは、取引先マスタをブラウザズームするためのサンプル設定です。

 

◆TableNameパラメーター

ブラウザズームを行うプロセスには必ず"TableName"のパラメータを追加して、そのデフォルトロジックにブラウザズームしたいズームのテーブル名を入力します。※大文字小文字は正確に入力して下さい。

取引先マスタにブラウザズームしたい場合は、デフォルトロジックに"C_BPartner"と入力します。

 

◆ColumnNameパラメーター

ブラウザズームを行うプロセスには必ず"ColumnName"のパラメータを追加して、そのデフォルトロジックにブラウザズームして表示したいレコードのIDを持っているズームのテーブルのカラム名を入力します。※大文字小文字は正確に入力して下さい。

取引先マスタにブラウザズームしたい場合は、デフォルトロジックに"C_BPartner_ID"と入力します。

【補足説明】プロセスのパラメーター設定について

TableNameのパラメータのデフォルトロジックにはズーム先のテーブル名を設定して、ColumnNameのパラメータのデフォルトロジックにはズーム元のテーブルでズームしたいレコードのIDを持っているカラム名を設定します。

このテーブル名とカラム名の組み合わせが同じであれば、色々な箇所でプロセスを使い回すことができます。

 

プロセスアイコンか、ボタンにプロセスを割り当てる

作成したプロセスをウィンドウのプロセスアイコンか、フィールドに配置するボタンに割り当てたら設定は完了です。

 

【注意】ブラウザズームで多くのブラウザのタブを開きっぱなしにすると処理が重くなりますので注意して下さい。

 ブラウザズームを行って、多くのブウザのタブを開きっぱなしにすると処理が重くなりますので注意して下さい。処理が重く感じたら余計なタブを閉じるようにして下さい。

 ブラウザのタブを同時に使用するのは2~3程度にして下さい。感覚的に5以上のタブでiDempiere/JPiereを開くと、タブを開いてiDempiere/JPiereの画面を表示する処理自体が重くなってしまうかと思います(ずっと"くるくる"アイコンが表示されている状態)。

  この事象はブラウザズームに起因するものではなく、レコードのURLをコピーして手動でブラウザのタブを複数開いた時にも発生します。

  これはiDempiere/JPiereサーバーが重くなっているわけではなく、ブラウザ側になんらかの制限や制約、機能的な限界があるのか、単純に処理が重くなっているのではないかと思われます。iDempiere/JPiereサーバーには普通に動作していますので、他のユーザーの方は普通にアクセスできるはずです。

【注意】ブラウザによってはポップアップがブロックされますので、許可して下さい。

ブラウザズームを行おうとして、ブラウザの別のタブが表示されない場合、ブラウザにブロックされている可能性があります。ブロックしないように設定して下さい。

カスタマイズ情報

追加クラス

  • jpiere.base.plugin.webui.apps.form.JPiereBrowserZoom