インタラクティブレポートの条件付き書式(背景色を変える) - APEX

• Goal
  インタラクティブレポートにおいて、セルの背景色を条件に応じて変更する。
  
  (To be 例)　セルの書式を動的に以下の条件で設定する。
  　　Fare < 30                    緑色
  　　30 <= FARE < 50      黄色
  　　50 <= FARE < 70      ピンク色
  　　70 <= FARE                 赤色＋白抜き文字＋太字
  　
  
  
  
  
  
• As is
  
  変更前はこんな感じ
  
  
  
  
  
  
• How
  1. セルの書式を格納するダミーカラムを、インタラクティブレポート内のSOURCEで作成する。レポート属性の列属性は、"非表示"とする。
  今回は、"FARE_COLOR"というカラムを追加。
  
  
  
  
  

  	select "FARE", --背景色を変えたいカラム名
  	--セルの書式用のダミーカラムを作成
  	CASE WHEN "FARE" < 30 THEN 'data-style = "background-color:#00CC33"'
  	WHEN "FARE" < 50 THEN 'data-style = "background-color:#FFFF33"'
  	WHEN "FARE" < 70 THEN 'data-style = "background-color:#FFCCFF"'
  	WHEN "FARE" >= 70 THEN 'data-style = "background-color:#FF0000;font-weight:bold;color:#FFFFFF"'
  	ELSE 'data-style = "background-color:#FFFFFF"'
  	END "FARE_COLOR" -- ダミーカラム名
  	from "#OWNER#"."TITANIC"

  view raw Cell_format_sample.sql hosted with ❤ by GitHub
  
  
  
  
  
  2. カラム"FARE"の書式を設定する。
  列属性: FARE　＞　列の書式　HTML式に以下をセットする。
  

  <span #FARE_COLOR#>#FARE#</span>

  view raw Cell_format_sample.html hosted with ❤ by GitHub
  
  
  
  
  
  3. 動的アクションで、Javascriptを実行。
  
  
  
  
  
  
  
  

  	apex.jQuery("span[data-style]").each(
  	function()
  	{
  	apex.jQuery(this).
  	parent().attr( 'style'
  	, apex.jQuery(this).attr('data-style')
  	);
  	}
  	);

  view raw Cell_format_sample.js hosted with ❤ by GitHub
  
  
• Reference
  #全般
  TBD - APEX and other things
  
  #データセット
  Titanic: Machine Learning From Disaster
  
  #アイコン
  フリーアイコン