@sapui5/sap.fe.core 1.95.0 → 1.98.0

package/src/sap/fe/core/controllerextensions/KPIManagement.ts

@@ -2,53 +2,34 @@ import { ControllerExtension } from "sap/ui/core/mvc";
 import { ControllerExtensionMetadata } from "sap/fe/core/controllerextensions";
 import { UI5Class, Override, Public } from "../helpers/ClassSupport";
 import { JSONModel } from "sap/ui/model/json";
+import { ODataModel, Context } from "sap/ui/model/odata/v4";
 import { Log } from "sap/base";
-import { KPIDefinition } from "sap/fe/core/converters/controls/Common/KPI";
-import { CommonUtils } from "sap/fe/core";
-import { Context } from "sap/ui/model/odata/v4";
+import { KPIChartDefinition, KPIDefinition, NavigationInfo } from "sap/fe/core/converters/controls/Common/KPI";
+import { BaseController } from "sap/fe/core";
 import { MessageType } from "sap/fe/core/formatters/TableFormatterTypes";
 import { FilterDefinition, RangeDefinition } from "sap/fe/core/converters/helpers/SelectionVariantHelper";
 import { NumberFormat, DateFormat } from "sap/ui/core/format";
 import { Locale } from "sap/ui/core";
-import { Filter, FilterOperator } from "sap/ui/model";
+import { Filter, FilterOperator, Sorter } from "sap/ui/model";
 import { GenericTag, Popover } from "sap/m";
-import { Card } from "sap/ui/integration/widgets";
 
