SAP Fiori Overview Page (OVP) : Creer des tableaux de bord analytiques

Catégorie

Fiori

Publié

14. Feb. 2026

Auteur

La SAP Fiori Overview Page (OVP) est un template de tableau de bord puissant pour les applications analytiques et transactionnelles. Avec les cartes (Cards), vous creez des interfaces utilisateur compactes et riches en informations pour le management et les utilisateurs avances.

Qu’est-ce qu’une Overview Page ?

Une Overview Page est un tableau de bord base sur des cartes qui regroupe plusieurs sources d’informations sur une seule page. Chaque carte affiche les donnees d’un service OData distinct.

Cas d’utilisation typiques

Tableau de bord executif avec KPIs
Vue d’ensemble des ventes avec offres ouvertes
Moniteur d’achat avec statut des commandes
Cockpit de gestion de projet

Avantages par rapport au List Report

Aspect	List Report	Overview Page
Focus	Une entite	Plusieurs entites
Layout	Table/Formulaire	Grille de cartes
Navigation	Drill-Down	Navigation cross-app
Public cible	Operateurs	Managers/Decideurs

Architecture OVP

+-----------------------------------------------+
|              Overview Page                     |
|  +----------+  +----------+  +----------+     |
|  | List Card|  |Chart Card|  |Stack Card|     |
|  |  (Orders)|  | (Revenue)|  | (Tasks)  |     |
|  +----------+  +----------+  +----------+     |
|  +----------+  +----------+                   |
|  |Table Card|  | KPI Card |                   |
|  | (Items)  |  | (Margin) |                   |
|  +----------+  +----------+                   |
+-----------------------------------------------+
            |           |           |
      OData Service  Service     Service
            |           |           |
      CDS View     CDS View    CDS View

Chaque carte :

A sa propre CDS View avec annotations
Est exposee via un Service Binding
Peut avoir des filtres et presentations differents

Apercu des types de cartes

Type de carte	Utilisation	Visualisation
List Card	Listes Top-N	Entrees numerotees
Table Card	Donnees tabulaires	Layout en colonnes
Chart Card	Indicateurs	Barres, lignes, camembert
Stack Card	Objets groupes	Pile avec Quick-View
KPI Card	Indicateur unique	Grand nombre + tendance

Creer une List Card

La List Card affiche une liste triee d’entrees (ex. “Top 5 des commandes ouvertes”).

CDS View pour List Card

