| Table of Contents |
|---|
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
templateelement 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:
| Code Block | ||||
|---|---|---|---|---|
| ||||
<!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:
| Code Block | ||
|---|---|---|
| ||
<!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> |
| Info |
|---|
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
| Code Block | ||
|---|---|---|
| ||
<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> |
| Info |
|---|
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. |
| Note |
|---|
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 |
Handlebars Helpers
add
attribute
eq
exclude
html
if-else
lt
lte
gte
or
subtract
Control content
Note exclude helper
Config string
Conflig template id