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.
vilinski
Well, thank you for the introduction… To all who read this and become curious. UI5 is the last what I would choose for UI. It's not truly opensource, wannabe modern, etc. But no Typescript, no HMR, no Treeshaking, no any sane UI tools, documentation is incomplete, crazy obstacles if you wanna define own component, etc. etc. So better keep you hands off it. Really!
StErMi Автор
Hi vilinski, this is not really a constructive comment :D
SAPUI5 is not Open Source you are right but SAPUI5 is based on OpenUI5 that is totally open source. SAPUI5 has just a couple of UI controls more than OpenUI5 that are not yet open source released but it's just a matter of time.
You always need to remember a couple of things. SAP is for enterprises and enterprise companies are different in needs compared to startup, projects and so on what you really want is stability and security and you cannot make huge shifts of tech without thinking about it twice. Also remember that enterprise companies relies always on Internet Explorer and when we're talking about that browser every new cool things are not supported.
SAPUI5 1.6.x is the latest version that will support that browser so I think that they will make some huge changes after that release cycle.
So yes, I think that SAPUI5 is still far behind if compared to other web framework like Vue, Angular or React but they are different products for different markets. You cannot find something better than SAPUI5 if you need to work with SAP ecosystem or with enterprise echosystem in general.
About the documentation, tools and resources you are wrong. SAP has made a huge investment about it and about the community. If you look at my first blog post on Habr "What do you need to start learning SAPUI5?" you can find all the answers.
I'm not a SAP employee so mine is the opinion of a consultant that perfectly know the state of the art of front/back end development nowadays.
vilinski
Sorry if I'm scaring your customers away. I'm not an SAP employee either. I'm just stinky because I'm forced to use it now. Using it with SAP ecosystem is probably the only way you can convince any naive manager to force their devs to use it in development. SAP in general is infamous for it's user findly interfaces, not just outdated or not responsive. And any comments about enterprise in general are not constructive too. There are many examples where enterprises are doing much better than that, and if not — it's their legacy problem what you call «different market». Didn't see any security features in UI5 until now, which are not existed anywhere else for years. What you speaking about? Is using naked JS any secure? Look to the SAP own blog entry here, scroll to disadvantages: blogs.sap.com/2017/03/04/side-by-side-sapui5-vs.-react-angular2 It's not such old. What has happened to UI5 in this time period? Nothing. What about react and angular? They are literally newborn since then. If you know perfectly the state of the art of development nowaday, you probably know about even better alternatives.
StErMi Автор
Hi vilinski that blog post is on SCN (SAP Community Network) but it's not from SAP itself, it's from a community member (like me or like you) because SAP allows everyone to express an opinion.
As I said, when you work in an enterprise envoirnment innovation is slow. SAPUI5 is evolving too, maybe slower than Angular, Vue or React but it's evolving but it's also true that it's used in much different use case.
A lot of blog post about the evolution can be found here: blogs.sap.com/tag/ui5-evolution