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 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.

Add_an_option_to_a_public_facing_dropdown_1

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 Creating a View to Filter Data.

Base your Dropdown on the filtered View

Edit your original form to base your dropdown on the filtered view. Edit the DataPage that will contain your dropdown. 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.

Add_an_option_to_a_public_facing_dropdown_3

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 the Advanced tab. Under External Associations and Defaults, select External Parameters and enter the parameter name in the On load. Be sure to note the name of the parameter as it will be used later.

Create a Submission Form

Now you create a Submission Form DataPage so users can submit new records directly to the lookup table.

  1. Click New DataPage. By default, the cursor selects Submission Form as the first DataPage type.
  2. Select your original lookup table as the data source, and enable advanced options and parameters.
  3. You can select which fields to be used in your form. To select fields, move the fields from the Available Fields list to the Selected Fields list.
  4. 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 the Advanced tab. To pass a parameter to the next page, enable the On exit option by checking Pass field value as parameter and enter the parameter value. Make sure the parameter name matches exactly with the receiving parameter from your original form.
  5. On the Destination and Triggers 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. Go to Source mode and insert the following JavaScript into the success message panel:
    <script>
    window.close();
    if (window.opener && !window.opener.closed) {
    window.opener.location.reload();
    }
    </script>
  6. Click <strong>Finish</strong> to Save Your DataPage. Select the Submission Form again and click the Deploy button. Select <b>URL </b>as your <b>Deployment method.</b> Copy the URL and save it for future reference.

Send a notification email when the form has been filled out (optional)

On the Destination and Triggers screen, you can choose to send 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:
    <a onclick="window.open('DataPageURL','popup','width=307,height=341,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false">Add Option</a>
  • 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.

Note 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.