Apex Code Development You need to sign in to do that
Don't have an account?
Amil_Abdallah Use a Visualforce Page as a Component in a Lightning Page - VF page appearance doesn't match trailhead's after enabling page for lightning
I was attempting to complete the following trail: https://trailhead.salesforce.com/projects/workshop-lightning-programmatic/steps/programmatic-step-3
and while I was able to pass the challenge, I am not satisified with the fact that I can't replicate the appearance of the Other Properties visualforce page inside of the lightning record view. I believe they are missing code from the base file they had inteded us to modify. If you look at the original page before enabling it for lightning, you can see the table has 6 columns. The final result only shows 5. The original table had the column for Broker, but that looks to magically have been removed in their screenshot after enabling the page for lighting. It also seems the Property Name column has been renamed to just Name, and it also looks like the column was made into an outputlink so that by clicking the property name will take you to the associated record page. I modified my visualforce page code to match the appearance as best i could:
<apex:page standardController="Property__c" extensions="GetPropertiesApexController" lightningStylesheets="true">
<apex:slds rendered="{! !isClassic}" />
<apex:form>
<apex:pageBlock >
<apex:pageBlockTable value="{! properties }" var="ct" id="leads_list">
<apex:column headerValue="Name">
<apex:outputLink value="{!ct.Id}">{!ct.Name}</apex:outputLink>
</apex:column>
<apex:column value="{! ct.beds__c}" />
<apex:column value="{! ct.baths__c}" />
<apex:column value="{! ct.price__c}" />
<apex:column value="{! ct.status__c}" />
</apex:pageBlockTable>
</apex:pageBlock>
</apex:form>
</apex:page>
While the following code produces the solution, it still does not match the visual appearance shown in their image. This is what my table looks like: https://ibb.co/hNi6wH
Am I missing something? I think the table looks ugly when compared to how clean their table looks. Any assistance is greatly
and while I was able to pass the challenge, I am not satisified with the fact that I can't replicate the appearance of the Other Properties visualforce page inside of the lightning record view. I believe they are missing code from the base file they had inteded us to modify. If you look at the original page before enabling it for lightning, you can see the table has 6 columns. The final result only shows 5. The original table had the column for Broker, but that looks to magically have been removed in their screenshot after enabling the page for lighting. It also seems the Property Name column has been renamed to just Name, and it also looks like the column was made into an outputlink so that by clicking the property name will take you to the associated record page. I modified my visualforce page code to match the appearance as best i could:
<apex:page standardController="Property__c" extensions="GetPropertiesApexController" lightningStylesheets="true">
<apex:slds rendered="{! !isClassic}" />
<apex:form>
<apex:pageBlock >
<apex:pageBlockTable value="{! properties }" var="ct" id="leads_list">
<apex:column headerValue="Name">
<apex:outputLink value="{!ct.Id}">{!ct.Name}</apex:outputLink>
</apex:column>
<apex:column value="{! ct.beds__c}" />
<apex:column value="{! ct.baths__c}" />
<apex:column value="{! ct.price__c}" />
<apex:column value="{! ct.status__c}" />
</apex:pageBlockTable>
</apex:pageBlock>
</apex:form>
</apex:page>
While the following code produces the solution, it still does not match the visual appearance shown in their image. This is what my table looks like: https://ibb.co/hNi6wH
Am I missing something? I think the table looks ugly when compared to how clean their table looks. Any assistance is greatly