ユーザに表示する Salesforce スタイルの識別
Visualforce ページを作成する場合、期待される Salesforce のデザインを知っておくと、そのスタイルにマッチしたページを表示するのに役立ちます。たとえば、ユーザがデザインをカスタマイズするかどうか選択できるとします。Visualforce ページは、その違いを考慮して設計する必要があります。
ユーザに表示するスタイルを識別するには、$User.UITheme と $User.UIThemeDisplayed という 2 つのグローバル変数が役立ちます。これら 2 つの変数は、$User.UITheme がユーザに表示すべきデザインを返し、$User.UIThemeDisplayed が実際のデザインを返すという点で異なります。たとえば、ユーザは Lightning Experience のデザインを表示する設定と権限を持っている場合がありますが、そのデザインをサポートしていないブラウザを使用していると、旧バージョンの Internet Explorer などで $User.UIThemeDisplayed が異なる値を返す場合があります。
どちらの変数も、次の値のいずれかを返します。
- Theme1 — 古い Salesforce テーマ
- Theme2 — Salesforce Classic 2005 ユーザインターフェースのテーマ
- Theme3 — Salesforce Classic 2010 ユーザインターフェースのテーマ
- Theme4d — 最新の「Lightning Experience」Salesforce のテーマ
- Theme4t — Salesforce1 モバイル Salesforce のテーマ
- PortalDefault — Salesforce カスタマーポータルのテーマ
- Webstore — Salesforce AppExchange のテーマ
開発者が Salesforce に似た CSS スタイルをハードコードしたとします。Visualforce ページで新しいスタイルについても同じデザインを維持するために、開発者はユーザの設定に合わせるために複数のスタイルシートの中から選択する必要があります。次の例に、それを実現する方法の 1 つを示します。
この例では、次の点に留意してください。
- 表示するセクションを「切り替え」るには rendered 属性を使用する。
- <apex:stylesheet> タグには rendered 属性がないため、この属性があるコンポーネントでラップする必要がある。
ユーザ向けに新しいデザインを有効にしても、ユーザがそれを表示するための適切なブラウザやアクセシビリティの設定を行っていない可能性があります。次のコード例では、$User.UITheme 変数を使用して代替情報をユーザに表示します。
$User.UITheme は Theme3 と同じですが、$User.UIThemeDisplayed は異なります。そのため、ページは最大限まで表示されません。