Skip to Content
Author's profile photo Petr Plenkov

How to extend OVP card template?

Hello, Fiori community

Today I’m going to share something tasty.

You probably know what is OVP:

Actually it’s one of smart templates available in SAPUI5.  Using templates supposes very few options for extending the behavior and screen logic.

Here is a very good example of such a case:


The standard card generates some line chart where the axis is always started from zero.

In fact how it works:

  1. By defining the card like this we have loaded from the corrsponding path:

2. This component has a contentFragment property which defines the fragment rendered for this type of card:

3. This fragment contains template where we actually create the VizFrame control

4. You can see that properties are defined in function. Let’s go there:

We can see that the format for the chart is predefined and have very few parameters we can change.

Meanwhile this documentation say we can use VizFrame rather more flexible:

That’s how I decided to modify these properties and use plotArea.adjustScale parameter to adjust the chart in the card.


But how can we do this.

First of all I decided to create own component in my app:

I created an empty component inherited from the standard one:

After some time spent in the debugger I found an interesting method in the class which is a parent for all type of cards:

Spending a bit more time in the debugger I found that it requires to be returned something like this:


sap.ui.define(["sap/ovp/cards/charts/line/Component"], function(Component) {

	return Component.extend("", {

		getCustomPreprocessor: function() {

			return {
				controls: {
					_syncSupport: true,
					preprocessor: ""





controls: says we return preprocessor which already works with control tree. I decided not to go upper.

_syncSupport is needed for instant processing and preprocessor is the name of the view preprocessor registered for the card’s view instance.

What is preprocessors you can read here:


I created the separate module for preprocessor in the same folder whith enhanced component:


sap.ui.define(["sap/ui/base/Object"], function(BaseObject) {

	var Preprocessor = BaseObject.extend("", {


	Preprocessor.process = function(oPromise) {

		var processView = function(oView) {
			var oChart = oView.byId("lineChartCard");

			if (oChart) {

				var oProperties = oChart.getVizProperties();

				if (!oProperties.plotArea) {
					oProperties.plotArea = {};

				oProperties.plotArea.adjustScale = true;
				oProperties.valueAxis.title.visible = false;
				/*oProperties.title.visible = true;
				oProperties.title.text = "Progress April";*/


		if ( oPromise instanceof Promise ) {
			return oPromise.then(processView);
		} else {
			return processView(oPromise);


	return Preprocessor;



You can notice some logic based on promises. The point is – it works differently in 1.38 and 1.44 versions. In 1.38 I have promise as incoming parameter, in 1.44 have a view reference directly.


This is just my workaround for this problem.


Finally the result is like this which I like more:


I hope it helps some of you to build nicer solution based on pretty cool app template from SAP.



Waiting for your comments



Assigned Tags

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

      When I try this, I got '50017' error. How can I fix it?


      Help me.. please..

      Author's profile photo Jaewon Oh
      Jaewon Oh

      I find this problem.. because my local web ide's sap ui5 version is '1.52'.


      When I deploy real evn that use sap ui5 version '1.60', It worked...


      Thank you for your GOOD Bolg!!!