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.

Wanna contribute?

If you want to add more pages into the repository, feel free to let me know or simply fork it in Github.

Next Post

SVG icon disappears after rerendering

Subscribe to Sfdcinpractice

Subscribe to get the latest blogs and tutorials of sfdcinpractice. No spam, no trash, only the awesome posts from sfdcinpractice. 

Comments

  1. Surabhi - May 27, 2017 @ 7:17 am

    Hey,
    Tried your sample code pieces, they all work great, with the exception of InputLookupRelationship. That may be because three resources $Resource.jQuery, $Resource.momentJs and $Resource.aljs are missing. Could you please upload these three on github.

    Regards
    Surabhi

    • LanceShi - May 30, 2017 @ 6:49 am

      Hi Surabhi,

      I have tested them on the org and the lookup relationship one is working fine for me. As for the issue you have mentioned, those three files are nothing magic. They are just jquery, momentJs and Appiphony Lightning JS. The first two are house hold names and you can easily google them on the internet. Appiphony Lightning JS, I believe I have already talked about it in my previous blog. The website is at: http://aljs.appiphony.com/ .

      Thanks,
      Lance

Leave a Reply

Your email address will not be published / Required fields are marked *