Need help appending text to a table column via Javascript

edited February 4 in Questions
I am trying to append text to the first column in my table. I've inserted example text, "appended text" in green where I would like it to reside. 


I have a very basic snippet that I can't get to work. Appending to field.element works, but not to field.item.element. I am not savvy with Javascript so any help is greatly appreciated. 

var field = arguments[0], 
value = skuid.utils.decodeHTML(arguments[1]); 
   $ = skuid.$;

skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field,value); 

if (value !== null) 
    { 
        field.item.element.addClass("hidden-row");
        field.element.children().append("<p>Appended text</p>");
    }


Comments

  • Mark DeSimoneMark DeSimone 🛠️ 
    edited February 4
    Hi Joe,

    I'm curious about what you see when you add this line:
    console.log(field.element.children());

    What I'm wondering is what those children look like before you append your paragraph to them. 

    I'd also be curious to see what console.log(value) yields...
  • edited September 2018
    Here are the two logs and their outputs respectively. 

    Console.log(value) just returned the text of the field. 

    console.log(field.element.children());
    console.log(field.item.element.children());

  • edited September 2019
    Instead of field.item.element, try working with the array field.item.fields and then field.item.fields[0].element.addClass.

    This is from a snippet run as a Field Renderer on a table column.

                // Also get the element of the Case Manager field 
                // (should be fields[1], the 2nd column) and highlight it also
                for ( i=0; i<field.item.fields.length; i++)
                {
                    if ( field.item.fields[i].id == "Case_Manager__r.Name" )
                    {
                        field.item.fields[i].element.addClass("blueHighlight");
                        break;
                    }
                }

    The table column is an empty UI-Only field. I assign a value inside the snippet and then render it with:

                skuid.ui.getFieldRenderer(field.metadata.displaytype).read( field, value );

    You might be able to read the value of a non-ui-only field from arguments[1] and then append to it. However, this page broke with Millau and we had to rebuild it. I don't recall if the UI-Only fields were a necessity or a convenience (so three fields could be populated with one snippet).
  • Mark DeSimoneMark DeSimone 🛠️ 
    edited February 4
    Mike, thanks very much for sharing this suggestion! Joe, was it helpful in your efforts?
Sign In or Register to comment.