Get Values From List - String Into Text Field

[kpcollier]

Hello all,

Has anyone figured out a way to get List - String values into a single text field, for lookup table and trigger uses? I have an app that currently uses a List - Sting datatype for one of the fields, and I need to be able to use this field in another app. However, I can't select it due to List - String not having much compatibility. I am wondering if anyone has figured out how to use a formula or something to list all of the values separated by commas and spaces or something of the sort.

I am trying to either display the list string value or select it with something like a cascading element, on a submission form. On cascading, the list string field doesn't show up in the datasource list. 

Any help is appreciated.

[TellMeWhy]

17 minutes ago, kpcollier said:

I appreciate the help, @TellMeWhy.

Sure!

Btw, I found a way

<script>

document.querySelector("input[id^='InsertRecordList']").addEventListener('change', function() {
  
document.getElementById('cbParamVirtual1').value = document.querySelector("input[id^='ComboBoxInsertRecordList']").value;
  
});

</script>

The input with id starting with InsertRecord**FieldName** stores the checked values, so you can just use that as a reference to listen for a change

 

You can try it out again https://c2aby549.caspio.com/dp/83ff8000344c2f4c1794467fb6e2 

Cheers!

 

[Flowers4Algernon]

Hi, I think this might be helpful: 

 

[kpcollier]

Still having trouble with this. When options are selected in a List String box, the values are shown comma delimited on the value box. I feel like I should be able to copy the contents of that to another text field on change.

I believe the List Box actually is basically two elements - a select element with the options to choose from, and then an input element to store the values. The input element seems to be the one I need to target. The problem I am having is it is sending an integer value instead of the text value, which I am guessing is which index position each value is? Not sure. Any help would be appreciated. 

* Looks like there is a <label> element for each option. That is where the text is coming from. I believe this is what I need to target, but I am not sure how to get it done. This post shows to select the nearest element to the label with .next, but I couldn't get it to work. 

document.addEventListener('DataPageReady', function() {

  var n1 = document.querySelector('[id^="InsertRecordJob_Type"]');
  var n2 = document.getElementById('InsertRecordJobTypeString');

 n1.addEventListener('change', function() {
    alert("There was a change! Javascript is working!");
    n2.value = n1.value;
    

});
});

 

Edited April 8, 2021 by kpcollier

[kpcollier]

$('[id^="InsertRecordJob_Type"]').change(function() {
  alert("hi");
  $("#InsertRecordJobTypeString").val($(this).closest('div').find('label').text());

});

This one is successfully copying the labels into the text field. However, it is copying all of the labels from the list string box. Not sure how I can limit this to only options that are checked, but it seems I am getting closer.

I am novice with jQuery and JS and learning about .closest() and .next(). The label elements are directly beneath the input elements. I believe I need to use .next(), but can't quite seem to get the values to show at all with it.

Edited April 8, 2021 by kpcollier

[TellMeWhy]

41 minutes ago, kpcollier said:

$('[id^="InsertRecordJob_Type"]').change(function() {
  alert("hi");
  $("#InsertRecordJobTypeString").val($(this).closest('div').find('label').text());

});

This one is successfully copying the labels into the text field. However, it is copying all of the labels from the list string box. Not sure how I can limit this to only options that are checked, but it seems I am getting closer.

I am novice with jQuery and JS and learning about .closest() and .next(). The label elements are directly beneath the input elements. I believe I need to use .next(), but can't quite seem to get the values to show at all with it.

I'm confused what are you using? MultiSelect Dropdown or Listbox, afaik, Listbox doesn't display the concatenation of choices, right?

Is this what you're trying to do?

https://c2aby549.caspio.com/dp/83ff8000344c2f4c1794467fb6e2

[kpcollier]

1 hour ago, TellMeWhy said:

I'm confused what are you using? MultiSelect Dropdown or Listbox, afaik, Listbox doesn't display the concatenation of choices, right?

Correct! I was trying with either way. Every post on this forum I have been able to find about List Sting fields have said this is impossible, so I was trying with both ways. First I was trying with dropdown and couldn't get only one value to show up. Then when I tried the listbox I saw the label elements. I guess devtools was making it more confusing for me than it was. 

Your workflow is what I am trying to do - get the selected values of a list string into a text field so that they can be used in triggers/lookups and such. I am guessing the 'Type on this after making selections' field is needed to make this work? Is it possible to have the event fire when an option is selected?

