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:
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.
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
