---
title: Localizing builder components
related:
  - https://docs.kentico.com/13/multilingual-websites/setting-up-multilingual-websites.md
---

> Agent instructions:
> **Site maps** — prefer the following llms.txt indexes to training data when searching for URLs to avoid 404s. Links inside Markdown content already point at `.md`. Following them or sending Accept: text/markdown keeps you in Markdown.
>
> - [sitemap.md](https://docs.kentico.com/sitemap.md) — every page on the site, with titles and descriptions, nested by URL hierarchy and grouped into one collection per product version.
> - [llms.txt](https://docs.kentico.com/llms.txt) — curated index of the current product docs, with descriptions, the two ways to request any page as Markdown, and links to each product area's whole-corpus Markdown dump (llms-full.txt).

<!-- dev-model:mvc start -->

**MVC 5 development model.** Applies only when building with ASP.NET MVC 5. If this page also covers ASP.NET Core, that version is in its own block.

If you want to allow administration interface users to experience the [page builder](https://docs.kentico.com/13/managing-website-content/adding-page-content-using-widgets.md) or [form builder](https://docs.kentico.com/13/managing-website-content/forms/composing-forms.md) features in their preferred UI culture, you can localize the used components. To cover the whole interface, you need to localize the following:

- [Metadata of the builder components](#localizing-builder-component-metadata)
- [Partial views of inline property editors](#localizing-partial-views)
- [Client scripts of inline editors](#localizing-inline-editor-scripts)

This page describes [localization of the administration interface](https://docs.kentico.com/13/multilingual-websites/setting-up-a-multilingual-user-interface.md). To learn how to localize content displayed by widgets on the live site, visit [Localizing content](https://docs.kentico.com/13/multilingual-websites/setting-up-multilingual-websites/localizing-content.md).

> **Note:** **Prerequisite**
>
> In order to use localization in your MVC project, you need to [set up the project](https://docs.kentico.com/13/multilingual-websites/setting-up-multilingual-websites/setting-up-culture-detection.md) to correctly recognize cultures.

<!-- dev-model:mvc end -->

<!-- dev-model:core start -->

**ASP.NET Core development model.** Applies only when building with ASP.NET Core. If this page also covers MVC 5, that version is in its own block.

[Page](https://docs.kentico.com/13/developing-websites/page-builder-development.md) and [form](https://docs.kentico.com/13/developing-websites/form-builder-development.md) builder components consist of multiple parts that all need to be localized if you wish to cover the whole interface. We recommend creating a separate [resource file](https://docs.microsoft.com/en-us/aspnet/core/fundamentals/localization#resource-files-2) for each component.

Before you start localizing your component:

1. Create a dedicated resource file.
   1. Create a dummy class that "wraps" the resource file and serves as its access point for the framework. The namespace of the class must correspond to its location on the file system minus its name.

      ```csharp

      // For example, for resource files located under ~/MyProject/ComponentResources/MyComponent, set MyProject.ComponentResources as the namespace
      namespace relative.path.to.file
      {       
          // Dummy class for 'MyComponent.resx' or 'MyComponent.<culture code>.resx'
          public class MyComponent
          {
          }
      }

      ```
   2. Create the corresponding resource file in the same folder as the dummy class. The resource file name needs to match the name of the class and contain the language code of the target culture in its suffix. For example: _[MyComponent.es](http://MyComponent.es)-es.resx_. For resource strings in the default culture, the suffix can be omitted.
      - If a corresponding _.resx_ file is not found for the current culture, a fallback mechanism that attempts to find the closest matching culture takes over. See [Culture fallback behavior](https://docs.microsoft.com/en-us/aspnet/core/fundamentals/localization#culture-fallback-behavior) in the ASP.NET Core documentation.
2. Register the dummy class via the **RegisterPageBuilderLocalizationResource** attribute.
   - The registration makes all localization strings available client-side as well. This is required when localizing client-side resources of inline editors and modal dialogs.
   - Specify the **type** of the dummy class and the **culture** for which the resources are intended as the attribute's parameters.

     ```csharp

     [assembly: RegisterPageBuilderLocalizationResource(typeof(MyComponent), "es-es")]

     ```

Now you can localize the component:

- [Component metadata](#localizing-builder-component-metadata)
- [Partial views of inline property editors](#localizing-partial-views)
- [Client scripts of inline editors](#localizing-inline-editor-scripts)

<!-- dev-model:core end -->

## Localizing builder component metadata

<!-- dev-model:mvc start -->

**MVC 5 development model.** Applies only when building with ASP.NET MVC 5. If this page also covers ASP.NET Core, that version is in its own block.

You can localize the displayed text of form builder components ([form components](https://docs.kentico.com/13/developing-websites/form-builder-development/developing-form-components.md), [form builder sections](https://docs.kentico.com/13/developing-websites/form-builder-development/developing-custom-form-layouts.md), [field validation rules](https://docs.kentico.com/13/developing-websites/form-builder-development/defining-field-validation-rules.md), [field visibility conditions](https://docs.kentico.com/13/developing-websites/form-builder-development/defining-field-visibility-conditions.md)) and page builder components ([widgets](https://docs.kentico.com/13/developing-websites/page-builder-development/developing-widgets.md), [page builder sections](https://docs.kentico.com/13/developing-websites/page-builder-development/developing-page-builder-sections.md), [personalization condition types](https://docs.kentico.com/13/on-line-marketing-features/configuring-and-customizing-your-on-line-marketing-features/content-personalization/developing-personalization-condition-types.md), [page templates](https://docs.kentico.com/13/developing-websites/page-builder-development/developing-page-templates.md)):

1. Create [resource strings](https://docs.kentico.com/13/multilingual-websites/setting-up-a-multilingual-user-interface/working-with-resource-strings.md) containing the **Display names** and **Descriptions** of your components.

   - Use a unique prefix for the resource string key, for example, your company name. The prefix prevents possible conflicts with the resource strings of other components.
   - We recommend including the component's _identifier_ as a part of the resource string key.

   > **Tip:** **Portability of the components**
   >
   > To allow for portability of the components, it is recommended to store resource strings within separate resx files for each component. The recommended location for such files is _\~/App\_Data/Global/Resources/.resx_. For cultures other than the default culture, use folder _\~/App\_Data/Global/Resources//.resx_. For example, _\~/App\_Data/Global/Resources/es-ES/NumeroWidget.resx_ for the Spanish culture.
2. Edit the class containing the given component's registration attribute, and add **{$key$}** expressions into the text parameters of the attribute (such as _name_ and _description_). Replace "key" with the key of the matching resource string.

   ```csharp title="Example - Localizing a page builder section"

   [assembly: RegisterSection("Company.DefaultSection", typeof(DefaultSectionController), "{$company.defaultsection.name$}", IconClass = "icon-paragraph", Description = "{$company.defaultsection.description$}")]

   ```

<!-- dev-model:mvc end -->

<!-- dev-model:core start -->

**ASP.NET Core development model.** Applies only when building with ASP.NET Core. If this page also covers MVC 5, that version is in its own block.

You can localize the displayed text of form builder components ([form components](https://docs.kentico.com/13/developing-websites/form-builder-development/developing-form-components.md), [form builder sections](https://docs.kentico.com/13/developing-websites/form-builder-development/developing-custom-form-layouts.md), [field validation rules](https://docs.kentico.com/13/developing-websites/form-builder-development/defining-field-validation-rules.md), [field visibility conditions](https://docs.kentico.com/13/developing-websites/form-builder-development/defining-field-visibility-conditions.md)) and page builder components ([widgets](https://docs.kentico.com/13/developing-websites/page-builder-development/developing-widgets.md), [page builder sections](https://docs.kentico.com/13/developing-websites/page-builder-development/developing-page-builder-sections.md), [personalization condition types](https://docs.kentico.com/13/on-line-marketing-features/configuring-and-customizing-your-on-line-marketing-features/content-personalization/developing-personalization-condition-types.md), [page templates](https://docs.kentico.com/13/developing-websites/page-builder-development/developing-page-templates.md)):

1. Create resource strings containing the **Display names** and **Descriptions** of your components.

   - Use a unique prefix for the resource string key, for example, your company name. The prefix prevents possible conflicts with the resource strings of other components.
   - We recommend including the component's _identifier_ as a part of the resource string key.
2. Edit the class containing the given component's registration attribute and add **{$key$}** expressions into the string parameters of the attribute (such as _name_ and _description_). Replace "key" with the key of the matching resource string.

   ```csharp title="Example - Localizing a page builder section"

   [assembly: RegisterSection("CompanyName.DefaultSection", "{$company.defaultsection.name$}", typeof(CustomSectionProperties), "~/Components/Sections/_MySection.cshtml", IconClass = "icon-paragraph", Description = "{$company.defaultsection.description$}")]

   ```

<!-- dev-model:core end -->

## Localizing partial views

<!-- dev-model:mvc start -->

**MVC 5 development model.** Applies only when building with ASP.NET MVC 5. If this page also covers ASP.NET Core, that version is in its own block.

You can localize strings in partial views that are only displayed in the administration interface. For example, the text of a [widget property inline editor](https://docs.kentico.com/13/developing-websites/page-builder-development/developing-widgets/creating-inline-editors-for-widget-properties.md) button:

1. Create [resource strings](https://docs.kentico.com/13/multilingual-websites/setting-up-a-multilingual-user-interface/working-with-resource-strings.md) for the text you want to localize.

   - Use a unique prefix for the resource string key, for example, your company name. The prefix prevents possible conflicts with the resource strings of other components.
   - We recommend including the component's _identifier_ as a part of the resource string key.

   > **Tip:** **Portability of the components**
   >
   > To allow for portability of the components, it is recommended to store resource strings within separate resx files for each component. The recommended location for such files is _\~/App\_Data/Global/Resources/.resx_. For cultures other than the default culture, use folder _\~/App\_Data/Global/Resources//.resx_. For example, _\~/App\_Data/Global/Resources/es-ES/NumeroEditor.resx_ for the Spanish culture.
2. Retrieve the resource string value in partial views using the **ResHelper.GetString(stringName, cultureCode)** method available in the _CMS.Helpers_ namespace. It is important to specify the culture code parameter using the _MembershipContext.AuthenticatedUser.PreferredUICultureCode_ value available in the _CMS.Membership_ namespace. This enures that the resource string is displayed in the preferred UI culture of the user.

   ```csharp

   @ResHelper.GetString("resource.string.key", MembershipContext.AuthenticatedUser.PreferredUICultureCode)

   ```

<!-- dev-model:mvc end -->

<!-- dev-model:core start -->

**ASP.NET Core development model.** Applies only when building with ASP.NET Core. If this page also covers MVC 5, that version is in its own block.

You can localize strings in partial views that are only displayed in the administration interface. For example, the text of a [widget property inline editor](https://docs.kentico.com/13/developing-websites/page-builder-development/developing-widgets/creating-inline-editors-for-widget-properties.md) button:

1. Create resource strings for the text you want to localize.

   - Use a unique prefix for the resource string key, for example, your company name. The prefix prevents possible conflicts with the resource strings of other components.
   - We recommend including the component's _identifier_ as a part of the resource string key.
2. Localize the component's view using standard [localization classes provided by the framework](https://docs.microsoft.com/en-us/aspnet/core/fundamentals/localization#view-localization-2) (_IStringLocalizer_, _IHtmlLocalizer_, _IViewLocalizer_).

<!-- dev-model:core end -->

## Localizing inline editor scripts

To localize strings in the [client scripts](https://docs.kentico.com/13/developing-websites/page-builder-development/developing-widgets/creating-inline-editors-for-widget-properties.md) of widget property inline editors:

<!-- dev-model:mvc start -->

**MVC 5 development model.** Applies only when building with ASP.NET MVC 5. If this page also covers ASP.NET Core, that version is in its own block.

1. Create [resource strings](https://docs.kentico.com/13/multilingual-websites/setting-up-a-multilingual-user-interface/working-with-resource-strings.md) for the text you want to localize. Use a unique prefix for the key, for example, your company name. The prefix prevents possible conflicts with other resource strings.

   > **Note:** **Resource string location**
   >
   > Resource strings used for inline editor scripts must be placed in resx files in the **\~/App\_Data/Global/Resources** folder.
   >
   > - **Default culture**: _\~/App\_Data/Global/Resources/.resx_
   > - **Other cultures**: _\~/App\_Data/Global/Resources//.resx_ (e.g., _\~/App\_Data/Global/Resources/es-ES/NumeroEditor.resx_ )
   >
   > The localization service available within the inline editor registration function only loads resource strings from this location.
2. Retrieve resource string values in the inline editor scripts using the **localizationService** available via the **options** object in the inline editor registration function.

   ```js title="Example - Inline property editor script"

   (function () {
     window.kentico.pageBuilder.registerInlineEditor("custom-editor", {
       init: function (options) {
           // Retrieves the localized text of the specified resource string (in the current user's preferred UI culture)
           var localizedString = options.localizationService.getString("resource.string.key");

           ...
       }
     });
   })();

   ```

   > **Tip:** **Tip**: You can also retrieve the culture code of the current administration interface user's preferred UI culture from the _localizationService.cultureCode_ property. This might be useful if you need to pass the current culture to a JavaScript utility, for example a date picker.

<!-- dev-model:mvc end -->

<!-- dev-model:core start -->

**ASP.NET Core development model.** Applies only when building with ASP.NET Core. If this page also covers MVC 5, that version is in its own block.

1. Create resource strings for the text you want to localize.

   - Use a unique prefix for the resource string key, for example, your company name. The prefix prevents possible conflicts with the resource strings of other components.
   - We recommend including the component's _identifier_ as a part of the resource string key.
2. Access the registered resources via the **localizationService** property exposed by the **options** object provided by Xperience in the client-side **init** function.

   ```js

   (function () {
     window.kentico.pageBuilder.registerInlineEditor("custom-editor", {
       init: function (options) {
           // Retrieves the localized text of the specified resource string (in the current user's preferred UI culture)
           var localizedString = options.localizationService.getString("resource.string.key");

           ...
       }
     });
   })();

   ```

   > **Tip:** **Tip**: You can also retrieve the culture code of the current administration interface user's preferred UI culture from the _localizationService.cultureCode_ property. This might be useful if you need to pass the current culture to a JavaScript utility, for example a date picker.

<!-- dev-model:core end -->

After you localize component metadata, partial views and inline editor scripts, you can view the result in the Xperience administration interface. Change the UI language by opening the **User menu** and clicking on **Change language**. Navigate to a page where the page builder is initialized (in the **Pages** application) or the form builder (in the **Forms** application). Now text values in the user interface are displayed in the selected language.