Creating and editing templates

When you create or edit a template, the Edit Template window opens.

The Edit Code view has two panes.

Preview

This pane previews the template based on the code and sample data.

Code

This pane has four tabs.

General: Enter the Name, Id, and Description of your template here.
HTML: You can edit HTML code here. You can also use embedded JavaScript templating. For more information, see EJS - Embedded JavaScript templates.
CSS: You can edit CSS code here.
Data: Edit sample data for designing the template.
Samples: This tab contains sample code. Click one of the sample names at the top of the code to view the code for that sample. You can copy sample code into your own code. Select the code you want and click Apply.

JavaScript API Reference

For information about the JavaScript API methods available for use in templates, see JavaScript API for templates.

Variables for Result List templates

The following variables are available for the Result List widget and they can be referenced from its template.

object[] items: Array of normalized search result items. Read-only.
object[] itemsRaw: Array of the original search result items. Read-only.
number totalCount: Total hit count for the query. Read-only.
any uniqueId: Unique document ID, which can be obtained from the uniqueId property of a document. Read-only.

An example is shown here.

<div class="template-list1">
  <% items.forEach(function(item){ %>
    <div class="template-root<%= item.uniqueId == selectedId ? ' template-selected' : '' %>">
      <div class="template-title"><a class="template-link" href="<%= item.link %>"><%= item.title %></a></div>
      <% if (item.date) { %>
        <div class="template-date"><b>Date:</b> <%= item.date %></div>
      <% } %>
      <div class="template-subtitle"><%- item.highlights || item.subtitle %></div>
      <div class="template-link-text"><%= item.link %></div>
    </div>
  <% }); %>
</div>

Variables for Result Details templates

The following variables are available for the Result Details widget and they can be referenced from its template.

object selectedItem: Currently selected normalized document object. Read-only.
object selectedItemRaw: Currently selected original document object. Read-only.

An example is shown here.

<table id="template-details-allFields" class="table table-bordered">
  <thead>
    <tr>
      <th>Name</th>
      <th>Value</th>
    </tr>
  </thead>
  <tbody>
    <%for(let field in selectedItem){%>
    <tr>
      <td>
        <%=field%>
      </td>
      <td>
        <%=selectedItem[field]%>
      </td>
    </tr>
    <%}%>
  </tbody>
</table>

HTML template syntax

For Result List templates, you must add the template-root class to the root node of each row as shown in the example below. IBM Watson® Explorer oneWEX Application Builder searches for the class to determine the selected row when the user clicks on an item in the list. Other class names are used only for applying CSS styles.

<div class="template-list1">
  <% items.forEach(function(item){ %>
    <div class="template-root<%= item.uniqueId == selectedId ? ' template-selected' : '' %>">
      <div class="template-title"><a class="template-link" href="<%= item.link %>"><%= item.title %></a></div>
      <% if (item.date) { %>
        <div class="template-date"><b>Date:</b> <%= item.date %></div>
      <% } %>
      <div class="template-subtitle"><%- item.highlights || item.subtitle %></div>
      <div class="template-link-text"><%= item.link %></div>
    </div>
  <% }); %>
</div>

Search result normalization

Templates can access both the original search results (itemsRaw) and normalized search results (items). The original results are raw data obtained from the backend. The normalized search results are processed data that are converted form the raw data based on field mapping information in the data source definition. You can view or edit the field mappings from the Manage Data Sources page.