Skip to Content
Previous

Insert a currency symbol for display

By akula86

Learn how to insert a symbol into the master and detail views of your app.

You will learn

Ideally, an OData service should specify the currency symbol or currency type for each record since it is possible for the currencies to be different (for example, sales opportunities in different countries). The service used in this tutorial does not specify the currency, so you will add a currency symbol to the master and detail views of your app.

Details


  1. The recommended way to insert strings in your app is to take advantage of the internationalization (i18n) and localization capabilities that are built into the SAPUI5 framework. To begin, open the northwind > i18n > messageBundle.properties file and insert the line below. You can change the symbol to $, or whichever symbol you would like to display.

    currencySymbol=€
    

    messageBundle.properties file

  2. Any string from the messageBundle.properties file can be used in your app using a reference in the following format: {i18n>key}. To reference the string you just inserted, you will use:

    {i18n>currencySymbol}
    
  3. Edit the Master.view.xml file by inserting the reference to currencySymbol just before the {UnitPrice} reference as shown below (be sure to insert the reference within the same double quotes as the {UnitPrice} field.

    Edited Master.view.xml file

  4. Edit the Detail.view.xml file by inserting the reference to currencySymbol just before the {UnitPrice} reference as shown below (again, be sure to insert the reference within the same double quotes as the {UnitPrice}.

    Edited Detail.view.xml file

  5. Save your edits and either refresh your preview tab or select the index.html file and click Run. Your app should look like this:

    App showing currency symbol

  6. If your symbol does not show up:

    • Make sure you have saved your edits
    • Verify that you inserted {i18n>currencySymbol} between the {UnitPrice} double quotes
    • Do a hard-reload or clear cache. See the note below.

Remember the browser cache

If the currency symbol does not show up, remember to clear the cache as described at the bottom of the Add labels and a new field to your app tutorial.

Next Steps

Next
Back to top