Jump to content
ababcock

Cascading Text Area

Recommended Posts

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!

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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:

image.png.a38d46524c3c60e1e0a2bd48b22d48ee.png

 

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.

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...