New SAPUI5 Walkthrough Tutorial
!!! Please use this discussion for Q&A on the walkthrough tutorial: Walkthrough Tutorial Questions – please use this thread for Q&A !!!
A new Walkthrough tutorial for learning SAPUI5 / OpenUI5 has just been released on the OpenUI5 beta demo kit and will be shipped officially to partners and customers with release 1.30 of SAPUI5 / OpenUI5. This first tutorial includes our latest best practices for building apps and shows many up-to-date features with small incremental steps. Once you have mastered the walkthrough – an analogy from computer games – you know about all the important building blocks for creating marvelous apps.
With this new learning material we want to get developers kick-started for building apps with SAPUI5 / OpenUI5. This easy to consume and interactive learning material is suitable for beginners but also for more advanced developers that want to get an update on the latest features. Other topics that we will address in a similar format with tutorials soon are: Data Binding, Developing Apps, Testing Apps, Navigation & Routing, and more.
See for yourself:
Walkthrough Tutorial (Documentation in Developer Guide – 1.30 beta)
Walkthrough Tutorial (Code in Explored app – 1.30 beta)
The walkthrough tutorial consists of 35 small steps that start with a simple “Hello World” example and end with a fully responsive app by adding and explaining more and more features. You can just do the steps on your own for self-paced learning, or use them as material for workshops and trainings.
You will learn about the following topics as you go through the steps:
- MVC Concepts
- Structuring UI5 Apps
- Components and App Descriptor
- Layouting and CSS
- Data Binding
- Handling Mock Data
- Unit Testing and Acceptance Testing
- Navigation
- Responsiveness
Note:
The tutorials can be done in any IDE and server environment and thus do not contain any environment-specific descriptions. You can simply download the steps from the explored app (click on the code icon top-right) and run them on a local server with small adoptions like adjusting the resource path. We will soon provide an overview section where the set up for SAP Web IDE and other typical development environments like grunt is described.
Have fun with this great new tutorial and let us know how you like it.
Thank you
Michael
Hi,
The document gives very good information. It would be great if you consider left side navigation panel to access multiple SAP UI5 Applications.
I am looking for best practice document which covers left side navigation Menu similar to Fiori Launch pad/SAP Portal ).When we click any one navigation menu entry it should open the respective SAP UI5 Application with routing capabilities.
If you already have this type of content for best practices,please include in next revision.
Regards,
Koti Reddy
I love, I love, I love
Thank you people
Thank you! I love that you love it 🙂
Hi,
is the release of 1.30 already scheduled?
I can't find any information about the planned release date of 1.30
I'm asking because we're just starting with development of a new application and we would like to use some of the new 1.30 features.
Hello Frank, 1.30 is available since roughly 2 weeks, we ship a new release approximately every 3 months, the exact dates vary though.
When releases happen, they are announced via Twitter (@OpenUI5), the releases usually also get a blog post. The release dates for SAPUI5 are similar, as OpenUI5 is technically a part of SAPUI5
Michael
Hi Michael,
thanks for providing this information.
When I realized that OpenUI5 1.30 is available since 07.09.2015 I was wondering why it would take SAP more than one month to provide a SP to bring SAPUI5 to 1.30 on Netweaver ABAP stack.
We are currently developing an application making use of several features which have recently been introduced with 1.30 (e.g. wizard control). Our testing phase is planned for mid of october. So if SAP doesn't release the SP until then, we have to refer to the UI5 version available on HANA via the CDN. I hope this will work!
Hello Frank,
yes it seems long but SAPUI5 is bound to the release cycle of the UIADDON package that follows its own rule. That is why it can sometimes take longer for SAPUI5 then for OpenUI5. For more details you will have to check the release plan of the UIADDON package,
Is using OpenUI5 instead an option? most of the framework features are also included in the open source variant, only a few control libraries are not included.
Kind Regards,
Michael
Hi Michael,
at the moment we're using controls of sap.m only, so using OpenUI5 would be an option, but since SAPUI5 1.30 is available on the CDN we might use this one:
https://sapui5.hana.ondemand.com/1.30.6/resources/sap-ui-core.js
as mentionend here.
Hello Frank,
yes, CDN is an option too. The CDN version is updated roughly the same time as the OpenUI5 one so this should be earlier than the UIADDON part.
Kind Regards,
Michael
Hi
Code downloads for the Navigation and Routing tutorial are "Lost in space"
Thanks
Hello Eli,
sorry for the late reply, we had an issue with the first patch set, the links were in the wrong format. It should now work:
OpenUI5 Explored - Navigation Tutorial
Cheers,
Michael
Hello Michael
Happiness
Thanks.
Very good update.
Thank you,
Nagesh
Hi Michael,
This is a great signpost to the Walkthroughs, which I have followed as a very novice developer, and so it must be good, as they don't come any more novice than me. As a suggestion, I would love to see the inclusion of a true external data source like Northwind included, as the step to do that is too hard for a novice to follow without a step by step.
Thanks again,
Ian
Hi Ian,
thanks a lot for your positive feedback! We are very happy that the tutorial helped you getting started with UI5. We are currently working on some improvements of the Walkthrough, and we have also realized that step 26 needs more documentation and infos.
Will take your feedback with me and update the documentation as well as the code to make it easier to understand.
Thank you,
Michael
A great sign-post to the walkthroughs, which are fabulous, and manageable by anyone.
Saved and Bookmarked
Thanks.
--Pavan G
Great Toolset.
During some minutes of free time, I did the Walkthrough.
Unfortunaltely the most interesting things, getting Data and also Mocking (26/27) do not work as designet on my SAP-WEBIDE account ...
Would be very thankful, to get 26 and 27 working.
With lots of Respect and Regards
Bert Aufdemkamp
Hello Bert,
yes those steps are depending on your development infrastructure so they might need some adjustments for your use case. Do you use SAP Web IDE or some other development environment?
In SAP Web IDE you need to create an HTTP destination in your cloud cockpit as described in this article:
How to use Northwind OData service with SAP Web IDE
We will gradually improve the Walkthrough to provide more information on these steps, right now it is just described independent of the development environment.
Kind Regards,
Michael
Hi Michael,
thanks so much for your quick reply.
Unfortunately the plain downloaded No.26 does show an empty screen, without anything but light blue background when deployed and startet as usual (.../webapp/index.html).
I found out, that in file component.js "they" refer to "oConfig.invoiceRemote".
I "borrowed" a statement from No.27 and pasted it to no. 26. manifest.json .
Adding the following statement will show the "usual" Walkthroug-screen, unfortunately without data
I added the Northwind Sevice to my HanaCloud-Settings as shown in the referred document.
Now the Question:
- Why only adding "http://services.odata.org"
- Where to fill in the rest: "/V2/Northwind/Northwind.svc/"
- How to tell UI5 to use the newly created destination in No.26 UI5-Application?
- How to tell UI5 to add the "V2/" extension ...
Thanks again so much.
Best Regards
Bert
We have recently made some changes to the Walkthrough that will improve this. The fastest delivery channel for updated documentation on UI5 is actually the OpenUI5 beta account. It will be updated in the next days again then this issue should also be fixed.
For your questions:
- The destination typically only contains the hostname and the credentials if needed
- The descriptor (manifest.json) contains the path to the service as in step 26
- the new path is then "/destinations/Northwind/V2/Northwind/Northwind.svc" that is composed from the destiantion at run time. Assuming you named your destination "Northwind" of course.
We will further improve the steps to explain more details in Web IDE. Right now the walkthrough is intended to be run in any kind of development environment so we skipped the Web IDE specifics.
Kind Regards,
Michael
Hi Bert,
I was facing the same issue you have. In the end I got the step 26 working by
{
"path": "/destinations/northwind",
"target": {
"type": "destination",
"name": "northwind"
},
"description": "Northwind OData Service"
},
"invoiceRemote": "/destinations/northwind/V3/northwind/northwind.svc/"
Now I am getting data in the list.
Regards,
Henry
Hi Bert,
In addition to my previous post, I got the V2 version of Northwind OData Service also working 🙂
Regards,
Henry
Thanks Henry.
Also added the service entry in neo-app.json file and step 26 now working 🙂
Regards
Great, yeah this one adds the destination to the project configuration so that you can actually reference it in the desciptor, forgot to mention that earlier. We will add it to the documentation soon too.
Hi,
thanks for this walkthrough tutorial. It's so written that it is easy to read & it delivers the SAPUI5 principles in clear way. Some small things are outdated, but overall it is very useful!
I was wondering why is the recommended application structure different than the application structure generated by SAPUI5 Application Development plugin for Eclipse? E.g. plugin generates WebContent folder. I have put then the webapp folder in it.
I'm new to OData as well and I have noticed that tutorials says using V2 while the current OData version is 4..are there any special reasons why is V4 not used?
Thanks,
Filip
Hello Filip,
thank you for the detailed feedback, we are happy that you like the new Walkthrough Tutorial.
Regarding your questions:
- The Eclipse plugin is no longer actively developed, we have switched most content to SAP Web IDE and there we also have new app templates. That is why it still creates the "old fashioned" way of the app structure. For deployment on a local tomcat server however, the root folder is just a resource that is configured, so the name is not too important here. More important are the recent changes to the MVC folder structure and the component based development.
- an OData V4 model is not implemented yet in UI5, we are still working on the specifications. That is why all demo apps and documentation recommends using OData V2 as a model for now.
Kind Regards,
Michael
Hi Michael,
thanks clarifying that. Would you recommend to stop using Eclipse and move to Web IDE?
I have some difficulties to get steps 26 & 27 running because I don't get any data, neither from the OData service nor from the MockServer.
When I call this.getModel("invoice").setUseBatch(false); in Component.js I get an error because this.getModel("invoice") returns nothing. I have also noticed that in Step 27 Explored this code is not called at all. For some reasons my model is not instantiated automatically.
Is it maybe related to the error "Component-preload.js" not found?
Kind regards,
Filip
Hello Filip,
it depends on your use case. We support both development tools but the Eclipse tools are not actively developed. The new app templates are only shipped with SAP Web IDE. You can then export them and import them in Eclipse if you like.
Regarding your question: You probably use a SAPUI5 version 1.28 that does not support the automatic model instantiation. Therefore you will have to manually create the model as described in step 26.
Also, to access the real service you will need to configure a proxy script if you run the project in Eclipse, in SAP Web IDE you will have to configure a destination. These steps are not described in detail (yet) in the tutorial. But the mock server data should work fine if the model is set up correctly. Just give it another try with the code of step 26 and the file "testService.html" to start the app.
The component preload is an expected network error in the development environment. This is an optimization for productive apps that is not available during the development phase, you can ignore it in the console.
Kind Regards,
Michael
Michael thanks for the prompt answer.
I read that previous SAPUI5 versions do not support automatic model instantiation however I use "1.33.0-SNAPSHOT" according to the answer I get when I type sap.ui.version in browser's console.
I think I did not explain well my problem. Now its clear that I don't get remote data because I don't have a configured proxy script (when could we approximatelyt expected tutorial for proxy script configuration?). However I don't get mock data as well when using automatic model instantiation approach and also when using remote approach. For that reason I instantiate it manually
var oInvoiceModel = new ODataModel(oConfig.invoiceRemote); I use local data which is not servered by the MockServer
var oInvoiceModel = new JSONModel(jQuery.sap.getModulePath(sNamespace, oConfig.invoiceLocal));
But I would like to use automatic instantiation.
Thanks for clarifying component preload error. Maybe this could be mentioned in the step 9.
Hi Filip
Did you manage to get past step 26 and if so how?
I have my destination set and still not getting data
Thanks
Hi Eli,
unfortunately not. Since I'm not using Web IDE I don't have to set the destination. I'm still accessing the data like in the beginning. My manifest.json
"config":
{
"invoiceLocal": "/test/service/Invoices.json"
}
Kind regards,
Filip
Hi Filip
Decided to go that route as well.
Thanks
Suggestion to Filip and Mr Eli,
can we follow up on this one (Step 26) to improve the current documentation?
I would like add more details to this step so that people don't get stuck anymore.
If you still have issues with this step, please upload your code somewhere and let us know so that we can take a look.If you like you can open a documentation issue on github for this one too.
We are aware that many people struggle @ step 26 and 27, so we would really like to improve here
Kind Regards,
Michael
Hi
I managed to make it work by adding the service entry in neo-app.json file.
Thanks
Hi Filip,
struggle with the same problem as you. "Automatic instantiation" doesn't work.
I don't understand why it's not working if we use the CDN version. It's the latest stable version and should work, shouldn't it?
Sorry, for asking here. Couldn't find a link for an open discussion.
Hello Dirk,
i created a discussion thread and i answered your question there:
http://scn.sap.com/thread/3816469
Cheers,
Michael
Hi again,
unfortunately I have encountered one more issue and I'm not sure if it has to do something with non automatic model instantiation.
The step 32 - routing with parameters does not work es expected. Calling
invoicePath: oItem.getBindingContext("invoice").getPath().substr(1)
in my project returns different result than the same method called in explored code. Please see picture
Kind regards,
Filip
Hello Filip,
without wanting to interrupt the discussion, it might be easier to handle your question by looking directly at the code. Can you create an issue on our OpenUI5 issue tracker and make the code available? This is the easiest way to follow up:
https://github.com/SAP/openui5/issues
It seems to be an issue in the mock data, the northwind service uses a combined key, but in your example you use the relative data binding object path instead. /Invoices/1 is basically the first invoice whereas /Invoices(someKey) is the invoice with a specific key. The issue is that the navigation should not contain "/" characters as youc an see in the error message.
Just let me know, i will take a look again
Michael
Thanks for your reply Michael.
Oh, I was not aware that questions on GitHub are welcome. Thanks for the hint. I'll post my further questions over there.
Kind regards,
Filip
Hello Filip,
For questions only use the discussion platforms like the forums here. This feels more like a coding issue or something that we can improve in the documentation. Thats why i pointed you to github so that we can follow up there.
Kind Regards,
Michael
Alright, I get it know 🙂 I'm pretty sure you are right that my mock data is the cause because I still have the outer paranthesis, i.e. I didn't "..remove the outer object structure with the key invoices so that you have a flat array of invoice items." as adviced in the step 27. That's why I get different result.
Yes, thats the issue. Now that you say it the mock server is just discarding the "faulty" json data and using auto-generated data instead. That is why it is not working for you
Hello Filip, i got exactly same error as yours!
Have you found the answer?
Hi Yoppie and Filip,
Please create a new Discussion marked as a Question. Comments to a Blog (or Document) is not the right vehicle for asking questions as the results are not easily searchable. Once your issue is solved, a Discussion with the solution (and marked with Correct Answer) makes the results visible to others experiencing a similar problem. If a blog or document is related, put in a link.
NOTE: Getting the link is easy enough for both the author and Blog. Simply MouseOver the item, Right Click, and select Copy Shortcut. Paste it into your Discussion. You can also click on the url after pasting. Click on the A to expand the options and select T (on the right) to Auto-Title the url.
Thanks, Mike (Moderator)
SAP Technology RIG
Walkthrough Step 2 does not work in SAP Web IDE 🙁
No alert pop up appears ...
Looks like src="/resources/sap-ui-core.js" can't be found ...
Anyone got the same problem?
Hello Dominik, you will need to
- add the neo-app.json file (right click on project folger > New -> Cloud Connectivity Configuration)
- or switch to the CDN version of SAPUI5/OpenUI5
Then it will work.There is also an infobox explaining it
Kind Regards,
Michael
Hi Michael,
thank you!
Found it already in "App Development using SAP Web IDE".
Didn't thought that I have to configure my project in Web IDE too.
Now everything works well!
Btw: Web IDE rocks! 🙂
Kind Regards,
Dominik
Walkthrough Step 26
OpenUI5 SDK - Demo Kit
Does not work as expected !
SAPUI5 Explored
It says "No data"
Can you please check ?
Hi Amol
There is a link for Q&A at the top of this blog post and if you follow that link you will find a solution for step 26 or else go through the comments in this blog post, the solution is also mentioned
Kind regards
Hi Mr Eli,
If you notice the screenshot in my post the application is not working on the SAP site as well which cannot be fixed by workarounds.
I am using Eclipse.
Regards,
AG.
Hello Amol,
i answered your question in the Q&A thread:
Walkthrough Tutorial Questions - please use this thread for Q&A
Kind Regards,
Michael
Hi Michael,
Thanks for sharing this informative and valuable post.
Thanks & Regards,
Swati