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
Jeremy BlodgettJeremy Blodgett 

VF Page with link or button to add more fields as necessary.

Hi all, I am new to coding and could use some help. I am trying to develop a vf page for a custom object I created. I have 10 custom text fields to enter material names, the catch is I only want to initially show 5 fields, then click a button or link to add the remaining 5 fields if necessary. Is it possible? Thanks!
Anupam RastogiAnupam Rastogi
Hi Jeremy,

Yes there is a way to implement your requirement.

The solution is to use a class variable that changes value when clicked on a particular button. So when that button is clicked only then the required components like fields, texts etc are rendered on the VF Page.

Here are the sample VF Page and the Controller Class - 

VF Page 
<apex:page standardController="Contact" extensions="testclass" title="DisplayUserInfo">
    <apex:form>
        <apex:commandButton value="Show More" action="{! Show }"/>
        <apex:commandButton value="Hide All" action="{! Hide }"/>        
        <p>
            <apex:outputText value="I am visible now... Part 1" rendered="{! IF(ShowF = 1, True, False) }"/>   
        </p>
        <p>
            <apex:outputText value="I am visible now... Part 2" rendered="{! IF(ShowF = 1, True, False) }"/>    
        </p>
    </apex:form>
</apex:page>

Controller Class 
public class testclass {
    
    public Integer showfield;
    //--- Constructor of the Class
    public testclass(ApexPages.StandardController controller) {
        showfield = 0;
    }
    public PageReference Hide() {
        showfield = 0;
        return null;
    }    
    public PageReference Show() {
        showfield = 1;
        return null;
    }
    public Integer getShowF() {
        return showfield;
    }
}

These examples are working, so you can even just copy paste and check them out.

Thanks
AR

If this reply solves your problem then please mark it as best answer.
Anupam RastogiAnupam Rastogi
Hi Jeremy,

Were you able to implement the solution?

AR
manav_mnvmanav_mnv
Hi Anupam

I just tried your code, its working, but how its fulfilling Jeremy's query.
You have given Output text and its just showing and hiding that text value.
Please suggest solution for fields(showing and hiding limited fields as per requirement).
Waiting for your response.

Regards
Manav
Anupam RastogiAnupam Rastogi
Hi Manav,

That was just an example. You can place whatever VF Component instead of the <apex:outputText>.

Like -  
<apex:page standardController="Contact" extensions="testclass" title="DisplayUserInfo">
    <apex:form >
        <apex:commandButton value="Show More" action="{! Show }"/>
        <apex:commandButton value="Hide All" action="{! Hide }"/>     
        <apex:commandButton value="Save" action="{! save }" />   
        <p>
            <apex:inputField value="{! Contact.FirstName }" rendered="{! IF(ShowF = 1, True, False) }"/> 
            </p>
            <p>
            <apex:outputText value="I am visible now... Part 1" rendered="{! IF(ShowF = 1, True, False) }"/>   
        </p>
        <p>
            <apex:outputText value="I am visible now... Part 2" rendered="{! IF(ShowF = 1, True, False) }"/>    
        </p>
    </apex:form>
</apex:page>

This will show the Contact First Name field as editable field. When you modify it and save the record, it will be saved.

Thanks
AR