Skip to Content

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



Be the first to leave a comment
You must be Logged on to comment or reply to a post.