Data Driven Visualforce Page

Question

I am designing a custom input picklist form that will be data-driven.Based on picklist value selected next question should show up with the picklist options.Like wise it might end up having 10-15 Picklist Questions based on the pathway choosen.

So am trying to create selectlist with options dynamically

How to show questions with picklist options created dynamically on visualforce page

Current Application Details:

We currently have visualforce wizard with questions and picklist options and our client didn't liked it i.e clicking on next or previous buttons for 15 times or more depending on the pathway the user selected ...we are trying to propose it with single page application like with on change of picklist value show related question with picklist options

Any help is appreciated .

Here is part of class and page

Class

    public Component.Apex.OutputPanel getThePanel2(){
           Component.Apex.OutputPanel outPanel1 = new Component.Apex.OutputPanel();
           outPanel1 = getcurrentPanel2();
           return outPanel1 ;
        } 

  public boolean showDynamic{get;set;}

  public Component.Apex.OutputPanel getcurrentPanel2(){

     Component.Apex.OutputPanel outPanel1 = new Component.Apex.OutputPanel();
     outPanel1.id='currentsect';

     Component.Apex.SelectList STQPicklist = new Component.Apex.SelectList();
     STQPicklist.StyleClass = 'form-control';
     STQPicklist.StyleClass = 'col-md-4';
     STQPicklist.Size = 1;


     Component.Apex.ActionSupport asu = new Component.Apex.ActionSupport (event='onchange');         
     asu.expressions.action='{!getNextChild}';
      set<string> outputPanelId = new set<string>();
     outputPanelId.add('WizardQues3');
     asu.rerender=outputPanelId;

     Component.Apex.selectOptions STQOptions = new Component.Apex.SelectOptions();
     STQOptions.expressions.value = '{!progLineItemPathwayItems}';


     STQPicklist.childComponents.add(STQOptions);
     STQPicklist.childComponents.add(asu);


      Component.Apex.Outputlabel outlab= new Component.Apex.Outputlabel();
      outlab.value = 'What do you want to Import';
      outlab.StyleClass = 'col-md-4';

          outPanel1.childComponents.add(outlab);
          outPanel1.childComponents.add(STQPicklist);

          return outPanel1;
    }

Page

<apex:outputPanel id="WizardQues2">
     <apex:outputPanel rendered="{!if(showDynamic = true,true,false)}">
     <div class="row" style="margin-bottom:15px;" >
    <apex:dynamicComponent componentValue="{!thePanel2}" id="dyncompt"/>
     </div>
    </apex:outputPanel>
  </apex:outputPanel>
 <apex:outputPanel id="WizardQues3">
     <apex:outputPanel rendered="{!if(showDynamic = true,true,false)}">
     <div class="row" style="margin-bottom:15px;" >
  <apex:dynamicComponent componentValue="{!thePanel2}" id="dyncompt"/>
  </div>
  </apex:outputPanel>
</apex:outputPanel>

Answer 1

So basically issue in your ActionSupport attribute rerender

Currently in your code

set<string> outputPanelId = new set<string>();
asu.rerender=outputPanelId;

You are not passing Id. You can remove this line asu.rerender=outputPanelId; OR you can pass the ouputPanel Id..

In above code you have created outputPanel i.e.

Component.Apex.OutputPanel outPanel1 = new Component.Apex.OutputPanel();
outPanel1.id='currentsect';

So we can assign this Id currentsect to rerender attribute

set<string> outputPanelId = new set<string>{'currentsect'};
asu.rerender=outputPanelId;

This way it will work...

---

Updates

Dynamic dependent picklist one level

VF Page

<apex:page controller="dynamicPicklist">
    <apex:form id="frm"><apex:pageBlock >
  <apex:dynamicComponent componentValue="{!ThePanel2}"/>
  <apex:dynamicComponent componentValue="{!currentPanel2Child}"/>
  </apex:pageBlock>
  </apex:form>
</apex:page>

Controller

public class dynamicPicklist {
    public List<SelectOption> progLineItemPathwayItems {get;set;}
    public List<String> lstSelectedprogLineItemPathwayItems {get;set;}

    public List<SelectOption> progLineItemPathwayChildItems {get;set;}
    public boolean showDynamic{get;set;}
    public String strSelected1 {get;set;}
    private map<String, List<String>> mapStringtoLstString;
    public dynamicPicklist(){

        showDynamic = false;
        strSelected1 = '';
        mapStringtoLstString = new map<String, List<String>>();
        lstSelectedprogLineItemPathwayItems = new List<String>();
        mapStringtoLstString.put('First1', new List<String>{'First1-1','First1-2', 'First1-3'});
        mapStringtoLstString.put('First2', new List<String>{'First2-1','First2-2', 'First2-3'});
        mapStringtoLstString.put('First3', new List<String>{'First3-1','First3-2', 'First3-3'});

        progLineItemPathwayItems = new List<SelectOption>();
        progLineItemPathwayChildItems = new List<SelectOption>();
        progLineItemPathwayItems.add(new SelectOption('First1', 'First1'));
        progLineItemPathwayItems.add(new SelectOption('First2', 'First2'));
        progLineItemPathwayItems.add(new SelectOption('First3', 'First3'));

    }

