SAPUI5 Walkthrough Step 23: Custom Formatters

Step 23: Custom Formatters

 

 自定义格式， 如果我们需要更复杂的逻辑。那需要使用自定义格式来实现

 

新增文件 webapp/model/formatter.js 

sap.ui.define([], function() {
    "use strict";
    return {
        statusText: function(sStatus) {
            var resourceBundle = this.getView().getModel("i18n").getResourceBundle();
            switch (sStatus) {
                case "A":
                    return resourceBundle.getText("invoiceStatusA");
                case "B":
                    return resourceBundle.getText("invoiceStatusB");
                case "C":
                    return resourceBundle.getText("invoiceStatusC");
                default:
                    return sStatus;
            }
        }
    };
});

 

修改 webapp/controller/InvoiceList.controller.js 文件， 增加对 formatter.js 的引用

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/model/json/JSONModel",
    "../model/formatter"
], function(Controller, JSONModel, formatter) {
    "use strict";

    return Controller.extend("sap.ui.demo.walkthrough.controller.InvoiceList", {
        formatter: formatter,
        
        onInit: function() {
            var oViewModel = new JSONModel({
                currency: "EUR"
            });
            this.getView().setModel(oViewModel, "view");
        }
    });
});

 

修改 webapp/view/InvoiceList.view.xml 文件

<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" controllerName="sap.ui.demo.walkthrough.controller.InvoiceList">
    <List headerText="{i18n>invoiceListTitle}" class="sapUiResponsiveMargin" width="auto" items="{invoice>/Invoices}">
        <items>
            <ObjectListItem title="{invoice>Quantity} x {invoice>ProductName}"
                number="{parts: [ {path: 'invoice>ExtendedPrice'}, {path: 'view>/currency'} ], type: 'sap.ui.model.type.Currency', formatOptions: { showMeasure: false } }"
                numberUnit="{view>/currency}" numberState="{= ${invoice>ExtendedPrice} > 10 ? 'Error' : 'Success' }">
                <firstStatus>
                    <ObjectStatus text="{ path: 'invoice>Status', formatter: '.formatter.statusText' }"/>
                </firstStatus>
            </ObjectListItem>
        </items>
    </List>
</mvc:View>

 

修改i18n文件

# Invoice List
invoiceListTitle=Invoices
invoiceStatusA=New
invoiceStatusB=In Progress
invoiceStatusC=Done

 

 

执行