function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
BobPBobP 

Visualforce page pageblock to look like lightning style

I am working on trying to convert a visualforce page to look like a lightning related list, I added the lightningStylesheets="true" to my page but it still looks like classic. I'm guessing it is the pageblock tags.

How would convert those to the lightning UI?
  
<apex:page standardController="Bids_Sent__c" lightningStylesheets="true" recordSetVar="bids" extensions="UpdateBids"
    showHeader="false"
    id="muopp"
    
   
>

    <apex:form >
        
        <apex:pageBlock title="Update Selected Bids" mode="edit"  >
            <apex:pageMessages />
            <apex:pageBlockSection  >
                <apex:inputField value="{!Bids_Sent__c.IsAddedToPDF__c}" id="stagename">
                    <apex:actionSupport event="onchange" rerender="muselectedlist"/>
                </apex:inputField>
            </apex:pageBlockSection>
            <apex:pageBlockButtons location="bottom"  >
                <apex:commandButton value="Save" action="{!save}" id="butsav"/>
                <apex:commandButton value="Cancel" action="{!cancel}" />
            </apex:pageBlockButtons>
        </apex:pageBlock>
        <apex:pageBlock title="Selected Bids for PDF" id="muselectedlist" >
            <apex:pageBlockTable value="{!selected}" var="bid" id="bidtab" >
                <apex:column value="{!bid.name}" id="bidname"/>
                <apex:column value="{!bid.IsAddedToPDF__c}" id="isbid"/>
            </apex:pageBlockTable>
        </apex:pageBlock>
    </apex:form>
</apex:page>



 
Gian Piere VallejosGian Piere Vallejos
I had problems trying to make code that looks like Lightning as well. To resolve this, I've used Lightning Design System (https://www.lightningdesignsystem.com/" target="_blank), they are a bunch of classes from Salesforce, similar to bootstrap, to give your code the style of Lightning. 

For example, If you want to create a Lightning Card (https://www.lightningdesignsystem.com/components/cards/) you can use <article class="slds-card"> as a wrapper. 

I hope this can help you.