Cascading Text Area

[ababcock]

I am trying to create a submission form where users select a name from a dropdown list, and most of the other info auto-populates. I have been able to do this for all text fields, but I am told the cascading feature is not available for text 64000 areas. I understand that I need to call the data in from the table it's on, but I need it to be populated based on the name selected. Can someone tell me how to accomplish this? I can follow instructions, but I am not really used to javascript, so simple instructions would be appreciated!

[MayMusic]

Add a cascading virtual field and try to get the value of cascading element in it. You can only select it as "Field for display" and not “Field for value”

 

Include your actual text 64000 field to your page as well. Let's say the field name of your text 64000 field is Description in your table. Add a Footer to your page and use the code below to get the value and assign it to the actual field

 

<script>
document.getElementById('Submit').onmouseover = function (){

var e = document.getElementsByName("cbParamVirtual1")[0];
var strUser = e.options[e.selectedIndex].text;
document.getElementById('InsertRecordDescription').value = strUser;
}

</script>

If your page is a submission page this code will fire when you hover over the Submit button :

document.getElementById('Submit').onmouseover = function (){

On other type of pages you need to replace the button ID

[74Systems]

Can I do this without the hover on submit? I want to make this same thing happen when I hover over the actual field, as a popover or tooltip at least.

[nightowl]

Hi guys,

You can try this workaround:

1. Create a parent dropdown from an existing field, say Status.
2. Insert a cascading virtual text Field, say Virtual1. Then configure it so that it filter-cascades from the Status  field in STEP #1.
3. Then create a textarea field from another existing field, say Canned_Message.
4. Create an HTML block with the Source  button enabled.
5. Then use this sample script inside the HTML block from STEP #4:

<!-- Latest jQuery + jQuery Migrate -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-3.0.0.js"></script>

<script>
    $(document).ready(
        function ()
        {
            // TODO: Update the names accordingly
            var parentFieldName   = 'Status';
            var virtualFieldName  = 'Virtual1';
            var textAreaFieldName = 'Canned_Message';

            // WARNING: Please don't modify code beyond this point

            // Parent dropdown (can also be a virtual field)
            var getParentField = function ()
            {
                return $('select[name^="InsertRecord' + parentFieldName + '"]');
            }

            // Cascading VIRTUAL text field (will be hidden via CSS)
            var getVirtualField = function ()
            {
                return $('input[id^="cbParam' + virtualFieldName + '"]');
            }

            // Cascading textarea (will get its value from the cascading text field above)
            var getTextAreaField = function ()
            {
                return $('#InsertRecord' + textAreaFieldName);
            }

            var getRichTextField = function ()
            {
                return $('iframe[title="Rich Text Editor, InsertRecord' + textAreaFieldName + '"]').contents();
            }

            var addEventListeners = function ()
            {
                var parentField = getParentField();
                var vField      = getVirtualField();
                var richText    = getRichTextField();

                vField.on('change', setTextAreaContents);
                richText.ready(setTextAreaContents);
            }

            // The workaround
            var setTextAreaContents = function (event)
            {
                var parentField = getParentField();
                var vField      = getVirtualField();
                var textArea    = getTextAreaField();
                var richText    = getRichTextField();

                var selected = parentField.val();
                var textToDisplay = vField.val();

                if (textArea.length > 0 && richText.length > 0)
                {
                    $('body', richText).html(textToDisplay);
                }
                else
                {
                    textArea.html(textToDisplay);
                }
            };

            // Hide the virtual field via CSS
            var vField = getVirtualField();
            vField.parent().parent().hide();

            // Enable the cascading textarea
            addEventListeners();

            // Manually trigger the dropdown 'onchange' event
            var parentField = getParentField();
            parentField.trigger('change');
        }
    );
</script>

Please don't forget to change the name of:

1. The parent field (Status)
2. The virtual field (Virtual1)
3. The text area (Canned_Message)

 

This workaround works properly, regardless of whether the rich text editing toolbar is enabled or not in the Advanced tab.

Thanks.

[74Systems]

I got this to work. Thank you. But sadly, it only works when the cascading field "status" or my "ProductDetails" is set to 255 characters. Text area fields won't cascade.

Also, my currency won't display on some fields here. Any idea on that?

[nightowl]

Hi 74Systems,

Caspio doesn’t allow to use Text64k in Filter by field (not as parent or child, but as a field which is used for filtering in cascading form element).
If you edit the DataPage after you change the data type of the field to Text64k, you will see that the cascading settings are updated and filter by changed to ID:

 

That's why it's better to use the ID instead of the full-text ProductDetails  (Text64k) when filtering while retaining the full text for the dropdown display.

[EveryPlace]

Thanks for sharing, everybody, but I have not been able to get either one of these methods to work.  I checked to see that I was using the right variables for my particular field names.  I am trying to insert standard report language into a Recommendation field called LongRec, using cascading dropdowns.

In MayMusic's solution, I modified the code for my field names like this where my virtual field is "Virtual2" and my destination field which is also in the table is LongRec.  Did I miss something?

<script>

document.getElementById('Submit').onmouseover = function (){

var e = document.getElementsByName("cbParamVirtual2")[0];
var strUser = e.options[e.selectedIndex].text;
document.getElementById('InsertRecordLongRec').value = strUser;
}

</script>

[nightowl]

Hi EveryPlace,

I can that, as per MayMusic's solution, you do have the correct revision for your use case.

But since you said that neither method works, i.e. MayMusic's solution or mine, can you please explain a bit further why is that so?

-nightowl

[Andrii]

Steps to implement a cascading TextArea:

1. Create Virtual field to receive the cascading text value.

2. Make it hidden. To make it you may add CSS code into the source of the header:

<style>

Your_virtual_field_selector {
  visibility: hidden !important;
}

</style>

3. Create a text area in the HTML block and copy the cascading text value into this area.
Here is the code from the HTML block:

<textarea type="text" cols="60" rows="8" id='input_val'></textarea>
<script>

var elem_1 = document.querySelector(Your_virtual_field_selector);
var elem_2 = document.getElementById('input_val');

elem_1.addEventListener('change', function() {
    elem_2.innerHTML = elem_1.value;
});

</script>

To add "Your_virtual_field_selector" search it using the Developer tools of the browser.
Also, you can check this article to get familiar with CSS selectors: https://www.w3schools.com/cssref/css_selectors.asp

 

See the already made APP attached: Test_APP.zip