tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:Winter'18 - lightningStylesheetsでVisualforceをLEXスタイルに変更

Winter'18でβ版ですがLightningStylesheetsという属性がapex:pageタグに追加されました。

f:id:tyoshikawa1106:20170831192200p:plain

Automatically Style Existing Visualforce Pages with Lightning Experience Stylesheets (Beta)


これでapex:pageBlockタグなどでつくったVisualforceページをLEXスタイルに変換できます。例えば次のようなページです。
f:id:tyoshikawa1106:20170831192315p:plain

次のように宣言すると・・・

<apex:page lightningStylesheets="true">

f:id:tyoshikawa1106:20170831192333p:plain


このようにLEXスタイルが適用されます。
f:id:tyoshikawa1106:20170831192427p:plain


エラーメッセージもこのように表示されました。
f:id:tyoshikawa1106:20170831192458p:plain


日付項目はまだ利用できる感じではありませんでした。
f:id:tyoshikawa1106:20170831192525p:plain:w300


この属性を利用するにはstandardStylesheets="true"を宣言する必要があります。falseにするとスタイルが適用されません。
f:id:tyoshikawa1106:20170831192649p:plain


またSalesforce ClassicモードにしたときはLEXスタイルではなくClassicのスタイルが適用されました。
f:id:tyoshikawa1106:20170831192813p:plain


まだβ版で今後変更が入ると思いますがシンプルなページならこれで簡単に切り替えができるようになるかもしれません。

サンプルコード

<apex:page standardController="Account" lightningStylesheets="true" standardStylesheets="true" showHeader="true" sidebar="false" id="page">
    <apex:form id="form">
        <apex:pageBlock id="block" title="Force.com Application">
            <apex:pageBlockButtons>
                <apex:commandButton value="Save" action="{!Save}" reRender="form" />
                <apex:commandButton value="Cancel" action="{!Cancel}" reRender="from" />
            </apex:pageBlockButtons>
            <apex:pageBlockSection title="info">
                <apex:inputField value="{!Account.Name}" />
                <apex:inputField value="{!Account.AccountNumber}" />
                <apex:inputField value="{!Account.Phone}" />
                <apex:inputField value="{!Account.Website}" />
                <apex:inputField value="{!Account.SLAExpirationDate__c }" />
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>