Technical Articles
Overview page (OVP) custom cards
prerequisites
Make sure you have been to the previous blog of this blog series.
As we have already learnt in previous blogs of this blog series that OVP support only lists, table, stack, link list and analytical cards. But OVP also allows application developers to develop their own custom card and use it in their OVP application. In this blog, we will learn how we can define our own custom card and use in an OVP application.
- right click on your project in web-IDE –> New –> Extension
- n Template selection pop up, select Overview page extension
- in extension setting pop up, choose “Card” and click next
After performing the above-mentioned steps, the OVP extensibility plugin has done the following things for you in the background:
- created a folder under the ext folder of your project (in this case folder name is todo)
- created a component.js, todo.controller.js and todo.fragment.xml files under your todo folder.
- added a card new card in your manifest with card type of this custom card
"card91": { "template": "demo.ovp.BusinessOverview.ext.todo", "settings": { "title": "{{card91_title}}" } }
now you can implement todo.controller.js and todo.fragment.xml files according to your need, in this example I have just added a static message strip to keep it simple.
<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:ovp="sap.ovp.ui"
xmlns:template="http://schemas.sap.com/sapui5/extension/sap.ui.core.template/1">
<MessageStrip
text="Default (Information) with default icon and close button:"
showIcon="true"
showCloseButton="true"
class="sapUiMediumMarginBottom">
</MessageStrip>
</core:FragmentDefinition>
To support resizable operation on your custom card application developer need to implementresizeCard in the custom card controller. This method gets called when the card is resized.
Conclusion
As an application developer, we were able to define a custom OVP card and also use that card in our OVP application
What Next?
In the next blog, I’ll discuss how to publish Fiori application on SAP cloud platform.
Hi,
under the settings of the cards in the manifest.json, is there any possibility to customize the index/sequence of the cards?
Hi Kimi Xu,
As of now, OVP does not provide any standard way to change the index/sequence of the cards, although the end user changes the position of the cards by dragging and dropping the cards and the OVP will save it for that particular end user for future.
Thanks and Regards
Ashish
Hi,
i succsessfully developed some custom cards, make it resizeable and so on. Now i’m faceing the problem with the smart filters from OVP. It does not work with my custom card, is there any special method in the controller which is called as event handler?
Thanks a lot!!!
Hi,
I am also facing the same problem as Thomas Maatz mentioned.
How can we apply global filter in custom cards?
Thanks.
Hi,
how can I use an odata service with my custom card? I have problems with the annotation file.
Does anybody have an example? My odata service returns just a flat structure based on three fields – no collection.
On the card are three fields which should just be filled by the odata.
BR
Hello All,
i am adding multiple custom cards in an overview page. But first custom card is working fine but second custom card is getting truncated. Second custom card controller is not getting called.
Thanks in advance.