2

I'm creating a Visualforce Page that will render as a PDF. The page is part of a webform and it is supposed to show all the fields in the form. I've created a table for that:

    <table style=" width: 100%;  border-spacing: 8px 50px;border:0px; background-color: #ffffff;">
        <apex:repeat value="{!fieldSetArr}" var="fieldset">
            <tr>
                <td colspan="3" class="heading">
                    <span>{!fieldsetNames[fieldset]}</span>
                </td>
            </tr>
            <tr>
                <apex:repeat value="{!fieldsetMap[fieldset]}" var="field">
                    <td colspan="1" style="border-bottom: 1px solid #dddddd;text-align: left;padding: 8px;">
                        <span style="display: block;" class="label">{!field.label}&nbsp;</span>
                        <span class="value">{!webformObject[field.fieldPath]}&nbsp;</span>
                    </td>
                </apex:repeat>
            </tr>
        </apex:repeat>
    </table>

Here I'm using maps and lists to display my fields, fields and fieldset names. The resulting table looks like this: enter image description here

This logic shows all the fields in one row. I want to show just 3 fields per table row. When the number of td tags reaches 3 in a tr, a new tr is created. Is there a way to achieve this?

1 Answer 1

4

there is an idea to add indexVar that we have in aura:iteration, but for now you have to implement this functionality by means of usage apex:variable. In your current case:

 <table style=" width: 100%;  border-spacing: 8px 50px;border:0px; background-color: #ffffff;">
    <apex:repeat value="{!fieldSetArr}" var="fieldset">
        <tr>
            <td colspan="3" class="heading">
                <span>{!fieldsetNames[fieldset]}</span>
            </td>
        </tr>
        <tr>
            <apex:variable var="index" value="{!1}" />
            <apex:repeat value="{!fieldsetMap[fieldset]}" var="field">
                <td colspan="1" style="border-bottom: 1px solid #dddddd;text-align: left;padding: 8px;">
                    <span style="display: block;" class="label">{!field.label}&nbsp;</span>
                    <span class="value">{!webformObject[field.fieldPath]}&nbsp;</span>
                </td>
                <apex:outputText escape="false" rendered="{!MOD(index, 3) == 0}" value="</tr><tr>"/>
                <apex:variable var="index" value="{!index + 1}" />
            </apex:repeat>
        </tr>
    </apex:repeat>
</table>

so you have apex:variable variable, that holds index in a loop. Check if index mod 3 equals 0, then close and start a new tr. At the end of loop execution increment index

1
  • 1
    There is some problem in the <apex:outputText> tag. The </tr><tr> causes some errors because it treats them like a tag instead of a string. So instead I set the Value property like: <apex:outputText escape="false" rendered="{!MOD(index, 3) == 0}" value="</tr><tr>"/> . The logic is on point though. Thanks! Nov 1, 2019 at 9:59

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .