+ Start a Discussion
kcpluspluskcplusplus 

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>

 

 

 

 

 

 

kcpluspluskcplusplus

This is how I was hoping to get it to display. Obviously though with the additional columns though.

 

S91084S91084

try setting the columns="6" and modify your code as shown below

 

<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="6" 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>
                                              
                <apex:pageBlockSectionItem >
                       &nbsp;
                </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>

 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

 

 

 

kcpluspluskcplusplus

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. 

 

<apex:page standardController="Quote" >
<style>
    th{
        text-decoration: underline;
        padding-bottom: 12px;
    }
    
    th.chart{
        padding-left: 50px;
    }
    td.cellTotal{
        padding-top: 5px;
    }
    tr.totalLine{
        font-weight: bold;
        font-style: italic;
        font-size: 16px;
    }
    td.cellHead{
        font-size: 14px;
        padding-bottom: 5px;
        padding-right: 20px;
        text-decoration: underline;
        font-weight:bold;
        font-family: Times New Roman;
        width: 50px;
    }
    td.cell{
        font-size: 14px;
        padding-right:20px;
        padding-top: 5px;
        font-family: Times New Roman;
        }
    td.chart{
         padding-left: 180px;
        }
        #visualforcepage{
            height: 500px;
            background-color: blue;
        }
