Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 3 Next »

This library was designed to be flexible and allow total customization of the markup used by all Components.

Overriding Templates

There are three ways to replace the Handlebars template used by a component:

  • Pass a template HTML string containing a Handlebars template as described in Installation.

  • Pass the ID of a template element containing a Handlebars template as described in Installation.

  • Define the new Handlebars template s the child content of a control

For example, the following methods of defining a new template for the Page Size Component will all have the same result:

Passing an HTML string

In your HTML file, define the template content directly in the configuration options:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Hawksearch Handlebars UI</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script type="text/javascript">
      var Hawksearch = Hawksearch || {};

      Hawksearch.config = {
        clientId: "f51060e1c38446f0bacdf283390c37e8",
        templates: {
          pageSize: `
            <div class='page-size'>
              <select hawksearch-page-size>
                {{#each options}}
                  <option value='{{pageSize}}' {{attribute 'selected' selected}}>{{title}}</option>
                {{/each}}
              </select>
            </div>`
        }
      };
    </script>
    <script src="node_modules/@bridgeline-digital/hawksearch-handlebars-ui/dist/handlebars-ui.js" defer ></script>
  </head>

  <body>
    <h1>Hawksearch Handlebars UI</h1>
    <hawksearch-search></hawksearch-search>
    <hawksearch-results></hawksearch-results>
  </body>
</html>

Creating a template element

In your HTML file, add the custom markup to a template element and pass the ID in the configuration options:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Hawksearch Handlebars UI</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script type="text/javascript">
      var Hawksearch = Hawksearch || {};

      Hawksearch.config = {
        clientId: "f51060e1c38446f0bacdf283390c37e8",
        templates: {
            pageSize:'page-size-template'
        }
      };
    </script>
    <script src="node_modules/@bridgeline-digital/hawksearch-handlebars-ui/dist/handlebars-ui.js" defer ></script>
  </head>

  <body>
    <h1>Hawksearch Handlebars UI</h1>
    <hawksearch-search></hawksearch-search>
    <hawksearch-results></hawksearch-results>
    <template id="page-size-template">
      <div class='page-size'>
        <select hawksearch-page-size>
          {{#each options}}
            <option value='{{pageSize}}' {{attribute 'selected' selected}}>{{title}}</option>
          {{/each}}
        </select>
      </div>
    </template>
  </body>
</html>

This approach tends to be easier to manage than the previous option as it is more compatible with popular HTML editors and templates can potentially be loaded from separate files using Server-side Includes (SSI).

Setting control content

<hawksearch-page-size>
  <div class='page-size'>
    <select hawksearch-page-size>
      {{#each options}}
        <option value='{{pageSize}}' {{attribute 'selected' selected}}>{{title}}</option>
      {{/each}}
    </select>
  </div>
</hawksearch-page-size>

This approach is simplest only if you place all of the components manually and avoid using the Search Results Component as that wraps around most of the other components.

If you choose this approach to customization and need to define a template for a nested element, be aware that by default, Handlebars will try to apply the model from the top-level component to all nested components, which will not work. To guard against this behavior, use the exclude helper documented in Handlebars Helpers.

Handlebars Helpers

  • add

  • attribute

  • eq

  • exclude

  • html

  • if-else

  • lt

  • lte

  • gte

  • or

  • subtract

  • Control content

    • Note exclude helper

  • Config string

  • Conflig template id

  • No labels