Localize HTML Templates

FintechOS Platform allows you to localize the content of HTML template embedded within the entity data forms, data form sections and custom actions.

NOTE  
  • Localization applies to the text part of the HTML element and it does not support children mixed with text. When mixing text with other HTML elements, split the text in spans.
  • The metadata displayed on forms is localized using the DisplayName, you do not have to insert resources for them. If you want to translate the same metadata with different text, depending on the context, on different forms with different rules, then add the localization resources separately from the forms.

Localize HTML elements on data forms

To localize HTML elements that will be displayed on data forms, on the HTML Editor, click Tools > Source code, and add the attributes data-resource-key and data-culture to the element.

The data-culture attribute should be a valid .NET culture name. For details on the valid .NET culture names, see: MSDN Table of Language Culture Names, Codes, and ISO Values Method [C++].

When not specified, the data-culture attribute is set by default to English UK (en-GB).

You can add additional translations for the same label by using the custom 'ebs-resource' tag.

NOTE   The HTML editor does not allow the ebs-resource tag inside tr and td elements, so you need to add it to the div level.

 

 
Copy

<div>
<!-- localization for myAttr specific for italian language, augments the localization inside td tag -->
<ebs-resource data-resource-key="myAttr" data-culture="it-IT">TestCinci-IT</ebs-resource>
<table>
<tr>
<!-- localization by resource key -->
<td data-resource-key="myAttr" data-culture="ro-RO">Attributul meu</td>
<td>{MyOptionSetAttribute}</td>
</tr>
</table>
</div>    

On save, the resource keys are automatically inserted within the LocalizationResource and available for edit in the Localization Resources editor. The resource keys will be saved with the module name following these naming conventions: 

 entities / entiyName / forms / formName / html

Example: entities/ProductPromotion/forms/default/html

entities / entiyName / forms / formName / sections / sectionName / html

Example: entities/ProductPromotion/forms/default/sections/Section 2/html

customActions / customActionName / html

Example: customActions/Product Promotion/html

Localize from Metadata

To get localization from metadata, use piped arguments inside the bracket expressions:

  • { xxx | entity }   will be replaced with the display name of the entity named xxx. The entity name is case sensitive.
  • { xxx | entities } will be replaced with the display collection name of the entity named xxx. The attribute name is case sensitive.
  • { myAttribute | attribute } will be replaced with the display name of the attribute named myAttribute. The entity is the data form owner. The attribute name is case insensitive.
  • { xxx_yyy| relationship} will be replaced with the display name of the relationship between entity xxx and entity yyy. The relationship name is case insensitive.
HTML Template Localization
Copy
<div style="padding: 20px; background-color: white; border: solid 1px #E0E0E0;">
    <table style="width: 100%;">
        <tbody>
            <tr>
                <td colspan="2">
                    <!-- entity pipe: display name of entity test1 (case sensitive) -->
                    <h4>{test1 | entity }</h4>
                    <!-- entities pipe: display collection name of entity test1 (case sensitive) -->
                    <h4>{test1 | entities }</h4>
                </td>
            </tr>
            <tr>
                <!-- localization by resource key -->
                <td data-resource-key="myAttr" data-culture="ro-RO">Attributul meu</td>
                <td>{MyOptionSetAttribute}</td>
            </tr>
            <tr>
                <!-- localization by resource key -->
                <td data-resource-key="name" data-culture="ro-RO">label pentru name</td>
                <td>{Name}</td>
            </tr>
            <tr>
                <td>{Name | attribute }</td>
                <td>{Name}</td>
            </tr>
            <tr>
                <!-- attribute pipe: shows display name of attribute Field1 (case insensitive)-->
                <td>{Field1 | attribute }</td>  
                <td>{Field1}</td>
            </tr>
            <tr>
                <td colspan="2">
                    <hr />
                </td>
            </tr>
        </tbody>
    </table>
</div>

Localize Relationship Labels

To render relationships inside the HTML template, use a syntax similar to:

{#sys_entity_sys_attribute,collapse:Attributes#}

Where:

  • sys_entity_sys_attribute is the name of the relationship.
  • Attributes is a user-defined label to be rendered as title.

To automatically localize this construct, use the localizable displayName attribute from the Relationship by specifying $displayName as the label.

{#sys_entity_sys_attribute,collapse:$displayName#}