diff --git a/corehq/apps/app_manager/app_strings.py b/corehq/apps/app_manager/app_strings.py
index 89fa5f8f18f6..b3c0b30179b1 100644
--- a/corehq/apps/app_manager/app_strings.py
+++ b/corehq/apps/app_manager/app_strings.py
@@ -155,7 +155,7 @@ def _create_module_details_app_strings(module, langs):
                 clean_trans(column.header, langs)
             )
 
-            if column.format in ('enum', 'conditional-enum', 'enum-image', 'clickable-icon'):
+            if column.format in ('enum', 'conditional-enum', 'enum-image', 'clickable-icon', 'translatable-enum'):
                 for item in column.enum:
                     yield (
                         id_strings.detail_column_enum_variable(
diff --git a/corehq/apps/app_manager/detail_screen.py b/corehq/apps/app_manager/detail_screen.py
index 7c418ad9eb33..669f19b9fd11 100644
--- a/corehq/apps/app_manager/detail_screen.py
+++ b/corehq/apps/app_manager/detail_screen.py
@@ -142,8 +142,7 @@ def template(self):
             form=self.template_form,
             width=self.template_width,
         )
-
-        if self.column.useXpathExpression:
+        if self.column.useXpathExpression and self.column.format != 'translatable-enum':
             xpath = sx.CalculatedPropertyXPath(function=self.xpath)
             if re.search(r'\$lang', self.xpath):
                 xpath.variables.node.append(
@@ -192,8 +191,9 @@ def sort_node(self):
                             locale_id=self.id_strings.current_language()
                         ).node
                     )
-                xpath_variable = sx.XPathVariable(name='calculated_property', xpath=xpath)
-                sort.text.xpath.variables.node.append(xpath_variable.node)
+                if self.column.format != 'translatable-enum':
+                    xpath_variable = sx.XPathVariable(name='calculated_property', xpath=xpath)
+                    sort.text.xpath.variables.node.append(xpath_variable.node)
 
         if self.sort_element:
             if not sort:
@@ -307,7 +307,8 @@ def fields(self):
                 endpoint_action=self.action,
                 alt_text=self.alt_text,
             )
-        elif self.sort_xpath_function and self.detail.display == 'short':
+        elif (self.sort_xpath_function and self.detail.display == 'short'
+              and self.column.format != 'translatable-enum'):
             yield sx.Field(
                 style=self.style,
                 header=self.header,
@@ -517,6 +518,30 @@ def _xpath_template_context(self, type):
         }
 
 
+@register_format_type('translatable-enum')
+class TranslatableEnum(Enum):
+    @property
+    def sort_node(self):
+        node = super(TranslatableEnum, self).sort_node
+        if node:
+            variables = self.variables
+            for key in variables:
+                node.text.xpath.node.append(
+                    sx.XPathVariable(name=key, locale_id=variables[key]).node
+                )
+        return node
+
+    def _make_xpath(self, type):
+        return sx.XPathEnum.build(
+            enum=self.column.enum,
+            format=self.column.format,
+            type=type,
+            template=None,
+            get_template_context=lambda: {'calculated_property': self.xpath},
+            get_value=lambda key: self.id_strings.detail_column_enum_variable(self.module, self.detail_type,
+                                                                              self.column, key))
+
+
 @register_format_type('late-flag')
 class LateFlag(HideShortHeaderColumn):
     template_width = "11%"