</style>

    <div id="visualforcePage">
        <table>
        <th>Product Family</th>
        <th>Quantity</th>
        <th>Margin</th>
        <th>Total Price</th>
        <th rowspan="7" class="chart">
    <apex:form >
        <apex:inputField value="{!Quote.Chart__c}">
            <apex:actionSupport event="onchange" reRender="panel"/>
        </apex:inputField>
        <apex:outputPanel id="panel">
            {!Quote.QuantityChart__c}
        </apex:outputPanel>
    </apex:form>
        </th>
            
            <!-- Cranes and Merchandise Row-->
            <tr>
                <td class="cellHead">Cranes/Merchandisers</td>
                
                <td class="cell">
                    <apex:outputText value="{!if(ISBLANK(Quote.Cranes_Merchandisers_Quantity__c),0,Quote.Cranes_Merchandisers_Quantity__c)}" styleClass="text" />
                    <apex:outputText value="{0,number,##.#}%" styleClass="text">&nbsp;
                       (<apex:param value="{!if(ISBLANK(Quote.Cranes_Merchandisers_Percentage__c),0,Quote.Cranes_Merchandisers_Percentage__c)}" />
                     </apex:outputText>)</td>
                     
                <td class="cell">
                    <apex:outputText value="{!if(ISBLANK(Quote.Cranes_Merchandisers_Total_Margin__c),0,Quote.Cranes_Merchandisers_Total_Margin__c)}" styleClass="text" />
                    <apex:outputText value="{0,number,##.#}%" styleClass="text">&nbsp;
                       (<apex:param value="{!if(ISBLANK(Quote.Cranes_Merchandisers_Margin_Percent__c),0,Quote.Cranes_Merchandisers_Margin_Percent__c)}" />
                     </apex:outputText>)
                     </td>
                <td class="cell">
                <apex:outputText value="{!if(ISBLANK(Quote.Crane_Merchandise_Total_Price__c),0,Quote.Crane_Merchandise_Total_Price__c)}" styleClass="text" />
                    <apex:outputText value="{0,number,##.#}%" styleClass="text">&nbsp;
                       (<apex:param value="{!if(ISBLANK(Quote.Cranes_Merchandise_Total_Price_Percent__c),0,Quote.Cranes_Merchandise_Total_Price_Percent__c)}" />
                     </apex:outputText>)
                </td>
            </tr>
            
            <!-- Misc Row -->
            <tr>
                <td class="cellHead">Miscellaneous</td>
                
                <td class="cell">
                    <apex:outputText value="{!if(ISBLANK(Quote.Miscellaneous_Quantity__c),0,Quote.Miscellaneous_Quantity__c)}"/>
                    <apex:outputText value="{0,number,##.#}%" styleClass="text">&nbsp;
                       (<apex:param value="{!if(ISBLANK(Quote.Miscellaneous_Percentage__c ),0,Quote.Miscellaneous_Percentage__c)}" />
                     </apex:outputText>)
                </td>
                
                <td class="cell">
                    <apex:outputText value="{!if(ISBLANK(Quote.Miscellaneous_Total_Margin__c),0,Quote.Miscellaneous_Total_Margin__c)}"/>
                    <apex:outputText value="{0,number,##.#}%" styleClass="text">&nbsp;
                       (<apex:param value="{!if(ISBLANK(Quote.Misc_Total_Margin_Percentage__c ),0,Quote.Misc_Total_Margin_Percentage__c)}" />
                     </apex:outputText>)
                </td>
                
                <td class="cell">
                <apex:outputText value="{!if(ISBLANK(Quote.Miscellaneous_Total_Price__c),0,Quote.Miscellaneous_Total_Price__c)}"/>
                    <apex:outputText value="{0,number,##.#}%" styleClass="text">&nbsp;
                       (<apex:param value="{!if(ISBLANK(Quote.Miscellaneous_Total_Price_Percentage__c),0,Quote.Miscellaneous_Total_Price_Percentage__c)}" />
                     </apex:outputText>)
                </td>
            </tr>
            
            <!-- Quick Coin Row -->
            <tr>
                <td class="cellHead">Quick Coin</td>
                
                <td class="cell">
                    <apex:outputText value="{!if(ISBLANK(Quote.Quick_Coin_Redemption__c),0,Quote.Quick_Coin_Redemption__c)}"/>
                    <apex:outputText value="{0,number,##.#}%" styleClass="text">&nbsp;
                       (<apex:param value="{!if(ISBLANK(Quote.Quick_Coin_Redemption_Percentage__c),0,Quote.Quick_Coin_Redemption_Percentage__c)}" />
                     </apex:outputText>)
                </td>
                
                <td class="cell">
                    <apex:outputText value="{!if(ISBLANK(Quote.Quick_Coin_Redemption_Total_Margin__c),0,Quote.Quick_Coin_Redemption_Total_Margin__c)}"/>
                    <apex:outputText value="{0,number,##.#}%" styleClass="text">&nbsp;
                       (<apex:param value="{!if(ISBLANK(Quote.Quick_Coin_Redemption_Percentage__c),0,Quote.Quick_Coin_Redemption_Percentage__c)}" />
                     </apex:outputText>)
                </td>
                <td class="cell">
                <apex:outputText value="{!if(ISBLANK(Quote.Quick_Coin_Total_Price__c),0,Quote.Quick_Coin_Total_Price__c)}"/>
                    <apex:outputText value="{0,number,##.#}%" styleClass="text">&nbsp;
                       (<apex:param value="{!if(ISBLANK(Quote.Quick_Coin_Total_Price_Percentage__c),0,Quote.Quick_Coin_Total_Price_Percentage__c)}" />
                     </apex:outputText>)
                </td>
            </tr>
            
            <tr>
                <td class="cellHead">Redemption</td>
                <td class="cell">
                    <apex:outputText value="{!if(ISBLANK(Quote.Redemption_Quantity__c),0,Quote.Redemption_Quantity__c)}"/>
                    <apex:outputText value="{0,number,##.#}%" styleClass="text">&nbsp;
                       (<apex:param value="{!if(ISBLANK(Quote.Redemption_Percentage__c),0,Quote.Redemption_Percentage__c)}" />
                     </apex:outputText>)
                </td>

                <td class="cell">
                    <apex:outputText value="{!if(ISBLANK(Quote.Redemption_Total_Margin__c),0,Quote.Redemption_Total_Margin__c)}"/>
                    <apex:outputText value="{0,number,##.#}%" styleClass="text">&nbsp;
                       (<apex:param value="{!if(ISBLANK(Quote.Redemption_Margin_Percentage__c),0,Quote.Redemption_Margin_Percentage__c)}" />
                     </apex:outputText>)
                </td>
                <td class="cell">
                    <apex:outputText value="{!if(ISBLANK(Quote.Redemption_Total_Price__c),0,Quote.Redemption_Total_Price__c)}"/>
                    <apex:outputText value="{0,number,##.#}%" styleClass="text">&nbsp;
                       (<apex:param value="{!if(ISBLANK(Quote.Redemption_Total_Price_Percent__c),0,Quote.Redemption_Total_Price_Percent__c)}" />
                     </apex:outputText>)
                </td>
            </tr>
            
            <tr>
                <td class="cellHead">Video</td>
                <td class="cell">
                    <apex:outputText value="{!if(ISBLANK(Quote.Video_Quantity__c),0,Quote.Video_Quantity__c)}"/>
                    <apex:outputText value="{0,number,##.#}%" styleClass="text">&nbsp;
                       (<apex:param value="{!if(ISBLANK(Quote.Video_Percentage__c),0,Quote.Video_Percentage__c)}" />
                     </apex:outputText>)
                </td>

                <td class="cell">
                    <apex:outputText value="{!if(ISBLANK(Quote.Video_Total_Margin__c),0,Quote.Video_Total_Margin__c)}"/>
                    <apex:outputText value="{0,number,##.#}%" styleClass="text">&nbsp;
                       (<apex:param value="{!if(ISBLANK(Quote.Video_Margin_Percentage__c),0,Quote.Video_Margin_Percentage__c)}" />
                     </apex:outputText>)
                </td>
                <td class="cell">
                    <apex:outputText value="{!if(ISBLANK(Quote.Video_Total_Price__c),0,Quote.Video_Total_Price__c)}"/>
                    <apex:outputText value="{0,number,##.#}%" styleClass="text">&nbsp;
                       (<apex:param value="{!if(ISBLANK(Quote.Video_Total_Price_Percent__c),0,Quote.Video_Total_Price_Percent__c)}" />
                     </apex:outputText>)
                </td>
    </tr>
    
     <!-- total Row -->
    <tr class="totalLine">
        <td></td>
        <td class="cellTotal"><apex:outputText value="{!Quote.Quantity_Total__c}" styleClass="text" /></td>
        <td class="cellTotal"><apex:outputText value="{!Quote.Total_Margin__c}" styleClass="text" /></td>
        <td class="cellTotal"><apex:outputText value="{!Quote.Total_Price__c}" styleClass="text" /></td>
    </tr>
        </table>
    </div>

</apex:page>

 

S91084S91084

Is your Quote.Chart__c a picklist field?

kcpluspluskcplusplus

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. 

S91084S91084

Sorry for asking too many questions. Is your quantitychart__c a picklist field as weel. Is their any dependency betwenn the two fields?

kcpluspluskcplusplus

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 
)

S91084S91084

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.