2022.09.02
SkyVisualEditorでJavaScriptを活用する！その5「データテーブルで繰り返し処理を実行する」
ポスト
みなさんこんにちは。
シリーズでSkyVisualEditorのStudio（以後Studio）でのJavaScriptの書き方を解説している本Blogも5回目となります。
過去4回で学んだ内容に加え、「繰り返し処理」も活用すると、過去のBlog「SalesforceとSkyVisualEditorで実現する動的画面と強調表示」で紹介した下記画像のような画面が実現できます。
この強調表示は検索画面をサンプルにした内容ですが、関連先もデータテーブルを利用して表示しています。そのため、見積明細で消費税率が10%と8%の消費税の金額の背景色を分けるような使い方も可能です。
本Blogでは、「繰り返し処理」について解説し、Studioで操作する際のポイントも合わせて説明します。
強調表示をしている検索結果
１．データテーブルを構成する要素について
検索結果はデータテーブルで表現されており、オブジェクトの1レコードが1行で表示されています。そのため、各行は値が異なるだけでブラウザ上の表現は同じです。つまり、HTMLの構成要素も各行で同じなので、一部の項目の値を判断して色を変える処理は、各行で同じことを行います。
HTMLで表現しますと、下記の様な要素となります。
図1. データテーブルの要素
Salesforce上の画面の場合、上記のコードは下図で赤く囲んだ場所になります。
図2. データテーブルの要素で表現されている場所
図1で青字で記載された数字は 行番号 を表しており、0から始まり1つずつ増えます。つまり、1行目は 0 で、2行目は 1 となります。
列 は、図1で「Col10」、「Col11」と表現されており、こちらはStudioのデータテーブルにある列のIDプロパティで設定した値となります。（図3 参照）
繰り返し処理は行ごとに実施するため、この行番号を1つずつ増やしながら1行ずつ処理していきます。
次は、JavaScriptでどのように処理するのか説明します。
図3. 列プロパティのIDの設定
２．JavaScriptの繰り返し処理について
JavaScriptで繰り返し処理を行うにはいくつか方法がありますが、「SalesforceとSkyVisualEditorで実現する動的画面と強調表示」で紹介した内容を例に説明していますので、ここでは while を利用した繰り返し処理を説明します。
while文の書き方
while は、指定された条件を満たしている間、処理を続けます。記載方法は以下の通りとなります。
while (処理を続ける条件) {
実行したい処理
}
処理を続ける条件 はwhileの後ろにある ( ) に記載します。例えばある変数が10以下の間、フラグがtrueの間などの条件を指定し、条件が成立する間処理を続けます。実行したい処理は { } の中にJavaScriptのコードを記述します。
もう少し具体的な例として、強調表示を行うBlogに記載したサンプルコードで解説します。
1 jQuery(function(){
2 var rowCnt = 0; // ループカウンタ（0は1行目）
3 var threshold; // 強調表示する値チェック用の変数
4
5 // Col10はデータテーブルに配置した列のID
6 // データ行があるだけループさせる
7 // データテーブル内のセルは「:行番号:セルのID」で取得
8 while (jQuery('[id$=\\:'+rowCnt+'\\:Col10]').length > 0) {
9 // ApplicabilityRateは列に配置した項目のID
10 // セル内の項目値は「:行番号:項目のID」で取得
11 // ここでは後ろの%を除去した数値のみ取得
12 threshold = jQuery('[id$=\\:'+rowCnt+'\\:ApplicabilityRate]').text().replace('%', '');
13
14 // 50％より小さい場合はセルの色を変える
15 if (threshold < 50) {
16 jQuery('[id$=\\:'+rowCnt+'\\:Col10]').css('background-color','#FF6600');
17 }
18 rowCnt++;
19 }
20 });whileの処理を続ける条件は、サンプルコードの8行目に記載しています。jQueryでidを指定して要素を取得しているのですが、2行目に定義されている rowCnt という変数で指定された行数の10列目(idの末尾が Col10)の要素を取得しています。
取得した要素に対し、lengthプロパティ の値を確認し、これが0より大きい場合は処理を続けるようにしています。
プロパティは、その２のBlogで登場したメソッドに似ていますが、プロパティは値があるだけで処理を行わないため、() は後ろにつけません。jQueryのlengthプロパティには取得された要素数が入り、要素が取得できていない場合は 0 になります。
図4. whileの処理を続ける条件の解説
while内で実行したい処理について
引き続き、while内で実行したい処理について解説します。実行したい処理は、while文の後ろにある {} の間に記載します。今回は、10列目にある値が「50%」より小さい場合にセルの色を変えるようにしていますが、「50%」の値がある要素を分かりやすくするため、下図のようにStudioでIDを変えています。
図5. 列に配置した項目プロパティのIDの設定
jQueryのcssメソッドは、取得した要素に引数で指定されたスタイルを適用するので、このメソッドで背景色を設定しています。
もう1つ重要な処理として、行番号を１つ加算する処理があります。これを行わないと永遠に同じ行に対して処理し続けてしまいます。
変数の後ろに ++ を付ける記述をしていますが、rowCnt = rowCnt + 1 と同じ意味で変数に値を1つ加算します。
図6. while内の実行する処理の解説
while文では最後の処理（18行目）を行いますと、改めて8行目の処理を続ける条件を満たしているか確認し、満たしていれば同じ処理を続けます。条件を満たしていない場合は処理を行わずにwhile文を終了します。
例えば、rowCntの値が2でデータテーブルの中に3行目が無い場合、jQueryで要素の取得ができないため、lengthプロパティは0となります。この場合、処理を続ける条件が満たされないため、while文は終了します。
今回ご紹介したJavaScriptは、データテーブルに対する処理となりますので、データテーブルのプロパティにあるJavaScriptの編集ツール（テーブルスクリプトエディタ）に記述してください。また、IDに「ApplicabilityRate」を指定した項目は、パーセント型の項目を配置しています。
まとめ
今回はJavaScriptの処理について、下記3つのポイントを説明しました。
- データテーブルの各行に対する処理は while で実現できる
- while は処理を続ける条件を満たしている間、実行したい処理が繰り返し行われる
- while の処理を終わらせるには処理を続ける条件を満たさないようにする
本ブログはシリーズでStudioにおけるJavaScriptの書き方をご紹介しております。こちらで紹介しているテクニックも今回は利用しておりますので、詳細を確認したい方は合わせてご確認ください。
SkyVisualEditorでJavaScriptを活用する！その１「Hello World」
SkyVisualEditorでJavaScriptを活用する！その２「画面上の文字を操る」
SkyVisualEditorでJavaScriptを活用する！その３「画面表示時に背景色を指定する」
SkyVisualEditorでJavaScriptを活用する！その４「表示内容を出し分ける」
記述されたJavaScriptに関する質問はSkyVisualEditorの標準サポートではお答えできませんが、安心してください。
アドミンカフェではSkyVisualEditorの標準機能だけで解決できない動きをフォローさせていただきます。困ったことがありましたらSkyVisualEditorご契約者様の特典であるアドミンカフェのご利用をご検討ください。
TerraSkyBaseでは、弊社製品だけでなくSalesforceを活用する上で役に立つ情報を発信しております。最新情報をメールでお知らせしておりますので、この機会に登録いただけますと幸いです。