diff --git a/corehq/apps/app_manager/static/app_manager/js/details/column.js b/corehq/apps/app_manager/static/app_manager/js/details/column.js
index b0ce9092260b..166f83d166e0 100644
--- a/corehq/apps/app_manager/static/app_manager/js/details/column.js
+++ b/corehq/apps/app_manager/static/app_manager/js/details/column.js
@@ -1,3 +1,4 @@
+'use strict';
 /**
  * Model for a column in the Display Properties section of case list/detail.
  *
@@ -231,6 +232,9 @@ hqDefine("app_manager/js/details/column", function () {
                     }
                 }
             }
+        } else {
+            // Restrict Translatable Text usage to Calculated Properties only
+            menuOptions.splice(-1);
         }
 
         self.format = uiElement.select(menuOptions).val(self.original.format || null);
@@ -245,6 +249,7 @@ hqDefine("app_manager/js/details/column", function () {
                 multimedia: self.screen.config.multimedia,
                 values_are_icons: self.original.format === 'enum-image',
                 keys_are_conditions: self.original.format === 'conditional-enum',
+                values_are_translatable: self.original.format === 'translatable-enum',
             };
             self.enum_extra = uiElement.key_value_mapping(o);
         }());
@@ -394,9 +399,11 @@ hqDefine("app_manager/js/details/column", function () {
                         fireChange();
                     });
                     self.date_extra.value = format.val();
-                } else if (this.val() === "enum" || this.val() === "enum-image" || this.val() === 'conditional-enum') {
+                } else if (this.val() === "enum" || this.val() === "enum-image"
+                           || this.val() === 'conditional-enum' || this.val() === 'translatable-enum') {
                     self.enum_extra.values_are_icons(this.val() === 'enum-image');
                     self.enum_extra.keys_are_conditions(this.val() === 'conditional-enum');
+                    self.enum_extra.values_are_translatable(this.val() === 'translatable-enum');
                     self.format.ui.parent().append(self.enum_extra.ui);
                 } else if (this.val() === "clickable-icon") {
                     self.enum_extra.values_are_icons(true);
diff --git a/corehq/apps/app_manager/static/app_manager/js/details/utils.js b/corehq/apps/app_manager/static/app_manager/js/details/utils.js
index f79db7b6e21a..73ee985c0a7b 100644
--- a/corehq/apps/app_manager/static/app_manager/js/details/utils.js
+++ b/corehq/apps/app_manager/static/app_manager/js/details/utils.js
@@ -1,3 +1,4 @@
+'use strict';
 /* globals DOMPurify */
 /**
  * Contains a few UI utilities for the Display Properties
@@ -80,6 +81,12 @@ hqDefine("app_manager/js/details/utils", function () {
                 label: gettext('Conditional ID Mapping'),
             });
         }
+        if (addOns.calc_xpaths) {
+            formats.push({
+                value: "translatable-enum",
+                label: gettext('Translatable Text'),
+            });
+        }
 
         if (hqImport('hqwebapp/js/toggles').toggleEnabled('VELLUM_CASE_MICRO_IMAGE')) {
             formats.push({
diff --git a/corehq/apps/app_manager/suite_xml/case_tile_templates/bha_referrals.xml b/corehq/apps/app_manager/suite_xml/case_tile_templates/bha_referrals.xml
index 9abd4cae34d0..ca84f4ec0792 100644
--- a/corehq/apps/app_manager/suite_xml/case_tile_templates/bha_referrals.xml
+++ b/corehq/apps/app_manager/suite_xml/case_tile_templates/bha_referrals.xml
@@ -4,7 +4,9 @@
       <locale id="{title_text_id}"/>
     </text>
   </title>
-
+  <variables>
+    {custom_variables}
+  </variables>
   <field>
     <style horz-align="left" vert-align="center" font-size="small">
       <grid grid-height="1" grid-width="12" grid-x="0" grid-y="0"/>
diff --git a/corehq/apps/app_manager/suite_xml/case_tile_templates/icon_text_grid.xml b/corehq/apps/app_manager/suite_xml/case_tile_templates/icon_text_grid.xml
index 687eaba9541e..54e827ae641b 100644
--- a/corehq/apps/app_manager/suite_xml/case_tile_templates/icon_text_grid.xml
+++ b/corehq/apps/app_manager/suite_xml/case_tile_templates/icon_text_grid.xml
@@ -4,7 +4,9 @@
       <locale id="{title_text_id}"/>
     </text>
   </title>
-
+  <variables>
+    {custom_variables}
+  </variables>
   <field>
     <style horz-align="center" vert-align="top" font-size="small">
       <grid grid-height="1" grid-width="1" grid-x="0" grid-y="0" />
diff --git a/corehq/apps/app_manager/suite_xml/case_tile_templates/one_3X_two_4X_one_2X.xml b/corehq/apps/app_manager/suite_xml/case_tile_templates/one_3X_two_4X_one_2X.xml
index 83b0c50fa988..0517508b9222 100644
--- a/corehq/apps/app_manager/suite_xml/case_tile_templates/one_3X_two_4X_one_2X.xml
+++ b/corehq/apps/app_manager/suite_xml/case_tile_templates/one_3X_two_4X_one_2X.xml
@@ -4,7 +4,9 @@
       <locale id="{title_text_id}"/>
     </text>
   </title>
-
+  <variables>
+    {custom_variables}
+  </variables>
   <field>
     <style horz-align="left" vert-align="center" font-size="small" show-border="true">
       <grid grid-height="1" grid-width="12" grid-x="0" grid-y="0"/>
diff --git a/corehq/apps/app_manager/suite_xml/case_tile_templates/one_one_two.xml b/corehq/apps/app_manager/suite_xml/case_tile_templates/one_one_two.xml
index 4e94c37ed1a1..97ac984d12f1 100644
--- a/corehq/apps/app_manager/suite_xml/case_tile_templates/one_one_two.xml
+++ b/corehq/apps/app_manager/suite_xml/case_tile_templates/one_one_two.xml
@@ -4,7 +4,9 @@
       <locale id="{title_text_id}"/>
     </text>
   </title>
-
+  <variables>
+    {custom_variables}
+  </variables>
   <field>
     <style
         horz-align="left"
diff --git a/corehq/apps/app_manager/suite_xml/case_tile_templates/one_two_one.xml b/corehq/apps/app_manager/suite_xml/case_tile_templates/one_two_one.xml
index 4524f17fbb1f..d363dccd776b 100644
--- a/corehq/apps/app_manager/suite_xml/case_tile_templates/one_two_one.xml
+++ b/corehq/apps/app_manager/suite_xml/case_tile_templates/one_two_one.xml
@@ -4,7 +4,9 @@
       <locale id="{title_text_id}"/>
     </text>
   </title>
-
+  <variables>
+    {custom_variables}
+  </variables>
   <field>
     <style horz-align="left" vert-align="center" font-size="medium">
       <grid grid-height="1" grid-width="12" grid-x="0" grid-y="0"/>
diff --git a/corehq/apps/app_manager/suite_xml/case_tile_templates/one_two_one_one.xml b/corehq/apps/app_manager/suite_xml/case_tile_templates/one_two_one_one.xml
index 5744ae446749..9d9eb39bbba3 100644
--- a/corehq/apps/app_manager/suite_xml/case_tile_templates/one_two_one_one.xml
+++ b/corehq/apps/app_manager/suite_xml/case_tile_templates/one_two_one_one.xml
@@ -4,7 +4,9 @@
       <locale id="{title_text_id}"/>
     </text>
   </title>
-
+  <variables>
+    {custom_variables}
+  </variables>
   <field>
     <style horz-align="left" vert-align="center" font-size="small">
       <grid grid-height="1" grid-width="12" grid-x="0" grid-y="0"/>
diff --git a/corehq/apps/app_manager/suite_xml/case_tile_templates/one_two_two.xml b/corehq/apps/app_manager/suite_xml/case_tile_templates/one_two_two.xml
index 9149430476b0..ffb808d2058b 100644
--- a/corehq/apps/app_manager/suite_xml/case_tile_templates/one_two_two.xml
+++ b/corehq/apps/app_manager/suite_xml/case_tile_templates/one_two_two.xml
@@ -4,7 +4,9 @@
       <locale id="{title_text_id}"/>
     </text>
   </title>
-
+  <variables>
+    {custom_variables}
+  </variables>
   <field>
     <style
         horz-align="center"
diff --git a/corehq/apps/app_manager/suite_xml/case_tile_templates/person_simple.xml b/corehq/apps/app_manager/suite_xml/case_tile_templates/person_simple.xml
index f18aefbd8d3b..3d0483f6df56 100644
--- a/corehq/apps/app_manager/suite_xml/case_tile_templates/person_simple.xml
+++ b/corehq/apps/app_manager/suite_xml/case_tile_templates/person_simple.xml
@@ -4,7 +4,9 @@
       <locale id="{title_text_id}"/>
     </text>
   </title>
-
+  <variables>
+    {custom_variables}
+  </variables>
   <action>
     <display>
       <text>
diff --git a/corehq/apps/app_manager/suite_xml/features/case_tiles.py b/corehq/apps/app_manager/suite_xml/features/case_tiles.py
index 9d0b613d6b57..7d7f249eeace 100644
--- a/corehq/apps/app_manager/suite_xml/features/case_tiles.py
+++ b/corehq/apps/app_manager/suite_xml/features/case_tiles.py
@@ -11,7 +11,7 @@
 from corehq.apps.app_manager import id_strings
 from corehq.apps.app_manager.exceptions import SuiteError
 from corehq.apps.app_manager.suite_xml.xml_models import (
-    Detail, XPathVariable, TileGroup, Style, EndpointAction
+    Detail, DetailVariable, XPathVariable, TileGroup, Style, EndpointAction
 )
 
 TILE_DIR = Path(__file__).parent.parent / "case_tile_templates"
@@ -113,6 +113,7 @@ def build_case_tile_detail(self, detail, start, end):
             for template_field in case_tile_template_config(self.detail.case_tile_template).fields:
                 column = self._get_matched_detail_column(template_field)
                 context[template_field] = self._get_column_context(column)
+            context['custom_variables'] = self._get_custom_variables(self.detail.custom_variables_dict)
 
             # Populate the template
             detail_as_string = self._case_tile_template_string.format(**context)
@@ -181,14 +182,14 @@ def _get_column_context(self, column):
             "prefix": escape(
                 column.header.get(default_lang, "")
             ),
-            "format": column.format
+            "format": column.format,
+            "variables": '',
+            "endpoint_action": '',
         }
 
-        context['variables'] = ''
-        if column.format in ["enum", "conditional-enum", "enum-image", "clickable-icon"]:
+        if column.format in ["enum", "conditional-enum", "enum-image", "clickable-icon", "translatable-enum"]:
             context["variables"] = self._get_enum_variables(column)
 
-        context['endpoint_action'] = ''
         if column.endpoint_action_id:
             context["endpoint_action"] = self._get_endpoint_action(column.endpoint_action_id)
         return context
@@ -200,6 +201,10 @@ def _get_xpath_function(self, column):
         else:
             xpath_function = self._escape_xpath_function(get_column_generator(
                 self.app, self.module, self.detail, column).xpath_function)
+        if column.format == "translatable-enum":
+            for enum in column.enum:
+                if enum.key in xpath_function and 'k' + enum.key not in xpath_function:
+                    xpath_function = xpath_function.replace(enum.key, 'k' + enum.key)
         return xpath_function
 
     @staticmethod
@@ -274,3 +279,15 @@ def _compare_fields_by_order(initial_field, incoming_field):
         elif initial_field.sort_node.order is None:
             return incoming_field
         return min(initial_field, incoming_field, key=lambda field: field.sort_node.order)
+
+    @staticmethod
+    def _get_custom_variables(custom_var_dict):
+        variables = []
+        for var_name, var_function in custom_var_dict.items():
+            variables.append(
+                DetailVariable(
+                    name=var_name,
+                    function=var_function
+                ).serialize()
+            )
+        return ''.join([bytes(variable).decode('utf-8') for variable in variables])
diff --git a/corehq/apps/app_manager/suite_xml/xml_models.py b/corehq/apps/app_manager/suite_xml/xml_models.py
index 02b7890f4604..b1165c04843b 100644
--- a/corehq/apps/app_manager/suite_xml/xml_models.py
+++ b/corehq/apps/app_manager/suite_xml/xml_models.py
@@ -91,14 +91,23 @@ def build(cls, enum, format, type, template, get_template_context, get_value):
             v_val = get_value(v_key)
             variables.append(XPathVariable(name=v_key, locale_id=v_val))
         parts = []
-        for i, item in enumerate(enum):
-            template_context = get_template_context(item, i)
-            parts.append(template.format(**template_context))
+        if format == 'translatable-enum':
+            calculated_property = get_template_context()['calculated_property']
+            # converting variables into suite.xml recognized variables (i.e. $variable > $kvariable)
+            for item in enum:
+                key = item.key_as_variable
+                if key[1:] in calculated_property:
+                    calculated_property = calculated_property.replace(key[1:], key)
+            parts.append(calculated_property)
+        else:
+            for i, item in enumerate(enum):
+                template_context = get_template_context(item, i)
+                parts.append(template.format(**template_context))
         if type == "display" and format == "enum":
             parts.insert(0, "replace(join(' ', ")
             parts[-1] = parts[-1][:-2]  # removes extra comma from last string
             parts.append("), '\\s+', ' ')")
-        else:
+        elif format != "translatable-enum":
             parts.append("''")
             parts.append(")" * len(enum))
 
diff --git a/corehq/apps/app_manager/tests/data/suite/suite-case-detail-instances.xml b/corehq/apps/app_manager/tests/data/suite/suite-case-detail-instances.xml
index 3f6a2d9953bc..4826f0ddf588 100644
--- a/corehq/apps/app_manager/tests/data/suite/suite-case-detail-instances.xml
+++ b/corehq/apps/app_manager/tests/data/suite/suite-case-detail-instances.xml
@@ -117,6 +117,9 @@
         <locale id="cchq.case"/>
       </text>
     </title>
+    <variables>
+
+    </variables>
     <action>
     	<display>
 	      <text>
diff --git a/corehq/apps/app_manager/tests/data/suite/suite-case-tiles.xml b/corehq/apps/app_manager/tests/data/suite/suite-case-tiles.xml
index d935c53b3225..43c65c56c734 100644
--- a/corehq/apps/app_manager/tests/data/suite/suite-case-tiles.xml
+++ b/corehq/apps/app_manager/tests/data/suite/suite-case-tiles.xml
@@ -30,6 +30,9 @@
         <locale id="cchq.case"/>
       </text>
     </title>
+    <variables>
+
+    </variables>
     <action>
     	<display>
 	      <text>
diff --git a/corehq/apps/app_manager/tests/test_suite_formats.py b/corehq/apps/app_manager/tests/test_suite_formats.py
index cbbb1d8b69ee..b92b3ee076c6 100644
--- a/corehq/apps/app_manager/tests/test_suite_formats.py
+++ b/corehq/apps/app_manager/tests/test_suite_formats.py
@@ -177,6 +177,76 @@ def test_case_detail_calculated_conditional_enum(self, *args):
             'Girl'
         )
 
+    def _create_app_for_translatable_text(self):
+        app = Application.new_app('domain', 'Untitled Application')
+
+        module = app.add_module(Module.new_module('Unititled Module', None))
+        module.case_type = 'food'
+        fruit1 = "fruit1"
+        fruit2 = "fruit2"
+
+        module.case_details.short.columns = [
+            DetailColumn(
+                header={'en': 'Fruit'},
+                model='case',
+                field='concat("3 ", $k{key1_varname}, " and 2 ", $k{key2_varname})',
+                format='translatable-enum',
+                enum=[
+                    MappingItem(key=fruit1, value={'en': 'Apple', 'es': 'Manzana'}),
+                    MappingItem(key=fruit2, value={'en': 'Orange', 'es': 'Naranja'}),
+                ],
+            ),
+        ]
+        return app, fruit1, fruit2
+
+    def test_case_detail_translatable_text(self):
+        app, fruit1, fruit2 = self._create_app_for_translatable_text()
+
+        calculated_prop = "concat(&quot;3 &quot;, $k{key1_varname}, &quot; and 2 &quot;, $k{key2_varname})"
+
+        translatable_case_tile_text = """
+        <partial>
+          <template>
+            <text>
+              <xpath function="{calculated_prop}">
+                <variable name="k{key1_varname}">
+                  <locale id="m0.case_short.case_{calculated_prop}_1.enum.k{key1_varname}"/>
+                </variable>
+                <variable name="k{key2_varname}">
+                  <locale id="m0.case_short.case_{calculated_prop}_1.enum.k{key2_varname}"/>
+                </variable>
+              </xpath>
+            </text>
+          </template>
+        </partial>
+        """.format(
+            key1_varname=fruit1,
+            key2_varname=fruit2,
+            calculated_prop=calculated_prop
+        )
+        self.assertXmlPartialEqual(
+            translatable_case_tile_text,
+            app.create_suite(),
+            './detail[@id="m0_case_short"]/field/template'
+        )
+
+    def test_translatable_text_in_app_strings(self):
+        app, fruit1, _ = self._create_app_for_translatable_text()
+        calculated_prop_unescaped = 'concat("3 ", $k{key1_varname}, " and 2 ", $k{key2_varname})'
+
+        app_strings = commcare_translations.loads(app.create_app_strings('en'))
+        self.assertEqual(
+            app_strings['m0.case_short.case_{calculated_prop}_1.enum.k{key1_varname}'.format(
+                key1_varname=fruit1, calculated_prop=calculated_prop_unescaped)],
+            'Apple'
+        )
+        app_strings = commcare_translations.loads(app.create_app_strings('es'))
+        self.assertEqual(
+            app_strings['m0.case_short.case_{calculated_prop}_1.enum.k{key1_varname}'.format(
+                key1_varname=fruit1, calculated_prop=calculated_prop_unescaped)],
+            'Manzana'
+        )
+
     def test_case_detail_icon_mapping(self, *args):
         app = Application.new_app('domain', 'Untitled Application')
 
diff --git a/corehq/apps/app_manager/tests/test_suite_sorting.py b/corehq/apps/app_manager/tests/test_suite_sorting.py
index f196fa31e286..1b7bee7eeb8f 100644
--- a/corehq/apps/app_manager/tests/test_suite_sorting.py
+++ b/corehq/apps/app_manager/tests/test_suite_sorting.py
@@ -4,12 +4,14 @@
     Application,
     CaseSearch,
     CaseSearchProperty,
-    SortElement, DetailColumn,
+    DetailColumn,
+    MappingItem,
+    SortElement,
 )
+
 from corehq.apps.app_manager.tests.app_factory import AppFactory
 from corehq.apps.app_manager.tests.util import (
     SuiteMixin,
-    TestXmlMixin,
     patch_get_xform_resource_overrides,
 )
 
@@ -176,3 +178,67 @@ def test_calculated_property_as_sort_property(self):
             </field>
         </partial>
         """, suite, "detail[1]/field[3]")
+
+    def test_calculated_property_with_translatable_text_as_sort_property(self):
+        factory = AppFactory(build_version='2.3.0')
+        module, form = factory.new_basic_module("my_module", None)
+        factory.form_requires_case(form)
+
+        module.case_details.short.display = 'short'
+        module.case_details.short.columns = [
+            DetailColumn(
+                header={'en': 'a'},
+                model='case',
+                field='a',
+                format='plain',
+                case_tile_field='header'
+            ),
+            DetailColumn(
+                header={'en': 'Fruit'},
+                model='case',
+                field='concat("3 ", $kfruit1)',
+                format='translatable-enum',
+                enum=[
+                    MappingItem(key='fruit1', value={'en': 'Apple', 'es': 'Manzana'}),
+                ],
+            ),
+        ]
+
+        module.case_details.short.sort_elements = [
+            SortElement(
+                field='concat("3 ", $kfruit1)',
+                type='string',
+                direction='descending',
+                blanks='first',
+            )
+        ]
+
+        self.assertXmlPartialEqual("""
+            <partial>
+                <field>
+                  <header>
+                    <text>
+                      <locale id="m0.case_short.case_concat(&quot;3 &quot;, $kfruit1)_2.header"/>
+                    </text>
+                  </header>
+                  <template>
+                    <text>
+                      <xpath function="concat(&quot;3 &quot;, $kkfruit1)">
+                        <variable name="kfruit1">
+                          <locale id="m0.case_short.case_concat(&quot;3 &quot;, $kfruit1)_2.enum.kfruit1"/>
+                        </variable>
+                      </xpath>
+                    </text>
+                  </template>
+                  <sort type="string" order="1" direction="descending" blanks="first">
+                    <text>
+                      <xpath function="concat(&quot;3 &quot;, $kkfruit1)">
+                        <variable name="kfruit1">
+                          <locale id="m0.case_short.case_concat(&quot;3 &quot;, $kfruit1)_2.enum.kfruit1"/>
+                        </variable>
+                      </xpath>
+                    </text>
+                  </sort>
+                </field>
+            </partial>
+            """, factory.app.create_suite(), 'detail/field[2]')
diff --git a/corehq/apps/hqwebapp/static/hqwebapp/js/ui_elements/bootstrap3/ui-element-key-val-mapping.js b/corehq/apps/hqwebapp/static/hqwebapp/js/ui_elements/bootstrap3/ui-element-key-val-mapping.js
index 0ee10542e53f..89365cc19c89 100644
--- a/corehq/apps/hqwebapp/static/hqwebapp/js/ui_elements/bootstrap3/ui-element-key-val-mapping.js
+++ b/corehq/apps/hqwebapp/static/hqwebapp/js/ui_elements/bootstrap3/ui-element-key-val-mapping.js
@@ -160,6 +160,7 @@ hqDefine('hqwebapp/js/ui_elements/bootstrap3/ui-element-key-val-mapping', functi
             'module_id',
             'multimedia',
             'values_are_icons',
+            'values_are_translatable',
         ]);
 
         var self = {};
@@ -170,6 +171,7 @@ hqDefine('hqwebapp/js/ui_elements/bootstrap3/ui-element-key-val-mapping', functi
         self.duplicatedItems = ko.observableArray();
         self.values_are_icons = ko.observable(options.values_are_icons || false);
         self.keys_are_conditions = ko.observable(options.keys_are_conditions || false);
+        self.values_are_translatable = ko.observable(options.values_are_translatable || false);
         self.multimedia = options.multimedia;
 
         self.getPropertyName = function () {
@@ -194,6 +196,13 @@ hqDefine('hqwebapp/js/ui_elements/bootstrap3/ui-element-key-val-mapping', functi
                     addButton: gettext('Add Key, Value Mapping'),
                     badXML: gettext('Calculation contains an invalid character.'),
                 };
+            } else if (self.values_are_translatable()) {
+                return {
+                    placeholder: gettext('Key'),
+                    duplicated: gettext('This key is already defined'),
+                    addButton: gettext('Add Key, Translation Mapping'),
+                    badXML: gettext('Key contains invalid characters.'),
+                };
             } else {
                 return {
                     placeholder: gettext('Key'),
@@ -262,8 +271,10 @@ hqDefine('hqwebapp/js/ui_elements/bootstrap3/ui-element-key-val-mapping', functi
             if (self.values_are_icons() || self.keys_are_conditions()) {
                 // Expressions can contain whatever
                 return false;
+            } else if (self.values_are_translatable()) {
+                // Keys should only be letters, numbers, - and _
+                return key.match(/[^A-Za-z0-9-_]/);
             }
-
             // IDs shouldn't have invalid XML characters
             return key.match(/[&<>"']/);
         };
@@ -300,6 +311,7 @@ hqDefine('hqwebapp/js/ui_elements/bootstrap3/ui-element-key-val-mapping', functi
         m.buttonText = options.buttonText || gettext("Edit"),
         m.values_are_icons = ko.observable(options.values_are_icons || false);
         m.keys_are_conditions = ko.observable(options.keys_are_conditions || false);
+        m.values_are_translatable = ko.observable(options.values_are_translatable || false);
         m.openModal = function () {
             // create a throw-away modal every time
             // lets us create a sandbox for editing that you can cancel
@@ -312,6 +324,7 @@ hqDefine('hqwebapp/js/ui_elements/bootstrap3/ui-element-key-val-mapping', functi
                 items: m.getItems(),
                 values_are_icons: m.values_are_icons(),
                 keys_are_conditions: m.keys_are_conditions(),
+                values_are_translatable: m.values_are_translatable(),
                 multimedia: m.multimedia,
                 property_name: options.property_name,
             });
diff --git a/corehq/apps/hqwebapp/static/hqwebapp/js/ui_elements/bootstrap5/ui-element-key-val-mapping.js b/corehq/apps/hqwebapp/static/hqwebapp/js/ui_elements/bootstrap5/ui-element-key-val-mapping.js
index 8d7ac3e637d3..c52b59e8c5c5 100644
--- a/corehq/apps/hqwebapp/static/hqwebapp/js/ui_elements/bootstrap5/ui-element-key-val-mapping.js
+++ b/corehq/apps/hqwebapp/static/hqwebapp/js/ui_elements/bootstrap5/ui-element-key-val-mapping.js
@@ -160,6 +160,7 @@ hqDefine('hqwebapp/js/ui_elements/bootstrap5/ui-element-key-val-mapping', functi
             'module_id',
             'multimedia',
             'values_are_icons',
+            'values_are_translatable',
         ]);
 
         var self = {};
@@ -170,6 +171,7 @@ hqDefine('hqwebapp/js/ui_elements/bootstrap5/ui-element-key-val-mapping', functi
         self.duplicatedItems = ko.observableArray();
         self.values_are_icons = ko.observable(options.values_are_icons || false);
         self.keys_are_conditions = ko.observable(options.keys_are_conditions || false);
+        self.values_are_translatable = ko.observable(options.values_are_translatable || false);
         self.multimedia = options.multimedia;
 
         self.getPropertyName = function () {
@@ -194,6 +196,13 @@ hqDefine('hqwebapp/js/ui_elements/bootstrap5/ui-element-key-val-mapping', functi
                     addButton: gettext('Add Key, Value Mapping'),
                     badXML: gettext('Calculation contains an invalid character.'),
                 };
+            } else if (self.values_are_translatable()) {
+                return {
+                    placeholder: gettext('Key'),
+                    duplicated: gettext('This key is already defined'),
+                    addButton: gettext('Add Key, Translation Mapping'),
+                    badXML: gettext('Key contains invalid characters.'),
+                };
             } else {
                 return {
                     placeholder: gettext('Key'),
@@ -262,8 +271,10 @@ hqDefine('hqwebapp/js/ui_elements/bootstrap5/ui-element-key-val-mapping', functi
             if (self.values_are_icons() || self.keys_are_conditions()) {
                 // Expressions can contain whatever
                 return false;
+            } else if (self.values_are_translatable()) {
+                // Keys should only be letters, numbers, - and _
+                return key.match(/[^A-Za-z0-9-_]/);
             }
-
             // IDs shouldn't have invalid XML characters
             return key.match(/[&<>"']/);
         };
@@ -300,6 +311,7 @@ hqDefine('hqwebapp/js/ui_elements/bootstrap5/ui-element-key-val-mapping', functi
         m.buttonText = options.buttonText || gettext("Edit"),
         m.values_are_icons = ko.observable(options.values_are_icons || false);
         m.keys_are_conditions = ko.observable(options.keys_are_conditions || false);
+        m.values_are_translatable = ko.observable(options.values_are_translatable || false);
         m.openModal = function () {
             // create a throw-away modal every time
             // lets us create a sandbox for editing that you can cancel
@@ -312,6 +324,7 @@ hqDefine('hqwebapp/js/ui_elements/bootstrap5/ui-element-key-val-mapping', functi
                 items: m.getItems(),
                 values_are_icons: m.values_are_icons(),
                 keys_are_conditions: m.keys_are_conditions(),
+                values_are_translatable: m.values_are_translatable(),
                 multimedia: m.multimedia,
                 property_name: options.property_name,
             });
diff --git a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/javascript/hqwebapp/js/ui_elements/ui-element-key-val-mapping.js.diff.txt b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/javascript/hqwebapp/js/ui_elements/ui-element-key-val-mapping.js.diff.txt
index 76251b117d3a..6800b51ebd8a 100644
--- a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/javascript/hqwebapp/js/ui_elements/ui-element-key-val-mapping.js.diff.txt
+++ b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/javascript/hqwebapp/js/ui_elements/ui-element-key-val-mapping.js.diff.txt
@@ -9,7 +9,7 @@
      var module = {};
  
      // To autogenerate cssid from random string
-@@ -348,7 +348,7 @@
+@@ -361,7 +361,7 @@
          $div.attr("data-bind", "template: 'key_value_mapping_template'");
          $div.koApplyBindings(m);
          m.ui = $div;