The other parts of the blog series will focus on the development of OVPs in the SAP Web IDE. For this purpose, a few prerequisites have to be observed and implemented in advance, which we will discuss in more detail in this article.
For the development of the Overview Page (OVP) we will use the – SAP recommended development environment – SAP Web IDE. For this, it is necessary to create an account in the SAP HANA Cloud Cockpit. The HANA Cloud Cockpit (HCP) is an integral part of SAP’s cloud-platform strategy and houses all the services necessary for our project.
In addition, we have to create a so-called “destination” in the HCP. This destination is in a sense our data source from which our OVP consumes the data. In general, an x-arbitrary OData service can be hidden behind the destination. In this blog series we use the Northwind OData service, which can be reached at the URL: https://services.odata.org/V3/Northwind/Northwind.svc/. It contains a large amount of entities and data and is therefore optimally suited.
Let us begin!
1. Establishment of the HCP
First, we will create the destination in the HCP. To do this, we will sign in with our newly created account at https://account.hanatrial.ondemand.com/cockpit. On the following page we click on our account name. Now we are in the dashboard, from which we can access all services of the HCP. For our project we click on “Connectivity” in the sidebar and then on “Destinations”. We will create a new destination with the following data:
Finished! When saving, we point out that it may take up to 5 minutes for us to use this service in the later steps. We should definitely take this seriously and – if we have not done so yet – let’s have a coffee ?
2. Set up the Web IDE
Welcome back! Now we will familiarize ourselves with the WEB IDE and set it up for the development of OVPs. We open the web IDE via the HCP. To do this, we go to Services in the sidebar, scroll down and click on the “SAP Web IDE” tile.
Now we will set up the Web IDE for the development of OVPs. The charm of the development in the Web IDE is, among other things, that there are ready-made templates for different types of SAPUI5 projects. So also for OVPs. For the hasty ones who have already tried to select the OVP template when creating the project – welcome back! To create an OVP project, we need to activate the associated plugin in the first step. To do this, we click on the cogwheel in the Web IDE in the left toolbar and activate the “Overview Page Application” plugin.
3. Create the project
The OVP can now be created via File -> New -> Project from Template.
In the “Data Connection” step, we click on “Service URL” in the left pane, select “northwind” in the list and specify “/V3/northwind/northwind.svc” as the service URL. A click on the “Test” button tells us whether the connection was successfully established.
In the “Template Customization” step, we change the datasource’s alias to “NorthwindModel”. Finished.
Simple, right? In the next post we will create a simple card and see what Fiori OVPs have to offer.
