Binding ResourceBundle property to list item

Question

In SAPUI5, you can often bind resource bundle properties to items in several ways. I'm attempting to do it in JavaScript, using data provided by an Odata service, but the methods I've found here so far haven't worked. I've tried two different ways:

And neither of these have worked. I feel this is because I'm inside a items list, inside of a dialog that's causing my issue:

My code is:

var resourceBundle = this.getView().getModel("i18n");

if (!this.resizableDialog) {
    this.resizableDialog = new Dialog({
        title: 'Title',
        contentWidth: "550px",
        contentHeight: "300px",
        resizable: true,
        content: new List({
            items: {
                path: path,
                template: new StandardListItem({
                    title: resourceBundle.getProperty("{Label}"),//"{ path : 'Label', fomatter : '.getI18nValue' }",
                    description: "{Value}"
                })
            }
        }),
        beginButton: new Button({
            text: 'Close',
            press: function () {
                this.resizableDialog.close();
            }.bind(this)
        })
    });

getI18nValue : function(sKey) {
    return this.getView().getModel("i18n").getProperty(sKey);
},

Using the 2nd method above, never calls the JavaScript method. I didn't think it would work, as it's more JSON based. The first method, loads the data fine, but instead of showing the resource bundle text, it shows just the text found inside of the {Label} value.

The value found inside of {Label} matches the key found inside of the resouce bundle i.e. without the i18n> in front, like you would have in a view.

Anyone have any suggestions?

Naveen Kumar H S Naveen Kumar H S · Accepted Answer · 2017-10-05T05:46:12

Use of formatter will solve your problem, but the way you're doing it is wrong. Try this, it will solve your problem.

var resourceBundle = this.getView().getModel("i18n");
if (!this.resizableDialog) {
    this.resizableDialog = new Dialog({
        title: 'Title',
        contentWidth: "550px",
        contentHeight: "300px",
        resizable: true,
        content: new List({
            items: {
                path: path,
                template: new StandardListItem({
                   title: {
                       parts: [{ path: "Label" }],
                       formatter: this.getI18nValue.bind(this)
                   },
                   description: "{Value}"
                })
            }
        }),
        beginButton: new Button({
            text: 'Close',
            press: function () {
                this.resizableDialog.close();
            }.bind(this)
       })
    });
}

And the formatter function getI18nValue will be like this,

getI18nValue: function(sKey) {
    return this.getView().getModel("i18n").getResourceBundle().getText(sKey);
},

Binding ResourceBundle property to list item

1 Answers