Limit characters displayed in template field

  • 1
  • Question
  • Updated 1 year ago
  • Answered
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 = '<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 '';
    };
    
    // 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,'-');

}
Photo of Elissa Bradley

Elissa Bradley

  • 1,672 Points 1k badge 2x thumb

Posted 3 years ago

  • 1
Photo of Elissa Bradley

Elissa Bradley

  • 1,672 Points 1k badge 2x thumb
Hi Skuid Community: any thoughts on this?  I'm trying to limit the number of characters in a template field.
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
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 '';
};
Photo of Elissa Bradley

Elissa Bradley

  • 1,672 Points 1k badge 2x thumb
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();
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
Right below this line:
$.each(childData.records,function(i,comment){

add this line:
if (i>0) return false;
Photo of Elissa Bradley

Elissa Bradley

  • 1,672 Points 1k badge 2x thumb
that works - thank you.
Photo of Elissa Bradley

Elissa Bradley

  • 1,672 Points 1k badge 2x thumb
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 = '<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 formatComment = function(comment){
         var maxLength = 30;
         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 '';
    };
    
    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);
}
Photo of Poc

Poc

  • 496 Points 250 badge 2x thumb
How could you invoke this snippet on Skuid?
Photo of Stephen Sells

Stephen Sells, Official Rep

  • 16,856 Points 10k badge 2x thumb
Have you seen our tutorials on how to use Javascript in Skuid?
https://docs.skuid.com/latest/en/skuid/javascript/skuid-javascript.html
Photo of Poc

Poc

  • 496 Points 250 badge 2x thumb
Hi, I tried to pass a Status value into myMethod snippet within a template field.
However, none of them works
any idea?
<script>
skuid.snippet.getSnippet('myMethod')(Status__c)
skuid.snippet.getSnippet('myMethod')({{Status__c}})
skuid.snippet.getSnippet('myMethod')({{{Status__c}}})
</script>