2020.11.10

SkyVisualEditorで実現する動的画面と強調表示

  • このエントリーをはてなブックマークに追加
  • follow us in feedly
gettyimages (17928)

みなさんこんにちは。
11月6日(金)に開催されたSkyVisualEditorユーザー会で、よりリッチな画面を作成するTipsを紹介させていただきましたが、本Blogではその中から以下についてより具体的な手順やサンプルコードをご紹介します。

  1. プロパティで設定できない項目の色を変える
  2. 複数個所の項目の動的な表示と非表示
  3. データテーブルの項目値に応じたセルの強調表示

皆様のご参考になりますと、幸いです。

SkyVisualEditorユーザー会とは?

SkyVisualEditorをご利用いただいているユーザー様を対象にしたイベントで、今後のSkyVisualEditorのロードマップやTips、普段はご紹介できない他社事例など、この場でなければ見ることができない情報を共有しております。
今年はCOVID-19の影響もあり、オンラインで開催させていただきました。
会の様子につきましては、こちらのBlogでご紹介しております。

1. プロパティで設定できない項目の色を変える

SkyVisualEditorのStudioで配置する入力項目などの各種部品は、コンポーネントプロパティで表示設定ができます。
しかし、これらの標準プロパティだけでは設定できないものがあり、その一つが入力項目の背景色の変更です。
必須ではないけれども重要な項目だから、背景色を付けて他の項目より目立たせたい、だけどSkyVisualEditorにはそんな設定がない!と諦める必要はありません。
このような時は、追加スタイルを設定することで以下のような画面が実現できます。

項目の背景色を変えた画面

追加スタイルは、設定したい部品を選択すると、コンポーネントタブ内の下の方で設定できます。
上記の画面は、追加スタイルに背景色を設定する簡単なCSSを書くだけで実現しています。
具体的には

  background-color: #FFCC99;

と書いています。

Studioでの追加スタイルの設定

2. 複数個所の項目の動的な表示と非表示

今回は

 ・パネルグリッドと入力項目の表示・非表示を設定したい
 ・1か所の入力項目の値に応じて複数個所を表示・非表示させたい

という要件を満たす画面を作成しています。 SkyVisualEditorには、特定の入力項目の値に応じ、画面上のコンポーネントを 表示・非表示させる表示条件があり、パネルグリッドだけであればこれで実現できます。
しかし、入力項目や複数個所を同時に表示・非表示させるような少し高度な動きを実現したい場合、表示条件だけではできません。そんな時は、ページスクリプトを利用すると実現できます。

ページスクリプトとは、SkyVisualEditorで作成した画面にJavascriptを組み込むことができる機能で、標準機能では実現できない動きや表現を実装することができます。
今回、パネルグリッドは表示条件で、入力項目はページスクリプトで実装します。

以下に実現したい動きを動画で表示します。
「SkyVisualEditor」にチェックが「ある」・「なし」で、赤く囲まれた部分の表示・非表示を制御させています。

複数個所の表示・非表示

まず、”ライセンス状況”のパネルグリッドの表示条件を設定します。以下の図ように、

  1. パネルグリッドを選択
  2. 表示条件の「…」をクリック
  3. 条件設定でどの項目がどの値になったら表示させるのかを設定

の手順で表示条件を設定します。

表示条件の設定

次に、以下のようなコードをページスクリプトに記述することで、契約サービス項目の「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は、今後も機能を拡張し続けてまいります。今回ご紹介したような動きも標準機能として実現してほしい、他にもこんなことができないか、といったご要望やご相談がございましたら、こちらからお問い合わせいただけますと幸いです。

26 件
     
  • banner
  • banner

関連する記事