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.Tablewith items and property binding - Use
sap.ui.model.type.DateTimeto 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 i18n.property 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.
