Can I format values in a template field?

  • 4
  • Question
  • Updated 1 year ago
  • Answered
I have a template field showing child fields in a table. The value is set to:

{{Pricing_Date__c}}: ${{{Total_Rate__c}}}

The problem is that the results show as:
2014-01-21T19:53:00.000+0000: $0.09633

2014-01-21T20:28:00.000+0000: $0.09633

Can I format the date to '1/21/2014 7:53 PM' instead of '2014-01-21T19:53:00.000+0000'? I know how to do this with a custom field renderer, but I don't see how to apply one to a template field. Also, since the value of the template field is complex, I'm not sure how to do format both the date and the number within the renderer (even if I could use one).
Photo of Jonathan Adlerstein

Jonathan Adlerstein

  • 528 Points 500 badge 2x thumb

Posted 5 years ago

  • 4
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Most straightforward mechanism here is going to be a custom renderer that both does the formatting and the field combination.  Once you have to go to Javascript for one thing - you really have to stay there for the whole enchilada.  
Photo of Jonathan Adlerstein

Jonathan Adlerstein

  • 528 Points 500 badge 2x thumb
Can you provide an example of how I might do this? Where do I put the javascript? How do I reference it on my page? A template field doesn't have a spot for a custom renderer.

Also, shouldn't the default behavior apply Skuid formatting to the date/time field? How can I manually enforce Render UI on a standard Template component?
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
Jonathan,

I agree with you about the default behavior applying to fields in the Child Relationship, we'll add that to our issues list.

There is a no-JavaScript workaround to do this that works almost as well:

1. Drag in a Template component (from the Components list) into your Table's fields area.
2. For the Template body, put something like the following:


{{#Contacts.records}}
{{Name}} {{skuid__Hire_Datetime__c}}<br/>
{{/Contacts.records}}


where "Contacts" is the exact name of the Child Relationship you are iterating over, which you can find by looking at your Model's Child Relationships area:

Photo of Peter Bender

Peter Bender, Champion

  • 6,246 Points 5k badge 2x thumb
Zach, I've tried this, but the column is empty. What's it supposed to render as?
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
One clarification needs to be added to Zach's instruction above.  Generally when working with child relationship data you add the child object to your model  (where it shows with the org chart icon) and then you drag that org chart icon into your table or field editor,  where it appears as  a template - into which you add your fields. 

In this case,  Don't do that.  

Build your child model.  But then go to the component list and drag a new template component into the table.  That template will be set in the context of the parent object in your model and then the question "are there contact records as children of this row" can be asked successfully. 

Hope that helps. 
Photo of Peter Bender

Peter Bender, Champion

  • 6,246 Points 5k badge 2x thumb
Since the template is in the context of the parent model, then, how do I refer to the field that is on the child object? Child object fields don't appear in the template field picker, and simply putting in the name of that field doesn't seem to work, nor does something like "{{ChildObject__r.CreatedDate}}".
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Hmmm a few possible problems. 
1. Make sure the fields are in the model (Select the child relationship object icon in the field list and the available fields will appear in the properties section)

2. If you have dragged a template component into the table (as I suggested above) you are in the context of a row on the main model, and you need to apply the child object selector syntaxt ie:  {{#Contacts.records}}

3. Once you have used the selector syntax, use the API Name by itself, don't prepend it with the object name.

4. Close you conditional statement after you have stated all your child object fields.  ie:  {{/Contacts.records}}

Hope this gets you where you need to go. 
Photo of Peter Bender

Peter Bender, Champion

  • 6,246 Points 5k badge 2x thumb
I got that to work (I think I must've had a typo somewhere). It does seem, though that I can't use the CreatedDate field, because it was referencing the parent object's field, not the child object's field, so I ended up creating a custom date-only formula field on the child object anyway. Thanks for the help.
Photo of Jonathan Adlerstein

Jonathan Adlerstein

  • 528 Points 500 badge 2x thumb
That worked to apply the standard Skuid formatting to the date field, but it won't allow me any other custom formatting options. Can I include javascript directly within the template field or is there another method to accomplish this?

For example, if I want to format the date into a short date and convert the number to currency?
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
The answer is no, you can't include JavaScript in a Template --- the basic approach is to drag in some other random field, such as the Id field, on the Model in context, and then add a custom field renderer to it that does what you want.

So for instance, say you're on an Accounts table, and you've pulled in the Contacts Child Relationship. What you should do is this: add the "Id" field to your Contacts Model, then drag it into your table. Set its Field Renderer to be "Custom / Run Snippet", and then have your Snippet be something like this:



var field = arguments[0],
row = field.row,
$ = skuid.$,
userLocale = skuid.utils.userLocale;

var childData = row.Contacts;
var DELIMITER = '<br/>';
var DATE_FORMAT = 'm/d/yy';
var TIME_FORMAT = 'h:mm a';

if (childData && childData.totalSize) {
// Run the default text renderer with nothing,
// just to get our field element
skuid.ui.fieldRenderers.TEXT.read(field,'');

var formatDateTime = function(sfDateTime,dateFormat,timeFormat){
if (sfDateTime) {
var jsDate = skuid.time.parseSFDateTime(sfDateTime),
localDate = skuid.time.getLocalDateTime(jsDate);
if (localDate) {
var formattedTime = skuid.time.formatTime(timeFormat,localDate),
formattedDate = $.datepicker.formatDate(dateFormat,localDate);
return userLocale.showTimeBeforeDate
? formattedTime + ' ' + formattedDate
: formattedDate + ' ' + formattedTime;
}
}
return '';
};

var output = '';
$.each(childData.records,function(i,contact){
output +=
// Format the DateTime in our desired time and date formats
formatDateTime(
contact.skuid__Hire_Datetime__c,
DATE_FORMAT,TIME_FORMAT
)
+ ": $"
+ $.number(
contact.skuid__Total_Mass_in_Grams__c,
2, /* number of decimal places */
userLocale.decimalsSeparator,
userLocale.thousandsSeparator
);

// Append delimiters as long as we're not on the first record
if ((i+1) !== childData.totalSize) {
output += '<span>' + DELIMITER + '</span>';
}
});

field.element.html(output);

} else {
skuid.ui.fieldRenderers.TEXT.read(field,'No Contacts');
}


Photo of Jonathan Adlerstein

Jonathan Adlerstein

  • 528 Points 500 badge 2x thumb
Thanks Zack! I'll try that and let you know how it works. Any plans to allow custom field renderers to template fields?
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
Not currently any plans, but it's a great idea --- if you post it as a separate Idea on the Community, others can vote it up and we can get it on the road map!
Photo of Poc

Poc

  • 496 Points 250 badge 2x thumb
Is invoking a snippet from a template field to format the cell value available now? I saw some posts that can invoke a snippet by clicking the link on the field.However, What I need is to invoke the JS call when loading the table (users no need to trigger the snippet call)