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:
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:
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:
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
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:
- 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
- SAP Managed Tags:
2 Comments
