Take the 2-minute tour ×
Salesforce Stack Exchange is a question and answer site for Salesforce administrators, implementation experts, developers and anybody in-between. It's 100% free, no registration required.

I have a pageBlockSection where I would like to show an image next to a String on a single line. However there are four different strings and 2 different images that I can use based on the current object in the apex:repeat component. I would like to use a pageBlockSectionItem since that is their function however it says that I can only have 2 children associated to it. There will only be two things rendered however there are a total of 6 statements Is there a work around this?

Here is my visualforce code thus far:

<apex:pageBlockSection id="MainSection" columns="2" title="{!contact.name}" collapsible="true">
    <apex:pageBlockSection id="ListOfRelationships" columns="1">
        <apex:repeat value="{!relationships}" var="relation">
            <apex:image value="{!$Resource.relationshipAccount}" height="15px" width="15px" rendered="{!IF(relation.First_Account__c != null || relation.Second_Account__c != null, true, false)}"/>
            <apex:image value="{!$Resource.relationshipContact}" height="15px" width="15px" rendered="{!IF((relation.First_Contact__c != null && relation.First_Contact__c != contact.Id) || (relation.Second_Contact__c != null && relation.Second_Contact__c != contact.Id), true, false)}"/>
            <apex:outputText value="{!relation.First_Contact__r.Name} ({!relation.First_Relationship_Type__r.Name})" rendered="{!IF(relation.First_Contact__c != null && relation.First_Contact__c != contact.Id, true, false)}"/>
            <apex:outputText value="{!relation.Second_Contact__r.Name} ({!relation.Second_Relationship_Type__r.Name})" rendered="{!IF(relation.Second_Contact__c != null && relation.Second_Contact__c != contact.Id, true, false)}"/>
            <!-- Accounts are simplified because we are on a Contacts's page and if Account is present then we print that -->
            <apex:outputText value="{!relation.First_Account__r.Name} ({!relation.First_Relationship_Type__r.Name})" rendered="{!IF(relation.First_Account__c != null, true, false)}"/>
            <apex:outputText value="{!relation.Second_Account__r.Name} ({!relation.Second_Relationship_Type__r.Name})" rendered="{!IF(relation.Second_Account__c != null, true, false)}"/>
        </apex:repeat>   
    </apex:pageBlockSection>
</apex:pageBlockSection>

Like I said before, I need to group the 2 apex:image and the 4 apex:outputText together so that they print on only one line. Also only one from each of the two will be rendered due to the IF statements.

share|improve this question

2 Answers 2

up vote 2 down vote accepted

You can wrap them all in an outputPanel:

<apex:pageBlockSection id="MainSection" columns="2" title="{!contact.name}" collapsible="true">
  <apex:pageBlockSection id="ListOfRelationships" columns="1">
    <apex:outputPanel>
      <apex:repeat value="{!relationships}" var="relation">
          <apex:image value="{!$Resource.relationshipAccount}" height="15px" width="15px" rendered="{!IF(relation.First_Account__c != null || relation.Second_Account__c != null, true, false)}"/>
          <apex:image value="{!$Resource.relationshipContact}" height="15px" width="15px" rendered="{!IF((relation.First_Contact__c != null && relation.First_Contact__c != contact.Id) || (relation.Second_Contact__c != null && relation.Second_Contact__c != contact.Id), true, false)}"/>
          <apex:outputText value="{!relation.First_Contact__r.Name} ({!relation.First_Relationship_Type__r.Name})" rendered="{!IF(relation.First_Contact__c != null && relation.First_Contact__c != contact.Id, true, false)}"/>
          <apex:outputText value="{!relation.Second_Contact__r.Name} ({!relation.Second_Relationship_Type__r.Name})" rendered="{!IF(relation.Second_Contact__c != null && relation.Second_Contact__c != contact.Id, true, false)}"/>
          <!-- Accounts are simplified because we are on a Contacts's page and if Account is present then we print that -->
          <apex:outputText value="{!relation.First_Account__r.Name} ({!relation.First_Relationship_Type__r.Name})" rendered="{!IF(relation.First_Account__c != null, true, false)}"/>
          <apex:outputText value="{!relation.Second_Account__r.Name} ({!relation.Second_Relationship_Type__r.Name})" rendered="{!IF(relation.Second_Account__c != null, true, false)}"/>
      </apex:repeat>
    </apex:outputPanel>
  </apex:pageBlockSection>
</apex:pageBlockSection>
share|improve this answer
    
Yours is certainly more elegant than mine! –  Louis Pujol Jun 17 at 13:39
    
Also mine had a strange indentation from the blockSectionItems where as yours looked exactly how I was wanting it to look so yours is the accepted answer. Thanks! –  Louis Pujol Jun 17 at 13:51
    
I'm glad that it works. –  dphil Jun 17 at 13:51

I have one solution which is to create multiple pageBlockSectionItems, each with an image and outputText and render that using the IF statements. It's crude but it works. Any other solutions are much appreciated!

<apex:pageBlockSection id="MainSection" columns="2" title="{!contact.name}" collapsible="true">
    <apex:pageBlockSection id="ListOfRelationships" columns="1">
        <apex:repeat value="{!relationships}" var="relation">
            <apex:pageBlockSectionItem id="FirstContact" rendered="{!IF(relation.First_Contact__c != null && relation.First_Contact__c != contact.Id, true, false)}">
                <apex:image value="{!$Resource.relationshipContact}" height="15px" width="15px"/>
                <apex:outputText value="{!relation.First_Contact__r.Name} ({!relation.First_Relationship_Type__r.Name})"/>
             </apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem id="SecondContact" rendered="{!IF(relation.Second_Contact__c != null && relation.Second_Contact__c != contact.Id, true, false)}">
                <apex:image value="{!$Resource.relationshipContact}" height="15px" width="15px"/>
                <apex:outputText value="{!relation.Second_Contact__r.Name} ({!relation.Second_Relationship_Type__r.Name})"/>
            </apex:pageBlockSectionItem>
            <!-- Accounts are simplified because we are on a Contacts's page and if Account is present then we print that -->
            <apex:pageBlockSectionItem id="FirstAccount" rendered="{!IF(relation.First_Account__c != null, true, false)}">
                <apex:image value="{!$Resource.relationshipAccount}" height="15px" width="15px"/>
                <apex:outputText value="{!relation.First_Account__r.Name} ({!relation.First_Relationship_Type__r.Name})"/>
            </apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem id="SecondAccount" rendered="{!IF(relation.Second_Account__c != null, true, false)}">
                <apex:image value="{!$Resource.relationshipAccount}" height="15px" width="15px"/>
                <apex:outputText value="{!relation.Second_Account__r.Name} ({!relation.Second_Relationship_Type__r.Name})"/>
            </apex:pageBlockSectionItem>    
        </apex:repeat>   
    </apex:pageBlockSection>
    <apex:pageBlockSection id="detailSection" columns="1">
        <apex:outputPanel >
        </apex:outputPanel>
    </apex:pageBlockSection>
</apex:pageBlockSection>
share|improve this answer
1  
Post the code for your solution so others may find it in the future please. I think what you are describing is actually the best way to do it by the way. pageBlock's really aren't the best when it comes to almost any customization, so they are difficult to work. –  Jesse Altman Jun 17 at 13:30

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.