function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Ian QuahIan Quah 

Conditionally display html based on apex:variable

    
<script>
function myMod(num, denom){
    alert(num % denom);
    return (num % denom) == 0;
}
</script>

-- stuff 


<apex:variable value="{!1}" var="rowNum"/>
<apex:repeat value="{!things}" var="thing">
-- stuff -- 
    <apex:outputPanel rendered="myMod({!rowNum}, 4)" layout="none"> <hr/> </apex:outputPanel>
    <apex:variable var="rowNum" value="{!rowNum + 1}"/>
</apex:repeat>
Can anyone point me in the right direction with how I add breaks to the display within a repeat tag? 
 
Best Answer chosen by Ian Quah
Alain CabonAlain Cabon
The result seems good with this new technique (no table needed)

<div class="slds-col slds-size--1-of-1 slds-medium-size--6-of-12 {!IF (MOD(rowNum - floor(rowNum / 4), 3) == 0 || MOD(rowNum - rowNum / 4, 4) == 0,"slds-border_bottom",'')} ">
  
<apex:page standardController="TestAll__c" extensions="TestPage1">
    <apex:slds />
    <apex:form >
        <apex:pageBlock >
            <apex:variable value="{!1}" var="rowNum"/>
            <div class="slds-grid slds-wrap">
                <apex:repeat value="{!things}" var="thing">          
                    <div class="slds-col slds-size--1-of-1 slds-medium-size--6-of-12  {!IF (MOD(rowNum - floor(rowNum / 4), 3) == 0 || MOD(rowNum - rowNum / 4, 4) == 0,"slds-border_bottom",'')} ">
                        <div class="slds-form-element slds-p-around--medium">
                            <label class="slds-form-element__label">
                                My Label {!rowNum}
                            </label>
                            <div class="slds-form-element__control">
                                <apex:outputtext value="{!thing}" styleClass="slds-input"/>    
                            </div>
                        </div>
                    </div>               
                    <apex:variable var="rowNum" value="{!rowNum + 1}"/>
                </apex:repeat>
            </div>
        </apex:pageBlock>
    </apex:form>
</apex:page>


User-added image

 

All Answers

Alain CabonAlain Cabon
You code is correct. You just don't need the function myMod 
<apex:variable value="{!1}" var="rowNum"/>
<apex:repeat value="{!things}" var="thing"> 
    <apex:outputText label="{!rowNum}" value="{!thing}"></apex:outputText><br/>
    <apex:outputPanel rendered="{!MOD(rowNum, 4) == 0}" layout="none"> 
        <hr/> 
    </apex:outputPanel>
    <apex:variable var="rowNum" value="{!rowNum + 1}"/>
</apex:repeat>
Ian QuahIan Quah
Hmm, unfortunately, it's not showing up. I've tried negating the rendered value effectively making it
  
<apex:outputPanel rendered="!{!MOD(rowNum, 4) == 0}" layout="none"> 
    <hr/> 
</apex:outputPanel>
but nothing seems to be showing up still. 
Alain CabonAlain Cabon
My test with 2 (instead of 4)

<apex:outputPanel rendered="!{!MOD(rowNum, 2) == 0}" layout="none">  <hr/>  </apex:outputPanel>

User-added image


Could you post your complete VFP?
 
Ian QuahIan Quah
<apex:form >
            <apex:pageBlock >
                <apex:variable value="{!1}" var="rowNum"/>
                <div class="slds-grid slds-wrap">
                    <apex:repeat value="{!$ObjectType.PreOp_Info__c.FieldSets[fixed]}" var="field">
                        <div class="slds-col slds-size--1-of-1 slds-medium-size--6-of-12">
                            <div class="slds-form-element slds-p-around--medium">
                                <label class="slds-form-element__label">
                                    {!field.label}
                                </label>
                                <div class="slds-form-element__control">
                                    <apex:inputField value="{!info[field.fieldPath]}" styleClass="slds-input"/>    
                                </div>
                            </div>
                        </div>
                        <apex:outputPanel rendered="!{!MOD(rowNum, 4) == 0}" layout="none"> 
                            <hr/> 
                        </apex:outputPanel>
                        <apex:variable var="rowNum" value="{!rowNum + 1}"/>
                    </apex:repeat>
                </div>
            </apex:pageBlock>
