Apex Code Development You need to sign in to do that
Don't have an account?
VF Page to look like Lightning Layout using Static Resource
Hi,
This is my first attempt at building a VF page, so the code may not be formatted properly. But, I have been able to get everything to layout the way I need it to and to pull the data needed. However, It looks awful. The page will be displayed in SF classic, but I want it to look like the lightning layout. I followed the instructions to install the zip file as a static resource, but I still can't get the sytle to change. Any help with this would be greatly appreciated.
Here is my VF page code:
<apex:page standardController="Account" sidebar="true" showHeader="true" showChat="false" standardStylesheets="false">
<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<apex:stylesheet value="{!URLFOR($Resource.Lightning_CSS, 'assets/styles/salesforce-lightning-design-system-vf.css')}" />
<div class="slds">
<apex:panelGrid columns="2" width="100%" border="0" styleClass="tableStyle" columnClasses="colStyle1,colStyle2" rowClasses="rowstyle">
<apex:detail relatedList="false" title="true" inlineEdit="true"/>
<chatter:feed entityId="{!Account.ID}"/>
</apex:panelgrid>
<apex:tabPanel switchType="client" selectedTab="tabdetails"
id="AccountTabPanel" tabClass="activeTab"
inactiveTabClass="inactiveTab">
<apex:tab label="Contacts" name="Contacts" id="tabContact">
<apex:relatedList subject="{!account}" list="contacts"/>
</apex:tab>
<apex:tab label="Opportunities" name="Opportunities"
id="tabOpp">
<apex:relatedList subject="{!account}"
list="opportunities" />
</apex:tab>
<apex:tab label="Assets" name="Assets"
id="tabAssets">
<apex:relatedList subject="{!account}"
list="Assets" />
</apex:tab>
<apex:tab label="Cases" name="Cases"
id="tabCases">
<apex:relatedList subject="{!account}"
list="Cases" />
</apex:tab>
<apex:tab label="OpenActivities" name="Open Activities"
id="tabopact">
<apex:relatedList subject="{!account}"
list="OpenActivities" />
</apex:tab>
<apex:tab label="Notes and Attachments"
name="NotesAndAttachments" id="tabNoteAtt">
<apex:relatedList subject="{!account}"
list="CombinedAttachments" />
</apex:tab>
</apex:tabPanel>
</div>
</html>
</apex:page>
This is my first attempt at building a VF page, so the code may not be formatted properly. But, I have been able to get everything to layout the way I need it to and to pull the data needed. However, It looks awful. The page will be displayed in SF classic, but I want it to look like the lightning layout. I followed the instructions to install the zip file as a static resource, but I still can't get the sytle to change. Any help with this would be greatly appreciated.
Here is my VF page code:
<apex:page standardController="Account" sidebar="true" showHeader="true" showChat="false" standardStylesheets="false">
<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<apex:stylesheet value="{!URLFOR($Resource.Lightning_CSS, 'assets/styles/salesforce-lightning-design-system-vf.css')}" />
<div class="slds">
<apex:panelGrid columns="2" width="100%" border="0" styleClass="tableStyle" columnClasses="colStyle1,colStyle2" rowClasses="rowstyle">
<apex:detail relatedList="false" title="true" inlineEdit="true"/>
<chatter:feed entityId="{!Account.ID}"/>
</apex:panelgrid>
<apex:tabPanel switchType="client" selectedTab="tabdetails"
id="AccountTabPanel" tabClass="activeTab"
inactiveTabClass="inactiveTab">
<apex:tab label="Contacts" name="Contacts" id="tabContact">
<apex:relatedList subject="{!account}" list="contacts"/>
</apex:tab>
<apex:tab label="Opportunities" name="Opportunities"
id="tabOpp">
<apex:relatedList subject="{!account}"
list="opportunities" />
</apex:tab>
<apex:tab label="Assets" name="Assets"
id="tabAssets">
<apex:relatedList subject="{!account}"
list="Assets" />
</apex:tab>
<apex:tab label="Cases" name="Cases"
id="tabCases">
<apex:relatedList subject="{!account}"
list="Cases" />
</apex:tab>
<apex:tab label="OpenActivities" name="Open Activities"
id="tabopact">
<apex:relatedList subject="{!account}"
list="OpenActivities" />
</apex:tab>
<apex:tab label="Notes and Attachments"
name="NotesAndAttachments" id="tabNoteAtt">
<apex:relatedList subject="{!account}"
list="CombinedAttachments" />
</apex:tab>
</apex:tabPanel>
</div>
</html>
</apex:page>
Best Answer chosen by Pulse CentersThe <apex:relatedlist> tag are not supported in salesforce lightning design system, you have to use the markup style outlined in the lightning design system. Check this link to know more about details - https://www.lightningdesignsystem.com/platforms/visualforce/