Skip to Content
Product Information
Author's profile photo Emanuele Ricci

SAPUI5 for dummies part 1: A complete step-by-step exercise

Introduction & Recap

In the previous blog post, we have created a new SAPUI5 application on our SAP SCP WebIDE Full stack and we have configured it to use the destination to the SAP Netweaver Gateway Demo ES5.

What will be covered on this exercise

  • What is an XML Metadata Manifest and what’s inside it?
  • How to use our OData Model and bind it into our application
  • Use a sap.m.Table with items and property binding
  • Use sap.ui.model.type.DateTime to format JavaScript Date
  • How to style columns to act differently on mobile/tablet/desktop devices

Let’s code

Now it’s time to get our hands dirty with some code. In this step, you are going to display a table of Business Partner with some useful information.

The first thing to do is to check out our service metadata. Each oData service exposes a special XML file called XML Metadata Manifest. You can see it by appending $metadata to the service URL. This is our GWSAMPLE_BASIC metadata URL. The Metatada Manifest is really important because it describes:

  • Which Model Set exposed by the service
  • For each Model which is the primary key, the list of attributes (with type and constraints) and if it has some navigation property (how you can navigate from this model to others as relations)
  • A lot of other useful pieces of information

Take a look at the BusinessPartner EntitySet, and try to guess which property I’ve used for the final result of this step. Now check out the Table documentation on SAPUI5 and try to replicate my layout with the correct order of columns and items. For each column name create a translation in the files and use it in the XML as a binding. Now, attach the BusinessPartnerSet to the table, add the requested column and style the column values according to the example.

Please note that:

  • Created At has a specific DateTime formated displayed
  • Column act differently if the app is opened in a phone, tablet or desktop browser

After you have finished the exercise you can check out the result on the source code of the branch step 1.

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Eric Beecroft
      Eric Beecroft

      I am working on a ui5 project for Autism at Work Group. I am trying to connect sqlanywhere database to ui5 interface. Any advice on how to get these two to communicate with each other?

      Author's profile photo Safter Maskan
      Safter Maskan

      Hi Eric,


      Please check this blog;