SelectList, Select Option & Action Function in Salesforce

Salesforce is so vast that to define it in a single post is not possible so we are defining its different attribute and function in the different post to make it more understandable and simple for you.Today, I’m going to tell you about SelectList, Select Option and Action function which plays a vital role in VisualForce pages.

In the previous post, we gave an idea for wrapper class and junction object used in the Salesforce.You can also check it to learn more and more.

SelectList, Select Option & Action Function in Salesforce

Starting with the SelectList, it is a list of multi-select option from which user can choose the most suitable for them.This component supports HTML pass-through attributes using the “HTML-” prefix. Pass-through attributes are attached to the generated <select> tag.

Syntax:

<apex:selectList value="{!AttributeName}" multiselect="true">

<apex:selectOptions value="{!items}"/>

</apex:selectList><p/>

Moving forward to the next thing i.e. SelectOptions is the collection of possible values that can be used in  <apex:selectCheckBoxes><apex:selectRadio>, or <apex:selectList> component.Basically,<apex:SelectOptions> is the child of the component discussed above.

Syntax:

<apex:selectCheckboxes value="{!attribute}" title="TitleName">
            <apex:selectOptions value="{!items}"/>
        </apex:selectCheckboxes>

Last but not the least, ActionFunction is a component that provides support for invoking controller action methods directly from JavaScript code using an AJAX request. An <apex:actionFunction> component must be a child of an <apex:form> component. Because binding between the caller and <apex:actionFunction> is done based on parameter order, ensure that the order of <apex:param> is matched by the caller’s argument list.

Unlike <apex:actionSupport>, which only provides support for invoking controller action methods from other Visualforce components, <apex:actionFunction> defines a new JavaScript function which can then be called from within a block of JavaScript code.

This is all basic knowledge now going further and looking for an example of code to learn how to use it.

VisualForce Page:

<apex:page Controller="StudentVfComponentController" tabStyle="Account" sidebar="false" id="pg">
    <apex:form id="frm">
        <apex:pageBlock id="pb">
          
          <apex:actionstatus id="status">
                <apex:facet name="start"> <div class="waitingSearchDiv" id="el_loading" style="background-color: #fbfbfb;height: 100%;opacity:0.6;width:100%;"> </div> 
                <div class="waitingHolder" style="position:center;top:50px;left:50%; opacity:0.9;z-index:50; width: 20px;"> 
                <img class="waitingImage" src="/img/loading.gif" title="Please Wait..." /> 
                <span class="waitingDescription">Loading...</span> </div>               </apex:facet> 
            </apex:actionstatus>
            
            
            
        <apex:actionFunction action="{!selectCourse}" name="fun" rerender="frm" status="status">
            <apex:param name="s" assignTo="{!selectStudent}" value="" />
        </apex:actionFunction>

            <apex:pageBlockSection title="Student Panel" id="pbs">
                <apex:selectList multiselect="false" size="1" onchange="fun(this.value);">
                    <apex:selectOptions value="{!Student_List}" />
                </apex:selectList>
                <apex:selectList multiselect="false" size="1" rendered="{!Course_List.size > 0}" >
                        <apex:selectOptions value="{!Course_List}" />
                </apex:selectList>
                <apex:outputPanel rendered="{!flag}" id="">
                    <span style="color:red;">Not Registered with any Course</span>
                 </apex:outputPanel>

            </apex:pageBlockSection>
            
        </apex:pageBlock>
    </apex:form>
</apex:page>

Controller :

public class StudentVfComponentController {
    public List<SelectOption>Student_List{get; set;}
    public List<SelectOption>Course_List{get; set;}
    public String selectStudent{get; set;}
    public boolean flag{get;set;}
    //Constructor
    public StudentVfComponentController(){

        Student_List = new List<SelectOption>();
       
        Course_List=new List<SelectOption>();
        list<Student__c> Stu_List = [SELECT id,Name FROM  Student__c];
        
        Student_List.add(new SelectOption('','--Select a Student--'));
        for( Student__c stu: Stu_List)            
            Student_List.add(new SelectOption(stu.Id,stu.Name));
            
        Course_List.add(new SelectOption('','--Select course--'));   
        flag=false;
    }
    public void selectCourse(){
             List<Registration__c> regList=[select id,Course__r.id, Course__r.Name from Registration__c where Student__c=:selectStudent];
             Course_List.clear();
                
            if(regList.size()>0){
                Course_List.add(new SelectOption('','--Select course--'));
                for( Registration__c reg: regList)            
                    Course_List.add(new SelectOption(reg.Course__r.Id,reg.Course__r.Name));
              flag=false;
              }
              else
                  flag=true;
    }
}

 

Explanation:

 In VF page, you can see the use of action function tag in which action = ‘selectCourse’ is the method of the controller written below the VF which let the code do the task according to the steps written in the controller.Then in the pageBlock section, we created a select-option drop down where one can select any student name(Student_List) which is retrieved from the list as coded in the controller.Similarly, we are fetching the details of the course through Course_List in the controller.

We are checking for the student if they are enrolled in any Course or not, if not then it will throw an Error Message in the <apex:outputPanel>.

All the conditions are verified and checked in the controller, as querying for the student name or course name to be shown in the dropdown as:

Course_List=new List<SelectOption>();
        list<Student__c> Stu_List = [SELECT id,Name FROM  Student__c];
        
        Student_List.add(new SelectOption('','--Select a Student--'));
        for( Student__c stu: Stu_List)            
            Student_List.add(new SelectOption(stu.Id,stu.Name));
            
        Course_List.add(new SelectOption('','--Select course--'));

Then checking for the student if they are registered for the course or not in the following code:

 List<Registration__c> regList=[select id,Course__r.id, Course__r.Name from Registration__c where Student__c=:selectStudent];
             Course_List.clear();
                
            if(regList.size()>0){
                Course_List.add(new SelectOption('','--Select course--'));
                for( Registration__c reg: regList)            
                    Course_List.add(new SelectOption(reg.Course__r.Id,reg.Course__r.Name));
              flag=false;
              }
              else
                  flag=true;

 

Note: All rights reserved. No part of this Post may be copied, distributed, or transmitted in any form or by any means, without the prior written permission of the website admin, except in the case of brief quotations embodied in critical reviews and certain other noncommercial uses permitted by copyright law. For permission requests, write to the owner, addressed “Attention: Permissions Coordinator,” to the admin@coderinme.com

A web developer(Front end and Back end), and DBA at csdamu.com. Currently working as Salesforce Developer @ Tech Matrix IT Consulting Private Limited. Check me @about.me/s.saifi

One comment: On SelectList, Select Option & Action Function in Salesforce

Leave a reply:

Your email address will not be published.