You need to sign in to do that
Don't have an account?
Column Page section layout
I'm working on making a section on the quotes page layout that displays some aggregated data for quote line item categories, that will display as a table. With the family on the left and then four columns of data, with five rows of categories and then two charts on the left. I tried using columns but that didn't work well, and now I'm using pageblocksection tags and items to lay it out and it worked well, but then I added a second row and the spacing got messed up.
This is the markup I'm working with now and what it looks like now, ideally the chart would display on the right with the data all being aligned and spaced on the right. I'm still relatively new to using visualforce, I'm good with css and html for markup, I've tried using the built in style on the visualforce tags in a few ways and just using internal css but I haven't found the right way to style this.
I'm sure this is just me approaching this the wrong way and using the wrong tags for my use case. Hopefully someone can enlighten me with the right approach :]
<apex:page standardController="Quote"> <style type="text/css"> .label{ font-size: 18px; text-decoration: underline; } .section{ width: 50%; } .text{ font-size: 18px; } </style> <apex:pageBlock > <apex:pageBlockSection columns="5" id="section"> <!--Video Line--> <apex:pageBlockSectionItem dataStyle="width:5%"> <apex:outputLabel styleClass="label" >Redemption</apex:outputLabel> </apex:pageBlockSectionItem> <apex:pageBlockSectionItem dataStyle="width:10%"> <apex:outputText value="{!Quote.Redemption_Quantity__c}" styleClass="text" /> </apex:pageBlockSectionItem> <apex:pageBlockSectionItem dataStyle="width:10%" > <apex:outputText value="{0,number,##.##}%" styleClass="text"> <apex:param value="{!Quote.Redemption_Percentage__c}" /> </apex:outputText> </apex:pageBlockSectionItem> <apex:pageBlockSEctionItem dataStyle="width:10%"> <apex:outputText value="12345.34" styleClass="text"/> </apex:pageBlockSectionItem> <apex:pageBlockSectionItem dataStyle="width:10%"> <apex:outputText value="12345.34" styleClass="text"/> </apex:pageBlockSectionItem> <!--Video Line--> <apex:pageBlockSectionItem dataStyle="width:10%"> <apex:outputLabel styleClass="label" >Video</apex:outputLabel> </apex:pageBlockSectionItem> <apex:pageBlockSectionItem dataStyle="width:10%"> <apex:outputText value="{!Quote.Video_Quantity__c}" styleClass="text" /> </apex:pageBlockSectionItem> <apex:pageBlockSectionItem dataStyle="width:10%" > <apex:outputText value="{0,number,##.##}%" styleClass="text"> <apex:param value="{!Quote.Video_Percentage__c}" /> </apex:outputText> </apex:pageBlockSectionItem> <apex:pageBlockSEctionItem dataStyle="width:10%"> <apex:outputText value="12345.34" styleClass="text"/> </apex:pageBlockSectionItem> <apex:pageBlockSectionItem dataStyle="width:10%"> <apex:outputText value="12345.34" styleClass="text"/> </apex:pageBlockSectionItem> <apex:pageBlockSectionItem > <apex:outputText value="{!Quote.QuantityChart__c}" escape="false" label=""/> </apex:pageBlockSectionItem> </apex:pageBlockSection> </apex:pageBlock> </apex:page>
This is how I was hoping to get it to display. Obviously though with the additional columns though.
try setting the columns="6" and modify your code as shown below
You can also try using <apex:panelGrid/> and <apex:PanelGroup/>. Look for the component reference for examples.
If you are using datatable then you can use rowspan and colspan.
You can always use <div> tag as well
You rock today dude, thanks for all your help. I actually ended up using some basic html tables to get the display for that the way I want. I would have actually gone with what you just recommended, but I need to get the charts we were discussing earlier to display on the left.
I'm still having trouble to get the rerender for the formula image to work, and I wasn't able to get the controller you recommended to work either. I don't know if you have any more input on that, you've been solid help today though dude, I really appreciate it.
The part in red is what I originally tried when re rendering, it works fine if I use a 'regular' output, like the picklist. But when I try to use the formula image output, it won't render at all. Not sure if you have any ideas on that, but I'd be open to whatever you've got. Not quite a visualforce expert here, made obvious by using long html for what visualforce could probably do with half the markup.
Is your Quote.Chart__c a picklist field?
The quote.chart__c is a picklist field, that is the one that I'm trying to get to control the output of the quantitychart__c. So that when the picklist value is changed, the page, which is a section on my quote page, rerenders and displays the selected chart.
In that panel, when the field is the quote.quantitychart__c field, nothing renders, but the quote.chart__c string will.
Sorry for asking too many questions. Is your quantitychart__c a picklist field as weel. Is their any dependency betwenn the two fields?
No worries dude, ask all the questions you want. The quantitychart__c is a formula field with an image function contained in an if statement. The formula is below.
CASE(
Chart__c,
"Quantity",
IMAGE("http://chart.apis.google.com/chart?cht=p&chd=t:" &
TEXT( Video_Quantity__c ) & "," &
TEXT( Redemption_Quantity__c ) & "," &
TEXT(Quick_Coin_Redemption__c) & "," &
TEXT(Miscellaneous_Quantity__c) & "," &
TEXT(Cranes_Merchandisers_Quantity__c) &
"&chtt=Quantity&chs=300x150&chf=bg,s,F3F3EC&chl=Video|Redemption|Quick Coin|Misc.|Cranes&chco=5555ff",
"chart text"),
"Total Price",
IMAGE("http://chart.apis.google.com/chart?cht=p&chd=t:" &
TEXT( Video_Total_Price__c ) & "," &
TEXT( Redemption_Total_Price__c ) & "," &
TEXT(Quick_Coin_Total_Price__c) & "," &
TEXT(Miscellaneous_Total_Price__c) & "," &
TEXT( Crane_Merchandise_Total_Price__c ) &
"&chtt=Total_Price&chs=250x100&chf=bg,s,F3F3EC&chl=Video|Redemption|Quick Coin|Misc.|Cranes&chco=5555ff",
"chart text"),
null
)
In order for the quantitychart__c to change based on chart__c, we have update the record everytime user selects a different value other than defualt value for this to work. This is because the quantitychart__c changes only when the chart__c value on the record gets updated.