Skip to Content
Technical Articles
Author's profile photo Ashish Anand

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.

  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.

 

Assigned tags

      6 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Kimi Xu
      Kimi Xu

      Hi,

       

      under the settings of the cards in the manifest.json, is there any possibility to customize the index/sequence of the cards?

       

      Author's profile photo Ashish Anand
      Ashish Anand
      Blog Post Author

      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

      Author's profile photo Thomas Maatz
      Thomas Maatz

      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!!!

      Author's profile photo Akash Nachnani
      Akash Nachnani

      Hi,

      I am also facing the same problem as Thomas Maatz mentioned.

      How can we apply global filter in custom cards?

      Thanks.

      Author's profile photo Wolfgang Bauer
      Wolfgang Bauer

      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

      Author's profile photo Mary Silvester
      Mary Silvester

      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.