How to extend OVP card template?

Hello, Fiori community

Today I’m going to share something tasty.

You probably know what is OVP:

https://sapui5.hana.ondemand.com/#docs/guide/c64ef8c6c65d4effbfd512e9c9aa5044.html

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 sap.ovp.cards.charts.line.Component 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 sap.ovp.cards.charts.Utils.LineChart.getVizProperties 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: https://sapui5.hana.ondemand.com/docs/vizdocs/

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 sap.ovp.cards.generic.Component 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("booking.fiori.ovp.payments.cards.charts.line.Component", {

		getCustomPreprocessor: function() {

			return {
				controls: {
					_syncSupport: true,
					preprocessor: "booking.fiori.ovp.payments.cards.charts.line.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:

https://sapui5.hana.ondemand.com/#docs/guide/48b81b967af34ad08f1f88c962b4740a.html

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("booking.fiori.ovp.payments.cards.charts.line.Preprocessor", {

	});

	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";*/

				oChart.setVizProperties(oProperties);

			}
		};
		
		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.

Cheers,

Waiting for your comments

Petr