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

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

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

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

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

<apex:page lightningStylesheets="true">

このようにLEXスタイルが適用されます。

エラーメッセージもこのように表示されました。

日付項目はまだ利用できる感じではありませんでした。

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

またSalesforce ClassicモードにしたときはLEXスタイルではなくClassicのスタイルが適用されました。

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

サンプルコード

<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>