There are a number of scenarios where you would like to change the options provided by a Select Box (drop-down list) control based on other values selected on the page. For example, the user selects a category value, and is then provided with a list of relevant sub categories (e.g. vehicle make and model, or user groups and users).
This type of scenario is easy to achieve with WebMaker by using Partial Pages, and dynamic select box controls. The basic steps required to configure this are described below.
This hopefully illustrates the steps required to configure this type of scenario. Depending on your exact requirements you may need to fine tune this as needed.
For example:
The attached project export contains a very simple example of this type of functionality. In this case, the data for each option is populated within controller rules for the Partial Page. In reality you would probably want to call some sort of data source instead e.g. a SQL database or web service
This type of scenario is easy to achieve with WebMaker by using Partial Pages, and dynamic select box controls. The basic steps required to configure this are described below.
- Firstly you should configure the main page by adding the category +?+?++Select Box+?+?+? control, along with a +?+?++Partial Page Group+?+?+? that will contain the sub category selection control.
It is often the case that the only value needed to determine the sub categories is the selected category itself, so it makes sense to wrap this control in a container group (e.g. layout group). This will allow us to send only this value in the AJAX call, rather than all the data on the page.
[/*][*] You now need to add a Partial Page to your project on the +?+?++Application Map+?+?+? tab, and add an action from the main page to this partial page. It is this partial page that will contain the second dependant drop-down list that is populated dynamically based on the selected category from the first drop-down list on the main page.
[/*][*] On the Page Structure tab for the partial page you only need to add one control, which should be a select box. In most cases, the values to be displayed in this control will need to come from some sort of data source (e.g. a database table, or web service response), and so you may want to make use of the right hand panel to configure this.
[/*][*] Using the Field Details tab you need to configure this one control to make sure it is a Select box field, and that the +?+?++Options are+?+?+? field option is set to 'dynamic'.
[/*][*] On the Data Bindings tab, you can then configure exactly which data is used to provide the values to display in the dropdown.
[/*][*] Switching back to the main page, the Field Details tab can now be used to configure the AJAX call. Select the category select box field, and add a new +?+?++onchange+?+?+? event to it. Select the +?+?++AJAX Submission+?+?+? action, and configure the required parameters. You should select the action to the partial page that was added in step 2 above, and for the +?+?++Target Group+?+?+? you should select the partial page group added to this main page just after the dropdown field. If you wish to send only the specific field value in the AJAX call, then the +?+?++Submit specific group+?+?+? Source Data option should be chosen, and the relevant group selected. Otherwise, all the form data can be sent.
[/*][*] You should now be able to generate and deploy the application to see the basic AJAX functionality working.
[/*][*] In most cases you will need to customize the controller rules generated for the Partial Page to ensure that the correct data values are being found and displayed. The way this is done will depend on how this data is being retrieved, e.g. from a database you will need to ensure that the SQL SELECT as the current value set based on the drop-down list value passed from the main page.[/*]
This hopefully illustrates the steps required to configure this type of scenario. Depending on your exact requirements you may need to fine tune this as needed.
For example:
- You may wish to add an onload event to your main page to call the AJAX submission event so that the sub category list is correctly displayed/populated if you have an initial category selected.
[/*][*] You may wish to stop the sub category select box being replaced with a loading message every time a new category is selected. To do this you can customise the SetLoadingMessage function. (See Customising the Generated AJAX Calls for more details)
[/*][*] You can use the standard binding configuration options to control exactly what structure of data is posted on the AJAX call.
[/*][*] You can configure the action submission bindings for the partial page, to make sure that the value selected for the sub category is correctly bound to the data submitted from the main page for your save action.[/*]
The attached project export contains a very simple example of this type of functionality. In this case, the data for each option is populated within controller rules for the Partial Page. In reality you would probably want to call some sort of data source instead e.g. a SQL database or web service
Attachment
RE: Use AJAX to dynamically populate a dropdown list
quote ... "You may wish to add an onload event to your main page to call the AJAX submission event so that the sub category list is correctly displayed/populated if you have an initial category selected."
RE: Use AJAX to dynamically populate a dropdown list
If you have a dropdown on your main page then I assume you have defined an AJAX Submission onchange event to retrieve and populate your dependent dropdown.
You should be able to use the same/similar event against the page onload event to submit the selected value of the main dropdown and use this value to lookup the values for your dependent dropdown within the partial page controller rules and populate the AJAX Group containing the dependent dropdown.
You can locate the page events by clicking the Page Details on the left hand panel of the Field Details tab. You should be able to see a section called Page Events in the middle section.
Kind Regards
Abdul
RE: Use AJAX to dynamically populate a dropdown list