Need help appending text to a table column via Javascript

  • 1
  • Question
  • Updated 2 months ago
  • Answered
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>");
    }


Photo of Josef Lagorio

Josef Lagorio

  • 2,874 Points 2k badge 2x thumb

Posted 2 months ago

  • 1
Photo of Mark DeSimone

Mark DeSimone, Official Rep

  • 11,050 Points 10k badge 2x thumb
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...
Photo of Josef Lagorio

Josef Lagorio

  • 2,874 Points 2k badge 2x thumb
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());

Photo of Mike Dwyer

Mike Dwyer

  • 3,390 Points 3k badge 2x thumb
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).
Photo of Mark DeSimone

Mark DeSimone, Official Rep

  • 11,050 Points 10k badge 2x thumb
Mike, thanks very much for sharing this suggestion! Joe, was it helpful in your efforts?