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
TamurthTamurth 

Matrix Table in Visualforce Page

Hi,

 

How to get a matrix table (like a matrix report with two grouping columns) in a visualforce page ? The matrix table should be like follwing image (colors is just for information):

 

Contractors/PLs

PL 1

PL 2

PL 3

PL 4

Contractor 1

Stage 1

Stage 1

Stage 1

 

Contractor 2

 

Stage 2

Stage 3

Stage 5

Contractor 3

 

 

Stage 4

 

Contractor 4

    

 

First line (Blue) --> get values for custom field PL__c (this is the first dimension

First column (green) --> get values for custom field Contractor__c (the the second dimension)

Content of the other cells (Orange) --> Stage__c

 

Except the top cell which will be the header (Red).

 

All the best,

 

Anzar,

Best Answer chosen by Admin (Salesforce Developers) 
TamurthTamurth

Thanks for help,

 

This is a static table. Whet i need is get the values from SFDC using APEX and formatting the results in a matrix table. The html table should looks like the table described by "reddygari403", however the data comes from SOQL. I think that we need apex:repeat element to loop over rows.

 

 

All Answers

bob_buzzardbob_buzzard

I suspect you'll need to use a wrapper class for this and just produce a regular HTML table based on iterating a list of them.  There's an example of doing something along these lines in a blog post of mine at:

 

http://bobbuzzard.blogspot.co.uk/2010/09/rotating-visualforce-table.html

 

(Unfortunately the images have gone awol in that post, but the sample code is there)

TamurthTamurth

Thanks for help.

 

My question is how to get two headers (as displayed in my previous post) with values from two custom fields. Just like in a matrix report. The fisrt line for (PL__c) and the first Column (Contractor__c)

bob_buzzardbob_buzzard

If you use a custom or extension controller you can retrieve whatever records you like through SOQL.

TamurthTamurth

I know this, my issue is how formatting the table to get a matrix one in the visualforce page.

 

Thanks a lot for helping.

 

bob_buzzardbob_buzzard

That's where the wrapper class comes in.  The way I've done this before is to create a list of row classes, each of which contains a list of cells.  Each cell contains its data and formatting information.  The VF page then iterates the rows, iterates the cells and draws a regular HTML table.

TamurthTamurth

Any simple code to do this ?

 

Thanks,

bob_buzzardbob_buzzard

Only extending the code in the blog post I linked to above.

reddygari403reddygari403

<apex:page >
<html>
<body>
<table border='1'>
<tr>
<th><font color='#F11B1B'>Contractors/PLs</font></th>
<th><font color='#5141DF'>PL 1</font></th>
<th><font color='#5141DF'>PL 2</font></th>
<th><font color='#5141DF'>PL 3</font></th>
<th><font color='#5141DF'>PL 4</font></th>
</tr>
<tr>
<th><font color='#7CFC00'>Contractor 1</font></th>
<td><font color='#FFA500'>Stage 1</font></td>
<td><font color='#FFA500'>Stage 1</font></td>
<td><font color='#FFA500'>Stage 1</font></td>

<td> </td>
</tr>
<tr><th><font color='#7CFC00'>Contractor 2</font></th>
<td> </td>
<td>Stage 2</td>
<td>Stage 3</td>
<td>Stage 5</td>
</tr>
<tr><th><font color='#7CFC00'>Contractor 3</font></th>
<td> </td>
<td> </td>
<td><font color='#FFA500'>Stage 4</font></td>
<td> </td></tr>
<tr><th><font color='#7CFC00'>Contractor 4</font></th>
<td> </td>
<td> </td>
<td> </td>
<td> </td></tr>
</table>
</body>
</html>
</apex:page>

TamurthTamurth

Thanks for help,

 

This is a static table. Whet i need is get the values from SFDC using APEX and formatting the results in a matrix table. The html table should looks like the table described by "reddygari403", however the data comes from SOQL. I think that we need apex:repeat element to loop over rows.

 

 

This was selected as the best answer
Jenny Van ReesJenny Van Rees
Here is the code that I used. You can embed your SF fields, if you give it a controller at the top. This solution wasn't posted anywhere I could find. I hope it helps someone.
User-added image


<apex:page standardController="Contact">
<html>
<body>
<table border='1'>
<tr>
<th><font color='#F11B1B'>Sales for {!contact.name}</font></th>
<th>VA</th>
<th>VAVE</th>
<th>VA5</th>
<th>VA6</th>
<th>VA7</th>
<th>MF</th>
<th>PlusMF</th>
<th>MYGA</th>
<th>FIA</th>
<th>PFIA</th>
<th>TOTALS</th>
</tr>
<tr>
<th>LTD</th>
<td>{!contact.LTD_Sales_VA__c}0</td>
<td>{!contact.LTD_Sales_VAVE__c}0</td>
<td>{!contact.LTD_Sales_VAVE5__c}0</td>
<td>{!contact.LTD_Sales_VAVE6__c}0</td>
<td>{!contact.LTD_Sales_VAVE7__c}0</td>
<td>{!contact.LTD_Sales_MF__c}0</td>
<td>{!contact.LTD_Sales_Plus_MF__c}0</td>
<td>{!contact.LTD_Sales_MYGA2__c}0</td>
<td>{!contact.LTD_Sales_FIA__c}0</td>
<td>{!contact.LTD_Sales_PFIA__c}0</td>
<td>{!contact.LTD_Sales_Total__c}0</td>
</tr>
<tr><th>YTD</th>
<td>{!contact.YTD_LiveWell_VA_Sales__c}0</td>
<td>{!contact.YTD_LiveWell_VAVE_Sales__c}0</td>
<td>{!contact.YTD_LiveWell_VAVE5_Sales__c}0</td>
<td>{!contact.YTD_LiveWell_VAVE6_Sales__c}0</td>
<td>{!contact.YTD_LiveWell_VAVE7_Sales__c}0</td>
<td>{!contact.YTD_LiveWell_MF_Sales__c}0</td>
<td>{!contact.YTD_LiveWell_Plus_MF_Sales__c}0</td>
<td>{!contact.YTD_LiveWell_MYGA_Sales__c}0</td>
<td>{!contact.YTD_LiveWell_FIA_Sales__c}0</td>
<td>{!contact.YTD_LiveWell_PFIA_Sales__c}0</td>
<td>{!contact.Total_YTD_MF_VA_Sales__c}0</td>
</tr>
<tr><th>Monthly</th>
<td>{!contact.Monthly_LiveWell_VA_Sales__c}0</td>
<td>{!contact.Monthly_LiveWell_VAVE_Sales__c}0</td>
<td>{!contact.Monthly_LiveWell_VAVE5_Sales__c}0</td>
<td>{!contact.Monthly_LiveWell_VAVE6_Sales__c}0</td>
<td>{!contact.Monthly_LiveWell_VAVE7_Sales__c}0</td>
<td>{!contact.Monthly_LiveWell_MF_Sales__c}0</td>
<td>{!contact.Monthly_LiveWell_Plus_MF_Sales__c}0</td>
<td>{!contact.Monthly_LiveWell_MYGA_Sales__c}0</td>
<td>{!contact.Monthly_LiveWell_FIA_Sales__c}0</td>
<td>{!contact.Monthly_LIveWell_PFIA_Sales__c}0</td>
<td>{!contact.Total_Monthly_MF_VA_Sales__c}0</td>
</tr>
<tr><th>AUM</th>
<td>{!contact.AUM_LiveWell_VA_Sales__c}0</td>
<td>{!contact.AUM_LiveWell_VAVE_Sales__c}0</td>
<td>{!contact.AUM_LiveWell_VAVE5_Sales__c}0</td>
<td>{!contact.AUM_LiveWell_VAVE6_Sales__c}0</td>
<td>{!contact.AUM_LiveWell_VAVE7_Sales__c}0</td>
<td>{!contact.AUM_LiveWell_MF_Sales__c}0</td>
<td>{!contact.AUM_LiveWell_Plus_MF_Sales__c}0</td>
<td>{!contact.AUM_LiveWell_MYGA_Sales__c}0</td>
<td>{!contact.AUM_LiveWell_FIA_Sales__c}0</td>
<td>{!contact.AUM_LiveWell_PFIA_Sales__c}0</td>
<td></td>
</tr>

<tr><th>Date of Last Sale</th>
<td>{!contact.Date_of_Last_VA_Sale__c}</td>
<td>{!contact.Date_of_Last_VAVE_Sales__c}</td>
<td>{!contact.Date_of_Last_VAVE5_Sale__c}</td>
<td>{!contact.Date_of_Last_VAVE6_Sale__c}</td>
<td>{!contact.Date_of_Last_VAVE7_Sale__c}</td>
<td>{!contact.Date_of_Last_MF_Sale__c}</td>
<td>{!contact.Date_of_Last_Sale_Plus_MF__c}</td>
<td>{!contact.Date_of_Last_MYGA_Sale__c}</td>
<td>{!contact.Date_of_Last_FIA_Sale__c}</td>
<td>{!contact.Date_of_Last_PFIA_Sales__c}</td>
</tr>

<tr><th>Amount of Last Sale</th>
<td>{!contact.Amount_of_Last_Sale_VA__c}0</td>
<td>{!contact.Amount_of_last_VAVE_Sales__c}0</td>
<td>{!contact.Amount_of_Last_Sale_VAVE5__c}0</td>
<td>{!contact.Amount_of_Last_Sale_VAVE6__c}0</td>
<td>{!contact.Amount_of_Last_Sale_VAVE7__c}0</td>
<td>{!contact.Amount_of_Last_Sale_MF__c}0</td>
<td>{!contact.Amount_of_Last_Sale_Plus_MF__c}0</td>
<td>{!contact.Amount_of_Last_Sale_MYGA__c}0</td>
<td>{!contact.Amount_of_Last_Sale_FIA__c}0</td>
<td>{!contact.Amount_of_Last_Sale_PFIA__c}0</td>
</tr>

<tr><th>Total Contracts Sold</th>
<td>{!contact.Total_LiveWell_VA_Contracts_Sold__c}</td>
<td>{!contact.Total_LiveWell_VAVE_Contracts_Sold__c}</td>
<td>{!contact.Total_LIveWell_VAVE5_Accounts_Sold__c}</td>
<td>{!contact.Total_LiveWell_VAVE6_Accounts_Sold__c}</td>
<td>{!contact.Total_LiveWell_VAVE7_Accounts_Sold__c}</td>
<td>{!contact.Total_LiveWell_MF_Accounts_Sold__c}</td>
<td>{!contact.Total_LiveWell_Plus_MF_Accounts_Sold__c}</td>
<td>{!contact.Total_LiveWell_MYGA_Accounts_Sold__c}</td>
<td>{!contact.Total_LiveWell_FIA_Accounts_Sold__c}</td>
<td>{!contact.Total_LIveWell_PFIA_Contracts_Sold__c}</td>
</tr>
</table>
</body>
</html>
</apex:page>
Jenny Van ReesJenny Van Rees
Here is your date/time translation to just date:
<tr><th>Date of Last Sale</th>
<td><apex:outputText value="{0,date,MM/dd/yy}">
<apex:param value="{!contact.Date_of_Last_VA_Sale__c}"/>
</apex:outputText>
</td>
Salesforce P1Salesforce P1
Hi ,
Is this solved. If so, can you share the solution as i have a similar requirement.
Need an output as below in the custom visualforce.
 A1A2
P1True(Checkbox)False(Checkbox)
P2True(Checkbox)True(Checkbox)
Where A and P are two lists and user should be able to check/uncheck the matrix.

 
Akshay MenseAkshay Mense
How can we make this table content editable and also save after editing the changes