Make your own dynamic Valo Search/Universal Web Part, Part 1

How to make a Valo web part that renders different fields depending on the current preferred language (or other factors)

Valo Intranet
Digital Workplace
April 23, 2020

Update, April 28, 2020:  The Valo Search Web Part has been deprecated in Valo Modern v1.6 ("Polaris"), which dropped today. But it's not gone -- the search-driven functionality has just been moved into the Universal Web Part, to which this post still applies!

The new Modern Experience in SharePoint looks nice, and it's responsive and mobile-first. But if you want control over how your content looks, the web parts that come with Modern are sorely lacking.

The old workhorses we had in Classic SharePoint, Content Query Web Part (CQWP) and Content-by-Search Web Part (CSWP), with their customizable XSL/HTML templates, have been removed from the product. The replacement, Highlighted Content, gives you almost zero control over the appearance of each content item, whether it's an article, person, event, or something else.

Enter the Valo Search Web Part

This feature of Valo Intranet is like the old Content-by-Search Web Part, but on steroids. The concept is very simple; you place the web part on your Modern SharePoint page, then set its properties, like:

  1. The search query to execute (including filters), with the count of items returned and the sort order
  2. Which display template to use to render each result
  3. Whether to provide users a Search Box and/or Search Refiners (vs. just displaying a fixed collection of items)

The web part does the rest, retrieving the content items you asked for and rendering them using the template. Valo provides a dozen or so pre-configured templates that you can choose from, HTML snippets that use the JavaScript library Handlebars.js to render the data fields of each result. Since they are straight-up HTML and script, you can do just about anything you want with your results (sliders/carousels, simple grids, pretty tiles, etc. etc.) But the real power of the web part is that the source of all of these pre-built templates is provided to you. If you like the look of a system template, but you want slight changes (which data fields to show, how they are laid out or formatted), you can clone that HTML file, tweak it, and deploy it to your own corporate collection of templates.

What can you do with Display Templates? A real-world example

Other than swapping out data fields (e.g., the template displays the Author name but you want to substitute the Content Owner's name), what other use cases are there for tweaking display templates? Glad you asked. We had a Canadian Valo customer recently who wanted their entire Valo Modern intranet to be bilingual (English and French). There are various tools you can buy to create pages and UI chrome in more than one language (one available from Valo itself). But the model most tools provide is "variations" -- meaning multiple pages, one for each language -- and this doesn't take into account the Page Comments feature. Our customer wanted all page comments to be contained in a single "conversation", but in the Variations model, the pages are unique, and you would need to navigate to multiple pages to see all the comments for that story.

To get around this, the customer jettisoned variations and went with bilingual pages -- content zones in both languages are mixed on the page, and only the appropriate language is shown to each user. Now there was a single comments thread per article, albeit in mixed languages.

However, since the Title and Description of each article are single data fields (in English), when a list of articles is displayed in a "rollup" web part, how do we show an alternate French title to French-language users? Showing both languages to every use is cluttered and clunky. This is where Valo Display Templates come in. We could continue to use the same News Tiles, News Carousel and News List web parts (all just instances of the Valo Search Part), but tweak the underlying template to render different fields dynamically, depending on the current user's locale settings.

How we did it

Creating a single web part that dynamically displays different fields (of the same content item) required the following steps.

This is a quick summary so you can get the big picture; I will provide the detailed steps with screenshots in Part 2 of this post. If the first four steps are too daunting, or you don't have permissions to do them, your SharePoint Administrator can do this part for you.

Steps to get your custom data fields into the search index

  1. Add new Site Columns ('French Title' and 'French Description') to the Site Content Type "Valo News Page"
  2. Add a test News Page to your Site Pages Library (or pick an existing News Page) and type in values for the new Columns
  3. Wait a few minutes for your new values to get crawled, then go to your SharePoint Admin Panel and find the new Crawled Properties
  4. Map each Crawled Property to an unused Refinable String Managed Property (e.g., "RefinableString130" and "RefinableString131"). You can optionally give your properties meaningful aliases in this step.

Steps to render data fields dynamically in a Web Part

  • Take a copy of one of the news-related Display Templates from the Valo Partner Pack and open it in a text editor like Visual Studio Code or Notepad.
  • Scroll down to the content template part of the template file and find the spot where {{Title}} and {{Description}} are rendered. Replace the text from the first screenshot below with the text from the second screenshot (note that I used aliases here):
  • Save your file and upload it to your Valo Templates site ( with a unique template name.
  • Deploy a Valo Search Web Part on a page, and set it to use your new template. That's it! Of course, this is a minor tweak; you can create your own templates that render your SharePoint content in any way you choose, in carousels or whatever other client-side display widgets you find online.

Back to blog home
30-Day Quickstart
Almost all of our offerings are available as a clearly defined, 30-Day Quickstart. We always provide a free initial scoping session with recommendations.