December 22, 2016 by LanceShi
Convert Visualforce page into SLDS
In the past few weeks I have been working on converting our existing Visualforce pages into lightning experience look and feel. SLDS is cool, but since it doesn’t support <apex:xxx> tags at the moment, the conversion can be tough and tedious, especially when it comes to harder tags like <apex:inputField> for a lookup relationship or <apex:selectCheckboxes>.
In order to resolve this, I created a Github project containing the sample code for the tags which requires some work to convert. The project is here.
How does it work?
Simple, they are all sample code so you don’t need to install them. You can just find the sample code in the related page, copy/paste and adjust for your org’s special requirement. All the sample code are tested working in a new developer org. The pageBlockTable page does require you to create a Sample_CheckBox__c field in order for it to work. But you can change it into any other checkbox field.
For the apex tags, the related page file is named under the name of targeted apex tag. For example if you want to covert a <apex:pageBlockTable>, the sample code is at PageBlockTable.page.
Why I didn’t use components to wrap them?
Because of flexibility. It is easy to wrap them up using Visualforce components. However, you might still want to style them after copying the sample code. So if you want to wrap them up in your org, feel free to do so, it is not hard at all. However, personally I don’t see it very beneficial to do it that way.
If you want to add more pages into the repository, feel free to let me know or simply fork it in Github.