@EndUserText.label: 'Open Orders for OVP"
@ObjectModel.query.implementedBy: 'ABAP:ZCL_OPEN_ORDERS"
@UI.presentationVariant: [{
  sortOrder: [{
    by: 'TotalAmount',
    direction: #DESC
  }],
  maxItems: 5
}]
define view entity ZC_OVP_OpenOrders
  as projection on ZI_Order
{
      @UI.lineItem: [{ position: 10 }]
  key OrderId,

      @UI.lineItem: [{ position: 20 }]
      CustomerName,

      @UI.lineItem: [{ position: 30, importance: #HIGH }]
      @Semantics.amount.currencyCode: 'Currency"
      TotalAmount,

      Currency,

      @UI.lineItem: [{ position: 40, criticality: 'StatusCriticality' }]
      Status,

      @UI.hidden: true
      StatusCriticality
}
where
  Status = 'O' -- Open

Annotation Card Manifest

La carte OVP est configuree dans le manifest.json de l’application Fiori :

{
  "sap.ovp": {
    "cards": {
      "card_open_orders": {
        "model": "mainModel",
        "template": "sap.ovp.cards.list",
        "settings": {
          "title": "Commandes ouvertes",
          "subTitle": "Top 5 par montant",
          "entitySet": "ZC_OVP_OpenOrders",
          "listType": "extended",
          "listFlavor": "bar",
          "sortBy": "TotalAmount",
          "sortOrder": "descending",
          "defaultSpan": {
            "rows": 3,
            "cols": 1
          }
        }
      }
    }
  }
}

Variantes de List Card

listFlavor	Description
`standard`	Liste simple
`bar`	Avec barre horizontale
`carousel`	Cartes balayables

Creer une Table Card

La Table Card affiche les donnees sous forme de colonnes, ideale pour les informations structurees.

CDS View pour Table Card

@EndUserText.label: 'Order Items for OVP"
@UI.headerInfo: {
  typeName: 'Poste',
  typeNamePlural: 'Postes"
}
@UI.presentationVariant: [{
  maxItems: 10
}]
define view entity ZC_OVP_OrderItems
  as projection on ZI_OrderItem
{
      @UI.lineItem: [{ position: 10 }]
  key OrderId,

      @UI.lineItem: [{ position: 20 }]
  key ItemNumber,

      @UI.lineItem: [{ position: 30 }]
      MaterialNumber,

      @UI.lineItem: [{ position: 40 }]
      MaterialDescription,

      @UI.lineItem: [{ position: 50 }]
      @Semantics.quantity.unitOfMeasure: 'Unit"
      Quantity,

      Unit,

      @UI.lineItem: [{ position: 60, criticality: 'DeliveryCriticality' }]
      DeliveryStatus,

      @UI.hidden: true
      DeliveryCriticality
}

Manifest Table Card

{
  "card_order_items": {
    "model": "mainModel",
    "template": "sap.ovp.cards.table",
    "settings": {
      "title": "Postes de commande",
      "subTitle": "Statut de livraison",
      "entitySet": "ZC_OVP_OrderItems",
      "defaultSpan": {
        "rows": 4,
        "cols": 2
      }
    }
  }
}

Creer une Chart Card

Les Chart Cards visualisent les indicateurs sous forme de diagrammes.

CDS View pour Chart Card

@EndUserText.label: 'Sales Analytics for OVP"
@Analytics.dataCategory: #CUBE
@UI.chart: [{
  qualifier: 'RevenueByMonth',
  title: 'Chiffre d affaires par mois',
  chartType: #COLUMN,
  dimensions: ['CalendarMonth'],
  measures: ['Revenue']
}]
define view entity ZC_OVP_SalesChart
  as select from ZI_SalesData
{
      @Analytics.dimension: true
      @EndUserText.label: 'Mois"
  key CalendarMonth,

      @Analytics.measure: true
      @Aggregation.default: #SUM
      @Semantics.amount.currencyCode: 'Currency"
      @EndUserText.label: 'Chiffre d affaires"
      Revenue,

      Currency
}

Manifest Chart Card

{
  "card_revenue_chart": {
    "model": "analyticsModel",
    "template": "sap.ovp.cards.charts.analytical",
    "settings": {
      "title": "Chiffre d'affaires mensuel",
      "entitySet": "ZC_OVP_SalesChart",
      "chartAnnotationPath": "com.sap.vocabularies.UI.v1.Chart#RevenueByMonth",
      "defaultSpan": {
        "rows": 3,
        "cols": 2
      }
    }
  }
}

Types de graphiques supportes

chartType	Visualisation
`#COLUMN`	Diagramme en colonnes
`#BAR`	Diagramme en barres
`#LINE`	Diagramme en lignes
`#PIE`	Diagramme circulaire
`#DONUT`	Diagramme en anneau
`#SCATTER`	Diagramme en nuage de points
`#BUBBLE`	Diagramme a bulles
`#HEATMAP`	Carte de chaleur

Mesures multiples

@UI.chart: [{
  qualifier: 'RevenueVsCost',
  chartType: #COLUMN,
  dimensions: ['CalendarMonth'],
  measures: ['Revenue', 'Cost'],
  measureAttributes: [{
    measure: 'Revenue',
    role: #AXIS_1
  }, {
    measure: 'Cost',
    role: #AXIS_1
  }]
}]

Creer une Stack Card

La Stack Card regroupe les objets lies avec une fonction Quick-View.

CDS View pour Stack Card

@EndUserText.label: 'Tasks by Priority"
@UI.presentationVariant: [{
  groupBy: ['Priority'],
  sortOrder: [{
    by: 'DueDate',
    direction: #ASC
  }]
}]
@UI.headerInfo: {
  typeName: 'Tache',
  typeNamePlural: 'Taches',
  title: { value: 'TaskTitle' },
  description: { value: 'AssigneeName' }
}
define view entity ZC_OVP_Tasks
  as projection on ZI_Task
{
      @UI.lineItem: [{ position: 10 }]
  key TaskId,

      @UI.lineItem: [{ position: 20 }]
      TaskTitle,

      @UI.lineItem: [{ position: 30 }]
      AssigneeName,

      @UI.lineItem: [{ position: 40, criticality: 'PriorityCriticality' }]
      Priority,

      @UI.lineItem: [{ position: 50 }]
      DueDate,

      @UI.hidden: true
      PriorityCriticality
}

Manifest Stack Card

{
  "card_tasks_stack": {
    "model": "mainModel",
    "template": "sap.ovp.cards.stack",
    "settings": {
      "title": "Mes taches",
      "subTitle": "Groupees par priorite",
      "entitySet": "ZC_OVP_Tasks",
      "identificationAnnotationPath": "com.sap.vocabularies.UI.v1.Identification",
      "objectStreamCardsSettings": {
        "showFirstActionInFooter": true
      },
      "defaultSpan": {
        "rows": 4,
        "cols": 1
      }
    }
  }
}

KPI Card avec tendance

Les KPI Cards affichent un indicateur unique avec un indicateur de tendance.

CDS View pour KPI Card

@EndUserText.label: 'Margin KPI"
@Analytics.dataCategory: #CUBE
@UI.chart: [{
  qualifier: 'MarginKPI',
  chartType: #BULLET,
  measures: ['MarginPercent'],
  measureAttributes: [{
    measure: 'MarginPercent',
    role: #AXIS_1
  }]
}]
@UI.dataPoint: [{
  qualifier: 'MarginDP',
  title: 'Marge',
  valueFormat: { scaleFactor: 1, numberOfFractionalDigits: 1 },
  criticalityCalculation: {
    improvementDirection: #MAXIMIZE,
    toleranceRangeLowValue: 15,
    deviationRangeLowValue: 10
  },
  trend: 'MarginTrend',
  targetValue: 20
}]
define view entity ZC_OVP_MarginKPI
  as select from ZI_MarginData
{
      @Analytics.measure: true
      @Aggregation.default: #AVG
      MarginPercent,

      -- Trend: 1 = Up, 0 = Stable, -1 = Down
      MarginTrend
}

Manifest KPI Card

{
  "card_margin_kpi": {
    "model": "analyticsModel",
    "template": "sap.ovp.cards.charts.analytical",
    "settings": {
      "title": "Marge moyenne",
      "entitySet": "ZC_OVP_MarginKPI",
      "dataPointAnnotationPath": "com.sap.vocabularies.UI.v1.DataPoint#MarginDP",
      "chartAnnotationPath": "com.sap.vocabularies.UI.v1.Chart#MarginKPI",
      "defaultSpan": {
        "rows": 2,
        "cols": 1
      }
    }
  }
}

Calcul de criticite

Le calcul automatique du feu tricolore est base sur :

Parametre	Description
`improvementDirection`	#MAXIMIZE, #MINIMIZE, #TARGET
`toleranceRangeLowValue`	Limite Jaune/Vert (pour MAXIMIZE)
`deviationRangeLowValue`	Limite Rouge/Jaune (pour MAXIMIZE)
`targetValue`	Valeur cible pour #TARGET

Filtres globaux

L’OVP prend en charge les filtres globaux qui filtrent toutes les cartes simultanement.

Definir les filtres dans CDS

@UI.selectionField: [{ position: 10 }]
@Consumption.filter.selectionType: #SINGLE
SalesOrg,

@UI.selectionField: [{ position: 20 }]
@Consumption.filter.selectionType: #RANGE
OrderDate,

@UI.selectionField: [{ position: 30 }]
@Consumption.filter.selectionType: #MULTI
Status

Activer les filtres dans le manifest

{
  "sap.ovp": {
    "globalFilterModel": "mainModel",
    "globalFilterEntitySet": "ZC_OVP_GlobalFilter",
    "showDateInRelativeFormat": true,
    "containerLayout": "resizable",
    "enableLiveFilter": true,
    "cards": { ... }
  }
}

Les cartes peuvent naviguer vers d’autres applications.

{
  "card_open_orders": {
    "settings": {
      "navigation": "dataPointNav",
      "identificationAnnotationPath": "com.sap.vocabularies.UI.v1.Identification",
      "intentSemanticObject": "Order",
      "intentAction": "display"
    }
  }
}

@UI.lineItem: [{
  position: 10,
  type: #WITH_INTENT_BASED_NAVIGATION,
  semanticObjectAction: 'display"
}]
@Consumption.semanticObject: 'Order"
OrderId,

Layout responsive

Les cartes OVP s’adaptent automatiquement aux differentes tailles d’ecran.

Configuration Span

{
  "defaultSpan": {
    "rows": 3,     // Hauteur en unites de grille
    "cols": 2,     // Largeur en unites de grille
    "showOnlyHeader": false
  }
}

Points de rupture du layout

Largeur	Colonnes	Recommandation
< 600px	1	Mobile
600-1023px	2	Tablette
1024-1439px	3	Bureau
>= 1440px	4	Grand ecran

Exemple OVP complet

manifest.json

{
  "sap.app": {
    "id": "z.sales.ovp",
    "type": "application",
    "title": "Sales Overview"
  },
  "sap.ovp": {
    "globalFilterModel": "mainModel",
    "globalFilterEntitySet": "ZC_OVP_GlobalFilter",
    "containerLayout": "resizable",
    "enableLiveFilter": true,
    "cards": {
      "card01_open_orders": {
        "model": "mainModel",
        "template": "sap.ovp.cards.list",
        "settings": {
          "title": "Commandes ouvertes",
          "subTitle": "Top 5 par valeur",
          "entitySet": "ZC_OVP_OpenOrders",
          "listFlavor": "bar",
          "sortBy": "TotalAmount",
          "sortOrder": "descending",
          "defaultSpan": { "rows": 3, "cols": 1 }
        }
      },
      "card02_revenue": {
        "model": "analyticsModel",
        "template": "sap.ovp.cards.charts.analytical",
        "settings": {
          "title": "CA mensuel",
          "entitySet": "ZC_OVP_SalesChart",
          "chartAnnotationPath": "com.sap.vocabularies.UI.v1.Chart#RevenueByMonth",
          "defaultSpan": { "rows": 3, "cols": 2 }
        }
      },
      "card03_tasks": {
        "model": "mainModel",
        "template": "sap.ovp.cards.stack",
        "settings": {
          "title": "Mes taches",
          "entitySet": "ZC_OVP_Tasks",
          "defaultSpan": { "rows": 4, "cols": 1 }
        }
      },
      "card04_margin": {
        "model": "analyticsModel",
        "template": "sap.ovp.cards.charts.analytical",
        "settings": {
          "title": "Marge",
          "entitySet": "ZC_OVP_MarginKPI",
          "dataPointAnnotationPath": "com.sap.vocabularies.UI.v1.DataPoint#MarginDP",
          "defaultSpan": { "rows": 2, "cols": 1 }
        }
      }
    }
  },
  "sap.ui5": {
    "models": {
      "mainModel": {
        "dataSource": "mainService",
        "settings": { "defaultBindingMode": "TwoWay" }
      },
      "analyticsModel": {
        "dataSource": "analyticsService",
        "settings": { "defaultBindingMode": "OneWay" }
      }
    },
    "dependencies": {
      "libs": {
        "sap.ovp": {}
      }
    }
  }
}

Service Bindings pour OVP

Pour l’OVP, plusieurs Service Bindings sont typiquement necessaires :

Service transactionnel

@EndUserText.label: 'Sales OVP Service"
define service ZSB_SALES_OVP {
  expose ZC_OVP_OpenOrders;
  expose ZC_OVP_OrderItems;
  expose ZC_OVP_Tasks;
  expose ZC_OVP_GlobalFilter;
}

Service analytique

@EndUserText.label: 'Sales Analytics Service"
define service ZSB_SALES_ANALYTICS {
  expose ZC_OVP_SalesChart;
  expose ZC_OVP_MarginKPI;
}

Bonnes pratiques

Conception des cartes

Maximum 6-8 cartes par OVP - trop de cartes surchargent
Cartes les plus importantes en haut a gauche - respecter le sens de lecture
Hauteur uniforme pour les cartes adjacentes
Titres significatifs - Que montre la carte ?

Performance

Agregations au niveau DB - Ne pas calculer en ABAP
Limiter maxItems - Pas plus de 10-20 entrees
Services separes pour Analytics vs Transactionnel
Chargement paresseux - Les cartes se chargent a la demande

Annotations

-- Bonne pratique : Definir Presentation Variant
@UI.presentationVariant: [{
  qualifier: 'Default',
  sortOrder: [{ by: 'Priority', direction: #DESC }],
  maxItems: 5,
  visualizations: [{
    type: #AS_LINEITEM
  }]
}]

Erreurs frequentes

Probleme	Cause	Solution
Carte vide	EntitySet incorrect	Verifier le Service Binding
Pas d’agregation	Annotations Analytics manquantes	Ajouter @Analytics.measure
Filtre sans effet	globalFilterEntitySet incorrect	Utiliser la meme entite pour le filtre
Graphique vide	chartAnnotationPath incorrect	Verifier le qualifier dans CDS

Sujets connexes

SAP Fiori Elements : UI sans code - Bases de Fiori Elements
CDS Annotations - Reference des annotations
RAP Basics - Fondamentaux RAP
OData Services - Service Bindings

Resume

La Fiori Overview Page est excellente pour :

Tableaux de bord de management avec KPIs
Pages de synthese avec plusieurs sources de donnees
Acces rapide aux informations importantes

Annotations cles :

@UI.chart pour Chart Cards
@UI.dataPoint pour KPI Cards
@UI.presentationVariant pour tri et limites
@Analytics.measure/dimension pour agregations

Avec la bonne combinaison de CDS Views et de configuration manifest.json, vous creez des tableaux de bord informatifs sans code SAPUI5.