Overview page (OVP) custom cards

[AshishAnand]

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.

1. right click on your project in web-IDE --> New --> Extension
   


2. n Template selection pop up, select Overview page extension
   


3. 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:

1. created a folder under the ext folder of your project (in this case folder name is todo)


2. created a component.js, todo.controller.js and todo.fragment.xml files under your todo folder.


3. 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.