SAP Fiori Overview Page – Custom Info Card

[uladzislau_pralat]

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:

• Component.js,


• List.controller.js


• List.fragment.xml

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