1. 程式人生 > 其它 >SAPUI5 Walkthrough Step 23: Custom Formatters

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

執行