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.
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:
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.
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 render data fields dynamically in a Web Part