Skip to Content
Personal Insights
Author's profile photo Uladzislau Pralat

SAP Fiori Overview Page – Custom Info Card

In ideal world well defined dashboard content is self explanatory. All dimensions, measures, KPI, titles, etc are clearly defined. Unfortunately, we leave in a real world. For example, many clients have multiple flavors of the same KPI or their dashboard visualization are difficult to understand what insight they are trying to convey. If above sounds familiar to you, then you client’s Fiori Overview Page needs Custom Info Card to help users to navigate thought information silos.

As you can see from screenshot above custom info card organizes information blocks into carousel with possibility swiping right or left.

This is how custom info card can be implemented:

  1. Define Custom Info Card
  2. Add Custom Info Card to Overview Page

 

Define Custom Info Card

Under ext folder create cards folder with following files:

Below is a source code for Component.js

sap.ui.define(["sap/ovp/cards/generic/Component"], function (Component) {

	"use strict";

	/* component for custom card */
	return Component.extend("blog.FlightOVP.ext.cards.Component", {
		// use inline declaration instead of component.json to save 1 round trip
		metadata: {
			properties: {
				"contentFragment": {
					"type": "string",
					"defaultValue": "blog.FlightOVP.ext.cards.List"
				},
                    "countHeaderFragment": {
                        "type": "string",
                        "defaultValue": "sap.ovp.cards.generic.CountHeader"
                    },
				"footerFragment": {
					"type": "string",
					"defaultValue": ""
				}
			},

			version: "@version@",

			library: "sap.ovp",

			includes: [],

			dependencies: {
				libs: ["sap.m"],
				components: []
			},
			config: {},
			customizing: {
				"sap.ui.controllerExtensions": {
					"sap.ovp.cards.generic.Card": {
						controllerName: "blog.FlightOVP.ext.cards.List"
					}
				}
			}
		}
	});
});

Note: do not forget to update blog.FlightOVP namespace with your own project specific namespace

 

Below is a source code for List.controller.js

(function () {
    "use strict";
    /*global sap, jQuery */
    
   /*
   Here you can put Controller code
   */
 
    sap.ui.controller("blog.FlightOVP.ext.cards.List", {
         
        onInit: function () {
             
        },
 
        onAfterRendering: function () {
 
             
        },
 
 
    });
})();

Note: do not forget to update blog.FlightOVP namespace with your own project specific namespace

 

Below is a source code for List.fragment.xml. This is where you feel you custom info card with content

<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">
	<!-- Here you can put your Card's Content Area -->
	<Carousel class="sapUiContentPadding" loop="true">
		<pages>
			<VBox class="sapUiSmallMargin">
				<Title text="Definitions" titleStyle="H5"/>
				<Text text="\nTop N flights are based on payments dollar value.
				            \nAll dollar values are displayed in canadian currency"/>
			</VBox>
			<VBox class="sapUiSmallMargin">
				<Title text="Dimesions" titleStyle="H5"/>
				<Text text="\nContinent - based on airline headquarter country"/>
			</VBox>			
			<VBox class="sapUiSmallMargin">
				<Title text="Measures" titleStyle="H5"/>
				<Text text="\n\nFlight Occupancy is a ratio of occupied seats to total available seats"/>
			</VBox>						
		</pages>
	</Carousel>
</core:FragmentDefinition>

 

Add Custom Info Card to Overview Page

Note: do not forget to update blog.FlightOVP namespace with your own project specific namespace

 

Assigned Tags

      2 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Jocelyn Dart
      Jocelyn Dart

      Interesting approach... though I'm not so sure the premise for this particular use case would stand up in a real situation. Why would you not just use the User Assistance (as-is or extended with SAP Enable Now) for that? After all once the user gets the point, they don't need the card anymore.

      I can see other potential use cases though ... such as policy guidance and links to documents. Or current process reminders - e.g. updated centrally by the business process expert for all users.

      Author's profile photo Jocelyn Dart
      Jocelyn Dart

      FYi - thanks for the blog and I have added it to the public wiki ... https://wiki.scn.sap.com/wiki/display/Fiori/Fiori+elements