0

i was new to visualforce development currently I'm trying to setup help text or display some information when users mousehover on the radio button options.

But when i try to fetch the value with action support it's showing null value on the logs

VF Page:

    <apex:repeat value="{!allQuestions}" var="qPreview" id="aQPreview">
    <div class="slds-box slds-theme--default" >
        <apex:outputPanel rendered="{!qPreview.renderSelectRow}" >
            <apex:selectRadio styleClass="convertToLDS" style="width:250px" rendered="{!qPreview.renderSelectRow}" value="{!qPreview.selectedOption}">
                <apex:selectOptions value="{!qPreview.rowOptions}"/>
                <apex:actionSupport event="onclick" action="{!checkSelectedValue}" reRender="none"/>
            </apex:selectRadio>
        </apex:outputPanel>
    </div>
</apex:repeat>

Apex Class:

global virtual with sharing class ViewSurController
{
    public String selectedOption {get;set;}
    public void checkSelectedValue()
    {        
        system.debug('Selected value is: ' + selectedOption);        
    }
}
1
  • Pavan, Did my answer work for you? – Saroj Bera Feb 6 '20 at 4:09
9
+25

While creating the SelectOption for the apex:selectRadio you can pass the HelpText as HTML string as title in the label parameter with this constructor SelectOption(value, label) of SelectOption Apex class. Don't forget to use setEscapeItem(false) for the SelectOptions.

VF Page

<apex:page controller="ViewSurController" lightningStylesheets="true">
    <apex:form>
        <apex:selectRadio layout="pagedirection">                        
            <apex:selectOptions value="{!rowOptions}"/>
        </apex:selectRadio>
    </apex:form>
</apex:page>

Controller

public class ViewSurController {
    public List<SelectOption>  rowOptions = new List<SelectOption> ();
    public List<SelectOption> getRowOptions() {
        List<SelectOption> opts = new List<SelectOption>();
        SelectOption sopt1 = new SelectOption('Option1','<span title="Help Option1">Option1</span>');
        sopt1.setEscapeItem(false);
        opts.add(sopt1);
        SelectOption sopt2 = new SelectOption('Option2','<span title="Help Option2">Option2</span>');
        sopt2.setEscapeItem(false);
        opts.add(sopt2);
        return opts;
    }
}

Screenshot:

enter image description here

Update - To implement inside a repeat tag you have to create a wrapper class and create the options with Help Text inside the wrapper class. Use the wrapper class list to render the radio buttons in VF page. Example as below.

VF Page

<apex:page controller="QuestionController" lightningStylesheets="true" >
    <apex:form >
        <apex:repeat value="{!allQuestions}" var="qPreview" id="aQPreview">
            <apex:selectRadio layout="pagedirection" id="myList">                        
                <apex:selectOptions  value="{!qPreview.rowOptions}"/>
            </apex:selectRadio>
        </apex:repeat>
    </apex:form>
</apex:page>

Controller

public class QuestionController {

    public List<Question> getAllQuestions() {
        List<Question> questions = new List<Question>();
        Question q1 = new Question('Q1OPT1','Q1OPT1HELP','Q1OPT2','Q1OPT2HELP');
        questions.add(q1);
        Question q2 = new Question('Q2OPT1','Q2OPT1HELP','Q2OPT2','Q2OPT2HELP');
        questions.add(q2);
        Question q3 = new Question('Q3OPT1','Q3OPT1HELP','Q3OPT2','Q3OPT2HELP');
        questions.add(q3);
        Question q4 = new Question('Q4OPT1','Q4OPT1HELP','Q4OPT2','Q4OPT2HELP');
        questions.add(q4);
        return questions;
    }        
    public class Question {
        public String selectedOption { get; set; }
        public List<SelectOption> rowOptions { get; set; }
        public Question(String opt1, String opt1hlp, String opt2, String opt2hlp) {
            rowOptions = new List<SelectOption>();
            SelectOption sopt1 = new SelectOption(opt1,'<span title="'+opt1hlp+'">'+opt1+'</span>');
            sopt1.setEscapeItem(false);
            rowOptions.add(sopt1);
            SelectOption sopt2 = new SelectOption(opt2,'<span title="'+opt2hlp+'">'+opt2+'</span>');
            sopt2.setEscapeItem(false);
            rowOptions.add(sopt2);
        }
    }    
}

Screenshot

enter image description here

2
  • i have already tried this but i need this to implement with repeat tag.Could you please my question – Pavan tej Feb 10 '20 at 15:46
  • 1
    @Pavantej, Please find my updated answer. Hope this will help. – Saroj Bera Feb 11 '20 at 6:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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