Hi, I'm Philip from the HANA Academy.
In this series of videos, we're looking at the XS Advanced model.
In this video, we're going to look at how you can build a Fiori Master Detail module, so a UI5 module
as part of your XS Advanced application using WebIDE
using the template available with HANA 2.0 SPS 01.
Now, there've been quite a few improvements made to this template compared to how it worked previously.
We've created a database with a couple of tables, and we created an OData service in the previous video
so refer to the previous videos if you've not already seen those.
What we're going to do now is create a new module
so for our project 'sales' create a new module
and this time we're going to choose the 'SAP HANA Fiori Master-Detail Module'.
If you don't see it in the list because you're having your most recent items in the list
just hit 'More...' and then you'll get a full list.
So it's the Fiori Master-Detail Module.
Now, give it a name, I'm going to call it 'ui', whatever you want, hit 'Next'.
This is where there's a very major change.
Previously you had to access an XML file that you'd saved which had the definition of the OData service
couldn't connect to live OData services.
That's now changed with SPS 01.
In fact, you'll see that for the services, any services available in this project for OData
they are actually provided in a list of current projects.
So you can see that you've got services here, one of them is a Node.js and it's a '/sales/nodejs' module
and it's actually up and running, and that's the one we created in the previous video.
If you're using Java (because you can also create OData Version 4.0 services with Java)
you could do that here as well
but I'm using Node.js, so it's up and running
which means that we're going to be able to connect directly to that service
we're not going to have to do any manual configuration
based on, as I said, the metadata .xml that we've previously downloaded
so it's much simpler, much easier with SPS 01.
So let's hit 'Next'. Having selected that service, we can create a Fiori Launchpad type app if you want
you can be standalone but very often you're going to want to embed into a Fiori launchpad
and particularly because Fiori launchpad is now available with XS Advanced WebIDE for HANA SPS 01.
Give it a title, let's maybe call it 'Sales'
a namespace 'sales.ui'.
Then you need to specify what you want to go where.
Now, this is not particularly new, let's just go quickly through.
Choose an object collection from that OData service, so in this case it's going to be region that we start with
so we'll start with region and then be able to drill down to countries.
Let's choose the name of the region to be in the title
and then we've got the amount, so the sales amount for that region
and then for the line items we're going to have countries.
Again, we'll choose the name of the country to be in the title.
Of course, you can come and change all of this later by editing the XML files, you probably know that.
We've got the amount in there.
So we've done the basic selections.
You can hit 'Next' and then hit 'Finish' and this is where the magic happens.
It's going to go out and build you all the configuration needed.
It's going to write the code to build you that Fiori Master-Detail application.
So you'll see here there's quite a lot of code in there
and it's done all the work necessary to connect it to your OData service, so that's really new in SPS 01.
If we go to the 'mta.yaml' file – remember, we have a nice editor now, so let's just maximize the space.
Choose 'ui' – this has been added. You can see, for example, that it's already requiring the Node.js API
which is a service that's created by the Node.js module.
We didn't code any of that, it's actually been scripted and coded for us
so if we go and look at the code editor you'll see that the UI module's been added
but the 'requires' section for the back end, the Node.js back end has actually all been set up for us
and, of course, that back end service, the provider, was already set up for us in the Node.js module in the previous video.
So it's a lot easier to work with, a lot more straightforward.
You don't have to have code that you copy and paste in, you can get going directly against a live OData service.
So let's go ahead and run that.
Now, you can run the 'Compnent.js' or the 'index.html'.
Let's just first do a run, so basically the options you have we can actually say 'Run' -> 'Run as' -> 'Web Application'
that's going to use the 'index.html', so let's try that one first.
So we can see that it's actually running, it's opened up the application for us.
In some cases, if you've not authorized it
you may get a message asking you to authorize pop-ups in your web browser.
I'm using Chrome, actually you can use Internet Explorer or Edge from Microsoft
that's actually now supported with HANA 2.0 SPS 01 of WebIDE for HANA.
So we can see we've got our app
we've got the different continents
and then we've got the different countries in the detail section on the right
so we've built a Fiori app without having to write any explicit code.
Now, we can just go back from that.
There's another way in SPS 01 that we can run this as well.
We can actually run it, effectively, in a demo Fiori launchpad
because if we actually said that this app is something that we want to be available to run in a Fiori launchpad
and for that typically within 'webapp' you'd be looking at the 'Component.js', so run the 'Component.js'
and for that we'll say 'Run', but this time 'Run as' -> 'SAP Fiori Launchpad Sandbox'
so basically a sandbox, a demo Fiori launchpad that it will then drop your application into.
So that's now going to take a couple of seconds to actually go ahead and run.
So now we can see we've got our application, Master-Detail, the same app running the same way
but it's within a Fiori launchpad.
So as you can see, we can even go to the home
so we've actually got some sandbox tiles in there and we've got the tile for our 'ui'
so it allows you to test your Fiori Master-Detail application, your 'ui' app
actually in the context of Fiori launchpad.
Okay, now there's one other thing to show
that when you're working with 'index.html' to run as a web application or in Fiori launchpad
you have got another option.
If you go to the Run configurations
you'll see that one of the options is
(and you'll need to scroll down in this case for it)
is you can now run with mock data.
So if you don't have any data already
you maybe want to provide it in JSON or have the system generate data for you automatically on the fly
you have that option, you can run with mock data.
If you've used WebIDE that's available on SCP, the SAP Cloud Platform
then you might already be familiar with, actually, working with mock data.
So it's basically the same capability has now been included with the WebIDE for HANA that works with XS Advanced and is part of HANA itself
so that's the mock data, that's also new in SPS 01 of HANA.
So, what we've seen in this video is how we can create a Master-Detail Fiori app.
We've been able to run it as a classic web application
we can run it in a Fiori launchpad sandbox
and we didn't really have to write any code.
In fact, all of the plumbing, the connections between the different modules, because it's not just 'ui' on it's own
it's 'ui' working with the 'nodejs' service, etcetera
all of that plumbing, all of the code that was needed was generated for us on the fly
so we really had minimal effort as we've built that, so we were actually building it against a live OData service.
That's a major new capability that comes with SPS 01 of HANA 2.0 when we're working with WebIDE for HANA.
You can find more HANA video tutorials on our YouTube channel.
If you'd like to be informed as soon as new video tutorials are published, please subscribe to the channel.
You can also connect with us on LinkedIn, follow us on Twitter, and we have pages on Facebook and Google+.
Code snippets for all of our tutorials are published to GitHub.
Thanks for watching.