ポスト
みなさんこんにちは。
11月6日（金）に開催されたSkyVisualEditorユーザー会で、よりリッチな画面を作成するTipsを紹介させていただきましたが、本Blogではその中から以下についてより具体的な手順やサンプルコードをご紹介します。
- プロパティで設定できない項目の色を変える
- 複数個所の項目の動的な表示と非表示
- データテーブルの項目値に応じたセルの強調表示
皆様のご参考になりますと、幸いです。
SkyVisualEditorユーザー会とは？
SkyVisualEditorをご利用いただいているユーザー様を対象にしたイベントで、今後のSkyVisualEditorのロードマップやTips、普段はご紹介できない他社事例など、この場でなければ見ることができない情報を共有しております。
今年はCOVID-19の影響もあり、オンラインで開催させていただきました。
会の様子につきましては、こちらのBlogでご紹介しております。
1. プロパティで設定できない項目の色を変える
SkyVisualEditorのStudioで配置する入力項目などの各種部品は、コンポーネントプロパティで表示設定ができます。
しかし、これらの標準プロパティだけでは設定できないものがあり、その一つが入力項目の背景色の変更です。
必須ではないけれども重要な項目だから、背景色を付けて他の項目より目立たせたい、だけどSkyVisualEditorにはそんな設定がない！と諦める必要はありません。
このような時は、追加スタイルを設定することで以下のような画面が実現できます。
項目の背景色を変えた画面
追加スタイルは、設定したい部品を選択すると、コンポーネントタブ内の下の方で設定できます。
上記の画面は、追加スタイルに背景色を設定する簡単なCSSを書くだけで実現しています。
具体的には
background-color: #FFCC99;
と書いています。
Studioでの追加スタイルの設定
2. 複数個所の項目の動的な表示と非表示
今回は
・パネルグリッドと入力項目の表示・非表示を設定したい
・1か所の入力項目の値に応じて複数個所を表示・非表示させたい
という要件を満たす画面を作成しています。
SkyVisualEditorには、特定の入力項目の値に応じ、画面上のコンポーネントを
表示・非表示させる表示条件があり、パネルグリッドだけであればこれで実現できます。
しかし、入力項目や複数個所を同時に表示・非表示させるような少し高度な動きを実現したい場合、表示条件だけではできません。そんな時は、ページスクリプトを利用すると実現できます。
ページスクリプトとは、SkyVisualEditorで作成した画面にJavascriptを組み込むことができる機能で、標準機能では実現できない動きや表現を実装することができます。
今回、パネルグリッドは表示条件で、入力項目はページスクリプトで実装します。
以下に実現したい動きを動画で表示します。
「SkyVisualEditor」にチェックが「ある」・「なし」で、赤く囲まれた部分の表示・非表示を制御させています。
複数個所の表示・非表示
まず、”ライセンス状況”のパネルグリッドの表示条件を設定します。以下の図ように、
- パネルグリッドを選択
- 表示条件の「…」をクリック
- 条件設定でどの項目がどの値になったら表示させるのかを設定
の手順で表示条件を設定します。
表示条件の設定
次に、以下のようなコードをページスクリプトに記述することで、契約サービス項目の「SkyVisualEditor」が選択されている場合のみ、「SVE開発者」の項目を表示するようにしています。
今回、選択リストの項目をSkyVisualEditorの機能でチェックボックスとして表示させているため、チェックボックスのイベント取得も少し工夫が必要です。コード内で指定しているIDがどこなのかは、サンプルコードの下にある「コンポーネントとID」をご参照ください。
また、SkyVisualEditorのJavascriptやCSSによる拡張の基礎については、こちらのブログでご紹介しております。併せてご確認いただくと、より分かりやすくなるかと思います。
// 契約サービスに応じてライセンスとSkyVisualEditorの部分の表示制御を行う関数
function showHideProductInfo() {
// 契約サービスでSkyVisualEditorにチェックが入っていればライセンスとSVEのヒアリング事項を表示
if (jQuery('[id$=CSM_ContractService\\:SkyVisualEditor]').prop('checked')) {
jQuery('[id$=PGridCell_SVEDeveloper]').css('display', ''); // SVE開発者の項目を配置したセルを表示
jQuery('[id$=SVEDeveloperLabel]').css('display', ''); // SVE開発者のラベルを表示
} else {
jQuery('[id$=PGridCell_SVEDeveloper]').css('display', 'none'); // SVE開発者の項目を配置したセルを非表示
jQuery('[id$=SVEDeveloperLabel]').css('display', 'none'); // SVE開発者のラベルを非表示
}
}
// 画面を表示した際に実行される処理を定義
jQuery(function(){
showHideProductInfo(); // 表示した際に「SkyVisualEditor」のチェック有無を判定して項目の表示・非表示を制御
// 契約サービスのSkyVisualEditorのチェックボックスのクリックイベント設定
// クリックされた際、上記の関数「showHideProductInfo」を実行する
jQuery('[id$=CSM_ContractService\\:SkyVisualEditor]').on('click', function(){
showHideProductInfo();
});
});
コンポーネントとID
3. データテーブルの項目値に応じたセルの強調表示
強調表示も、上記でご紹介したようにJavascriptで実現します。
こちらはデータテーブルに対する処理のみなので、データテーブルのプロパティにあるJavascriptの編集ツール（テーブルスクリプトエディタ）を利用し、値が特定の条件の時にセルの色を変えて表現させます。
強調表示をしている検索結果
処理としては、データテーブルに表示されているレコードごとの値を参照し、特定の値の時はセルの色を変えるようにしています。 上記同様、処理の中で指定しているIDがどこを示しているのかは、サンプルコードの下にある「コンポーネントとIDの関係」をご参照ください。
jQuery(function(){
var rowCnt = 0; // ループカウンタ（0は1行目）
var threshold; // 強調表示する値チェック用の変数
// Col10はデータテーブルに配置した列のID
// データ行があるだけループさせる
// データテーブル内のセルは「:行番号:セルのID」で取得
while (jQuery('[id$=\\:'+rowCnt+'\\:Col10]').length > 0) {
// ApplicabilityRateは列に配置した項目のID
// セル内の項目値は「:行番号:項目のID」で取得
// ここでは後ろの%を除去した数値のみ取得
threshold = jQuery('[id$=\\:'+rowCnt+'\\:ApplicabilityRate]').text().replace('%', '');
// 50％より小さい場合はセルの色を変える
if (threshold < 50) {
jQuery('[id$=\\:'+rowCnt+'\\:Col10]').css('background-color','#FF6600');
}
rowCnt++;
}
});データテーブルの各行にあるセルとセル内の項目のIDには、0から始まる行番号が付与されているため、1行目の場合は
XXXX:XXXX:0:Col10
のようなIDとなっています。同様に、セルの中にある項目のIDにも行番号があるため、行番号を含めたIDで要素を取得するようにjQueryで指定しています。
注意事項としては、行番号の左にある「:」も含めて指定してください。この指定がない場合、検索結果の2行目（行番号が1）と12行目（行番号が11）のように一番右が同じ数字の時に意図しない要素を取得します。
また、今回ご紹介するサンプルコードですが、検索結果が参照のみで利用されることを前提としておりますので、この点もご注意ください。
データテーブルのセルと配置された項目のID
さいごに
今回は、先日のSkyVisualEditorのユーザー会でお話しした内容の補足説明として、ページスクリプトで記述したコードをご紹介しましたが、今回ご紹介した動きは機能要望としても良くお聞きします。
拡張機能で記述したコードの内容はサポート対象外となりますが、このように拡張機能を活用することで実現できます。
SkyVisualEditorは、今後も機能を拡張し続けてまいります。今回ご紹介したような動きも標準機能として実現してほしい、他にもこんなことができないか、といったご要望やご相談がございましたら、こちらからお問い合わせいただけますと幸いです。
