tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:Visualforceエリアをサイドバーに表示する際のポイント

f:id:tyoshikawa1106:20141110205432p:plain


ホームタブのページやサイドバーにVisualforceページを表示させたい場合、今まではHTMLエリアと『iframe』をつかって表示させていましたが、HTMLエリア内の特定のコードはセキュリティ上の都合でSummer'15以降サポートされないことになっています。


そのため、Visualforceページを表示する場合は新たに追加されたVisualforceエリアを使用することになりました。このVisualforceエリアをつかってサイドバーにVisualforceページを表示するときの話です。


今回の確認用に『Sample』と表示するだけのシンプルなVisualforceページを作りました。

f:id:tyoshikawa1106:20141110210006p:plain:w300


これをつかったホームページコンポーネントをVisualforceエリアとして作成します。

f:id:tyoshikawa1106:20141110210245p:plain


これを表示させると次のようになってしまいます。

f:id:tyoshikawa1106:20141110210418p:plain


Visualforceページの部分にサイドバーのスタイルが反映されていません。
『showHeader="true"』にしていても同じように表示されます。


最初に見た時、「もしかしてVisualforceエリアは自分でスタイルを適用させないといけない?」と少し思ったりしたのですが、これは設定の問題です。


Visualforceエリアの設定画面にはスクロールバーの表示の下に『ラベルを表示』というチェックボックスが表示されています。このチェックボックスにチェックがついていないことが今回の原因です。

f:id:tyoshikawa1106:20141110211102p:plain:w300


次のようにチェックをつけてあげると...

f:id:tyoshikawa1106:20141110211133p:plain:w300


サイドバーのスタイルがきちんと反映されます。

f:id:tyoshikawa1106:20141110211336p:plain


Visualforceページの部分が白くなっていますが、これはHTMLエリアのときも同じでした。対応したい場合はCSSで頑張れば調整できます。


・・・という必要はなく、ここもVisualforceエリアの場合はCSSで頑張らなくても大丈夫になりました。


背景色が白くなっているのは、次の部分の指定の問題です。

f:id:tyoshikawa1106:20141110211706p:plain:w300


『showHeader="false"』という指定を『showHeader="true"』にしてあげます。

f:id:tyoshikawa1106:20141110211841p:plain:w300


これでVisualforceページ部分の背景色がサイドバーと同じ色になります。

f:id:tyoshikawa1106:20141110212039p:plain


というわけでVisualforceエリアは今までのHTMLエリアよりも便利な機能となっています。もしサイドバーのスタイルを反映させたくない場合は、チェックを外せば自由にカスタマイズできます。


ちなみにサイドバーに表示する場合のラベルの有無は上記のような違いがありましたが、右側の広い部分の場合は次のような違いとなります。

チェックなし

f:id:tyoshikawa1106:20141110212425p:plain

チェックあり

f:id:tyoshikawa1106:20141110212526p:plain


このようにチェックありの場合はVisualforceページ部分の上にホームページコンポーネントのラベルが表示されます。右側の広い部分のチェックの有無はこのような違いとなります。



以上、Visualforceエリアをサイドバーに表示する際にCSSで頑張らなくて大丈夫ですね。というお話でした。

追記 (2015-01-26)

次のように標準スタイルシートをOFFにするとヘッダーが非表示でも問題なく表示できるみたいです。こちらだと画面表示時に白い背景が一瞬表示されることもないみたいです。

f:id:tyoshikawa1106:20150126211217p:plain

f:id:tyoshikawa1106:20150126211243p:plain:w150