+ Start a Discussion
LuLu(non-developer)LuLu(non-developer) 

Creating tables with VisualForce

I need to create a table like the one below & place it on our lead page layout.
 
 JANFEBMARAPRMAYJUNJULAUGSEPOCTNOVDEC
Usage            
Cost            

I thought perhaps a visualforce page would be the answer so I created a 'usage' and 'cost' fields for each month like the ones below:
Jan_u__c
Jan_c__c
Feb_u__c
Feb_c__c

But I don't know how to set it up as a vf page. If anyone has any feedback or sample code that can get me started that would be much appreciated.
 
Best Answer chosen by LuLu(non-developer)
Ajay K DubediAjay K Dubedi
Hi Lulu,
As per your new requirement this code is help you .First you need to check your controller using System debug.

Inline Visualforce Page:-
<apex:page standardController="Lead" extensions="MonthTableExample">
   <apex:form >
       <apex:pageBlock title="Inline Visualforce Page Example">
           <apex:pageBlockButtons >
               <apex:commandButton value="Save" action="{!save}" oncomplete="ReloadPage();" />
        </apex:pageBlockButtons>
           <table border="1px">
               <tr>
                   <th></th>
                   <th>JAN</th>
                   <th>FEB</th>
                   <th>APR</th>
                   <th>MAY</th>
               </tr>                    
               <apex:repeat value="{!leadList}" var="a" >
                   <tr>
                       <th>Usage</th>
                       <td><apex:inputField value="{! a.Jan_u__c}"/></td>
                       <td><apex:inputField value="{! a.feb_u__c}"/></td>
                   </tr>
                   <tr>
                       <th>Cost</th>
                       <td><apex:inputField value="{! a.Jan_c__c}"/></td>
                       <td><apex:inputField value="{! a.feb_c__c}"/></td>
                   </tr>
            </apex:repeat>
        </table>
       </apex:pageBlock>
   </apex:form>
   <script>
    function ReloadPage(){
           //alert('reload');
           var urlId = '{!$CurrentPage.parameters.Id}';
           //alert(urlId);
           window.top.location='/'+urlId;
           return false;
       }
   </script>
</apex:page>
Extension Class:-
 public class MonthTableExample{
 public String LId {get;set;}
 public List<Lead> leadList {get;set;}
 public MonthTableExample(ApexPages.StandardController controller){
       LId = '';
       LId=System.currentPageReference().getParameters().get('id');
       System.debug('...................LID=='+LId);
       Id i= Id.valueOf(LId);
       leadList = [Select Jan_c__c,Jan_u__c,feb_c__c,feb_u__c from Lead where Id=:i];
       System.debug('.............................leadlist=='+leadList);
   }
 public MonthTableExample(){
   }
 public void save(){
       update leadList;
       /*PageReference pr = new PageReference('/'+leadList[0].Id);
       pr.setRedirect(true);
       return pr;*/
   }
 }
Output:-

User-added image

I hope it will help you!!
Regards,
Ajay

All Answers

RKSalesforceRKSalesforce
Yes, Visualforce page is the answer. What is the requirement.

Regards,
Ramakant 
Ajay K DubediAjay K Dubedi
Hi Lulu,

You can try this code and Instruction:-
Step1:-
Inline Visualforce Page:-
<apex:page standardController="Lead" extensions="MonthTableExample">
   <apex:form>
       <apex:pageBlock title="Inline Visualforce Page Example">
               <table border="1px">
                   <tr>
                       <th></th>
                       <th>JAN</th>
                       <th>FEB</th>
                       <th>APR</th>
                       <th>MAY</th>
                   </tr>                    
             <apex:repeat value="{!leadList}" var="a" >
                  <tr>
                       <th>Usage</th>
                       
                       <td>{! a.Jan_u__c}</td>
                       
                       <td>{! a.feb_u__c}</td>
                   </tr>
                <tr>
                       <th>Cost</th>
                       <td>{! a.Jan_c__c}</td>
                       
                       <td>{! a.feb_c__c}</td>
                   </tr>
            </apex:repeat>
               </table>
       </apex:pageBlock>
   </apex:form>
