Creating bare-bone Overview page (OVP) application

[AshishAnand]

In this blog, we will look at the steps to create the bare-bone of our OVP application and also discuss some of the very important OVP concepts.

prerequisites

Make sure you have been to the previous blog of this blog series.

Steps to create an OVP application in Web IDE

1. go to Web IDE --> File --> New --> Project From Template.


2. In the "Template Selection" pop up --> select "SAP Fiori Elements" in the category drop down --> Select  "Overview Page" --> click Next
   


3. In "Data Connection" pop up --> Select "File System" --> Browse to the file where you have metadata for service "GWSAMPLE_BASIC" --> click next
   
   Important: We are importing a metadata file from local file system because we want to have a mocked OData service for this blog. For productive use, it should always be a real OData service.


4. In the "Annotation Selection" pop up --> select "File System" --> Browse to the file where you have annotation file for service "GWSAMPLE_BASIC" --> click next
   
   Important: Here we will be using a local annotation file for OData service, depending on your use case OData annotations can also come from your backend systems.
   I'll be discussing the different annotations supported in OVP as when we came across them in the course of this blog series.


5. In the "Template Customization" pop up --> choose the below configuration and click on finish. I'll discuss each of the parameters in the manifest section of this blog.
   

After performing the above-mentioned steps, Web IDE will generate an OVP project in your workspace.

Understanding the autogenerated manifest file

manifest.json is the application descriptor file for any SAP UI5 application which defines the static attributes of the application. In the case of OVP application, manifest.json will have a separate namespace i.e. "sap.ovp" which will contain the attributes specifically for OVP application, let's try to understand these  attributes below:

{

	"_version": "1.7.0",

	"start_url": "start.html",

	...

	"sap.ovp": {

		"globalFilterModel": "GWSAMPLE_BASIC",

		"globalFilterEntityType": "GlobalFilters",

		"containerLayout": "resizable",

		"enableLiveFilter": true,

		"considerAnalyticalParameters": true,

		"cards": {}

	}

}

globalFilterModel

Name of the model to which smart filters bar of the OVP application should be bound.

globalFilterEntityType

Name of the entity set to which smart filters bar of the OVP application should be bound.

Important: the smart filter bar of an OVP application can only be bound to one entity set of one service.

We will learn about configuring the smart filter bar of an OVP application in detail in the next blog of this blog series.

containerLayout

OVP supports two types of layouts:

1. fixed: In fixed layout, the end user cannot resize the card size. It will always be as defined by the application developer in the manifest.json.


2. resizable: The resizable layout allows the end user to resize a card in horizontal and vertical direction.

refreshIntervalInMinutes

This specifies the time in minutes after which OVP data get refreshed automatically. If specified as less then 1 then 1 minute is considered.

Rest of the configuration I will discuss in the further blogs of this blog series.

Running the application

1. Right click on the project --> Run --> Run as Web Application.


2. In the pop up, choose "testOVP.html"

Surprise !!! This will run your application but everything will be blank. The reason is the application is requesting the data source to fetch the metadata and data which in our case is a dummy URL. The application will run fine if you choose "testOVPwithMock.html" from the above pop up. But to complete this blog series we need to use mock data a real data. To do that we need to fool our very own application by adding following code in conponent.js

(function () {

	"use strict";

	/*global sap, jQuery */



	/**

	 * @fileOverview Application component to display information on entities from the GWSAMPLE_BASIC

	 *   OData service.

	 * @version @version@

	 */

	jQuery.sap.declare("demo.ovp.BusinessOverview.Component");



	jQuery.sap.require("sap.ovp.app.Component");

	

	/**

	 * addiotnal code to use mock data as real data starts

	 **/



	var sNamespace = "demo.ovp.BusinessOverview";

	sNamespace = sNamespace.replace(/\./g, "/");

	sap.ui.require([

		sNamespace + "/localService/mockserver"

	], function (server) {

		// set up test service for local testing

		server.init();



		// initialize the ushell sandbox component

		sap.ushell.Container.createRenderer().placeAt("content");

	});

	

	/**

	 * addiotnal code to use mock data as real data ends

	 **/



	sap.ovp.app.Component.extend("demo.ovp.BusinessOverview.Component", {

		metadata: {

			manifest: "json"

		}

	});

}());

Conclusion

We were able to create OVP application without any cards and also run the application. We also learnt about a few OVP manifest.json configurations.

What Next?

In the next blog, I'll discuss configuring OVP's smart filter bar.