KennyG
May 31, 2019
  4119
(4 votes)

Episerver Forms – Making Dropdown Lists Multilingual

I recently ran into an issue with Episerver Forms and multi-language. Specifically, the Selection (Dropdown) Block that is part of the Basic Elements. Things like the label and the placeholder text can be translated but the actual <options> only pull from the base language of the block. This is a deeper dive into my forum discussion.

The problem

Say you've got a new form and have added a dropdownlist (Selection Block).

If you switch to another language and edit that version of the block you aren't able to translate the items (<options>).

So either language will only show the base language options. 

Now the reasoning for this may be that you need the form's submitted value to always be the same regardless of the visitor's language.

A Solution

I decided to create a custom Culture Specific Selection block. This would allow me to use the regular Out-Of-The-Box Selection Element blocks for most cases and my custom one when I needed it. 

I inherited from SelectionElementBlock and overrode the Items:

using EPiServer.DataAbstraction;
using EPiServer.DataAnnotations;
using EPiServer.Forms.EditView.Models.Internal;
using EPiServer.Forms.Implementation.Elements;
using System.Collections.Generic;

namespace SelectionBlockExample.Models.Blocks
{
    [ContentType(
        DisplayName = "Culture Specific SelectionBlock", 
        GUID = "xxxxx",
        Description = "Use when you need the options in another language",
        GroupName = "Custom Elements")]
    public class CultureSpecificSelectionBlock : SelectionElementBlock
    {
        [CultureSpecific]
        public override IEnumerable<OptionItem> Items { get; set; }
    }
}

 I also needed to provide the view. 

<%--
    ====================================
    Version: 4.15.1. Modified: 20180726
    ====================================
--%>

<%@ import namespace="System.Web.Mvc" %>
<%@ Import Namespace="EPiServer.Shell.Web.Mvc.Html" %>
<%@ import namespace="EPiServer.Forms.Helpers.Internal" %>
<%@ import namespace="EPiServer.Forms.Implementation.Elements" %>
<%@ import namespace="SelectionBlockExample.Models.Blocks" %>
<%@ control language="C#" inherits="ViewUserControl<CultureSpecificSelectionBlock>
    " %>

    <%
    var formElement = Model.FormElement;
    var labelText = Model.Label;
    var placeholderText = Model.PlaceHolder;
    var defaultOptionItemText = !string.IsNullOrWhiteSpace(placeholderText) ? placeholderText : 
        Html.Translate(string.Format("/episerver/forms/viewmode/selection/{0}", Model.AllowMultiSelect ? "selectoptions" : "selectanoption"));
    var defaultOptionSelected = !Model.AllowMultiSelect && !Model.Items.Any(x => x.Checked.HasValue && x.Checked.Value) ? "selected=\"selected\"" : "";
    var items = Model.GetItems();
    var defaultValue = Model.GetDefaultValue();
    %>

    <% using(Html.BeginElement(Model, new { @class="FormSelection" + Model.GetValidationCssClasses(), data_f_type="selection" })) { %>
    <label for="<%: formElement.Guid %>" class="Form__Element__Caption"><%: labelText %></label>
    <select name="<%: formElement.ElementName %>" id="<%: formElement.Guid %>" <%: Model.AllowMultiSelect ? "multiple" : "" %>  <%= Model.AttributesString %> data-f-datainput>
        <option disabled="disabled" <%= defaultOptionSelected %> value=""><%: defaultOptionItemText %></option>
        <%
        foreach (var item in items)
        {
            var defaultSelectedString = Model.GetDefaultSelectedString(item, defaultValue);
            var selectedString = string.IsNullOrEmpty(defaultSelectedString) ? string.Empty : "selected";
        %>
        <option value="<%: item.Value %>" <%= selectedString %> <%= defaultSelectedString %> data-f-datainput><%: item.Caption %></option>
        <% } %>
    </select>
    <%= Html.ValidationMessageFor(Model) %>
    <% } %>

If you are new to custom FormElement blocks you need to add your view under Shared/Elementblocks.

You can copy and tweak the existing Selection block by getting the view from the EPiServer.Forms.zip file located in the modules folder.

I just had to update the view to use my new class.

Once you're ready the new Form Element should show up in the Custom Elements group.

Now use this instead of the original. 

Like I alluded to earlier, you may want the Choice to be in the selected language and the Value to always be in the base language so your submissions are consistent.

Alternative

Another alternative suggested by Paul Gruffydd was to use a initialization module to force all SelectionElementBlocks to be localizable but I like being able to give the editor the choice which element to use. 

Have your own or better solution? Let me know!

May 31, 2019

Comments

Please login to comment.
Latest blogs
The missing globe can finally be installed as a nuget package!

Do you feel like you're dying a little bit every time you need to click "Options" and then "View on Website"? Do you also miss the old "Globe" in...

Tomas Hensrud Gulla | Feb 14, 2025 | Syndicated blog

Cloudflare Edge Logs

Optimizely is introducing the ability to access Cloudflare's edge logs, which gives access to some information previously unavailable except throug...

Bob Davidson | Feb 14, 2025 | Syndicated blog

Comerce Connect calatog caching settings

A critical aspect of Commerce Connect is the caching mechanism for the product catalog, which enhances performance by reducing database load and...

K Khan | Feb 14, 2025

CMP DAM asset sync to Optimizely Graph self service

The CMP DAM integration in CMS introduced support for querying Optimizly Graph (EPiServer.Cms.WelcomeIntegration.Graph 2.0.0) for metadata such as...

Robert Svallin | Feb 13, 2025

PageCriteriaQueryService builder with Blazor and MudBlazor

This might be a stupid idea but my new years resolution was to do / test more stuff so here goes. This razor component allows users to build and...

Per Nergård (MVP) | Feb 10, 2025

Enhancing Optimizely CMS Multi-Site Architecture with Structured Isolation

The main challenge of building an Optimizely CMS website is to think about its multi site capabilities up front. Making adjustment after the fact c...

David Drouin-Prince | Feb 9, 2025 | Syndicated blog