</apex:form>

My code is attached above. I tried to remove any parts I thought were "redundant" to make it more general purpose
Alain CabonAlain Cabon
You are using SLDS so you have to find a technique with ... SLDS

Here is a first technique.

<table class="slds-table {!IF(MOD(rowNum, 2) == 0,"slds-table--bordered",'')} slds-max-medium-table--stacked" >
  
<apex:page standardController="TestAll__c" extensions="TestPage1">
    <apex:slds />
    <apex:form >
        <apex:pageBlock >
            <apex:variable value="{!1}" var="rowNum"/>
            <div class="slds-grid slds-wrap">
                <apex:repeat value="{!things}" var="thing"> 
                    <table class="slds-table {!IF(MOD(rowNum, 2) == 0,"slds-table--bordered",'')} slds-max-medium-table--stacked" >
                        <tr>
                            <div class="slds-col slds-size--1-of-1 slds-medium-size--6-of-12">
                                <div class="slds-form-element slds-p-around--medium">
                                    <label class="slds-form-element__label">
                                        My Label {!rowNum}
                                    </label>
                                    <div class="slds-form-element__control">
                                        <apex:outputtext value="{!thing}" styleClass="slds-input"/>    
                                    </div>
                                </div>
                            </div>
                        </tr>                      
                    </table>               
                    <apex:variable var="rowNum" value="{!rowNum + 1}"/>
                </apex:repeat>
            </div>
        </apex:pageBlock>
    </apex:form>
</apex:page>

User-added image
 
Ian QuahIan Quah
Thank you so much! The lines now appear. It seems that they break the two column design we had going. Any quick fixes you can think of? If not I'll just work on it and open a new question if nothing seems to be working.
Alain CabonAlain Cabon
Yes there is a problem in your problem

Now the new puzzle is to have two columns and a line break in SLDS every four fields.

I will try to solve this new problem for the fun.
 
Alain CabonAlain Cabon
The result seems good with this new technique (no table needed)

<div class="slds-col slds-size--1-of-1 slds-medium-size--6-of-12 {!IF (MOD(rowNum - floor(rowNum / 4), 3) == 0 || MOD(rowNum - rowNum / 4, 4) == 0,"slds-border_bottom",'')} ">
  
<apex:page standardController="TestAll__c" extensions="TestPage1">
    <apex:slds />
    <apex:form >
        <apex:pageBlock >
            <apex:variable value="{!1}" var="rowNum"/>
            <div class="slds-grid slds-wrap">
                <apex:repeat value="{!things}" var="thing">          
                    <div class="slds-col slds-size--1-of-1 slds-medium-size--6-of-12  {!IF (MOD(rowNum - floor(rowNum / 4), 3) == 0 || MOD(rowNum - rowNum / 4, 4) == 0,"slds-border_bottom",'')} ">
                        <div class="slds-form-element slds-p-around--medium">
                            <label class="slds-form-element__label">
                                My Label {!rowNum}
                            </label>
                            <div class="slds-form-element__control">
                                <apex:outputtext value="{!thing}" styleClass="slds-input"/>    
                            </div>
                        </div>
                    </div>               
                    <apex:variable var="rowNum" value="{!rowNum + 1}"/>
                </apex:repeat>
            </div>
        </apex:pageBlock>
    </apex:form>
</apex:page>


User-added image

 
This was selected as the best answer
Ian QuahIan Quah
Thank you so much for helping a stranger on the internet, stranger! Hope you have a great day