Add an Option to a Public Facing Dropdown
This article explains how your users can dynamically add new options to dropdowns or listboxes. This method will make the new item visible only to the user who added it, but also record the new item in your lookup table (as inactive) so that you can enable it later for all public users.
Create a filtered view of your lookup table
The first step to implementation is to create a filtered view of your lookup table. Open your table in design view and add a field called “Active”. Set the data type of this field to Yes/No. Save the table and reopen in datasheet view. Click the checkbox for each option you would like to be visible in your dropdown.
Now go to the Views section. Create a view containing your lookup table and filter based on the Active field having a Yes value. Open the view and be sure that inactive records are not being included.
For more information on how to create a filtered view see Create a View to Filter a Table.
Base your Dropdown on a filtered View
Open the DataPage that will contain your dropdown. On the second screen of the DataPage Wizard be sure that advanced options and parameters are enabled. Proceed to the configure fields screen where the dropdown is located. Select dropdown from the form element dropdown, and select lookup table or view as the dropdown source. Now select the filtered view you created in the previous step as the source for your dropdown.
Receive a parameter into the dropdown
Before closing the DataPage Wizard we also want the dropdown to receive a parameter so that the newly added option will be visible for the person who added it. Click on the Advanced tab and select the radio button to receive parameters. Be sure to note the name of the parameter as it will be used later.
Create a Submission Form to your lookup table
Now we are going to create the Submission Form DataPage so users can submit new records directly to the lookup table. Click New to create a new DataPage. Select the Forms DataPage type and click Submission Form. Click Next. Select your original lookup table as the data source, and enable advanced options and parameters. Click Next.
Move the necessary fields to the right-hand panel using the arrow button and click Next. Because we are submitting to a lookup table it is likely that there will only be one field. Format the Field as needed and click on the advanced tab.
Click the checkbox to pass the field to the next page on exit. Make sure the parameter name matches exactly with the receiving parameter from your original form. Click Next.
On the last page, we are going to replace the success message with a short JavaScript. This JavaScript will close the Submission Form’s popup window and refresh the original form’s page so the dropdown item will be visible to the user who submitted it. Copy and Paste the following JavaScript into the success message panel:
window.close();
if (window.opener && !window.opener.closed) {
window.opener.location.reload();
}
</script>
Press Finish to Save Your DataPage.
Select the Submission Form again and click the Deploy button. Select Direct from Caspio from the Method dropdown. Copy the URL and save it for future reference.
Send a notification email when the form has been filled out (optional)
Also on the last page you can send yourself a Notification email whenever a user tries to submit a new option. This way you can mark new options as active if you believe they are a good permanent addition to your dropdown.
Create a link in your original DataPage
Now in your original form we are going to add a link to display the Submission Form in a popup window. Select the original DataPage and click Edit. Proceed to the Configure Fields screen. Using the Insert button at the lower right of the DataPage Elements panel add an HTML block. Copy and paste the following link code into the HTML panel:
Replace the DataPageURL portion with the Deploy code from the “Add Option” Submission Form. Update the other options in this hyperlink as needed.
To move the link to the same line as the dropdown, select the dropdown DataPage element and go to the Advanced tab. Click the Checkbox for Continue next element on same line.
Click Finish to save your DataPage.
Testing and other considerations
When testing inside of Caspio Bridge the popup window will appear, however, the original form will not refresh when a new item is submitted. To properly test this feature you will need to deploy the original form and view it outside of Caspio Bridge.
In Internet Explorer, if you are using this method in a submission form, after submitting a new dropdown option any information in the original form will be cleared, for that reason it is a good idea to add a dynamic dropdown link as close to the top of the form as possible. Another option would be to have the user submit the form then provide an "Add an Option" link in an Update Form.
Please note: This article uses external HTML, JavaScript, or third-party solutions to add functionality outside of Caspio Bridge's standard feature set. These solutions are provided "as is" without warranty, support or guarantee. The code within this article is provided as a sample to assist you in the customization of your web applications. You may need a basic understanding of HTML and JavaScript to implement successfully.