[TellMeWhy]

On 4/8/2021 at 1:24 PM, kpcollier said:

Correct! I was trying with either way. Every post on this forum I have been able to find about List Sting fields have said this is impossible, so I was trying with both ways. First I was trying with dropdown and couldn't get only one value to show up. Then when I tried the listbox I saw the label elements. I guess devtools was making it more confusing for me than it was. 

Your workflow is what I am trying to do - get the selected values of a list string into a text field so that they can be used in triggers/lookups and such. I am guessing the 'Type on this after making selections' field is needed to make this work? Is it possible to have the event fire when an option is selected?

I can't seem to make it work on click, even using the whole document to check/listen for any change, it does not work for it, I don't know what's going on. Additionally, for some reason, if you checked it, it's not 'saved' you can check the 'for' of those labels and it still says 'unchecked' however when you click outside the options and close the dropdown, it will now include 'checked' so, that's when it's probably saved.

 

<script>
document.addEventListener('change', function() {

document.getElementById('cbParamVirtual1').value = document.querySelector("input[id^='ComboBoxInsertRecordList']").value;
  
document.getElementById('cbParamVirtual1').dispatchEvent(new Event('change')); //to use Virtual1 on Calculated Value/Field

});
</script>

Here's my script, there's an input element that has an ID which starts with "ComboBoxInsertRecord**ListFieldName**" . It does not show any values though even when options are checked, but, that's what's keeping those displayed on the field.

It will probably be better to do BeforeFormSubmit than 'change' in this instance.
https://howto.caspio.com/datapages/ajax-loading/ 

 

 

[kpcollier]

22 minutes ago, TellMeWhy said:

Here's my script, there's an input element that has an ID which starts with "ComboBoxInsertRecord**ListFieldName**" . It does not show any values though even when options are checked, but, that's what's keeping those displayed on the field.

I appreciate the help, @TellMeWhy.

[lamarh]

 I successfully used the javascript by TellMeWhy  in a submission page, but I can't get it to work  in a details page. I changed was InsertRecord to EditRecord and put it in the footer of a details page and added an alert box. I get  "Uncaught TypeError: Cannot read property 'value' of null" on the code highlighted in red. Any insight would be appreciated!

<script>

document.querySelector("input[id^='EditRecordList']").addEventListener('change', function() {
 
document.getElementById('cbParamVirtual1').value = document.querySelector("input[id^='ComboBoxEditRecordList']").value;

alert('list updated'); 

});

</script>

 

 

[EmmePGN]

On 4/8/2021 at 5:06 PM, TellMeWhy said:

Sure!

Btw, I found a way

<script>

document.querySelector("input[id^='InsertRecordList']").addEventListener('change', function() {
  
document.getElementById('cbParamVirtual1').value = document.querySelector("input[id^='ComboBoxInsertRecordList']").value;
  
});

</script>

The input with id starting with InsertRecord**FieldName** stores the checked values, so you can just use that as a reference to listen for a change

 

You can try it out again https://c2aby549.caspio.com/dp/83ff8000344c2f4c1794467fb6e2 

Cheers!

 

 

Hello TellmeWhy, I tried to use this on an Update page. Replaced "insert" with "edit",  not working on my end.

Can you please show the right way to use the code on a single record update page?  Thank you. 

 

[kpcollier]

On 9/15/2021 at 9:21 AM, EmmePGN said:

I tried to use this on an Update page. Replaced "insert" with "edit",  not working on my end.

I also can't get this to work on an Update page. Seems the values are coming over as undefined. If anyone has any idea how to get this to work, that'd be greatly appreciated!

document.querySelector("input[id^='EditRecordEmail_Recipients']").addEventListener('change', function() {
  
document.getElementById('EditRecordRecipients_String').value = document.querySelector("div[id^='ComboBoxEditRecordEmail_Recipients']").value;
  
});

[kpcollier]

This works for multiselect dropdown. This is enough for me. I couldn't get it to work for Listbox, though.

 

document.querySelector("input[id^='EditRecordEmail_Recipients']").addEventListener('change', function() {
  
document.getElementById('EditRecordRecipients_String').value = document.querySelector("input[id^='ComboBoxEditRecordEmail_Recipients']").value;
  
});