【Visualforce】apex:pageBlockの色をとりあえず簡単に変える。

Salesforce

Visualforceページでapex:pageBlockタグを使うと、それなりの見た目の画面が楽に作れるので良いですよね。よく使います。

こんな感じ。

apex:pageBlockを使ったVisualforceページ

ただセクション区切りの色が黒になるので、全体的に重たいイメージになる。組織のテーマカラーがあるならできるだけ雰囲気を合わせたいんだけど、そんなモノなのかな、と思っていた。

とそんな時、コントローラ拡張を使用したら色が変わることが分かった。あれ?

拡張コントローラを使ったVisualforceページ

これは、オブジェクトのカスタムタブを作る時に選んだアイコンの色になっているとのこと。

カスタムタブ

タブを作る時のアイコンって何のために選んでるのかな~と思っていたけど、やっと理由が分かりました(これだけじゃないかもしれないけど)。タブのアイコンを変えれば、apex:pageBlockの色もそれっぽい色に変ります。

これがどうも、通常のコントローラでもできるらしい。
apex:pageBlockタグの属性にtabStyleというものがあり、ここにオブジェクトを指定してあげるとカスタムタブのアイコン色になるとのこと。
Visualforce 開発者ガイド apex:pageBlock

下記は通常のコントローラを使ったVisualforceページのソースですが、tabStyle属性にオブジェクトを指定したら色が変わりました。

<apex:page controller="SampleController">
    <apex:pageBlock title="サンプル" tabStyle="Sample__c">
    	<apex:pageBlockSection title="サンプル情報">
            <apex:outputText label="サンプル件数" value="{!listCnt}"/>
        </apex:pageBlockSection>
        <apex:pageBlockSection title="サンプル一覧">
            <apex:pageBlockTable var="list" value="{!sampleList}">
                <apex:column value="{!list.Id}"/>
                <apex:column value="{!list.Name}"/>
            </apex:pageBlockTable>
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:page>

RGB指定じゃないとダメとかだと使えませんが、アイコンはたくさんあるので、それっぽい色にして見た目をよくしたい程度のことであればこれで手軽に済ませられる。というか済ませたい。

ちなみにtabStyleにVisualforceタブを指定したい場合は、タブ名__tabの書き方をする。

<apex:page controller="SampleController">
    <apex:pageBlock title="サンプル" tabStyle="Sample__tab">
    	<apex:pageBlockSection title="サンプル情報">
            <apex:outputText label="サンプル件数" value="{!listCnt}"/>
        </apex:pageBlockSection>
        <apex:pageBlockSection title="サンプル一覧">
            <apex:pageBlockTable var="list" value="{!sampleList}">
                <apex:column value="{!list.Id}"/>
                <apex:column value="{!list.Name}"/>
            </apex:pageBlockTable>
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:page>

こんな感じの色のアイコンだと

Visualforceタブ

apex:PageBlockの色はこんな感じになる。アイコンそのままの色ではなくて、ちょっと薄めになるのかな。

apex:pageBlockを使ったVisualforceページ

コメント

タイトルとURLをコピーしました