How Is Localized Data Binding Set Up With Json Files And Xml Views?

I have an XMLView home page containing some tiles. These tiles are populated from a JSON file. The tiles have a 'title' attribute which requires i18n data binding. Part of the XML

Solution 1:

The approach I usually take is using a formatter function, which sole purpose is to get the correct localized value for a certain key (which is maintained in the resource model, and driven by the data model)

For instance, the Tile UI would look like this:

<TileContainerid="container"tiles="{/tiles}"><StandardTileicon="{icon}"type="{type}"title="{ path : 'title', formatter : '.getI18nValue' }"info="{ path : 'info', formatter : '.getI18nValue' }"infoState="{infoState}"press="handlePress"/></TileContainer>

(Notice the formatter function getI18nValue for properties title and info; these are the properties to be translated. The other properties come as-is from the bound JSONModel)

The model could look like this:

tiles : [
    {
        icon      : "sap-icon://inbox",
        number    : "12",
        title     : "inbox",   // i18n property 'inbox'info      : "overdue", // i18n property 'overdue'infoState : "Error"
    },
    {
        icon      : "sap-icon://calendar",
        number    : "3",
        title     : "calendar", // i18n property 'calendar'info      : "planned",  // i18n property 'planned'infoState : "Success"
    }
]

where the title and info property values of the JSONModel (for instance, 'inbox' and 'overdue') correspond with a key in your resourcebundle files (and thus your ResourceModel)

The formatter function in the controller (or better, in a standalone JS file, for re-use in multiple views) is then pretty simple:

getI18nValue : function(sKey) {
    returnthis.getView().getModel("i18n").getProperty(sKey);
}

It does nothing more than supplying the value from the model (for instance, 'inbox') and returning the localized value for this key from the resource model