Apex Code Development You need to sign in to do that
Don't have an account?
nasir jawed How to change the colour in <apex:datatable>
Hi All,
I have written an apex controller and created a visual force page and i had used datatable for this.The master object is Order__c and child is Job__c. Suppose if there are 5 jobs related to an Order.I display this in visual force page by using dataTable.
I am not able to get alternate colours for all the 5 jobs.For example if there is 5 jobs and i user green and blue colour for even and odd.Then jobs in data table should display as blue,green ,blue,green,
Here is the Visual force page which i had used.
<apex:page standardController="Order__c" showHeader="false" extensions="PopulateOrderValues" >
<html>
<head>
<title>Order Received</title>
</head>
<style type="text/css">
c1 { color: #fae1c3; }
c2 { color: #FF0000; }
</style>
<body>
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="https://c.cs5.content.force.com/servlet/servlet.ImageServer?id=015O00000008wm7&oid=00DO0000000CqOz&lastMod=1320735422000"/></td>
</tr>
<tr>
<td height="70" align="center" valign="top"><font color="#646464" size="5" face="Helvetica, Arial, sans-serif"><Center>THANK YOU FOR YOUR ORDER!</center></font><font face="Helvetica, Arial, sans-serif" color="#646464" size="2" style="font-size:12px">We will send you a notification once your order is ready for shipment.</font></td>
</tr>
<tr>
<td height="30" align="center" valign="top"><img src="" width="600" height="1"/></td>
</tr>
<tr>
<td><table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="25"> </td>
<td width="550" height="30" valign="top"><font face="Helvetica, Arial, sans-serif" color="#646464" size="3" style="font-size:19px">ORDER INFORMATION</font></td>
<td width="25"> </td>
</tr>
<tr>
<td> </td>
<td><table width="550" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="95"><strong><font face="Helvetica, Arial, sans-serif" color="#646464" size="2" style="font-size:12px">Order number</font></strong></td>
<td width="180"><font face="Helvetica, Arial, sans-serif" color="#646464" size="2" style="font-size:12px">{!Order__c.Order_ID__c}</font></td>
<td width="95" rowspan="5" valign="top"><strong><font face="Helvetica, Arial, sans-serif" color="#646464" size="2" style="font-size:12px">Deliver to</font></strong></td>
<td width="180" rowspan="5" valign="top"><font face="Helvetica, Arial, sans-serif" color="#646464" size="2" style="font-size:12px">{!currentOrder.Account__r.PersonMailingStreet}, {!currentOrder.Account__r.PersonMailingCity},
{!currentOrder.Account__r.PersonMailingState},{!currentOrder.Account__r.PersonMailingPostalCode},{!currentOrder.Account__r.PersonMailingCountry}, </font></td>
</tr>
<tr>
<td><strong><font face="Helvetica, Arial, sans-serif" color="#646464" size="2" style="font-size:12px">Cost centre</font></strong></td>
<td><font face="Helvetica, Arial, sans-serif" color="#646464" size="2" style="font-size:12px">{!Order__c.Cost_Center__c}</font></td>
</tr>
<tr>
<td><strong><font face="Helvetica, Arial, sans-serif" color="#646464" size="2" style="font-size:12px">Employee</font></strong></td>
<td><font face="Helvetica, Arial, sans-serif" color="#646464" size="2" style="font-size:12px">{!currentOrder.Contact__r.Name}</font></td>
</tr>
<tr>
<td><strong><font face="Helvetica, Arial, sans-serif" color="#646464" size="2" style="font-size:12px">Phone</font></strong></td>
<td><font face="Helvetica, Arial, sans-serif" color="#646464" size="2" style="font-size:12px">{!currentOrder.Account__r.Phone}</font></td>
</tr>
<tr>
<td><strong><font face="Helvetica, Arial, sans-serif" color="#646464" size="2" style="font-size:12px">Email</font></strong></td>
<td><font face="Helvetica, Arial, sans-serif" color="#646464" size="2" style="font-size:12px">{!Order__c.Contact_Email__c}</font></td>
</tr>
</table></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td height="20"> </td>
<td> </td>
</tr>
nasir
<style type="text/css">
.h { width:1000px;
height:200px;}
</style>
<apex:form >
<apex:pageBlock >
<apex:dataTable value="{!job}" var="j" columns="5" style="Helvetica, Arial, sans-serif" bgcolor="#fae1c3" >
<apex:column styleClass="h" >
<apex:facet name="header" >Item #</apex:facet>
<p><apex:outputText value="{!j.Job_ID__c}" styleClass="mystyle"/></p>
</apex:column>
<apex:column styleClass="h" >
<apex:facet name="header">Date</apex:facet>
<apex:outputField value="{!Order__c.Order_Date__c}" styleClass="mystyle"/>
</apex:column>
<apex:column styleClass="h">
<apex:facet name="header">Quantity</apex:facet>
<apex:outputText value="{!j.Quantity__c}" styleClass="mystyle"/>
</apex:column>
<apex:column styleClass="h" >
<apex:facet name="header">Product</apex:facet>
<Strong><apex:outputText value="EMC Business Card Front"/></Strong>
<apex:outputField value="{!j.Front_Template_Name__c}" styleClass="mystyle"/>
<Strong><apex:outputText value="Delivery"/></Strong>
<apex:outputField value="{!j.Delivery_Country__c}" styleClass="mystyle"/>
<Strong><apex:outputText value="Base"/></Strong>
<apex:outputField value="{!j.Material_Type__c}"/>
<Strong><apex:outputText value="Lamination"/></Strong>
<apex:outputField value="{!j.Lamination__c}"/>
<Strong><apex:outputText value="Printed Sides"/></Strong>
<apex:outputField value="{!j.Printing_Side__c}"/>
<Strong><apex:outputText value="Dimendions"/></Strong>
<apex:outputField value="{!j.Dimension__c}"/>
<Strong><apex:outputText value="Delivery Zone"/></Strong>
<apex:outputField value="{!j.Delivery_State__c}"/>
</apex:column>
<apex:column styleClass="h" >
<apex:facet name="header">Cost</apex:facet>
<apex:outputText value="{!j.Item_Price__c}" styleClass="mystyle"/>
</apex:column>
</apex:dataTable>
</apex:pageBlock>
</apex:form>
<table ALIGN="right" face="Helvetica, Arial, sans-serif" size="2" style="font-size:12px">
<tr>
<td style="font-size:15px"><Strong><h1>Cost Of Items</h1></Strong></td>
<td ALIGN="right"><apex:outputText value="{!Order__c.Cost_of_Items__c}"/></td>
</tr>
<tr>
<td style="font-size:15px"><Strong><apex:outputText value="Delivery"/></Strong></td>
<td ALIGN="right"> <apex:outputText value="{!Order__c.Freight_Cost__c}"/></td>
</tr>
<tr>
<td style="font-size:15px"> <Strong><apex:outputText value="Total"/></Strong></td>
<td ALIGN="right" > <apex:outputText value="{!Order__c.Total_Charges__c}"/></td>
</tr>
</table>
</table></td>
</tr>
<tr>
<td height="20"> </td>
</tr>
<tr>
<td><img src="" width="600" height="1" style="display:block"/></td>
</tr>
<tr>
<td height="120" ALIGN="center" valign="middle" bgcolor="#E3E3D9"><font face="Helvetica, Arial, sans-serif" color="#646464" size="3" style="font-size:19px">Best regards,The EfficientLive Team</font></td>
</tr>
</table>
</body>
</html>
</apex:page>and controller is
public class PopulateOrderValues {
public Order__c order;
public Order__c currentOrder{get;set;}
public List<Job__c> job{get; set;}
public PopulateOrderValues(ApexPages.StandardController controller) {
order=(Order__c)controller.getRecord();
currentOrder=[Select Contact__r.Email,Contact__r.Name,Account__r.Phone,Account__r.PersonMailingCity,Account__r.PersonMailingCountry,
Account__r.PersonMailingPostalCode,
Account__r.PersonMailingState,Account__r.PersonMailingStreet from Order__c where id=:Order.id];
job=[Select id,Job_ID__c,Order_Date__c,Quantity__c,Item_Price__c,Front_Template_Name__c,Delivery_Country__c
,Material_Type__c,Lamination__c,Printing_Side__c,Dimension__c,Delivery_State__c from Job__c where Order__c=:order.id ];
System.debug('Nasir:'+ job);
}Please let me know how can i change the colour for the records.
Thanks
Hey Nasir,
You can use IF formula in a visualforce page for conditionally showing styles:
Chck this out:
http://boards.developerforce.com/t5/Visualforce-Development/Inline-VisualForce-quot-IF-quot-statement/td-p/75825
Here is a sample visualforce page and the controller showing the use:
NumberofLocations__c is a field of type Number on Account.
VF Page:
<apex:page controller="UsingStylesInDataTableController" >
<apex:dataTable value="{!accs}" var="acc">
<apex:column value="{!acc.Name}" style="{!IF(acc.NumberofLocations__c < 5, 'background-color:red;', 'background-color:green;')}"/>
<apex:column value="{!acc.NumberofLocations__c}" style="{!IF(acc.NumberofLocations__c < 5, 'background-color:red;', 'background-color:green;')}"/>
</apex:dataTable>
</apex:page>
Controller:
Public class UsingStylesInDataTableController {
public Integer num1{get;set;}
public List<Account> accs{get; set;}
public UsingStylesInDataTableController(){
num1 = 10;
accs = [select id, name, NumberofLocations__c from account limit 10];
}
}
Hope it will help and resolves your issue !!:)
Cheers,
Sankalp Jhingran
forcesecrets.blogspot.com
Hi Sankalp Jhingran,
Thanks for your reply.
Well i got this problem solved by using rowClasses="even,odd" and then i used CSS for this and this was done.
Thanks