Hello and welcome to this tutorial on how to tailor the display of search results using the Mindbreeze InSpire Insight App Designer.

Goal

Our goal is to extend the default Mindbreeze result list widget so that we display each productname mentioned in the result as a badge above the context actions of the result.

Modifying the Insight App

Now, let's modify the Insight App we have prepared so that the productnames mentioned in each result are displayed as a badge above the context actions, such as the "preview" or "open" button.

Editing the Result List Widget

To do this, we click on the Edit button of the result list widget, scroll down to the code representation, and search for the implementation of the context actions.

Here, we can see the <ul class='mb-actions... '> container.

Adding Product Names as Badges

We aim to add a representation of our productnames above the actions. The representation is implemented using a Mustache template foreach loop.

To implement the representation of each product, we use the Bootstrap framework.

{{#productname.data}} 
<span class="badge badge-primary">{{value}}</span>
{{/productname.data}} 

Bootstrap and many other frameworks are available out of the box within the Insight App Designer, so we can use them right away in our Insight App implementation.

Previewing and Publishing

Simply clicking anywhere in the designer will automatically reload the preview, and we'll immediately see the changes reflected in the search results.

Once we are satisfied, we publish the results.

Final Review

Returning to the Insight App, we can now see that our update has been successfully applied!