Skip to Content
Technical Articles
Author's profile photo Ashish Anand

Creating bare-bone Overview page (OVP) application

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.


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": {}


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


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.


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.


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@
	 * addiotnal code to use mock data as real data starts

	var sNamespace = "demo.ovp.BusinessOverview";
	sNamespace = sNamespace.replace(/\./g, "/");
		sNamespace + "/localService/mockserver"
	], function (server) {
		// set up test service for local testing

		// initialize the ushell sandbox component
	 * addiotnal code to use mock data as real data ends
	 **/"demo.ovp.BusinessOverview.Component", {
		metadata: {
			manifest: "json"


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.

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Chandu 17
      Chandu 17

      Hi Ashish,


      Your blog is really good and i have tried to read all the blogs.But as i am new to OVP.

      As even i have created an OVP application with annotation file which i am having in created and saved locally.I would like to understand is the annotation file important.Should we always have annotation file  in local system.I know if we have UI Annotation in CDS then its good to go.Is it only 2 options having annotations in CDS or having them in a local annotation file.Are there any other options we have


      Chandra Rekha

      Author's profile photo Ashish Anand
      Ashish Anand
      Blog Post Author

      Hi Chandra,

      Thanks for the feedback.

      yes, you can have your annotations in your CDS or local annotation file. There is also a new way of doing it metadata extension files. These are the ways which I know of.

      Which approach to follow, depends completely on your use case.

      Thanks and Regards


      Author's profile photo Chandu 17
      Chandu 17

      Hello Ashish,


      Could you share how can i do metadata extensions.

      Could you also help me if you have any idea on OVP Extesions for Standard app.I am trying to extend the app following some blogs but i am unable to get OVP Extensions template


      Chandra Rekha

      Author's profile photo Irina Ahrens
      Irina Ahrens

      Hi Ashish,

      Could you share annotation file you use?

      Thank you, Irina.