</apex:page>
Extension:-
public class MonthTableExample {
   public String LId {get;set;}
    public List<Lead> leadList {get;set;}
   public MonthTableExample(ApexPages.StandardController controller){
       LId = ' ';
       LId=System.currentPageReference().getParameters().get('id');
       System.debug('...................LID=='+LId);
       Id i= Id.valueOf(LId);
       leadList = [Select Jan_c__c,Jan_u__c,feb_c__c,feb_u__c from Lead where Id=:i];
       system.debug('.............................leadlist=='+leadList);
   }
   public MonthTableExample(){
     }
}
Step 2:- Go to Lead Page and open any Lead Account and click Edit Layout.
Step 3:-  Create a new Section and Save any Name .
Step 4:-   Click on Visualforce Page then show your page with name then drag on this and drop of newly created section.

This Screenshot will help you.

User-added image

Output :-

User-added image


Regards,
Ajay
LuLu(non-developer)LuLu(non-developer)
Thanks for the confirmation Sul!
LuLu(non-developer)LuLu(non-developer)
@Ajay K Dubedi - You just saved me a whole bunch of hours trying to get started. HUGE thanks!
LuLu(non-developer)LuLu(non-developer)
I was able to create the VF and place it on my lead page - - styled it a bit and it looks fine.
User-added image

However I am not able to enter any data. I already checked the security setting of the VF page and ensured the table fields were visible/editable by admin profile.

I think I'm missing something on my extension but can't figure it out, anyone wants to take a peek?

Apex Class:
User-added image
 
Ajay K DubediAjay K Dubedi
Hi Lulu,
Thanks for selecting my answer as a best answer.
Can you please tell me exact requirement? Do you want to enter the data in table on Lead page or want to fetch the data from the database into the table?

Regards,
Ajay
LuLu(non-developer)LuLu(non-developer)
Hi Ajay, My apologies for not being clear, I am looking to enter the data in table on Lead page. Thank you so much for your assistance! Kind Regards, Lulu
Ajay K DubediAjay K Dubedi
Hi Lulu,
As per your new requirement this code is help you .First you need to check your controller using System debug.

Inline Visualforce Page:-
<apex:page standardController="Lead" extensions="MonthTableExample">
   <apex:form >
       <apex:pageBlock title="Inline Visualforce Page Example">
           <apex:pageBlockButtons >
               <apex:commandButton value="Save" action="{!save}" oncomplete="ReloadPage();" />
        </apex:pageBlockButtons>
           <table border="1px">
               <tr>
                   <th></th>
                   <th>JAN</th>
                   <th>FEB</th>
                   <th>APR</th>
                   <th>MAY</th>
               </tr>                    
               <apex:repeat value="{!leadList}" var="a" >
                   <tr>
                       <th>Usage</th>
                       <td><apex:inputField value="{! a.Jan_u__c}"/></td>
                       <td><apex:inputField value="{! a.feb_u__c}"/></td>
                   </tr>
                   <tr>
                       <th>Cost</th>
                       <td><apex:inputField value="{! a.Jan_c__c}"/></td>
                       <td><apex:inputField value="{! a.feb_c__c}"/></td>
                   </tr>
            </apex:repeat>
        </table>
       </apex:pageBlock>
   </apex:form>
   <script>
    function ReloadPage(){
           //alert('reload');
           var urlId = '{!$CurrentPage.parameters.Id}';
           //alert(urlId);
           window.top.location='/'+urlId;
           return false;
       }
   </script>
</apex:page>
Extension Class:-
 public class MonthTableExample{
 public String LId {get;set;}
 public List<Lead> leadList {get;set;}
 public MonthTableExample(ApexPages.StandardController controller){
       LId = '';
       LId=System.currentPageReference().getParameters().get('id');
       System.debug('...................LID=='+LId);
       Id i= Id.valueOf(LId);
       leadList = [Select Jan_c__c,Jan_u__c,feb_c__c,feb_u__c from Lead where Id=:i];
       System.debug('.............................leadlist=='+leadList);
   }
 public MonthTableExample(){
   }
 public void save(){
       update leadList;
       /*PageReference pr = new PageReference('/'+leadList[0].Id);
       pr.setRedirect(true);
       return pr;*/
   }
 }
Output:-

User-added image

I hope it will help you!!
Regards,
Ajay
This was selected as the best answer
Steve LovelySteve Lovely
I am working on something similar. I do not need to edit the table. But I do need to only display records with certain case statuses. I would however need users to be able to export to excel. Is this possible?