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
Jas SalesforceJas Salesforce 

Added visualforce page to lightning tab but field columns are not aligned and formatting looks bigger.

I added a visualforce page into lightning tab, and want page to look like same as lightning detail page, but it doent fit properly. Beginer developer and need help please. Also not able to get inline editing 
User-added imagemy code
<apex:page standardController="Opportunity" lightningStylesheets="true"> <apex:form > <apex:pageblock mode="maindetail"> <style> body .bPageBlock .pbBody .grey .pbSubheader{ background-color:grey; } </style> <apex:outputPanel styleClass="light grey" layout="block" > <apex:pageBlockSection title="Opportunity Basic Information" > <apex:InputField value="{!Opportunity.What_s_happening_today__c}"/> <apex:InputField value="{!Opportunity.What_do_I_want_to_achieve__c}"/> </apex:pageBlockSection> <apex:pageBlockSection title="Opportunity Goal/Size" > <apex:inputField value="{!Opportunity.Stretegic_Objective__c}"/> <apex:inputField value="{!Opportunity.Quantity__c}"/> <apex:inputField value="{!Opportunity.Product__c}"/> <apex:inputField value="{!Opportunity.Amount}"/> </apex:pageBlockSection>  </apex:outputPanel> <apex:inlineEditSupport event="ondblClick" showOnEdit="saveButton,cancelButton" hideOnEdit="editButton" /> <apex:commandButton action="{!save}" value="Save" Style="margin-left: 350px;"/> <apex:commandButton action="{!Cancel}" value="Cancel" Style="margin-left: 20px;"/> </apex:pageblock> </apex:form> </apex:page>

would like page to look like as below (stabdard detail page)

User-added image
Dushyant SonwarDushyant Sonwar
Jaspal,

Remove the below line in your code. That is a custom css that is making the ui looks absurd 
<apex:page standardController="Opportunity" lightningStylesheets="true"> <apex:form > <apex:pageblock mode="maindetail">  <apex:outputPanel styleClass="light grey" layout="block" > <apex:pageBlockSection title="Opportunity Basic Information" > <apex:InputField value="{!Opportunity.What_s_happening_today__c}"/> <apex:InputField value="{!Opportunity.What_do_I_want_to_achieve__c}"/> </apex:pageBlockSection> <apex:pageBlockSection title="Opportunity Goal/Size" > <apex:inputField value="{!Opportunity.Stretegic_Objective__c}"/> <apex:inputField value="{!Opportunity.Quantity__c}"/> <apex:inputField value="{!Opportunity.Product__c}"/> <apex:inputField value="{!Opportunity.Amount}"/> </apex:pageBlockSection>  </apex:outputPanel> <apex:inlineEditSupport event="ondblClick" showOnEdit="saveButton,cancelButton" hideOnEdit="editButton" /> <apex:commandButton action="{!save}" value="Save" Style="margin-left: 350px;"/> <apex:commandButton action="{!Cancel}" value="Cancel" Style="margin-left: 20px;"/> </apex:pageblock> </apex:form> </apex:page>

You can use apex:detail for inline editing. 
https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_compref_detail.htm

Or If you want only few specific fields in your detail page than you can use lightning out

Note : This will be major code change

Aura Component OpportuityDetail 
<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId">
    <aura:attribute name="fields" type="String[]" default="['Name','CloseDate','StageName' , 'Amount']" />
    <lightning:recordForm
        aura:id="myRecordForm"
        recordId="{!v.recordId}"
        objectApiName="Opportunity"
        fields="{!v.fields}"
        columns="2"
        mode="view"
        onsubmit="{!c.handleSubmit}" />
</aura:component>
({
    handleSubmit : function(cmp, event, helper) {
        event.preventDefault();       // stop the form from submitting
        const fields = event.getParam('fields');        
        cmp.find('myRecordForm').submit(fields);
    }
})

Aura App OpportuityDetailApp 
<aura:application access="Global" extends="ltng:outApp" implements="ltng:allowGuestAccess">
 <aura:dependency resource="c:OpportuityDetail"/> 
</aura:application>


Use lightning out on your vf page 
<apex:page standardController="Opportunity" lightningStylesheets="true"> 
     <apex:includeLightning />
    <script>
         $Lightning.use("c:OpportuityDetailApp", function() {
         $Lightning.createComponent("c:OpportuityDetail",
         { recordId : '{!Opportunity.Id}' },
         "lexContainer",
         function(cmp) {
         });
         });
         </script>
        <div  id="lexContainer"/>
     </apex:page>

When some uses the /apex/yourpagename?id=OpportunityId
Your output be like this
User-added image
After Edit
User-added image

Hope this helps!
Dushyant SonwarDushyant Sonwar
Remove below style tag code in your vf page 
<style> body .bPageBlock .pbBody .grey .pbSubheader{ background-color:grey; } </style>