Limit characters displayed in template field

Questions
1

I’m referencing this topic to try to format a template field. My template field displays child records - Case Comments, in a Cases table - and I’d like to limit the number of characters displayed in each case comment. I’m using the formatDateTime function in the snippet that Zach provided, but need a javascript function that will limit the characters in my case comments field. Here’s what I have - maybe this is an easy fix for someone who is good at javascript. I’ve bolded the parts of the code that I need to adjust.

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

var childData = row.CaseComments;
var DELIMITER = ’
';
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 '';
};

// How do I write a function to limit characters to 20? Below is my attempt…

var formatComment = function(){
var string = ;
var length = 20;
var trimmedString = string.substring(0,length);
};

var output = '';

$.each(childData.records,function(i,comment){
    output +=
        // Format the DateTime in our desired time and date formats

        formatDateTime(
             comment.CreatedDate,
                DATE_FORMAT,TIME_FORMAT
        )

        + ": "

// Here’s where I need to reference formatComment; not sure if I’m doing it correctly
+ formatComment(
comment.CommentBody
);

// 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,'-');

}

2

Hi Skuid Community: any thoughts on this?  I’m trying to limit the number of characters in a template field.

3

I think you were really close, try this instead for your formatComment function

var formatComment = function(comment){
     var maxLength = 20;
     var trimmed = comment;
     if (comment && comment.length && comment.length>maxLength) {
         trimmed = comment.substring(0,maxLength);
     }
     // Encode the output to avoid XSS vulnerabilities
     if (trimmed) return skuid.utils.encodeHTML(trimmed);
     else return ‘’;
};

4

That does the trick! The final code, for anyone who is interested:

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

var childData = row.CaseComments;
var DELIMITER = ’
';
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 formatComment = function(comment){
     var maxLength = 30;
     var trimmed = comment;
     if (comment &amp;&amp; comment.length &amp;&amp; comment.length>maxLength) {
         trimmed = comment.substring(0,maxLength);
     }
     // Encode the output to avoid XSS vulnerabilities
     if (trimmed) return skuid.utils.encodeHTML(trimmed);
     else return '';
};

var output = '';

$.each(childData.records,function(i,comment){
    output +=
        formatDateTime(
             comment.CreatedDate,
                DATE_FORMAT,TIME_FORMAT
        )
        + ": "
        +  formatComment(
            comment.CommentBody)
        + "...";
        
    if ((i+1) !== childData.totalSize) {
        output += '<span>' + DELIMITER + '</span>';
    }

});

field.element.html(output);
}

5

Zach, one more question here - how can I limit to 1 comment?  I’ve tried the following variations with no luck:

var childData = row.CaseComments[0];

var childDataAll = row.CaseComments;
var childData = childDataAll.getFirstRow();

6

Right below this line:
$.each(childData.records,function(i,comment){

add this line:
if (i>0) return false;

7

that works - thank you.

8

How could you invoke this snippet on Skuid?

9

Have you seen our tutorials on how to use Javascript in Skuid?
https://docs.skuid.com/latest/en/skuid/javascript/skuid-javascript.html

10

Hi, I tried to pass a Status value into myMethod snippet within a template field.
However, none of them works
any idea?