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

• Goal
  以前の記事だと、リンク付きのセルの場合色が変わらないことが発覚！！
  なのでリンク付きのセルの場合でも変更できる方法がこれ。
  インタラクティブレポートにおいて、セルの背景色を条件に応じて変更する。
  
  (As is)　リンク付きのセルは以下のようにセルの色が変わらない。。。
  
  
  
  
  
• How
  1. ソースを見れば、タグTDに、Style属性がセットされていない。なので、動的アクションでの、JAVASCRIPTが原因…
  
  
  
  
  2. jQueryでの親属性の取得方法を変更する。動的アクションのJavascriptをparent() から、closest()へ変更する。
  
  
  
  
  3. インタラクティブレポートの列属性の設定を変更する（リンク付きの列のみ）
  
  
  
  以下が、結果。画像の背景が白なのは、別の問題…。
  
  
  
  

インタラクティブレポートのセルをクリック時にポップアップを立ち上げる - APEX

• Goal
  インタラクティブレポートにおいて、セルのクリック時にポップアップ画面を立ち上げる。
  
  (例)　Name をクリックしたら詳細をポップアップで表示する。
  
  
  
  
  
  
  
• How
  1. インタラクティブレポート　→　レポート属性　→　列属性　→　列リンク
  
  　　ターゲット　＝　URL
  　　URL　に　Javascript　を貼り付ける
  　　＆APP_ID．に違うAPP_ID を指定して飛ばす事もできる
  
  
  
  
  
  
  
  2. （追記）IEだと、POPUP表示時に、元の画面の情報が消えるエラーが発生！
  　　「void(0);」を追記すると解消する
  
  
  
  

• Reference
  
  #データセット
  Titanic: Machine Learning From Disaster
  
  #アイコン
  フリーアイコン

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

• Goal
  インタラクティブレポートにおいて、セルの背景色を条件に応じて変更する。
  
  (To be 例)　セルの書式を動的に以下の条件で設定する。
  　　Fare < 30                    緑色
  　　30 <= FARE < 50      黄色
  　　50 <= FARE < 70      ピンク色
  　　70 <= FARE                 赤色＋白抜き文字＋太字
  　
  
  
  
  
  
• As is
  
  変更前はこんな感じ
  
  
  
  
  
  
• How
  1. セルの書式を格納するダミーカラムを、インタラクティブレポート内のSOURCEで作成する。レポート属性の列属性は、"非表示"とする。
  今回は、"FARE_COLOR"というカラムを追加。
  
  
  
  
  
  
  
  
  
  2. カラム"FARE"の書式を設定する。
  列属性: FARE　＞　列の書式　HTML式に以下をセットする。
  
  
  
  
  
  3. 動的アクションで、Javascriptを実行。
  
  
  
  
  
  
  
  
  
• Reference
  #全般
  TBD - APEX and other things
  
  #データセット
  Titanic: Machine Learning From Disaster
  
  #アイコン
  フリーアイコン

カラムの幅を固定する - インタラクティブレポート - APEX

• Goal  (APEX 5.x 向け、4.xは別の方法)
  インタラクティブレポートにおいて、カラムの幅を固定する。
  改行して2行表示にならないようにする。
  
  


• How
  1. インタラクティブリージョンに、静的IDを設定する
  
  
  
  
  2. 幅を変更したいカラムに、静的IDを設定する
  
  
  
  
  3. ページのCSS インラインに以下を追加する
  
  
  
  
• To be
  以下のように拡がる
  
  
  
  

インタラクティブレポートのセルに画像/アイコンを入れる(リンク 無、動的アクション 無) - APEX

• Goal
  インタラクティブレポートにおいて、セルの中身を画像に変更する。
  リンク　無し、動的アクション　無しで、単に画像が表示されるだけ。
  フィルターは文字列で検索ができる。
  (To be 例) 性別をアイコンで表示する。
  
  
  　　　　Icon by http://www.fatcow.com/free-icons
  
  フィルターはこんな感じ
  
  
  
  
• As is
  
  変更前はこんな感じ
  
  
  
• How
  0. 共有コンポーネント　＞　静的アプリケーションファイル　に、アイコンをUPLOADする。
  　その時に、ファイル名を項目の名前と一致させておく。
  　この場合は、"male" と "female"。
  
  
  
  1. リージョン：　インタラクティブレポート　で　対象の列を選び、
  　指定　＞　タイプ：　リンク
  　リンク　＞　ターゲット：　タイプ ＝ "URL"
                                          URL ＝ "#"
  　リンクテキストを以下にする
  
   
  
  
• Reference
  #全般
  Jari's APEX blog
  
  #データセット
  Titanic: Machine Learning From Disaster
  
  #アイコン
  フリーアイコン