    public void getNextChild(){
       if(String.isNotBlank(strSelected1))
         showDynamic =true;
    }
   public Component.Apex.OutputPanel getThePanel2(){
           Component.Apex.OutputPanel outPanel1 = new Component.Apex.OutputPanel();
           outPanel1 = getcurrentPanel2();
           return outPanel1 ;
    } 
   public Component.Apex.OutputPanel getcurrentPanel2Child(){

     Component.Apex.OutputPanel outPanel1 = new Component.Apex.OutputPanel();
     outPanel1.rendered = showDynamic;
     outPanel1.id='currentsect1';

     Component.Apex.SelectList STQPicklist = new Component.Apex.SelectList();
     STQPicklist.StyleClass = 'form-control';
     STQPicklist.StyleClass = 'col-md-4';
     STQPicklist.Size = 1;
     STQPicklist.value = lstSelectedprogLineItemPathwayItems;

     Component.Apex.ActionSupport asu = new Component.Apex.ActionSupport ();
     asu.event = 'onchange';
     asu.expressions.action='{!getNextChild}';
      set<string> outputPanelId = new set<string>{'currentsect1'};
     outputPanelId.add('WizardQues3');
     asu.rerender=outputPanelId;
     progLineItemPathwayChildItems = new List<SelectOption>();

     progLineItemPathwayChildItems.add(new SelectOption('', '--None--'));   
      if(String.isNotBlank(strSelected1)){
        for(String str: mapStringtoLstString.get(strSelected1))
        {
            progLineItemPathwayChildItems.add(new SelectOption(str, str));
        }
      }

     Component.Apex.selectOptions STQOptions = new Component.Apex.SelectOptions();
     STQOptions.expressions.value = '{!progLineItemPathwayChildItems}';


     STQPicklist.childComponents.add(STQOptions);
     STQPicklist.childComponents.add(asu);


      Component.Apex.Outputlabel outlab= new Component.Apex.Outputlabel();
      outlab.value = 'What do you want to Import';
      outlab.StyleClass = 'col-md-4';

      outPanel1.childComponents.add(outlab);
      outPanel1.childComponents.add(STQPicklist);

      return outPanel1;
    }


  public Component.Apex.OutputPanel getcurrentPanel2(){

     Component.Apex.OutputPanel outPanel1 = new Component.Apex.OutputPanel();
     outPanel1.id='currentsect';

     Component.Apex.SelectList STQPicklist = new Component.Apex.SelectList();
     STQPicklist.StyleClass = 'form-control';
     STQPicklist.StyleClass = 'col-md-4';
     STQPicklist.Size = 1;
     STQPicklist.multiselect = false;
     STQPicklist.expressions.value = '{!strSelected1}';

     Component.Apex.ActionSupport asu = new Component.Apex.ActionSupport ();
     asu.event = 'onchange';
     asu.expressions.action='{!getNextChild}';
      set<string> outputPanelId = new set<string>{'frm'};
     outputPanelId.add('WizardQues3');
     asu.rerender=outputPanelId;

     Component.Apex.selectOptions STQOptions = new Component.Apex.SelectOptions();
     STQOptions.expressions.value = '{!progLineItemPathwayItems}';


     STQPicklist.childComponents.add(STQOptions);
     STQPicklist.childComponents.add(asu);


      Component.Apex.Outputlabel outlab= new Component.Apex.Outputlabel();
      outlab.value = 'What do you want to Import';
      outlab.StyleClass = 'col-md-4';

      outPanel1.childComponents.add(outlab);
      outPanel1.childComponents.add(STQPicklist);

      return outPanel1;
    }
}

Answer 2

A re-render is typically quite sluggish which can be a little frustrating and sometimes confusing for the user. (Perhaps the slowness of the wizard approach is contributing to your client's dislike.) I suggest that the best user experience would come from keeping as much of the logic as possible at the client-side so that when a selection is made in one picklist the next picklist comes up instantly.

Whether that can be accomplished depends on how the picklists are related: if it is a fixed relationship then the values can be modelled in say some JSON kept in a static resource. The UI would then be primarily JavaScript with say jQuery, with the final results passed back to the server at the end of the process via say JavaScript remoting.

The other obvious problem is that most of the work would be in JavaScript and so would require strong JavaScript skills and also HTML and CSS skills. To give some sense of the sort of code involved, this code creates picklists (HTML select elements) based on some JSON:

<apex:page>

<apex:pageBlock>
    <apex:pageBlockSection>
        <table id="table"/>
    </apex:pageBlockSection>
</apex:pageBlock>

<script src="https://code.jquery.com/jquery-1.12.1.min.js"/>

<script>

(function($) {

    // This JSON would come from e.g. a static resource and include
    // additional attributes to model the dependencies and jQuery would
    // be used to update the page when a select list changes
    var items = [
        {
            "id": "first",
            "label": "First",
            "options": ["a", "b", "c"]
        },
        {
            "id": "second",
            "label": "Second",
            "options": ["x", "y", "z"]
        }
    ];

    $(document).ready(function() {

        var table = $('#table');
        for (var i = 0; i < items.length; i++) {
            var item = items[i];
            var options = '';
            for (var j = 0; j < item.options.length; j++) {
                options += ''
                        + '<option value="' + item.options[j] + '">'
                        + item.options[j]
                        + '</option>'
                        ;
            }
            var html = ''
                     + '<tr><td>'
                     + '<label for="' + item.id + '">' + item.label + '</label>'
                     + '</td><td>'
                     + '<select id="' + + item.id + '">'
                     + options
                     + '</select>'
                     + '</td></tr>'
                     ;
            table.append(html);
        }
    });
})(jQuery.noConflict());

</script>
</apex:page>