function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Keith Lee 25Keith Lee 25 

Help create a pageBlockSection with 3 fields with larger font and conditional highlighting

Hi, I am trying to get three fields on an Account page layout to really stand out above the rest.  I'd like to build a visualforce page to look something like this:
User-added image
So I'd like not only the field values to have larger font but also the field labels and have the values listed under the label.  I'd also like to add in conditional formatting to the value on Account Status where if the value is "Active" then highlight it in green and if it is "Inactive" then highlight it in red.  I can't figure out how to do this.  Any help would be greatly appreciated!
Best Answer chosen by Keith Lee 25
mritzimritzi
The only way possible to do that is add these fields in a visualforce page/lightning component with custom styling, and add the VF page/lightning component on the record detail page.

Following is a visualforce page, which you can modify and add it to your record detail page layout:
(Change Field API Names and IF condition to suit your requirement)
Once you create this VF page, Edit relevant Page Layout and add this visualforce page in desired section.
<apex:page showheader="false" standardController="Account" lightningStylesheets="true">
    <style>
        table[id$='customTable'] div, table[id$='customTable'] span{
            font-size:16px;
        }
    </style>
    <apex:pageblock >
        <apex:pageBlockTable id="customTable" value="{!account}" var="acc">
            <apex:column headerValue="Id" value="{!acc.Id}" style="width=50px;font-weight:bold;"/>
            <apex:column headerValue="Name" value="{!acc.Name}" style="width=50px;font-weight:bold;"/>
            <apex:column headerValue="Type" value="{!acc.Type}" style="{! 'width=50px;font-weight:bold; color:' + IF(acc.Type = 'Customer - Channel', 'red', IF(acc.Type = 'Prospect', 'green', 'black'))}"/>
        </apex:pageBlockTable>
    </apex:pageblock>
</apex:page>



Lightning:
lightning
Classic:
classic

Please mark this as Best Answer, if this helps solve your problem.

All Answers

mritzimritzi
Following is sample code, that meets your requirement:
(I have made Account Type: Prospect -> green, Customer - Channel -> red, other -> black in color. Please make changes to make it work in your org)
Apex:
public class TestTableController {
    public List<Account> accountList{get{
        return new List<Account>([Select Id, Name, Type, Website, BillingStreet, BillingCity From Account Where BillingStreet != null Order By lastModifiedDate DESC LIMIT 10]);
    }
    set;}
    public TestTableController(){
        
    }
}

VF:
<apex:page showheader="false" controller="TestTableController">
    <apex:pageblock title="Account List">
        <apex:pageblockTable id="accTable" value="{!accountList}" var="acc">
            <apex:column headerValue="Id" value="{!acc.Id}" style="font-weight:bold;"/>
            <apex:column headerValue="Name" value="{!acc.Name}" style="font-weight:bold;"/>
            <apex:column headerValue="Type" value="{!acc.Type}" style="{! 'font-weight:bold; color:' + IF(acc.Type = 'Customer - Channel', 'red', IF(acc.Type = 'Prospect', 'green', 'black'))}"/>
            <apex:column headerValue="Street" value="{!acc.BillingStreet}"/>
            <apex:column headerValue="City" value="{!acc.BillingCity}"/>
            
        </apex:pageblockTable>
    </apex:pageblock>
</apex:page>

Screenshot:
pageBlockTable

Please mark this as Best Answer, if this helps solve your problem.
Keith Lee 25Keith Lee 25
Thank you for the response but that's not quite what I'm looking for.  I'm not looking to pull a list of Accounts.  I'm looking to add this to a page layout basically making three fields on the Account bigger so they stand out more and give them conditional highlighting.  Here is a better example of what I'm trying to do.
User-added image
mritzimritzi
The only way possible to do that is add these fields in a visualforce page/lightning component with custom styling, and add the VF page/lightning component on the record detail page.

Following is a visualforce page, which you can modify and add it to your record detail page layout:
(Change Field API Names and IF condition to suit your requirement)
Once you create this VF page, Edit relevant Page Layout and add this visualforce page in desired section.
<apex:page showheader="false" standardController="Account" lightningStylesheets="true">
    <style>
        table[id$='customTable'] div, table[id$='customTable'] span{
            font-size:16px;
        }
    </style>
    <apex:pageblock >
        <apex:pageBlockTable id="customTable" value="{!account}" var="acc">
            <apex:column headerValue="Id" value="{!acc.Id}" style="width=50px;font-weight:bold;"/>
            <apex:column headerValue="Name" value="{!acc.Name}" style="width=50px;font-weight:bold;"/>
            <apex:column headerValue="Type" value="{!acc.Type}" style="{! 'width=50px;font-weight:bold; color:' + IF(acc.Type = 'Customer - Channel', 'red', IF(acc.Type = 'Prospect', 'green', 'black'))}"/>
        </apex:pageBlockTable>
    </apex:pageblock>
</apex:page>



Lightning:
lightning
Classic:
classic

Please mark this as Best Answer, if this helps solve your problem.
This was selected as the best answer
Keith Lee 25Keith Lee 25
That's perfect.  That's exactly what I was looking for!  Thank you so much!