Indent Spacing on Textarea Fields

July 29, 2022
Jerry Clark

The following snippet will outline how to add indentation for tabs and spaces to the detail view for textarea fields in SugarCRM.

Swagger

The Basics

To accomplish our desired formatting, we will first need to create a custom helper function for the handlebar templates.

./custom/JavaScript/CustomHandlebarHelpers.js

/**
 * Custom Handlebar helpers.
 *
 * These functions are used in handlebars templates.
 * @class Handlebars.helpers
 * @singleton
 */
 (function(app) {
    app.events.on("app:init", function() {
        /**
         * convert text to HTML for formatting
         */
        Handlebars.registerHelper("customTextToHTML", function (text)
        {
            text = Handlebars.Utils.escapeExpression(text);
            text = text.replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1' + '<br>');
            text = text.replace(/(\t)/g, '&nbsp;&nbsp;&nbsp;&nbsp;');
            text = text.replace(/(\x20)/g, '&nbsp;');
            return new Handlebars.SafeString(text);
        });
    });
})(SUGAR.App);

Next, we need to create a JSGrouping to register our new function.

./custom/Extension/application/Ext/JSGroupings/CustomHandlebarHelpers.php

<?php

foreach ($js_groupings as $key => $groupings) {
    $target = current(array_values($groupings));
    if ($target == 'include/javascript/sugar_grp7.min.js') {
        $js_groupings[$key]['custom/JavaScript/CustomHandlebarHelpers.js'] = 'include/javascript/sugar_grp7.min.js';
        break;
    }
}

Next, we need to copy ./clients/base/fields/textarea/detail.hbs to custom/clients/base/fields/textarea/detail.hbs and replace all instances of {{nl2br}} with {{customTextToHTML}}

./custom/clients/base/fields/textarea/detail.hbs

<div> 
    {{#if value.short}} 
        {{#if collapsed}} 
            {{customTextToHTML value.short}}&hellip; 
        {{else}} 
            {{customTextToHTML value.long}} 
        {{/if}} 
        <button data-action="toggle" class="btn btn-link btn-invisible toggle-text"> 
            {{#if collapsed}} 
                {{str 'LBL_TEXTAREA_MORE' module}} 
            {{else}} 
                {{str 'LBL_TEXTAREA_LESS' module}} 
            {{/if}} 
        </button> 
    {{else}} 
        {{customTextToHTML value.long}} 
    {{/if}} 
</div>

Finally, navigate to Admin > Repairs > Quick Repair and Rebuild and your changes will be there after a refresh.

Download

You can download the module loadable package below for testing purposes.

  • Sugar Versions: 12.x
  • License: Open-Source (Apache 2.0)

Are you new to Sugar? Start a free trial today.

Please follow us on social media or subscribe to our RSS feed to keep up-to-date on new blog posts and announcements:

To read more about our company and services, please visit our home page.