How to Transfer Visualforce Pages to Lightning Ready – Suggested Approaches

So I am planning to transfer our current VF pages to lightning ready. Most of our VF pages are based on a standard controller or standard set controller and use an extension. And they are pretty much using the classic salesforce look and feel. Many of them are binding to buttons and links in the record or list page.

I have done some learning and exercise in lightning component and slds. But I have to admit I am still quite new to them. From what I have investigated, there are three options:

  1. Keep the VF pages and only apply slds upon them. This is the safest option. However, I don't quite want to use it in the first place as I am keen to learn and use lightning component. It can be viewed as an approach to retreat.

  2. Use lightning component in the VF pages. In that case, I can probably only pass Ids of standard objects into lightning component (I might be wrong) and which means VF pages are pretty much just a container. It also seems I need to create a outer container app for each usage which seems strange to me. I am not quite sure how viable is this approach.

  3. In lightning experience, it seems lightning component can be used for actions. But seems only apply to lightning experience. Since we are developing an app in App exchange, our customers who are still using Salesforce classic won't share the love. So I am also hesitant about this one.

Any suggestions on this?

Best Answer

WINTER-18 Update

new property for VF <apex:page> tag lightningStyleSheets="[false|true]" will supposedly be the single thing you need to do to convert VF pages to SLDS type styles

https://releasenotes.docs.salesforce.com/en-us/winter18/release-notes/rn_vf_lightningstylesheets.htm

Previous Comments

Too much for a comment

This is the Template page I use for all VF pages now. It allows me to control the Navigation and add SLDS styling all starting from the same point:

<apex:page name="SLDS_template" showHeader="false" standardStylesheets="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">

    <head>
        <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"/>

        <apex:insert name="title"/>

        <apex:stylesheet value="{!URLFOR($Resource.SLDS, 'assets/styles/salesforce-lightning-design-system-vf.min.css')}" />

        <style>
            #loader {
                position: fixed;
                left: 0;
                top: 0;
                bottom: 0;
                right: 0;
                background: #000;
                opacity: 0.6;
                filter: alpha(opacity=100);
                z-index: 99999;
            }

        </style>

        <script>
            function goHome(){
                ForceUI.isSalesforce1() ? sforce.one.navigateToURL('/home/home.jsp',true) : window.location.href='/';
            }

            function goretURL(){
                ForceUI.isSalesforce1() ? sforce.one.navigateToURL('{!$CurrentPage.parameters.retURL}') : window.location.href='{!$CurrentPage.parameters.retURL}';
            }

            function gotoURL(u, isParent){ //isParent to indicate if Inline VF
                ForceUI.isSalesforce1() ? sforce.one.navigateToURL(u) : (isParent ? window.top.location.href = u : window.location.href=u);
            }

            function showProcessing() {
                $('#loader').show();
            }

            function hideProcessing() {
                $('#loader').delay(300).fadeOut(400);
            }


            (function(myContext){
                myContext.ForceUI = myContext.ForceUI || {};

                myContext.ForceUI.isSalesforce1 = function() {
                    return((typeof sforce != 'undefined') && sforce && (!!sforce.one));
                }
            })(this);

        </script>
    </head>



    <div class="slds">

        <body>

        <apex:insert name="header"/>

        <div id="loader" class="slds-spinner_container">
            <div class="slds-spinner slds-spinner--large" role="alert">
                <span class="slds-assistive-text">Loading</span>
                <div class="slds-spinner__dot-a"></div>
                <div class="slds-spinner__dot-b"></div>
            </div>
        </div>

        <apex:insert name="body"/>

        </body>

    </div>

</apex:page>

Add in your own Error Message div to replace the standard page messages and use code to populate the message and go from there.

My VF pages now start like so:

<apex:page id="THEID" showHeader="false" sidebar="true"
           standardController="Account" extensions="EXTENSION" tabStyle="Account"
           standardStylesheets="false" applyHtmlTag="false"
           applyBodyTag="false" docType="html-5.0" cache="false">

    <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    <apex:composition template="SLDS_Template">
        <apex:define name="title">

        </apex:define>
        <apex:define name="body">

        </apex:define>

    </apex:composition>

    </html>
</apex:page>
Related Topic