週刊プリザンター第18号
こんにちは。IISの田口です。 やっと春らしく暖かくなってきたでしょうか?
週刊プリザンター第18号です。
4/8~4/14を追いかけます。
4/8:全てのユーザを対象とした権限を付与する機能を追加。(0.49.210)
アクセス権限の設定で「全てのユーザ」が追加になりました。
読んで字のごとく全てのユーザに対する設定をすることが出来るのですが、何が便利かというと
「今後新規に追加したユーザに対しても適用される」
ことです。
現状は、登録済みのユーザ、組織、グループから選択したものに対して権限を設定するため、例えば全ユーザに見せたいテーブルなどはユーザを新規追加するたびにアクセス権限の設定を修正する必要があります。
これが「全てのユーザ」に対して権限設定するだけで、ユーザを追加してもアクセス権限の設定を修正する手間が省けます。
4/10:一覧画面のhiddenにColumnNameの一覧を出力する機能を追加。(0.49.211)
一覧画面で表示している項目のColumnNameがhiddenに出力するようになりました。
該当のhiddenのIDは「GridColumns」です。
一覧画面の表示項目のColumnをスクリプトで動的に取得出来るので、一覧画面の表示位置が変わっても正しく処理できるスクリプトを作る場合に有用かと思います。
簡単なサンプルですが、一覧画面表示後イベントでGridColumnsをコンソールに出力した結果は以下のようになります。
《スクリプト》
$p.events.on_grid_load = function(){ console.log($('#GridColumns').val()); }
《実行結果》
4/10:hiddenに表示名と項目名のJsonデータを出力する機能を追加。(0.49.212)
各入力項目の表示名と項目名の対応がJSONデータとしてhiddenに出力するようになりました。
該当のhiddenのIDは「Columns」です。
出力するJSONのレイアウトは
{ "ColumnName": "項目名", "LabelText": "表示名" }
で、これが配列として出力します。
この機能は一覧画面、編集画面のどちらでも有効です。
表示名から項目名を変換する場合などに利用できると思います。
簡単なサンプルですが、表示後イベントでColumnsをコンソールに出力した結果は以下のようになります。
■一覧画面
《スクリプト》
$p.events.on_grid_load = function(){ console.log($('#Columns').val()); }
《実行結果》
■編集画面
《スクリプト》
$p.events.on_editor_load = function(){ console.log($('#Columns').val()); }
《実行結果》
4/10:一覧表のヘッダのdata-name属性にColumnNameを出力する機能を追加。(0.49.213)
一覧画面で表示している項目のColumnNameがヘッダのdata-name属性に出力するようになりました。
簡単なサンプルですが、一覧画面表示後イベントでdata-nameをコンソールに出力した結果は以下のようになります。
《スクリプト》
$p.events.on_grid_load = function(){ console.log($('th[data-name=ClassA]').text()); }
《実行結果》
4/10:一覧画面および編集画面の項目へのアクセスを簡略化するjavascriptを追加。(0.49.214)
今回の目玉の追加機能です。今までの追加機能は全てこの機能に集約されます!
一覧画面および編集画面で各項目へアクセスするためのファンクションが追加になりました。
追加ファンクションは以下の5つです。
// 1. 表示名からColumnNameを取得、ColumnNameを指定した場合もColumnNameを返す $p.getColumnName(name) // 2. 表示名またはColumnNameで編集画面のコントロール要素を取得 $p.getControl(name) // 3. idで一覧画面のtrを取得 $p.getGridRow(id) // 4. idと表示名またはColumnNameで一覧画面のtdを取得 $p.getGridCell(id, name) // 5. 表示名またはColumnNameで一覧画面の列indexを取得 $p.getGridColumnIndex(name)
では、1つずつ簡単に説明します。
1. 表示名からColumnNameを取得、ColumnNameを指定した場合もColumnNameを返す
画面の表示名からColumnNameを取得するファンクションです。
スクリプトを使う方は
・テーブル管理のエディタをみながら 画面の○○は『分類C』だから、ColumnNameは『ClassC』と脳内変換
・開発ツールで「要素の選択」で画面の○○を選択し、ソースから選択する
のどちらかでColumnNameを探し出していると思いますが、このファンクションがあれば、表示名からColumnNameが取得出来ます。
このファンクションは一覧画面、編集画面どちらでも利用可能です。
簡単なサンプルと実行結果です。
■一覧画面
《スクリプト》
$p.events.on_grid_load = function(){ console.log("$p.getColumnName('数値B'): " + $p.getColumnName('数値B')); console.log("$p.getColumnName('NumB'): " + $p.getColumnName('NumB')); }
《実行結果》
■編集画面
《スクリプト》
$p.events.on_editor_load = function(){ console.log("$p.getColumnName('数値B'): " + $p.getColumnName('数値B')); console.log("$p.getColumnName('NumB'): " + $p.getColumnName('NumB')); }
《実行結果》
2. 表示名またはColumnNameで編集画面のコントロール要素を取得
個人的には目玉中の目玉です!!!!
画面の表示名またはColumnNameからコントロール要素を取得出来ます。
今までは
「テーブルは期限付テーブルで、画面の「○○」は分類Cだから、要素セレクタは$('#Issues_ClassC')
っと」
という感じで実装していると思いますが、このファンクションがあれば、表示名もしくはColumnNameだけで値の取得やセットが出来ます。
期限付テーブルか記録テーブルかで$('#Issues_~')
と$('#Results_~')
で意識する必要がありましたが、これを気にすることなく表示名またはColumnNameだけでコントロールにアクセスできます。
また、表示名でコントロールを指定できるところもポイントです。
スクリプトをバリバリ使う方ならColumnNameで実装し慣れていると思いますが、例えば
「画面の表示名を入力or選択させ、選択した項目の値を取得する」
みたいな仕組みが必要になった場合、今までは表示名と要素セレクタの組み合わせをJSON形式や配列などであらかじめ定義しておくような仕掛けが必要だったと思いますが、これからはこのファンクションに表示名を渡すだけで簡単に値を取得することができます。
このファンクションは編集画面でのみ利用可能です。
簡単なサンプルと実行結果です。
《スクリプト》
$p.events.on_editor_load = function(){ // 表示名またはカラム名で編集画面のコントロール要素を取得 console.log("$p.getControl('日付C'): " + $p.getControl('日付C').val()); console.log("$p.getControl('DescriptionD'): " + $p.getControl('DescriptionD').val()); }
《実行結果》
3. idで一覧画面のtrを取得
一覧画面上で表示しているレコードIDからその行(trタグ)をひとまとめに取得出来ます。
trタグの内容をオブジェクトとして取得しますので、取得後はスクリプトで色々加工が必要になるかと。
このファンクションは一覧画面のみで利用可能です。
簡単なサンプルと実行結果です。
■一覧画面
《スクリプト》
$p.events.on_grid_load = function(){ console.log("$p.getGridRow(22393): "); console.log($p.getGridRow(22393)[0]); }
《実行結果》
4. idと表示名またはColumnNameで一覧画面のtdを取得
一覧画面上で表示しているレコードIDと表示名またはColumnNameからその表示項目の値(tdタグ)を取得出来ます。
tdタグの内容をオブジェクトとして取得しますので、取得後はスクリプトで色々加工が必要になるかと。
このファンクションは一覧画面のみで利用可能です。
簡単なサンプルと実行結果です。
《スクリプト》
$p.events.on_grid_load = function(){ console.log("$p.getGridCell(22393, '分類A'): "); console.log($p.getGridCell(22393, '分類A')[0]); console.log("$p.getGridCell(22393, 'DateC'): "); console.log($p.getGridCell(22393, 'DateC')[0]); }
《実行結果》
5. 表示名またはColumnNameで一覧画面の列indexを取得
一覧画面上の列のインデックスを表示名またはColumnNameで取得出来ます。
例えば「○○」という表示の列の背景職を変えたいケースでは、今までは一覧画面の表示位置をあらかじめ決めておかないとCSSで設定しにくかったですが、このファンクションを使えば表示名で列位置が特定できるので、スクリプトでも設定できるようになると思います。
列indexは0スタートです。チェックボックス列のindexが0になります。
このファンクションは一覧画面のみで利用可能です。
簡単なサンプルと実行結果です。
《スクリプト》
$p.events.on_grid_load = function(){ console.log("$p.getGridColumnIndex('状況'): " + $p.getGridColumnIndex('状況')); console.log("$p.getGridColumnIndex('CheckE'): " + $p.getGridColumnIndex('CheckE')); }
《実行結果》
その他
不具合解消やソースコードのリファクタリングなどで1個のアップデートが実施されています。
バージョンアップに追いつけ!
プリザンターは日々進化しつづけて、新しい機能が追加されています。 皆さんの参考になるよう毎週紹介していきたいと思いますので、ご期待ください!
「+読者になる」のお願い
プリザンターの他、C#によるWebアプリ開発もIISの得意とする領域です。今後もプリザンターの機能、拡張スクリプト、ページ追加の研究を進めて行くつもりです。関心のある方、よかったらブログ上部の「+読者になる」をクリックをお願いします!
最後に
IISはプリザンターのスクリプトによるカスタマイズの経験が豊富です。
プリザンター導入に際してカスタマイズをご検討されている方は是非ご相談ください!
またご不明点やご質問などございましたら弊社までお問い合わせください。