Can you render a table column when the row is in edit mode?

  • 1
  • Question
  • Updated 11 months ago
  • Answered
I have a table that references Events and I would like to conditionally render a column when the row is in edit mode.

My issue is using the StartDateTime field and hiding the timestamp since we only care about the date for this use case. I've created a UI field to display StartDateTime as just a date, but that isn't edittable. 

So, are you able to render a table column when the row is in edit mode?
Photo of Josef Lagorio

Josef Lagorio

  • 2,864 Points 2k badge 2x thumb

Posted 11 months ago

  • 1
Photo of John Dahlberg

John Dahlberg, Champion

  • 2,442 Points 2k badge 2x thumb
I believe you'll have to use a custom snippet for that.  The rendering logic on the table field would apply to all records on the table and I'm not aware of a way to have that toggle at the row level declaratively.  Also, I've tested adding the edit action to a "Run Multiple Actions" Row Action via XML and it didn't work.

Here's an example snippet to get you started.  I wrote this one for adding a placeholder text on lookup fields.  It grabs the label from the lookup field and adds placeholder text when it's in edit mode.  Most skuid fields have the ability to add placeholder text in the page builder, but not on a reference.  With placeholders we've found that you can tighten the UI on easily recognized blocks like addresses by hiding the field label and adding placeholder text. This is mainly helpful in Field Editors.


var field = arguments[0];    
var value = skuid.utils.decodeHTML(arguments[1]);
var cellElem = field.element;
    $ = skuid.$;
    
if (field.mode == 'edit'){
    skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field, value);
    cellElem[0].getElementsByTagName('input')[0].setAttribute("placeholder",field.label);
}
else {
    skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field, value);
}




I haven't tested this but this edit should get you close:


var field = arguments[0];    
var value = skuid.utils.decodeHTML(arguments[1]);
    $ = skuid.$;
    
if (field.mode == 'edit'){
    skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field, value);
}
else {
}
Photo of Josef Lagorio

Josef Lagorio

  • 2,864 Points 2k badge 2x thumb
Thanks for your posting.

After some minor tweaking to your suggestion, the datetime field is still showing the HH:MM AM/PM. Any idea how I would override that? 
Photo of John Dahlberg

John Dahlberg, Champion

  • 2,442 Points 2k badge 2x thumb
So I think you're asking two questions.  The snippet above should handle rendering a field only in edit mode.  

If you just need to work with a date on a datetime field, the direct approach is to override the field metadata in the model and change the display to Date.

Photo of Josef Lagorio

Josef Lagorio

  • 2,864 Points 2k badge 2x thumb
I could've sworn there was some reason as to why I wasn't able to use the metadata override option, but nonetheless everything is working. Thanks, John! 
Photo of Josef Lagorio

Josef Lagorio

  • 2,864 Points 2k badge 2x thumb
Ah-Ha , now I remember!

Override the field throws the "List index out of bounds: 1" upon saving.