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

Josef LagorioJosef Lagorio Member
edited December 2017 in Questions
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?

Comments

  • John DahlbergJohn Dahlberg Member, Sonar
    edited December 2017
    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 {
    }

  • Josef LagorioJosef Lagorio Member
    edited December 2017
    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? 
  • John DahlbergJohn Dahlberg Member, Sonar
    edited December 2017
    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.

    image
  • Josef LagorioJosef Lagorio Member
    edited December 2017
    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! 
  • Josef LagorioJosef Lagorio Member
    edited December 2017
    Ah-Ha , now I remember!

    Override the field throws the "List index out of bounds: 1" upon saving.
Sign In or Register to comment.