Start a conversation

Handlebars Helpers and Context Objects

A breakdown of different helpers and context objects available to Handlebars Components in Aurora.

Aurora uses the Handlebars.java framework to render Handlebars templates.

If you aren’t familiar with Handlebars, you can learn more detailed information on its use and functionality through the Handlebars Language Guide.

The Handlebars templating framework does not provide a one-to-one replacement for Freemarker found on Community Classic. It does, however, introduce the ability to be easily extended with additional libraries.

Handlebars provides these helpers out of the box: Built in Handlebars Helpers.

Additional Handlebars.java helpers

We have included the additional helpers from the Handlebars.java library that are not included by default:

Third-party helpers

We have also included some additional, third-party helper modules that are listed in the Handlebars.java documentation:

Khoros-provided helpers

Finally, we include a couple of our own helpers, which are mostly focused on Khoros Community use cases.

Helper Description Since LIA Version
hash A helper meant only for subexpressions, that lets you add to the handlebars hash for a handlebars call. 23.4
gql A helper that runs a GraphQL Query. 23.4
i18n A helper (which replaces the built-in Handlebars i18n helper) for specifying a localized text string. 23.4
lookupBoard A helper that looks up a Board by its Display ID. The board is returned as a coreNode object in a context object named board. 25.02
lookupCategory A helper that looks up a Category by its Display ID. 25.02
lookupGroupHub A helper that looks up a GroupHub by its Display ID. The board is returned as a coreNode object in a context object named groupHub. 25.02
lookupMessage A helper that looks up a Message by its unique identifier. The message is returned as a message object in a context object named message. 25.02
lookupUser A helper that looks up a User by its unique identifier. The user is returned as a user object in a context object named user. 25.02
customCoreNodeField Displays a Custom Field for either a specific core node (if you pass the core node as the value of the coreNode hash argument) or else from the page.context.currentCoreNode object associated with the current page context (if there is one). 25.02
customMessageField Displays a Custom Field for either a specific Message (if you pass the Message as the value of the message hash argument) or else from the page.context.message object (if there is one). 25.02

hash helper

The hash helper exists to assist you in passing arguments to other helpers. Handlebars does not support passing hashes as parameters to helpers out of the box but the hash helper enables you to do so.

gql helper

The gql (short for GraphQL) helper allows you to run a GraphQL query.

For example, the TopMembers component has a GraphQL query in it:

{{#gql "TopMembers"}}
  {{#with data.users.edges as |edges|}}
    <ul class="list">
      {{#each edges}}
        {{#with node as |user|}}
          <li class="list-item">
            <a
              class="user"
              aria-label="Member {{user.login}}"
              href="/users/{{user.login}}/{{user.uid}}"
            >
              <span class="avatar-wrap">
                <img
                  src="{{#if user.avatar.url}}{{user.avatar.url}}{{else}}/static/avatars/avatar-user-unknown.svg{{/if}}"
                  alt="{{user.login}}'s avatar"
                  class="avatar-img"
                  aria-hidden="false"
                  style="max-width:100%"
                />
              </span>
              <span class="user-name">{{user.login}}</span>
              {{#if @first}}
                <span class="badge-wrap">
                  {{#if assets.badge}}
                    <img
                      src="{{assets.badge.url}}"
                      class="badge"
                      alt="{{i18n 'badge'}}"
                      style="max-width:100%"
                    />
                  {{/if}}
                  <span class="sr-only">
                    {{i18n "firstPlace"}}
                  </span>
                </span>
              {{/if}}
            </a>
          </li>
        {{/with}}
      {{/each}}
    </ul>
    <p class="congrats">{{i18n "congrats"}}</p>
  {{/with}}
{{/gql}}

i18n

The i18n helper replaces the built-in Handlebars i18n helper for specifying a localized text string.

{{i18n "congrats"}}

lookupBoard

Since: 25.02

This helper looks up a Board by its Display ID. For example, for a board with the Display ID "headphones":

{{#lookupBoard "headphones"}}
  <h2>{{board.title}}</h2>
{{~/lookupBoard}}

lookupCategory

Since: 25.02

This helper looks up a Category by its Display ID. For example, for a category with the Display ID "stereo":

{{#lookupCategory "stereo"}}
  <h2>{{category.title}}</h2>
{{~/lookupCategory}}

lookupGroupHub

Since: 25.02

This helper looks up a Group Hub by its Display ID. For example, for a group hub with the Display ID "surroundsound":

{{#lookupGroupHub "surroundsound"}}
  <h2>{{groupHub.title}}</h2>
{{~/lookupGroupHub}}

lookupMessage

Since: 25.02

This helper looks up a Message by its Unique ID. For example, for a message with the ID "13452":

{{#lookupMessage "13452"}}
  <h2>{{message.subject}}</h2>
{{~/lookupMessage}}

lookupUser

Since: 25.02

This helper looks up a User by its Unique ID. For example, for a user with the ID "103":

{{#lookupUser "103"}}
  <h2>Hello, {{user.login}}!</h2>
{{~/lookupUser}}

customCoreNodeField

Since: 25.02

This helper looks up a Custom Field for a Core Node by the field name. You can either specify the core node by passing a coreNode argument, or if you don't pass one, it will look up the custom field for the page.context.currentCoreNode context object.

For example, to get the value of a custom field named custom_content_1 from the page.context.currentCoreNode context object:

{{#customCoreNodeField "custom_content_1"}}
  {{field}}
{{~/customCoreNodeField}}

To get the value of a custom field named custom_content_1 for a specific board:

{{#lookupBoard "headphones"}}
  {{#customCoreNodeField "custom_content_1" coreNode=board}}
    {{field}}
  {{~/customCoreNodeField}}
{{~/lookupBoard}}

customMessageField

Since: 25.02

The customMessageField helper looks up a

Choose files or drag and drop files
Was this article helpful?
Yes
No
  1. ATLAS

  2. Posted
  3. Updated

Comments