SAPUI5 Walkthrough Step 23: Custom Formatters
阿新 • • 發佈:2021-08-04
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
執行