Multiple Languages

Multiple languages can be supported in an SDK extension using UI Text. UI Text works by splitting verbiage into a text element, and a text value. The text element describes the verbiage, “pageTitle” is a good example of a text element. The text value is the actual text. There is a one-to-many relationship between the element and value, which allows for multiple languages to be supported.

DB Plan

You can populate your verbiage in the data base by using the ui_text_elements install step. Below is an example db_plan.py file that shows how to utilize the install step. This db_plan.py file will get run at the time of form install. You can also run this file with the q2 run_db_plan command.

from q2_sdk.core.install_steps import db_plan


class DbPlan(db_plan.DbPlan):
    def __init__(self):
        """
        It is often necessary to configure the database with information
        for an extension to run appropriately. This is your home to do so.

        Each of these attributes corresponds to a table (or set of tables) in the
        database. Instead of forcing all Antilles users to learn the
        database structure of Q2, we've opted for this handy abstraction.
        """

        super().__init__()
        self.ui_text_prefix = 'MyExtension'  # Will be used for all self.ui_text_elements

        # self.send_account_list = True  # Populate self.account_list when HQ calls the extension
        # self.send_account_details = True  # Populate HADE data on accounts in self.account_list
        # self.wedge_payload_stored_proc = None  # Run a given Stored Procedure to manipulate the call shape from HQ
        # self.insight_features = []  # Run a list of Insight API Features as part of the install (Custom stored procedures)
        # self.api_stored_procs = [db_plan.ApiStoredProc()]
        # self.audit_actions = [db_plan.AuditAction()]
        # self.disclaimers = [db_plan.Disclaimer()]
        # self.gt_data_elements: [db_plan.GTDataElement()]
        # self.report_info = [db_plan.ReportInfo()]
        # self.required_forms = [db_plan.RequiredForm()]
        # self.third_party_data_elements = [db_plan.ThirdPartyDataElement()]
        # self.ui_config_property_data = [db_plan.UIConfigPropertyData()]
        # self.ui_text_elements = [db_plan.UiTextElement()]
        # self.user_account_attributes = [db_plan.UserAccountAttribute()]
        # self.user_property_data_elements = [db_plan.UserPropertyDataElement()]
        # self.user_property_data = [db_plan.UserPropertyData()]
        # self.vendors = [db_plan.Vendor()]
        # self.vault_info = [db_plan.VaultInfo()]
        self.ui_text_elements = self.get_ui_text_elements()

    def get_ui_text_elements(self):
        device_id = 1
        description = 'extension verbiage'
        english_verbiage = {
            'pageTitle': "My Extension",
        }
        spanish_verbiage = {
            'pageTitle': "Mi extension",
        }

        verbiage_to_install = []
        for element, value in english_verbiage.items():
            verbiage_to_install.append(
                db_plan.UiTextElement(
                    short_name=element,
                    description=description,
                    text_value=value,
                    device_id=device_id,
                    language='USEnglish'
                )
            )

        for element, value in spanish_verbiage.items():
            verbiage_to_install.append(
                db_plan.UiTextElement(
                    short_name=element,
                    description=description,
                    text_value=value,
                    device_id=device_id,
                    language='Spanish'
                )
            )
        return verbiage_to_install

Things to note in this example:

The device_id is hard coded to 1. This is a value that was deprecated in the Q2 product, so hard coding is expected
The dictionary keys in both english_verbiage and spanish_verbage are the same. The keys are the same as the UI Text Elements, and should remain the same in both dictionaries.
The language for english is USEnglish. This is the default language of the Q2 product. These languages are referencing the values found in the Q2_UiLanguage table.

Fetching the UI Text

After you have installed the verbiage with the db_plan, you can use the self.get_ui_text function to get the verbiage. The below code sample shows how to call this function and get the verbiage.

verbiage_dictionary = await self.get_ui_text()

The function, which needs to be awaited, returns the same dictionary that was put in the database from the db_plan.py file. This function will also try to auto detect the language to fetch from the incoming request (if the request originates from HQ), but will default to USEnglish if it is unable to determine the language. You can also specify the language to get if the extension is unable to detect the language.

verbiage_dictionary = await self.get_ui_text(language='Spanish')

After the UI Text has been received, you can use it in a jinja template to put the verbiage into the front end.

form_replacements = {
    'verbiage': verbiage_dictionary
}
template = self.get_template('index.html.jinja', form_replacements)
html = forms.Q2Form(
    "PersonToPersonTransfer"
    custom_template=template,
    # Hide the submit button as there is no form on this route.
    hide_submit_button=True
)

<div class="container">
    <div class="page-header">
        <h3>{{ verbiage.pageTitle }}</h3>
    </div>
</div>