ホームタブのページやサイドバーにVisualforceページを表示させたい場合、今まではHTMLエリアと『iframe』をつかって表示させていましたが、HTMLエリア内の特定のコードはセキュリティ上の都合でSummer'15以降サポートされないことになっています。
そのため、Visualforceページを表示する場合は新たに追加されたVisualforceエリアを使用することになりました。このVisualforceエリアをつかってサイドバーにVisualforceページを表示するときの話です。
今回の確認用に『Sample』と表示するだけのシンプルなVisualforceページを作りました。
これをつかったホームページコンポーネントをVisualforceエリアとして作成します。
これを表示させると次のようになってしまいます。
Visualforceページの部分にサイドバーのスタイルが反映されていません。
『showHeader="true"』にしていても同じように表示されます。
最初に見た時、「もしかしてVisualforceエリアは自分でスタイルを適用させないといけない?」と少し思ったりしたのですが、これは設定の問題です。
Visualforceエリアの設定画面にはスクロールバーの表示の下に『ラベルを表示』というチェックボックスが表示されています。このチェックボックスにチェックがついていないことが今回の原因です。
次のようにチェックをつけてあげると...
サイドバーのスタイルがきちんと反映されます。
Visualforceページの部分が白くなっていますが、これはHTMLエリアのときも同じでした。対応したい場合はCSSで頑張れば調整できます。
・・・という必要はなく、ここもVisualforceエリアの場合はCSSで頑張らなくても大丈夫になりました。
背景色が白くなっているのは、次の部分の指定の問題です。
『showHeader="false"』という指定を『showHeader="true"』にしてあげます。
これでVisualforceページ部分の背景色がサイドバーと同じ色になります。
というわけでVisualforceエリアは今までのHTMLエリアよりも便利な機能となっています。もしサイドバーのスタイルを反映させたくない場合は、チェックを外せば自由にカスタマイズできます。
ちなみにサイドバーに表示する場合のラベルの有無は上記のような違いがありましたが、右側の広い部分の場合は次のような違いとなります。
チェックなし
チェックあり
このようにチェックありの場合はVisualforceページ部分の上にホームページコンポーネントのラベルが表示されます。右側の広い部分のチェックの有無はこのような違いとなります。
以上、Visualforceエリアをサイドバーに表示する際にCSSで頑張らなくて大丈夫ですね。というお話でした。
追記 (2015-01-26)
次のように標準スタイルシートをOFFにするとヘッダーが非表示でも問題なく表示できるみたいです。こちらだと画面表示時に白い背景が一瞬表示されることもないみたいです。