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
Cloud EliteCloud Elite 

How to build a table in visual force page to present certain fields and embed in page layout

Hi all, 

I need help to build a table in VF to present fields in a certain way. here is the example i have: 

i have 9 fields labeled as follow: 
1. Secure Allowed, 2. Secured availble, 3. Secured status
4. UnSecured Allowed, 5. UnSecured available, 6. UnSecured status 
7. Priority Allowed, 2. Priority availble, 3. Priority status

the fields should be presented in a table with the following Row labels and column labeles: 

Table                Allowed | Available | Status 
Secured:                        |                |
UnSecured:                   |                |
Priority:                          |                |


i hope this make sense, please let me know how do to that, those fields are on the lead object. 
Best Answer chosen by Cloud Elite
Raj VakatiRaj Vakati
<apex:page lightningStylesheets="true" standardController="Lead">
    <apex:slds />
    <table class="slds-table slds-table_bordered slds-table_cell-buffer">
        <thead>
            <tr class="slds-text-title_caps">
                <th scope="col">
                </th>
                <th scope="col">
                    Allowed  
                </th>
                <th scope="col">
                    Available 
                </th>
                <th scope="col">
                    Status  
                </th>
                
            </tr>
        </thead>
        <tbody>
            <tr>
                <td scope="row" >
                    Secured: 
                </td>
                <td>
                    {!Lead.Secure_Allowed__c}
                </td>
                <td> 
                    {!Lead.Secured availble__c}
                    
                </td>
                <td>
                    {!Lead.Secured status__c}
                    
                </td>
            </tr>
            <tr>
                <td scope="row" >
                    UnSecured: 
                </td>
                <td>
                    {!Lead.UnSecured_Allowed__c}
                </td>
                <td> 
                    {!Lead.UnSecuredavailable__c}
                </td>
                <td>
                    {!Lead.UnSecuredstatus__c}
                </td>
                
            </tr>
            <tr>
                <td scope="row" >
                    Priority: 
                </td>
                <td>
                    {!Lead.PriorityAllowed__c}
                </td>
                <td> 
                    {!Lead.Priorityavailble__c}
                </td>
                <td>
                    {!Lead.Prioritystatus__c}
                </td>
                
            </tr>
        </tbody>
    </table>
    
</apex:page>



Add this page to Salesforce Page Layouts 

All Answers

Raj VakatiRaj Vakati
Sample code is here. Replace it with original values

 
<apex:page lightningStylesheets="true">
    <apex:slds />
    <table class="slds-table slds-table_bordered slds-table_cell-buffer">
        <thead>
            <tr class="slds-text-title_caps">
                <th scope="col">
                </th>
                <th scope="col">
                    Allowed  
                </th>
                <th scope="col">
                    Available 
                </th>
                <th scope="col">
                    Status  
                </th>
                
            </tr>
        </thead>
        <tbody>
            <tr>
                <td scope="row" >
                    Secured: 
                </td>
                <td>
                    1
                </td>
                <td> 
                    2
                </td>
                <td>
                    3
                </td>
            </tr>
            <tr>
                <td scope="row" >
                    UnSecured: 
                </td>
                <td>
                    1
                </td>
                <td> 
                    2
                </td>
                <td>
                    3
                </td>
                
            </tr>
            <tr>
                <td scope="row" >
                    Priority: 
                </td>
                <td>
                    1
                </td>
                <td> 
                    2
                </td>
                <td>
                    3
                </td>
                
            </tr>
        </tbody>
    </table>
    
</apex:page>

 
Cloud EliteCloud Elite
Raj, would you please add the name of the fields in the code above, the fields i listed are on the lead object, it will create to show me how i can put them in the page above. 
Raj VakatiRaj Vakati
<apex:page lightningStylesheets="true" standardController="Lead">
    <apex:slds />
    <table class="slds-table slds-table_bordered slds-table_cell-buffer">
        <thead>
            <tr class="slds-text-title_caps">
                <th scope="col">
                </th>
                <th scope="col">
                    Allowed  
                </th>
                <th scope="col">
                    Available 
                </th>
                <th scope="col">
                    Status  
                </th>
                
            </tr>
        </thead>
        <tbody>
            <tr>
                <td scope="row" >
                    Secured: 
                </td>
                <td>
                    {!Lead.Secure_Allowed__c}
                </td>
                <td> 
                    {!Lead.Secured availble__c}
                    
                </td>
                <td>
                    {!Lead.Secured status__c}
                    
                </td>
            </tr>
            <tr>
                <td scope="row" >
                    UnSecured: 
                </td>
                <td>
                    {!Lead.UnSecured_Allowed__c}
                </td>
                <td> 
                    {!Lead.UnSecuredavailable__c}
                </td>
                <td>
                    {!Lead.UnSecuredstatus__c}
                </td>
                
            </tr>
            <tr>
                <td scope="row" >
                    Priority: 
                </td>
                <td>
                    {!Lead.PriorityAllowed__c}
                </td>
                <td> 
                    {!Lead.Priorityavailble__c}
                </td>
                <td>
                    {!Lead.Prioritystatus__c}
                </td>
                
            </tr>
        </tbody>
    </table>
    
</apex:page>



Add this page to Salesforce Page Layouts 
This was selected as the best answer
Cloud EliteCloud Elite
@Raj V . how can i justify the values of those fields to the right ? also if i have a currency field, i need to present the same format on the visualforce page it is not now, it shows 57666.99 rather than $57,666.99
Raj VakatiRaj Vakati
You need to use output field with Current types ..