4

How do I change my visual force apex table code to look like lightning experience?

my VF code is here:

    <apex:page standardController="Place__c" extensions="AccountsinPlacesExt">    
<div class="slds">
<h1>Accounts in {!Place__c.Name}.</h1>  
<apex:dataTable value="{!inPlaceAccounts}" var="account" id="theTable" rowClasses="odd,even" styleClass="slds-table slds-table--bordered">
<apex:Column >
 <apex:facet name="header">Account Name</apex:facet>
 <apex:outputLink value="/one/one.app#/sObject/{!Account.id}/view">{!Account.name}</apex:outputLink>
</apex:Column>
<apex:Column >
 <apex:facet name="header">Service Name</apex:facet>
<apex:repeat value="{!account.ServiceAccountAssociations__r}" var="junction">
   <apex:outputLink value="/one/one.app#/sObject/{!junction.Service__r.id}/view">
       {!junction.Service__r.name}</apex:outputLink>;
</apex:repeat>
</apex:Column>
<apex:Column >
 <apex:facet name="header">Contact Name</apex:facet>
<apex:repeat value="{!account.Contacts}" var="contact"><apex:outputLink value="/one/one.app#/sObject/{!contact.id}/view">{!contact.name}</apex:outputLink>; </apex:repeat>
</apex:Column>
</apex:dataTable>
</div>
</apex:page>

3 Answers 3

8

You can accomplish what you want with Salesforce Lightning Design System. You'll want to download the most recent Zip File and then upload to your Salesforce org as a static resource. When you download the Zip File you'll be asked to provide a "Scoping Class" you can customize this to whatever you want. In this example we will use foo

For the <apex:page ...> tag I've found you don't need to do anything special. I've always added <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> to get the Icons to work properly. also <apex:stylesheet value="{!URLFOR($Resource.SLDS, 'assets/styles/salesforce-lightning-design-system-vf.css')}" /> to load the SDLS CSS. (Note: SLDS is what I named the static resource for my org)

Also don't forget that you MUST include a <div class="slds"> that wraps any HTML or tags you want to give the SLDS look and feel to.

Finally instead of using <apex:pageBlockTable .../> switch to <apex:dataTable styleClass="slds-table"/> to display your table data (I like to add slds-table--striped slds-table--bordered) as well but that's personal preference.

So ultimately your VF Page might look something like this.

<apex:page controller="CustomObject__c" showHeader="true">
<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<apex:stylesheet value="{!URLFOR($Resource.SLDS, 'assets/styles/salesforce-lightning-design-system-vf.css')}" />

<div class="foo"><!-- Note the "Scoping Class" is foo -->

    <apex:dataTable value="{!records}" var="record" styleClass="slds-table slds-table--bordered slds-table--striped">
        <apex:column value="{!record.Name}"/>
        <apex:column value="{!record.CustomField1__c}"/>
        <apex:column value="{!record.CustomField2__c}"/>
    </apex:dataTable>

</div>

</html>
</apex:page>

You can find CSS Class Names and what they do for data-tables here

1

As per Salesforce Winter ’18 Release:

<apex:page controller="Place__c" lightningStylesheets="true">

This simple attribute lightningStylesheets="true" tells the server to include a special version of the standard CSS stylesheets for Visualforce. This special version of the standard stylesheets use styling from the Salesforce Lightning Design System to closely match the look of Lightning Experience. Because the HTML markup from Visualforce is different from the markup in the SLDS framework, an exact match can not be achieved. But it's impressively close!

Before:

enter image description here

After:

enter image description here

You can style most commonly used Visualforce components with the lightningStylesheets attribute. However, some components differ slightly in style from Lightning Experience. For example, <apex:selectOptions>, <apex:selectRadio>, <apex:inputFile>, and some <apex:inputField> elements use the browser’s default styling instead. Commonly used Visualforce components that don’t require styling, such as <apex:form>, <apex:outputText>, and <apex:param>, are still supported.

To include SLDS components that aren’t part of the Visualforce component library, you can use the <apex:slds /> tag with custom SLDS code in addition to the lightningStylesheets attribute. The lightningStylesheets attribute doesn’t affect custom styling, so custom code and must be updated to match the page’s SLDS styling.

1

You can use SLDS for this.. It's CSS defined to get the look and feel of Lightning experience with visual force page. Just upload the latest version in static resource and use the css class..Search below for more information.

https://www.lightningdesignsystem.com/getting-started/visualforce

7
  • i tried that with the div class tag but it wasn't working...
    – soxdave
    Commented Feb 19, 2016 at 19:48
  • i notice that page block isn't supported but is there something else i could look to use?
    – soxdave
    Commented Feb 19, 2016 at 19:49
  • Did you try this ? lightningdesignsystem.com/components/data-tables... are you building this for SF Classic or lighting experience. ? You can the css above with <apex:datatable> to get the lighting exp.. Commented Feb 19, 2016 at 19:56
  • building for Lightning
    – soxdave
    Commented Feb 19, 2016 at 20:08
  • Are you making the entire wrapper structure, or just adding a class to a div? Your outer-most dive must have the `class="slds" then whatever you are trying to replicate must follow the structure of the component you are creating with all of the html from the examples. Commented Feb 19, 2016 at 20:30

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .