Updating Data inside dropdown

AElkhouly · February 16, 2018

Hi, so I have a datapage that has a dropdown for countries, provinces, and cities. each of these dropdowns are collecting data from individual tables. beside the country dropdown I added a plus icon to give the client the option to add a country if it is not on the list. the plus sign is pointing to another datapage. That all works, my problem is when the client adds another country, and closes the pop up window, it doesn't show in the dropdown. So I am looking for a solution to refresh this particular dropdown without having to refresh the whole datapage and loose all data entered already. Any solutions?

MayMusic · February 27, 2018

Have you tried https://howto.caspio.com/tech-tips-and-articles/advanced-customizations/automatically-add-options-to-dropdowns-and-listboxes/?

MayMusic · February 27, 2018

Base all of your dropdowns on a lookup table

This technique requires using a lookup table as the base reference for your dropdowns. Lookup table based dropdowns have several advantages over using custom values. If you do not currently use a lookup table you can find steps to create one here.

Create a Submission Form to your lookup table

First, we are going to create a Submission Form DataPage so users can submit new records directly to the lookup table.

Click New DataPage. By default, the cursor selects Submission Form as the first DataPage type. Click Next.
Select your lookup table as the data source. Click Next.
You can select which fields to be used in your submission form. To select fields, move the fields from the Available Fields list to the Selected Fields list. Because you are submitting to a lookup table, it is likely that there will only be one (or very few) fields. Click Next.
Format the Field as needed, Go to the Advanced Tab and check “on exit to pass field value as parameter”. Note the parameter name as you will use that name in your Javascript. Click Next again.
Now on the last page, replace the success message with a JavaScript. This JavaScript will close the popup window and the new dropdown items will be visible. Go to the Source mode and insert the following JavaScript into the message panel:

window.close();

//Replace the FieldName with the Submission form FieldName(parameter name passed when you checked “on exit”.

var element_value='[@InsertRecordFieldName]'

var new_item = window.opener.document.createElement("option");

new_item.text=element_value;

new_item.value=element_value;

// Add new item to the dropdown

try

{

//Replace the FieldName with the Original DataPage dropdown FieldName

window.opener.document.getElementById("InsertRecordFieldName").options.add(new_item, null);

}

catch(ex)

{

//Replace the FieldName with the Original DataPage dropdown FieldName

window.opener.document.getElementById("InsertRecordFieldName").options.add(new_item);

}

</script>

Click Finish to Save Your DataPage.

Deploy Submission Form

1. Select the Submission Form again and click the Deploy button. In order for the script to work, both DataPages must be embedded in webpages with the same domain name. You can make an empty webpage containing only the following HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<body>

CASPIO DEPLOY CODE

</body>

</html>

2. Replace "CASPIO DEPLOY CODE" with the deploy code of your submission form. If your original form is deployed using the URL deployment method you can deploy the submission form using the same method.

3. Copy the URL of the submission form and save it for use in the next step.

Create a link in your original DataPage

Now in your original form, you add a link that will display a popup window containing the Submission Form from the previous step.

Select the DataPage where you would like to add the link and open the DataPage Wizard by clicking Edit. On the second screen be sure to enable advanced options.

Proceed to the Configure Fields screen. Using the Insert button at the lower right of the DataPage Elements panel, add an HTML block. Go to the Source mode and insert 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 DataPage URL portion with the URL of the first 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

vanderLeest · March 5, 2018

This is surely an advanced version of tried https://howto.caspio.com/tech-tips-and-articles/advanced-customizations/automatically-add-options-to-dropdowns-and-listboxes.

Is it possible to do almost the same thing based on a report page for the lookup table?

I have a lookup table with contact persons per institution. if the submitter selects an institution and the dropdown for the contacts does not list the perosn they want to associate with the current project. I would like the submitter to be able to add a new contact OR reactivate a contact, hence my attempt to base the lookup addition on a report (listing contacts for the institution) instead of a blank submission form.

DesiLogi · September 26, 2019

Hi MayMusic,

Thanks for posting the script for updating a dropdown without refreshing the whole page. That's a key thing for a smooth UI.

I need to use this method to update a multi-select Listbox field (instead of a drop down field) and I can't get it to work. I tried using getElementsByName("InsertRecordFieldName")[0] instead of getElementById("InsertRecordFieldName") but it's not refreshing the field listbox. Any idea how to target a Listbox for refresh in this scenario?

EDIT: actually, I did get this to work using getElementsByName("InsertRecordFieldName")[0] . What was missing was I needed to use the parameter from the popup in the OnLoad in the Listbox field. Works great now- thanks for posting that javascript, really helpful.

Edited September 26, 2019 by DesiLogi
found out code works as posted

DesiLogi · February 10, 2020

Here's an additional issue related to this thread. What if the drop down is set to use 'store' a uniqueID value (integer) but 'display' a text value? The above code only seems to work when the dropdown is set to 'store' and 'display' the same field. Does anyone know how to put, from the popup form that populates the dropdown lookup, the UniqueID (integer) value in the 'store' sections but 'display' a different text field?

I made a separate thread for this here:

but since it's related to this thread I wanted to connect it.

WimCasp · November 2, 2021

Is it possible to update data inside dropdown in tabular report (InlineEdit) and how if any?

RuisiHansamu · November 3, 2021

Hi @WimCasp – I believe this is possible, if you would like to edit or update the values inside the tabular report. (e.g - I have here a dropdown form element and I would like to edit the values from this TotalCost field, I can choose from the values or data below. What I did is have a custom values in my configuration page. You could also have a data source for this like a Lookup table or a view.) Please refer to the screenshots.

image.png.9527ae86ab7183def36089425b0a5a71.png

Also, here is a snapshot or reference that I learned from Caspio's online help center: https://howto.caspio.com/ and https://howto.caspio.com/datapages/reports/data-editing-options-in-reports/

I hope this may help you out! Cheers!

WimCasp · November 4, 2021

Hi @RuisiHansamu,

I mean something different then standard things.

I want to add to dropdown into InlineEdit option comes as parameter. In my case I need to link/onlink order orders to invoice. Invoice ID is a parameter for DataPage. I want to have choose from only 2 options 'N/A' = blank field, or invoice number. But I can't point [@WHI_ID] as an item for dropdown.

I will be appreciative for any ideas

Login

Updating Data inside dropdown

Question

AElkhouly

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

MayMusic

Link to comment

Share on other sites

MayMusic

Link to comment

Share on other sites

vanderLeest

Link to comment

Share on other sites

DesiLogi

Link to comment

Share on other sites

DesiLogi

Link to comment

Share on other sites

WimCasp

Link to comment

Share on other sites

RuisiHansamu

Link to comment

Share on other sites

WimCasp

Link to comment

Share on other sites

Join the conversation

Browse