CODEWITHSUNDEEP
sapui5
Mike
Mike

Reputation: 14616

UI5 i18n support for the static model data

I'm exploring the sap.f.ProductSwitch controller on a sample project sap.f.sample.ShellBarProductSwitch.

Everything is clear besides one thing, what should be the approach if I want to provide an i18n support for a list of products (model/data.json)?

E.g. additionally to the hardcoded English list of products:

{
    "items": [
        {
            "src": "sap-icon://home",
            "title": "Home"
        }
    ]
}

I want to provide a Frech one:

{
    "items": [
        {
            "src": "sap-icon://home",
            "title": "Maison"
        }
    ]
}

With a basic dialogues I can rely on the built-in i18n UI5-engine, but here I don't know how to enable i18n in an XML-template:

<f:ProductSwitchItem
    src = "{src}"
    title = "{title}" />

Upvotes: 2

Views: 550

Answers (3)

OpenUI5 Team
OpenUI5 Team

Reputation: 161

If you only have static values I would rather not use list binding but create the product switch items individually:

<ProductSwitch change="fnChange" >
   <items>                                              
      <ProductSwitchItem src="sap-icon://retail-store" title="{i18n>Title_1}" />
      <ProductSwitchItem src="sap-icon://family-care" title="{i18n>Title_2}" />
   </items>
</ProductSwitch >

In doing so you can use the resource model for the titles as usual and don't need any further code.

Upvotes: 1

OpenUI5 Team
OpenUI5 Team

Reputation: 161

If you like the data binding approach better, you can use a formatter with the title property binding to retrieve the text from the resource model.

The key to the text of the resource bundle must be defined in your data.json for every item:

The JSON data model:

{
    "items": [
        {
            "src": "sap-icon://home",
            "titleI18NKey": "myResourceBundleKeyToThisItem"
        }
    ]
}

The XML-template:

<ProductSwitch
    change = "onClickProductSwitcherItem"
    items = "{
        path: '/items'
    }">

    <items>

        <ProductSwitchItem
            src = "{src}"
            title = "{
                path: 'titleI18NKey',
                formatter: '.getText'
        }" />

    </items>

</ProductSwitch>

The formatter getText needs to be defined in your controller:

getText(i18nKey) {

    const dialogue = this.getView().getModel("i18n").getProperty(i18nKey);

    return dialogue;

}

Upvotes: 1

Mike
Mike

Reputation: 14616

A home-made solution.

XML-template:

<f:ProductSwitchItem
    src = "{src}"
    title = "{titleI18NKey}" />

Controller:

const resourceBundle = this.getView().getModel("i18n").getResourceBundle();

const productSwitcherModelData = this.getView().getModel("productSwitcher")?.getData();

productSwitcherModelData.items.forEach((item) => {

    item.titleI18NKey = resourceBundle.getText(item.titleI18NKey);

});

this.productSwitcher.setModel(this.getView().getModel("productSwitcher"));

In product switcher model instead of real text I store a key-value pair:

titleI18NKey: i18n_dialogue_key

which is later replaced by the end-text from the i18n-model and set to the productSwitcher model.

P.S. Please, let me know, if there is more elegant implementation based on UI5 functionality.

Upvotes: 2

Related Questions