Dynamic Text Highlighting

With Answers Search UI SDK 1.8 and Answers Hitchhiker Theme 1.20, we’ve made it easier to add Dynamic Text Highlighting with our isHighlighted utility function and highlightField formatter.

Use these two new formatters to check if a certain field is highlighted, and if so, display it on your card! This is to cover the case where you have textSearch or documentSearch on a field, but it’s not displayed in your card by default. To do this:

  1. Fork the card where you’d like the dynamic highlighting displayed.

  2. In your component.js, add a variable in your dataForRender for the dynamicHighlights. In this example, we’ll say that our “c_awards” field has textSearch applied, but it’s not shown in the card by default. We know that c_awards is a single line text field (not a list)

   //check if "c_awards" is highlighted
   var dynamicHighlights = [];
   if (HitchhikerJS.isHighlighted("c_awards", profile.d_highlightedFields)) {

     const fullHighlight = profile.d_highlightedFields["c_awards"];
     dynamicHighlights.push({
           "fieldName": "Awards",
           "value": Formatter.highlightField(fullHighlight.value, fullHighlight.matchedSubstrings)
       });
     
   }
  1. Add that dynamicHighlights field to your return statement: highlightedField: dynamicHighlights,. Your dataForRender in your component.js should look something like this:
dataForRender(profile) {
 
  //check if "c_awards" is highlighted
   var dynamicHighlights = [];
   if (HitchhikerJS.isHighlighted("c_awards", profile.d_highlightedFields)) {
     const fullHighlight = profile.d_highlightedFields["c_awards"];
     dynamicHighlights.push({
           "fieldName": "Awards",
           "value": Formatter.highlightField(fullHighlight.value, fullHighlight.matchedSubstrings)
       });
     
   }
 
   return {
     title: profile.name, // The header text of the card
     url: profile.website || profile.landingPageUrl, 
     target: '_top', // If the title's URL should open in a new tab, etc.
     titleEventOptions: this.addDefaultEventOptions(),
     details: profile.description, // The text in the body of the card
     highlightedField: dynamicHighlights, //new
     showMoreDetails: {
       showMoreLimit: 750, // Character count limit
       showMoreText: 'Show more', // Label when toggle will show truncated text
       showLessText: 'Show less' // Label when toggle will hide truncated text
     }
   };
 }
  1. Add the highlights to your template.js file:
<div class="HitchhikerStandard {{cardName}}">
 {{> image }}
 <div class="HitchhikerStandard-body">
   {{> title }}
   {{> subtitle }}
   <div class="HitchhikerStandard-contentWrapper">
     <div class="HitchhikerStandard-info">
       {{> details }}
       {{> highlightedField }}
     </div>
     {{> ctas }}
   </div>
 </div>
</div>
 
{{#*inline 'highlightedField'}}
{{#if card.highlightedField}}
<ul class="highlights">
 {{#each card.highlightedField}}
   <li class="highlight">"{{this.fieldName}}" mentions {{{this.value}}}</li>
 {{/each}}
</ul>
{{/if}}
{{/inline}}
{{!-- other partials below --}}

With this addition, the awards field will only appear on the card if it returns as a full text match.

List fields work very similarly – in step 2, you’d need to iterate through the items before adding them to your dynamicHighlights array. Here’s an example of adding dynamic highlights with the “Languages” built in field:

    if (profile.d_highlightedFields["languages"]) {
      const fullHighlight = profile.d_highlightedFields["languages"];
      for (const item in fullHighlight) {
        if (fullHighlight[item].matchedSubstrings && fullHighlight[item].matchedSubstrings.length > 0) {
          dynamicHighlights.push({
              "fieldName": "Languages",
              "value": Formatter.highlightField(fullHighlight[item].value, fullHighlight[item].matchedSubstrings)
            });
        }
      };
    }

:spiral_calendar: This feature is available in Early Access. Here’s how to use the Early Access branches of the Theme and SDK!

6 Likes

Excited to try this function out!