Category Archives: VisualForce

apex:outputPanel and layout=”none”

If you’re like me, a web developer first and visualforce “expert” second, you might hate the way Salesforce adds spans and crazy string ID’s to everything. It makes the HTML incredibly, well, ugly.

I had fixed this by using layout=”none” on everything possible. It made the HTML very pretty. It also caused a ton of problems when my team tried to add rerenders later.

Some notes on apex:outputPanel and rerendering and layout.

  • If there is no rerendering required, you can use layout=”none”.
  • If you don’t have layout set, it will default to “inline”. What this means is you will have a ton of invalid HTML if you put a
    or an tag inside of your code. So make sure you always set something to keep your HTML valid and pretty.
  • If you have to rerender your panel, make sure that you don’t have anything set to layout=”none” and make sure your HTML validates. Wacky stuff happens if you try to rerender something with invalid HTML or layout=”none”. In other words, always manually write in layout=”block” or layout=”inline”. Don’t trust Visualforce to fix it for you.

best of luck!

Loop through an apex:repeat and split the contents into multiple containers

I was trying to build a slider from a list.
<apex:repeat value="{!People}" var="item"> 
	<div class="user-card">
		<div class="thumb">{!item.ImageUrl}</div>
		<div class="name">{!item.Name}</div>
		<div class="department">{!item.Department}</div>
	</div>                                        
</apex:repeat>
The problem is I needed to show FOUR User Cards in one slide. The above method will only do one person per slide. So – with apex:variable and MOD(), we can make make magic happen!

<ul class="birthday-slider">
    <li class="birthday-slide">
        <apex:variable value="{!1}" var="count"/>
        <apex:repeat value="{!People}" var="item"> 
            
            <div class="user-card">
                <div class="thumb">{!item.ImageUrl}</div>
                <div class="name">{!item.Name}</div>
                <div class="department">{!item.Department}</div>
            </div>     
            
            {!MOD(count, 4)} <br/>
            <apex:outputText value="</li><li class='birthday-slide'>" rendered="{!MOD(count, 4) == 0}" escape="false" />
            
            <apex:variable value="{!count + 1}" var="count"/>
        </apex:repeat>
    </li>
</ul>