-/**
- * Function to calculate a message state from a criticality value.
- *
- * @param {number|string} criticalityValue The criticality values.
- * @returns {MessageType} Returns the corresponding MessageType
- */
-function messageTypeFromCriticality(criticalityValue: number | string): MessageType {
-	let criticalityProperty: MessageType;
-
-	switch (criticalityValue) {
-		case 1:
-		case "1":
-			criticalityProperty = MessageType.Error;
-			break;
-		case 2:
-		case "2":
-			criticalityProperty = MessageType.Warning;
-			break;
-		case 3:
-		case "3":
-			criticalityProperty = MessageType.Success;
-			break;
-		case 5:
-		case "5":
-			criticalityProperty = MessageType.Information;
-			break;
-		default:
-			criticalityProperty = MessageType.None;
-	}
-
-	return criticalityProperty;
-}
+const MessageTypeFromCriticality: Record<string, MessageType> = {
+	"1": MessageType.Error,
+	"2": MessageType.Warning,
+	"3": MessageType.Success,
+	"5": MessageType.Information
+};
+
+const ValueColorFromMessageType: Record<MessageType, string> = {
+	Error: "Error",
+	Warning: "Critical",
+	Success: "Good",
+	Information: "None",
+	None: "None"
+};
 
 /**
- * Function to calculate the message state for a criticality calculation of type 'Target'.
+ * Function to get a message state from a calculated criticality of type 'Target'.
  *
  * @param {number} kpiValue The value of the KPI to be tested against.
  * @param {number[]} aThresholds Thresholds to be used [DeviationRangeLowValue,ToleranceRangeLowValue,AcceptanceRangeLowValue,AcceptanceRangeHighValue,ToleranceRangeHighValue,DeviationRangeHighValue].
@@ -77,7 +58,7 @@ function messageTypeFromTargetCalculation(kpiValue: number, aThresholds: (number
 }
 
 /**
- * Function to calculate the message state for a criticality calculation of type 'Minimize'.
+ * Function to get a message state from a calculated criticality of type 'Minimize'.
  *
  * @param {number} kpiValue The value of the KPI to be tested against.
  * @param {number[]} aThresholds Thresholds to be used [AcceptanceRangeHighValue,ToleranceRangeHighValue,DeviationRangeHighValue].
@@ -100,29 +81,7 @@ function messageTypeFromMinimizeCalculation(kpiValue: number, aThresholds: (numb
 }
 
 /**
- * Function to transform a MessageType into a ValueColor.
- *
- * @param messageType The message type
- * @returns The ValueColor
- */
-function valueColorFromMessageType(messageType: MessageType): string {
-	switch (messageType) {
-		case MessageType.Error:
-			return "Error";
-
-		case MessageType.Warning:
-			return "Critical";
-
-		case MessageType.Success:
-			return "Good";
-
-		default:
-			return "None";
-	}
-}
-
-/**
- * Function to calculate the message state for a criticality calculation of type 'Maximize'.
+ * Function to get a message state from a calculated criticality of type 'Maximize'.
  *
  * @param {number} kpiValue The value of the KPI to be tested against.
  * @param {number[]} aThresholds Thresholds to be used [DeviationRangeLowValue,ToleranceRangeLowValue,AcceptanceRangeLowValue].
@@ -303,8 +262,299 @@ function getFilterStringFromDefinition(filterDefinition: FilterDefinition): stri
 	}
 }
 
+function formatChartTitle(kpiDef: KPIDefinition): string {
+	const resBundle = sap.ui.getCore().getLibraryResourceBundle("sap.fe.core");
+
+	function formatList(items: { name: string; label: string }[]) {
+		if (items.length === 0) {
+			return "";
+		} else if (items.length === 1) {
+			return items[0].label;
+		} else {
+			let res = items[0].label;
+			for (let I = 1; I < items.length - 1; I++) {
+				res += ", " + items[I].label;
+			}
+
+			return resBundle.getText("C_KPICARD_ITEMSLIST", [res, items[items.length - 1].label]);
+		}
+	}
+
+	return resBundle.getText("C_KPICARD_CHARTTITLE", [formatList(kpiDef.chart.measures), formatList(kpiDef.chart.dimensions)]);
+}
+
+function updateChartLabelSettings(chartDefinition: KPIChartDefinition, oChartProperties: any): void {
+	switch (chartDefinition.chartType) {
+		case "Donut":
+			// Show data labels, do not show axis titles
+			oChartProperties.categoryAxis = {
+				title: {
+					visible: false
+				}
+			};
+			oChartProperties.valueAxis = {
+				title: {
+					visible: false
+				},
+				label: {
+					formatString: "ShortFloat"
+				}
+			};
+			oChartProperties.plotArea.dataLabel = {
+				visible: true,
+				type: "value",
+				formatString: "ShortFloat_MFD2"
+			};
+			break;
+
+		case "bubble":
+			// Show axis title, bubble size legend, do not show data labels
+			oChartProperties.valueAxis = {
+				title: {
+					visible: true
+				},
+				label: {
+					formatString: "ShortFloat"
+				}
+			};
+			oChartProperties.valueAxis2 = {
+				title: {
+					visible: true
+				},
+				label: {
+					formatString: "ShortFloat"
+				}
+			};
+			oChartProperties.legendGroup = {
+				layout: {
+					position: "bottom",
+					alignment: "topLeft"
+				}
+			};
+			oChartProperties.sizeLegend = {
+				visible: true
+			};
+			oChartProperties.plotArea.dataLabel = { visible: false };
+			break;
+
+		case "scatter":
+			// Do not show data labels and axis titles
+			oChartProperties.valueAxis = {
+				title: {
+					visible: false
+				},
+				label: {
+					formatString: "ShortFloat"
+				}
+			};
+			oChartProperties.valueAxis2 = {
+				title: {
+					visible: false
+				},
+				label: {
+					formatString: "ShortFloat"
+				}
+			};
+			oChartProperties.plotArea.dataLabel = { visible: false };
+			break;
+
+		default:
+			// Do not show data labels and axis titles
+			oChartProperties.categoryAxis = {
+				title: {
+					visible: false
+				}
+			};
+			oChartProperties.valueAxis = {
+				title: {
+					visible: false
+				},
+				label: {
+					formatString: "ShortFloat"
+				}
+			};
+			oChartProperties.plotArea.dataLabel = { visible: false };
+	}
+}
+function filterMap(aObjects: { name: string; label: string; role?: string }[], aRoles?: (string | undefined)[]): string[] {
+	if (aRoles && aRoles.length) {
+		return aObjects
+			.filter(dimension => {
+				return aRoles.indexOf(dimension.role) >= 0;
+			})
+			.map(dimension => {
+				return dimension.label;
+			});
+	} else {
+		return aObjects.map(dimension => {
+			return dimension.label;
+		});
+	}
+}
+
+function getScatterBubbleChartFeeds(chartDefinition: KPIChartDefinition): { uid: string; type: string; values: string[] }[] {
+	const axis1Measures = filterMap(chartDefinition.measures, ["Axis1"]);
+	const axis2Measures = filterMap(chartDefinition.measures, ["Axis2"]);
+	const axis3Measures = filterMap(chartDefinition.measures, ["Axis3"]);
+	const otherMeasures = filterMap(chartDefinition.measures, [undefined]);
+	const seriesDimensions = filterMap(chartDefinition.dimensions, ["Series"]);
+
+	// Get the first dimension with role "Category" for the shape
+	const shapeDimension = chartDefinition.dimensions.find(dimension => {
+		return dimension.role === "Category";
+	});
+
+	// Measure for the x-Axis : first measure for Axis1, or for Axis2 if not found, or for Axis3 if not found
+	const xMeasure = axis1Measures.shift() || axis2Measures.shift() || axis3Measures.shift() || otherMeasures.shift() || "";
+	// Measure for the y-Axis : first measure for Axis2, or second measure for Axis1 if not found, or first measure for Axis3 if not found
+	const yMeasure = axis2Measures.shift() || axis1Measures.shift() || axis3Measures.shift() || otherMeasures.shift() || "";
+	const res = [
+		{
+			"uid": "valueAxis",
+			"type": "Measure",
+			"values": [xMeasure]
+		},
+		{
+			"uid": "valueAxis2",
+			"type": "Measure",
+			"values": [yMeasure]
+		}
+	];
+
+	if (chartDefinition.chartType === "bubble") {
+		// Measure for the size of the bubble: first measure for Axis3, or remaining measure for Axis1/Axis2 if not found
+		const sizeMeasure = axis3Measures.shift() || axis1Measures.shift() || axis2Measures.shift() || otherMeasures.shift() || "";
+		res.push({
+			"uid": "bubbleWidth",
+			"type": "Measure",
+			"values": [sizeMeasure]
+		});
+	}
+
+	// Color (optional)
+	if (seriesDimensions.length) {
+		res.push({
+			"uid": "color",
+			"type": "Dimension",
+			"values": seriesDimensions
+		});
+	}
+	// Shape (optional)
+	if (shapeDimension) {
+		res.push({
+			"uid": "shape",
+			"type": "Dimension",
+			"values": [shapeDimension.label]
+		});
+	}
+	return res;
+}
+
+function getChartFeeds(chartDefinition: KPIChartDefinition): { uid: string; type: string; values: string[] }[] {
+	let res: { uid: string; type: string; values: string[] }[];
+
+	switch (chartDefinition.chartType) {
+		case "Donut":
+			res = [
+				{
+					"uid": "size",
+					"type": "Measure",
+					"values": filterMap(chartDefinition.measures)
+				},
+				{
+					"uid": "color",
+					"type": "Dimension",
+					"values": filterMap(chartDefinition.dimensions)
+				}
+			];
+			break;
+
+		case "bubble":
+		case "scatter":
+			res = getScatterBubbleChartFeeds(chartDefinition);
+			break;
+
+		case "vertical_bullet":
+			res = [
+				{
+					"uid": "actualValues",
+					"type": "Measure",
+					"values": filterMap(chartDefinition.measures, [undefined, "Axis1"])
+				},
+				{
+					"uid": "targetValues",
+					"type": "Measure",
+					"values": filterMap(chartDefinition.measures, ["Axis2"])
+				},
+				{
+					"uid": "categoryAxis",
+					"type": "Dimension",
+					"values": filterMap(chartDefinition.dimensions, [undefined, "Category"])
+				},
+				{
+					"uid": "color",
+					"type": "Dimension",
+					"values": filterMap(chartDefinition.dimensions, ["Series"])
+				}
+			];
+			break;
+
+		default:
+			res = [
+				{
+					"uid": "valueAxis",
+					"type": "Measure",
+					"values": filterMap(chartDefinition.measures)
+				},
+				{
+					"uid": "categoryAxis",
+					"type": "Dimension",
+					"values": filterMap(chartDefinition.dimensions, [undefined, "Category"])
+				},
+				{
+					"uid": "color",
+					"type": "Dimension",
+					"values": filterMap(chartDefinition.dimensions, ["Series"])
+				}
+			];
+	}
+
+	return res;
+}
+
+function getNavigationParameters(
+	navInfo: NavigationInfo,
+	oShellService: any
+): Promise<{ semanticObject?: string; action?: string; outbound?: string } | undefined> {
+	if (navInfo.semanticObject) {
+		if (navInfo.action) {
+			// Action is already specified: check if it's available in the shell
+			return oShellService.getLinks({ semanticObject: navInfo.semanticObject, action: navInfo.action }).then((aLinks: any[]) => {
+				return aLinks.length ? { semanticObject: navInfo.semanticObject, action: navInfo.action } : undefined;
+			});
+		} else {
+			// We get the primary intent from the shell
+			return oShellService.getPrimaryIntent(navInfo.semanticObject).then((oLink: any) => {
+				if (!oLink) {
+					// No primary intent...
+					return undefined;
+				}
+
+				// Check that the primary intent is not part of the unavailable actions
+				const oInfo = oShellService.parseShellHash(oLink.intent);
+				return navInfo.unavailableActions && navInfo.unavailableActions.indexOf(oInfo.action) >= 0
+					? undefined
+					: { semanticObject: oInfo.semanticObject, action: oInfo.action };
+			});
+		}
+	} else {
+		// Outbound navigation specified in the manifest
+		return navInfo.outboundNavigation ? Promise.resolve({ outbound: navInfo.outboundNavigation }) : Promise.resolve(undefined);
+	}
+}
+
 /**
- * @class A controller extension for managing KPI in an AnalyticalListPage
+ * @class A controller extension for managing the KPIs in an analytical list page
  *
  * @name sap.fe.core.controllerextensions.KPIManagement
  * @hideconstructor
@@ -315,17 +565,131 @@ function getFilterStringFromDefinition(filterDefinition: FilterDefinition): stri
 @UI5Class("sap.fe.core.controllerextensions.KPIManagement", ControllerExtensionMetadata)
 class KPIManagementControllerExtension extends ControllerExtension {
 	protected aKPIDefinitions?: KPIDefinition[];
-	protected oAppComponent!: any;
-	protected oCard!: Card;
+	protected oCard: any;
 	protected oPopover!: Popover;
 
+	/**
+	 * Creates the card manifest for a KPI definition and stores it in a JSON model.
+	 *
+	 * @param kpiDefinition The KPI definition
+	 * @param oKPIModel The JSON model in which the manifest will be stored
+	 */
+	protected initCardManifest(kpiDefinition: KPIDefinition, oKPIModel: JSONModel<any>): void {
+		const oCardManifest: any = {
+			"sap.app": {
+				id: "sap.fe",
+				type: "card"
+			},
+			"sap.ui": {
+				technology: "UI5"
+			},
+			"sap.card": {
+				type: "Analytical",
+				data: {
+					json: {}
+				},
+				header: {
+					type: "Numeric",
+					title: kpiDefinition.datapoint.title,
+					subTitle: kpiDefinition.datapoint.description,
+					unitOfMeasurement: "{mainUnit}",
+					mainIndicator: {
+						number: "{mainValueNoScale}",
+						unit: "{mainValueScale}",
+						state: "{mainState}",
+						trend: "{trend}"
+					}
+				},
+				content: {
+					minHeight: "25rem",
+					chartProperties: {
+						plotArea: {},
+						title: {
+							visible: true,
+							alignment: "left"
+						}
+					},
+					data: {
+						path: "/chartData"
+					}
+				}
+			}
+		};
+
+		// Add side indicators in the card header if a target is defined for the KPI
+		if (kpiDefinition.datapoint.targetPath || kpiDefinition.datapoint.targetValue !== undefined) {
+			const resBundle = sap.ui.getCore().getLibraryResourceBundle("sap.fe.core");
+			oCardManifest["sap.card"].header.sideIndicators = [
+				{
+					title: resBundle.getText("C_KPICARD_INDICATOR_TARGET"),
+					number: "{targetNumber}",
+					unit: "{targetUnit}"
+				},
+				{
+					title: resBundle.getText("C_KPICARD_INDICATOR_DEVIATION"),
+					number: "{deviationNumber}",
+					unit: "%"
+				}
+			];
+		}
+
+		// Details of the card: filter descriptions
+		if (kpiDefinition.selectionVariantFilterDefinitions?.length) {
+			const aDescriptions: string[] = [];
+			kpiDefinition.selectionVariantFilterDefinitions.forEach(filterDefinition => {
+				const desc = getFilterStringFromDefinition(filterDefinition);
+				if (desc) {
+					aDescriptions.push(desc);
+				}
+			});
+
+			if (aDescriptions.length) {
+				oCardManifest["sap.card"].header.details = aDescriptions.join(", ");
+			}
+		}
+
+		// Chart settings: type, title, dimensions and measures in the manifest
+		oCardManifest["sap.card"].content.chartType = kpiDefinition.chart.chartType;
+		updateChartLabelSettings(kpiDefinition.chart, oCardManifest["sap.card"].content.chartProperties);
+		oCardManifest["sap.card"].content.chartProperties.title.text = formatChartTitle(kpiDefinition);
+		oCardManifest["sap.card"].content.dimensions = kpiDefinition.chart.dimensions.map(dimension => {
+			return { label: dimension.label, value: "{" + dimension.name + "}" };
+		});
+		oCardManifest["sap.card"].content.measures = kpiDefinition.chart.measures.map(measure => {
+			return { label: measure.label, value: "{" + measure.name + "}" };
+		});
+		oCardManifest["sap.card"].content.feeds = getChartFeeds(kpiDefinition.chart);
+
+		oKPIModel.setProperty("/" + kpiDefinition.id, {
+			manifest: oCardManifest
+		});
+	}
+
+	protected initNavigationInfo(kpiDefinition: KPIDefinition, oKPIModel: JSONModel<any>, oShellService: any): Promise<void> {
+		// Add navigation
+		if (kpiDefinition.navigation) {
+			return getNavigationParameters(kpiDefinition.navigation, oShellService).then(oNavInfo => {
+				if (oNavInfo) {
+					oKPIModel.setProperty("/" + kpiDefinition.id + "/manifest/sap.card/header/actions", [
+						{
+							type: "Navigation",
+							parameters: oNavInfo
+						}
+					]);
+				}
+			});
+		} else {
+			return Promise.resolve();
+		}
+	}
+
 	@Override()
 	public onInit(): void {
 		this.aKPIDefinitions = this.getKPIData();
 
 		if (this.aKPIDefinitions && this.aKPIDefinitions.length) {
 			const oView = this.getView();
-			this.oAppComponent = CommonUtils.getAppComponent(oView);
+			const oAppComponent = (oView.getController() as BaseController).getAppComponent() as any;
 
 			// Create a JSON model to store KPI data
 			const oKPIModel = new JSONModel();
@@ -333,101 +697,15 @@ class KPIManagementControllerExtension extends ControllerExtension {
 
 			this.aKPIDefinitions.forEach(kpiDefinition => {
 				// Create the manifest for the KPI card and store it in the KPI model
-				const oCardManifest: any = {
-					"sap.app": {
-						id: "sap.fe",
-						type: "card"
-					},
-					"sap.ui": {
-						technology: "UI5"
-					},
-					"sap.card": {
-						type: "Analytical",
-						data: {
-							json: {}
-						},
-						header: {
-							type: "Numeric",
-							title: kpiDefinition.datapoint.title,
-							subTitle: kpiDefinition.datapoint.description,
-							unitOfMeasurement: "{mainUnit}",
-							mainIndicator: {
-								number: "{mainValueNoScale}",
-								unit: "{mainValueScale}",
-								state: "{mainState}",
-								trend: "{trend}"
-							}
-						},
-						content: {
-							plotArea: {
-								"dataLabel": {
-									"visible": false
-								},
-								"categoryAxisText": {
-									"visible": false
-								},
-								"valueAxisText": {
-									"visible": false
-								}
-							},
-							title: {
-								text: "{chartTitle}",
-								visible: true,
-								alignment: "Left"
-							},
-							measureAxis: "valueAxis",
-							dimensionAxis: "categoryAxis",
-							data: {
-								path: "/chartData"
-							}
-						}
-					}
-				};
-
-				// Add side indicators in the card header if a target is defined for the KPI
-				if (kpiDefinition.datapoint.targetPath || kpiDefinition.datapoint.targetValue !== undefined) {
-					const resBundle = sap.ui.getCore().getLibraryResourceBundle("sap.fe.core");
-					oCardManifest["sap.card"].header.sideIndicators = [
-						{
-							title: resBundle.getText("C_KPICARD_INDICATOR_TARGET"),
-							number: "{targetNumber}",
-							unit: "{targetUnit}"
-						},
-						{
-							title: resBundle.getText("C_KPICARD_INDICATOR_DEVIATION"),
-							number: "{deviationNumber}",
-							unit: "%"
-						}
-					];
-				}
-
-				// Details of the card: filter descriptions
-				if (kpiDefinition.selectionVariantFilterDefinitions?.length) {
-					const aDescriptions: string[] = [];
-					kpiDefinition.selectionVariantFilterDefinitions.forEach(filterDefinition => {
-						const desc = getFilterStringFromDefinition(filterDefinition);
-						if (desc) {
-							aDescriptions.push(desc);
-						}
-					});
+				this.initCardManifest(kpiDefinition, oKPIModel);
 
-					if (aDescriptions.length) {
-						oCardManifest["sap.card"].header.details = aDescriptions.join(", ");
-					}
-				}
-
-				// Update card content in the manifest
-				oCardManifest["sap.card"].content = Object.assign(
-					oCardManifest["sap.card"].content,
-					kpiDefinition.card.cardContentManifest
-				);
-
-				oKPIModel.setProperty("/" + kpiDefinition.id, {
-					manifest: oCardManifest
+				// Set the navigation information in the manifest
+				this.initNavigationInfo(kpiDefinition, oKPIModel, oAppComponent.getShellServices()).catch(function(err: any) {
+					Log.error(err);
 				});
 
 				// Load tag data for the KPI
-				this.loadKPITagData(kpiDefinition).catch(function(err: any) {
+				this.loadKPITagData(kpiDefinition, oAppComponent.getModel() as ODataModel, oKPIModel).catch(function(err: any) {
 					Log.error(err);
 				});
 			});
@@ -436,7 +714,7 @@ class KPIManagementControllerExtension extends ControllerExtension {
 
 	@Override()
 	public onExit(): void {
-		const oKPIModel = this.getView().getModel("kpiModel") as JSONModel;
+		const oKPIModel = this.getView().getModel("kpiModel") as JSONModel<any>;
 
 		if (oKPIModel) {
 			oKPIModel.destroy();
@@ -459,7 +737,7 @@ class KPIManagementControllerExtension extends ControllerExtension {
 		}
 	}
 
-	private updateDatapointValueAndCurrency(kpiDefinition: KPIDefinition, kpiContext: Context) {
+	private updateDatapointValueAndCurrency(kpiDefinition: KPIDefinition, kpiContext: Context, oKPIModel: JSONModel<any>) {
 		const currentLocale = new Locale(
 			sap.ui
 				.getCore()
@@ -471,7 +749,6 @@ class KPIManagementControllerExtension extends ControllerExtension {
 			: kpiDefinition.datapoint.unit?.value;
 
 		const isPercentage = kpiDefinition.datapoint.unit?.isCurrency === false && rawUnit === "%";
-		const oKPIModel = this.getView().getModel("kpiModel") as JSONModel;
 
 		// /////////////////////
 		// Main KPI value
@@ -537,9 +814,8 @@ class KPIManagementControllerExtension extends ControllerExtension {
 		}
 	}
 
-	private updateDatapointCriticality(kpiDefinition: KPIDefinition, kpiContext: Context) {
+	private updateDatapointCriticality(kpiDefinition: KPIDefinition, kpiContext: Context, oKPIModel: JSONModel<any>) {
 		const rawValue = Number.parseFloat(kpiContext.getProperty(kpiDefinition.datapoint.propertyPath));
-		const oKPIModel = this.getView().getModel("kpiModel") as JSONModel;
 
 		let criticalityValue = MessageType.None;
 		if (kpiDefinition.datapoint.criticalityValue) {
@@ -547,7 +823,8 @@ class KPIManagementControllerExtension extends ControllerExtension {
 			criticalityValue = kpiDefinition.datapoint.criticalityValue;
 		} else if (kpiDefinition.datapoint.criticalityPath) {
 			// Criticality comes from another property (via a path)
-			criticalityValue = messageTypeFromCriticality(kpiContext.getProperty(kpiDefinition.datapoint.criticalityPath));
+			criticalityValue =
+				MessageTypeFromCriticality[kpiContext.getProperty(kpiDefinition.datapoint.criticalityPath)] || MessageType.None;
 		} else if (kpiDefinition.datapoint.criticalityCalculationThresholds && kpiDefinition.datapoint.criticalityCalculationMode) {
 			// Criticality calculation
 			switch (kpiDefinition.datapoint.criticalityCalculationMode) {
@@ -575,13 +852,12 @@ class KPIManagementControllerExtension extends ControllerExtension {
 		oKPIModel.setProperty("/" + kpiDefinition.id + "/manifest/sap.card/data/json/mainCriticality", criticalityValue);
 		oKPIModel.setProperty(
 			"/" + kpiDefinition.id + "/manifest/sap.card/data/json/mainState",
-			valueColorFromMessageType(criticalityValue)
+			ValueColorFromMessageType[criticalityValue] || "None"
 		);
 	}
 
-	private updateDatapointTrend(kpiDefinition: KPIDefinition, kpiContext: Context) {
+	private updateDatapointTrend(kpiDefinition: KPIDefinition, kpiContext: Context, oKPIModel: JSONModel<any>) {
 		const rawValue = Number.parseFloat(kpiContext.getProperty(kpiDefinition.datapoint.propertyPath));
-		const oKPIModel = this.getView().getModel("kpiModel") as JSONModel;
 
 		let trendValue = "None";
 
@@ -615,12 +891,11 @@ class KPIManagementControllerExtension extends ControllerExtension {
 		oKPIModel.setProperty("/" + kpiDefinition.id + "/manifest/sap.card/data/json/trend", trendValue);
 	}
 
-	private updateTargetValue(kpiDefinition: KPIDefinition, kpiContext: Context) {
+	private updateTargetValue(kpiDefinition: KPIDefinition, kpiContext: Context, oKPIModel: JSONModel<any>) {
 		if (kpiDefinition.datapoint.targetValue === undefined && kpiDefinition.datapoint.targetPath === undefined) {
 			return; // No target set for the KPI
 		}
 		const rawValue = Number.parseFloat(kpiContext.getProperty(kpiDefinition.datapoint.propertyPath));
-		const oKPIModel = this.getView().getModel("kpiModel") as JSONModel;
 		const currentLocale = new Locale(
 			sap.ui
 				.getCore()
@@ -678,13 +953,17 @@ class KPIManagementControllerExtension extends ControllerExtension {
 	 * Loads tag data for a KPI, and stores it in the JSON KPI model.
 	 *
 	 * @param {KPIDefinition} kpiDefinition The definition of the KPI.
+	 * @param {ODataModel} oMainModel The model used to load the data.
+	 * @param {JSONModel} oKPIModel The JSON model where the data will be stored
 	 * @param loadFull If not true, loads only data for the KPI tag
-	 * @returns {Promise} Returns the Promise that is resolved when data is loaded.
+	 * @returns {Promise} Returns the promise that is resolved when data is loaded.
 	 */
-	protected loadKPITagData(kpiDefinition: KPIDefinition, loadFull?: boolean): any {
-		const oModel = this.oAppComponent.getModel();
-		const oKPIModel = this.getView().getModel("kpiModel") as JSONModel;
-		const oListBinding = oModel.bindList("/" + kpiDefinition.entitySet);
+	protected loadKPITagData(kpiDefinition: KPIDefinition, oMainModel: ODataModel, oKPIModel: JSONModel<any>, loadFull?: boolean): any {
+		// If loadFull=false, then we're just loading data for the tag and we use the "$auto.LongRunners" groupID
+		// If loadFull=true, we're loading data for the whole KPI (tag + card) and we use the default ("$auto") groupID
+		const oListBinding = loadFull
+			? oMainModel.bindList("/" + kpiDefinition.entitySet)
+			: oMainModel.bindList("/" + kpiDefinition.entitySet, undefined, undefined, undefined, { $$groupId: "$auto.LongRunners" });
 		const oAggregate: Record<string, { unit?: string }> = {};
 
 		// Main value + currency/unit
@@ -716,7 +995,9 @@ class KPIManagementControllerExtension extends ControllerExtension {
 
 		// Manage SelectionVariant filters
 		if (kpiDefinition.selectionVariantFilterDefinitions?.length) {
-			const aFilters = kpiDefinition.selectionVariantFilterDefinitions.map(createFilterFromDefinition);
+			const aFilters = kpiDefinition.selectionVariantFilterDefinitions.map(createFilterFromDefinition).filter(filter => {
+				return filter !== undefined;
+			}) as Filter[];
 			oListBinding.filter(aFilters);
 		}
 
@@ -740,30 +1021,36 @@ class KPIManagementControllerExtension extends ControllerExtension {
 					oKPIModel.setProperty("/" + kpiDefinition.id + "/manifest/sap.card/data/json/targetUnit", undefined);
 					oKPIModel.setProperty("/" + kpiDefinition.id + "/manifest/sap.card/data/json/deviationNumber", undefined);
 				} else {
-					this.updateDatapointValueAndCurrency(kpiDefinition, aContexts[0]);
-					this.updateDatapointCriticality(kpiDefinition, aContexts[0]);
+					this.updateDatapointValueAndCurrency(kpiDefinition, aContexts[0], oKPIModel);
+					this.updateDatapointCriticality(kpiDefinition, aContexts[0], oKPIModel);
 
 					if (loadFull) {
-						this.updateDatapointTrend(kpiDefinition, aContexts[0]);
-						this.updateTargetValue(kpiDefinition, aContexts[0]);
+						this.updateDatapointTrend(kpiDefinition, aContexts[0], oKPIModel);
+						this.updateTargetValue(kpiDefinition, aContexts[0], oKPIModel);
 					}
 				}
 			}
 		});
 	}
 
-	protected loadKPICardData(kpiDefinition: KPIDefinition): any {
-		const oModel = this.oAppComponent.getModel();
-		const oListBinding = oModel.bindList("/" + kpiDefinition.entitySet);
+	/**
+	 * Loads card data for a KPI, and stores it in the JSON KPI model.
+	 *
+	 * @param {KPIDefinition} kpiDefinition The definition of the KPI.
+	 * @param {ODataModel} oMainModel The model used to load the data.
+	 * @param {JSONModel} oKPIModel The JSON model where the data will be stored
+	 * @returns {Promise} Returns the promise that is resolved when data is loaded.
+	 */
+	protected loadKPICardData(kpiDefinition: KPIDefinition, oMainModel: ODataModel, oKPIModel: JSONModel<any>): any {
+		const oListBinding = oMainModel.bindList("/" + kpiDefinition.entitySet);
 		const oGroup: Record<string, Object> = {};
 		const oAggregate: Record<string, Object> = {};
-		const oKPIModel = this.getView().getModel("kpiModel") as JSONModel;
 
-		kpiDefinition.card.dimensions.forEach(function(sDimensionName) {
-			oGroup[sDimensionName] = {};
+		kpiDefinition.chart.dimensions.forEach(dimension => {
+			oGroup[dimension.name] = {};
 		});
-		kpiDefinition.card.measures.forEach(function(sMeasureName) {
-			oAggregate[sMeasureName] = {};
+		kpiDefinition.chart.measures.forEach(measure => {
+			oAggregate[measure.name] = {};
 		});
 		oListBinding.setAggregation({
 			group: oGroup,
@@ -772,18 +1059,29 @@ class KPIManagementControllerExtension extends ControllerExtension {
 
 		// Manage SelectionVariant filters
 		if (kpiDefinition.selectionVariantFilterDefinitions?.length) {
-			const aFilters = kpiDefinition.selectionVariantFilterDefinitions.map(createFilterFromDefinition);
+			const aFilters = kpiDefinition.selectionVariantFilterDefinitions.map(createFilterFromDefinition).filter(filter => {
+				return filter !== undefined;
+			}) as Filter[];
 			oListBinding.filter(aFilters);
 		}
 
-		return oListBinding.requestContexts(0).then((aContexts: Context[]) => {
+		// Sorting
+		if (kpiDefinition.chart.sortOrder) {
+			oListBinding.sort(
+				kpiDefinition.chart.sortOrder.map(sortInfo => {
+					return new Sorter(sortInfo.name, sortInfo.descending);
+				})
+			);
+		}
+
+		return oListBinding.requestContexts(0, kpiDefinition.chart.maxItems).then((aContexts: Context[]) => {
 			const chartData = aContexts.map(function(oContext) {
 				const oData: Record<string, any> = {};
-				kpiDefinition.card.dimensions.forEach(function(sDimensionName) {
-					oData[sDimensionName] = oContext.getProperty(sDimensionName);
+				kpiDefinition.chart.dimensions.forEach(dimension => {
+					oData[dimension.name] = oContext.getProperty(dimension.name);
 				});
-				kpiDefinition.card.measures.forEach(function(sMeasureName) {
-					oData[sMeasureName] = oContext.getProperty(sMeasureName);
+				kpiDefinition.chart.measures.forEach(measure => {
+					oData[measure.name] = oContext.getProperty(measure.name);
 				});
 
 				return oData;
@@ -796,34 +1094,67 @@ class KPIManagementControllerExtension extends ControllerExtension {
 	/**
 	 * Gets the popover to display the KPI card
 	 * The popover and the contained card for the KPIs are created if necessary.
-	 * The popover is shared between all KPIs, so we create it only once.
+	 * The popover is shared between all KPIs, so it's created only once.
 	 *
-	 * @param oKPITag The Tag that triggered the popover opening.
-	 * @returns The shared popover.
+	 * @param oKPITag The tag that triggered the popover opening.
+	 * @returns The shared popover as a promise.
 	 */
-	protected getPopover(oKPITag: GenericTag): Popover {
+	protected getPopover(oKPITag: GenericTag): Promise<Popover> {
 		if (!this.oPopover) {
-			this.oCard = new Card({
-				width: "25rem",
-				height: "auto"
-			});
+			return new Promise((resolve, reject) => {
+				sap.ui
+					.getCore()
+					.loadLibrary("sap/ui/integration", { async: true })
+					.then(() => {
+						sap.ui.require(["sap/ui/integration/widgets/Card", "sap/ui/integration/Host"], (Card: any, Host: any) => {
+							const oHost = new Host();
+
+							oHost.attachAction((oEvent: any) => {
+								const sType = oEvent.getParameter("type");
+								const oParams = oEvent.getParameter("parameters");
+
+								if (sType === "Navigation") {
+									if (oParams.semanticObject) {
+										(this.getView().getController() as any)._intentBasedNavigation.navigate(
+											oParams.semanticObject,
+											oParams.action
+										);
+									} else {
+										(this.getView().getController() as any)._intentBasedNavigation.navigateOutbound(oParams.outbound);
+									}
+								}
+							});
 
-			this.oPopover = new Popover({
-				id: "kpi-Popover",
-				showHeader: false,
-				placement: "Auto",
-				content: [this.oCard]
-			});
+							this.oCard = new Card({
+								width: "25rem",
+								height: "auto"
+							});
+							this.oCard.setHost(oHost as any);
 
-			oKPITag.addDependent(this.oPopover); // The first clicked tag gets the popover as dependent
-		}
+							this.oPopover = new Popover({
+								id: "kpi-Popover",
+								showHeader: false,
+								placement: "Auto",
+								content: [this.oCard]
+							});
+
+							oKPITag.addDependent(this.oPopover); // The first clicked tag gets the popover as dependent
 
-		return this.oPopover;
+							resolve(this.oPopover);
+						});
+					})
+					.catch(function() {
+						reject();
+					});
+			});
+		} else {
+			return Promise.resolve(this.oPopover);
+		}
 	}
 
 	@Public
 	public onKPIPressed(oKPITag: any, kpiID: string): void {
-		const oKPIModel = oKPITag.getModel("kpiModel") as JSONModel;
+		const oKPIModel = oKPITag.getModel("kpiModel") as JSONModel<any>;
 
 		if (this.aKPIDefinitions && this.aKPIDefinitions.length) {
 			const kpiDefinition = this.aKPIDefinitions.find(function(oDef) {
@@ -831,13 +1162,19 @@ class KPIManagementControllerExtension extends ControllerExtension {
 			});
 
 			if (kpiDefinition) {
-				const aPromises = [this.loadKPITagData(kpiDefinition, true), this.loadKPICardData(kpiDefinition)];
-				const oPopover = this.getPopover(oKPITag);
+				const oModel = oKPITag.getModel();
+				const aPromises = [
+					this.loadKPITagData(kpiDefinition, oModel, oKPIModel, true),
+					this.loadKPICardData(kpiDefinition, oModel, oKPIModel),
+					this.getPopover(oKPITag)
+				];
 
 				Promise.all(aPromises)
-					.then(() => {
+					.then(aResults => {
 						this.oCard.setManifest(oKPIModel.getProperty("/" + kpiID + "/manifest"));
 						this.oCard.refresh();
+
+						const oPopover = aResults[2];
 						oPopover.openBy(oKPITag, false);
 					})
 					.catch(err => {