SFDC：Lightning Design SystemとreRender

Lightning Design SystemをつかうとLEXのスタイルを適用したVisualforce開発がやりやすくなりますが、apexタグを中心に開発を行うときは注意が必要な部分があります。その1つがreRenderをつかった画面更新処理です。

次のように正しく表示されている画面でも・・・

下記のようにactionからApex処理を呼び出しreRenderで画面更新を行うと・・

<apex:commandButton styleClass="slds-button slds-button--neutral" value="Set" 
    action="{!setValue}" reRender="form" />

一部スタイルが除外されてしまいました。

この問題はreRenderの更新対象を絞り込むことで回避できます。

<apex:commandButton styleClass="slds-button slds-button--neutral" value="Set" 
    action="{!setValue}" reRender="form-content,resultTable" />

こういう感じでapexタグとreRenderをつかった開発でもLightning Design Systemを利用することができるはずです。ただ、可能であればRemoteActionをつかってJavaScriptをメインに開発するときに利用した方が開発がしやすくなると思います。