In my previous post I gave a very high-level overview of how to tweak a Valo Display Template to render a different Title and Description field depending on the user's current language/locale settings. Now I will give you the step-by-step instructions, with screenshots.
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!
Since the Valo Search Web Part gets its data from the SharePoint search index (thus making it possible to display consolidated results from all across your intranet), we need to add some custom columns and map them to search Managed Properties.
I will show you how to add the first field.
Step 1: go to your SharePoint site settings and edit your Content Type.
Step 4: Go add some values for your new columns in a List or Library.
(You must add values to at least one page containing your new columns, or the search index will not crawl them.) Save and publish the item.
Step 5: After about ten minutes, the SharePoint search indexer will find your new data columns and auto-create Crawled Properties for them. These properties will automatically be given names named based on their data type and name, for example, "ows_txt_TitleInFrench." Before we can use these, we need to map them to Managed Properties. Go to your SharePoint Admin page and choose Other > Search > Manage the search schema. Click on the "Managed Properties" tab and then search for "refinablestring."
Step 6: Select an unused RefinableString and edit it. Number 131 (below) is not currently mapped to anything, so we'll use that.
Step 7: In the settings for your refinablestring Managed Property, provide a friendly name (alias).
Step 8: On the same page, scroll down a bit more and click "Add a Mapping" to map your Managed Property to SharePoint's auto-created crawled property.
Search for your crawled property (name will be something like "ows_txt_TitleInFrench") and click OK.
Back on the Managed Property page, click OK to save your changes.
Now your Valo Search Web Part can retrieve your custom data fields. Below are the steps to modify a display template and display your dynamic results.
Step 1: Open the Valo Partner Pack and make a clone of one of the sample Display Templates (here I'm choosing "News"). If you don't have the Partner Pack, ask your Valo implementation partner.
Step 2: Open your cloned template file in an editor such as Visual Studio Code or Notepad. In the "fields" list near the top of the file, carefully add the alias ("TitleInFrench") or the true name ("RefinableString131") of your Managed Property to the list of fields.
Step 3: Scroll down to the template portion of the file and find the place where the English version of your data column is rendered (in this case, we're looking for Title and Description). Note that in this templating system, called Handlebars, data tokens are surrounded by double curly braces.
Replace the rendering above with the HTML I'm showing below. (Note how we use a Handlebars 'equals/else' statement -- {{#eq}} -- to check whether the locale of the current page is US English, and render different fields depending on the answer.)
Step 4: Save your file and upload it to the Valo Templates repository at https://yourtenant.sharepoint.com/sites/valotemplates.
Note: when you upload your file to this templates library, it is mandatory that you give it a value for "TemplateTitle" (see below), or your web parts will not be able to locate it.
Step 5: Drop a Valo Search Web Part on your SharePoint page, set the Internal Template to nothing, and set the External Template to your custom template. Apply, publish, and you're done! (Note: if you don't see your template in the list, you'll need to clear the Valo cache and reload the page).
If all has gone well (and you have supplied values for your custom fields in all your news pages), when a user with a system set to "fr-CA" or "fr-FR" views this page, she will see the French-language fields in place of the default English ones. In our real-world case, this also works if the locale has been forcibly changed by a third-party extension like Pointfire 365.
Note that in this simple scenario, we assume any locale other than "en-US" is French; you could also specifically check for "fr." It is also a good idea to provide a fallback situation in case the locale is not recognized at all (the default case could just fall back to English).
This is a relatively simple example. You could use logical statements in your template to check all kinds of environmental conditions to make choices on what data to render, including values from the current user's profile. You could even use JavaScript to consult external conditions-- even the local weather.
