Im ersten Teil ging es um eine grobe Übersicht über Fiori Overview Pages (OVP), der Beitrag ist hier zu finden.

Die weiteren Teile der Blogserie werden näher auf die Entwicklung von OVPs, in der SAP Web IDE eingehen. Dazu sind vorab einige Voraussetzungen zu beachten und umzusetzen, auf diese werden wir in diesem Beitrag näher eingehen.

Zur Entwicklung der Overview Page (OVP) werden wir die – von SAP empfohlene Entwicklungsumgebung – SAP Web IDE verwenden. Dazu ist es notwendig, einen Account im SAP HANA Cloud Cockpit anzulegen. Das HANA Cloud Cockpit (HCP) ist integraler Bestandteil von SAPs Cloud-Platform Strategie und beherbergt alle für unser Vorhaben, notwendigen Dienste.

So unter anderem auch die Web IDE. Zusätzlich müssen wir im HCP eine sog. „Destination“ anlegen. Diese Destination ist gewissermaßen unsere Datasource, von welcher unsere OVP die Daten konsumiert. Hinter der Destination kann sich generell ein x-beliebiger OData Service verbergen. In dieser Blogserie verwenden wir den Northwind OData Service, welcher unter der URL: https://services.odata.org/V3/Northwind/Northwind.svc/ erreichbar ist. Dieser beinhaltet eine große Menge an Entitäten und Daten und ist somit optimal geeignet.

Legen wir los!

1. Einrichtung des HCP

Zuerst legen wir die Destination im HCP an. Dazu melden wir uns mit unserem eben angelegten Account unter https://account.hanatrial.ondemand.com/cockpit an. Auf der folgenden Seite klicken wir auf unseren Account Namen. Nun befinden wir uns im Dashboard, von welchem wir auf alle Dienste der HCP zugreifen können. Für unser Vorhaben klicken wir in der Sidebar auf „Connectivity“ und dann auf „Destinations“. Wir legen eine neue Destination mit den folgenden Daten an:

1destination

 

Fertig! Beim Speichern werden wir darauf hingewiesen, dass es unter Umständen bis zu 5 Minuten dauert, bis wir diesen Service in den späteren Schritten verwenden können. Dies sollten wir unbedingt ernst nehmen und uns – wenn noch nicht geschehen – einen Kaffee holen :)

2. Einrichtung der Web IDE

Willkommen zurück! Jetzt werden wir uns ein wenig mit der WEB IDE vertraut machen und sie für die Entwicklung von OVPs einrichten. Die Web IDE öffnen wir über das HCP. Dazu gehen wir in der Sidebar auf Services, scrollen ein wenig runter und klicken auf die „SAP Web IDE“-Kachel.

Nun werden wir die Web IDE für die Entwicklung von OVPs einrichten. Der Charme bei der Entwicklung in der Web IDE liegt unter anderem darin, dass es für verschiedene Arten von SAPUI5 Projekten, vorgefertigte Templates gibt. So auch für OVPs. Für die voreiligen unter euch, die bereits versucht haben, das OVP Template bei der Projekterstellung auszuwählen – willkommen zurück! Um ein OVP Projekt erstellen zu können, müssen wir das zugehörige Plugin im ersten Schritt aktivieren. Dazu klicken wir in der Web IDE in der linken Toolbar auf das Zahnrad und aktivieren das „Overview Page Application“-Plugin.

3. Erstellen des Projekts

Die OVP lässt sich jetzt über File -> New -> Project from Template erstellen.

Im Schritt „Data Connection“ klicken wir im linken Bereich auf „Service URL“, wählen in der Liste „northwind“ aus und geben „/V3/northwind/northwind.svc“ als Service URL an. Ein Klick auf den Button „Test“ verrät uns, ob die Verbindung erfolgreich hergestellt wurde.

Im Schritt „Template Customization“ ändern wir den Alias der Datasource in „NorthwindModel“ um. Fertig.

Einfach, richtig? Im nächsten Beitrag werden wir eine simple Card erstellen und schauen, was Fiori OVPs alles zu bieten haben.