Step 10: Property Formatting Using Data Types

SAPUI5 provides a set of simple data types such as Boolean, Currency, Date and Float. These data types can then be applied to controls in order to ensure that the value presented on the screen is formatted correctly, and, if the field is open for input, that the value entered by the user adheres to the requirements of that data type. We will now add a new field called Sales to Date of type Currency.

Preview

Figure 1: New Sales to Date input field

Coding

You can view and download all files in the Explored app in the Demo Kit under Data Binding - Step 10.

webapp/index.html

<script>
  var oModel = new sap.ui.model.json.JSONModel({
    firstName : "Harry",
    lastName  : "Hawk",
    enabled   : true,
    address   : {
      street : "Dietmar-Hopp-Allee 16",
      city : "Walldorf",
      zip : "69190",
      country : "Germany"
    },
    "salesToDate" : 12345.6789,
    "currencyCode" : "EUR"
  });
...

We create two new model properties salesToDate and currencyCode.

webapp/view/App.view.xml

...
<Panel headerText="{i18n>panel2HeaderText}" class="sapUiResponsiveMargin" width="auto">
    <content>
      <l:VerticalLayout>
        <Label class="sapUiSmallMargin" text="{i18n>address}:" />
        <Text class="sapUiSmallMargin" text="{/address/street}\n{/address/zip} {/address/city}\n{/address/country}" width="200px" />
        <Image class="sapUiSmallMargin" width="500px" height="300px" src="{ parts: [ '/address/street', '/address/zip', '/address/city', '/address/country' ], formatter: '.formatMapUrl' }" />    
      </l:VerticalLayout>
      <l:VerticalLayout>
        <Label text="{i18n>salesToDate}" class="sapUiSmallMargin" />
        <Input 
          width="200px" 
          enabled="{/enabled}" 
          description="{/currencyCode}"
          value="{ parts: [{path: '/salesToDate'}, {path: '/currencyCode'}], type: 'sap.ui.model.type.Currency', formatOptions: {showMeasure: false } }" 
        />
      </l:VerticalLayout>
    </content>
  </Panel>
</mvc:View>

A new pair of Label and Input elements have been created for the salesToDate model property. The description property of the Input element has been bound to the currencyCode model property. The value property of the Input element has been bound to the model properties salesToDate and currencyCode. The {showMeasure: false} parameter switches off the display of the currency symbol within the input field itself. This is not needed because it is being displayed using the Input element's description property.

webapp/i18n/i18n.properties

# Field labels
firstName=Vorname
lastName=Nachname
enabled=Enabled
address=Address
salesToDate=Sales to Date...

webapp/i18n/i18n_de.properties

# Field labels
firstName=Vorname
lastName=Nachname
enabled=Aktiviert
address=Adresse
salesToDate=Verkäufe bis zum heutigen Datum
...

Add the missing texts to the properties files.