Custom Helpers in SuiteCommerce Using Handlebars.js

TL;DR Opening

SuiteCommerce Advanced (SCA) leverages custom helpers in Handlebars.js to enhance template functionalities, enabling developers to add custom logic and improve the UI rendering process. This modular system ensures better maintainability and customization during upgrades.

What Are Custom Helpers?

In SuiteCommerce Advanced, custom helpers provide additional functionality beyond the default capabilities of the Handlebars.js library. These helpers facilitate specific tasks that improve the presentation of data within templates.

Functions of Custom Helpers

The custom helpers in SCA are defined in the HandlebarsExtras.js file, located in the JavaScript subdirectory of the HandlebarsExtras application module. Here are some of the key custom helpers defined:

• translate: Localizes strings to ensure compatibility with different languages and regions by calling the _.translate function.
• formatCurrency: Formats currency values using the formatCurrency function, ensuring they are displayed correctly based on the user's locale.
• highlightKeyword: Highlights specific keywords in a template, commonly used within search result displays, as demonstrated in the following example:
  htmlCopy

  {{highlightKeyword model._name query}}

• displayMessage: Renders messages using the GlobalViewsMessageView, displaying alerts or notifications in the UI.
• objectToAttributes: Converts an object into a series of attributes, facilitating their integration directly into a template.
• each: Provides a way to iterate through a Backbone.js collection, simplifying the method of displaying lists of data.
• resizeImage: Generates normalized URLs for images using specified dimensions, enhancing image display on different devices.
• fixUrl: Validates and returns correctly formatted URLs by utilizing the _.fixURL utility.
• trimHtml: Trims HTML strings to a specified length, which may include HTML elements.
• breaklines: Converts line breaks from the backend into HTML break tags (<br/>), making it suitable for displaying message formats like quotes and order reviews.
• ifEquals: Implements comparisons, creating conditional logic easily within templates, demonstrated as follows:
  javascriptCopy

  {{#ifEquals model.options.custbody_my_transaction_body_field_2 'T'}}
      This is true
  {{"text-purple-400">else}}
      This is false
  {{/ifEquals}}

Importance of Custom Helpers

Custom helpers are integral to extending the capabilities of templates within SuiteCommerce. By allowing developers to embed custom logic directly into their templates, these helpers promote a more modular design approach. This is particularly beneficial in the context of application upgrades, as it helps ensure that customizations remain intact.

Who This Affects

• Developers: Responsible for implementing and customizing templates using Handlebars.js.
• Administrators: Oversee the integration of templates within the application, ensuring smooth functionality.

Key Takeaways

• Custom helpers in SuiteCommerce enhance template functions using Handlebars.js.
• They facilitate tasks like localization, formatting, and conditional logic.
• Customizations made with helpers help maintain forward compatibility during application upgrades.

Source: This article is based on Oracle's official NetSuite documentation.