Skip to Content
Technical Articles
Author's profile photo Akshaya Parthasarathy

Navigation from a Custom card in OVP to Object Page of another application

Hi All,

This blog details on Navigation from a custom card in OVP to object page of another application with parameters.

Pre-requisites:

Created an OVP app and added a custom card to it. For more details on how to create a custom card, please refer this blog.

https://blogs.sap.com/2017/05/21/create-your-own-custom-card-in-a-sap-fiori-overview-page/

I had a form in my custom card and clicking on header of the card should enable me to navigate to another app’s object page.

Steps

  1. Create “other extensions” in OVP extension
  2. a custom.controller.js is craeted in ext folder of the app.
  3. if you had created a custom card , say inside the folder cards, you will be able to see a fragment, a controller and a component.js inside that card as shown in the image below.
  4. Open this component.js and remove the header and footer fragments part.It should have only the content fragment as shown below
    	metadata: {
    			properties: {
    				"contentFragment": {
    					"type": "string",
    					"defaultValue": "namespace.ext.cards.generalInfo"
    				}
    			},​

    5.Open custom.controller.js and override the doCustomNavigation method

doCustomNavigation: function (sCardId, oContext, oNavigationEntry) {

		
			if(sCardId=="card00")
			{
var id=Object.keys(oContext).id
		var oCrossAppNavigator = sap.ushell.Container.getService("CrossApplicationNavigation"); // get a handle on the global XAppNav service
oCrossAppNavigator.toExternal({
    target : { shellHash : "app1-display&/object_page_entity_set('"+ig+"')"}
		});
		
		
		}

*its ‘”+id+”‘ and not ‘”+ig in +”‘

Note: the shellhasg is ideally the URL of the app2’s object page

6. Save and Run.

7. Now clicking on header of custom card will lead you to object page of app2

 

 

Assigned Tags

      3 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Tareq Abu Assaf
      Tareq Abu Assaf

      Thank you for your help.

      I have a question here, when I put the mouse over the header of the card it does not show as link, the mouse cursor remains the same and no indication that there is a link. But when I click it opens the other page.

       

      How to fix this?

      Author's profile photo Akshaya Parthasarathy
      Akshaya Parthasarathy
      Blog Post Author

      Yes that happens. You can just add css to it to make it look like other standard cards

      add styleclass to header of the card

      sap.ui.getCore().byId('card06Original--ovpCardHeader').addStyleClass('cursorHand');

      Try adding this Css

      .cursorHand>* {
      cursor: pointer !important;
      }

      .cursorHand:hover {
      background: rgba(52, 97, 135, 0.04) !important;
      transition: 200ms !important;
      }

      Author's profile photo Tareq Abu Assaf
      Tareq Abu Assaf

      Thank you Akshaya, you made my day 🙂