Applications Fiori optimisees pour mobile : Design responsive et fonctionnalites hors ligne

Catégorie

Fiori

Publié

14. Feb. 2026

Auteur

Les applications mobiles sont devenues indispensables dans le quotidien professionnel moderne. Employes sur le terrain, magasiniers equipes de scanners ou dirigeants approuvant des demandes en deplacement - tous s’attendent a ce que les applications metier fonctionnent parfaitement sur leurs appareils mobiles. SAP Fiori a ete concu des le depart avec une approche Mobile-First, mais pour exploiter tout son potentiel, les developpeurs doivent tenir compte de certaines particularites.

Dans cet article, vous apprendrez comment optimiser vos applications Fiori basees sur RAP pour les appareils mobiles. Nous aborderons les annotations CDS specifiques au mobile, les bonnes pratiques du design responsive, la fonctionnalite hors ligne grace au Draft Handling et l’integration avec SAP Mobile Start.

Mobile-First chez SAP Fiori

SAP Fiori repose sur le framework SAPUI5, qui prend en charge nativement le design responsive. Fiori Elements exploite ces capacites et genere automatiquement des interfaces utilisateur adaptees au mobile. Neanmoins, il existe des optimisations importantes que vous pouvez effectuer en tant que developpeur pour ameliorer l’experience utilisateur mobile.

Les defis des applications mobiles

Les appareils mobiles different fondamentalement des postes de travail de bureau :

Aspect	Bureau	Mobile
Taille d’ecran	Grande (1920x1080+)	Petite (375x667 a 430x932)
Methode de saisie	Souris et clavier	Tactile
Reseau	Stable, rapide	Instable, variable
Contexte d’utilisation	Concentre, sessions longues	En deplacement, interactions courtes
Fonctionnalite hors ligne	Rarement necessaire	Souvent requise

Ces differences necessitent des adaptations specifiques dans la conception de l’interface utilisateur et la gestion des donnees.

Annotations CDS specifiques au mobile

Fiori Elements utilise des annotations pour controler la generation de l’interface utilisateur. Pour l’optimisation mobile, les parametres importance et les annotations responsives sont particulierement pertinents.

Annotation Importance pour les tables responsives

L’annotation @UI.lineItem prend en charge une propriete importance qui controle quelles colonnes restent visibles sur les petits ecrans :

@Metadata.layer: #CORE

annotate view ZC_SalesOrder with
{
  @UI.lineItem: [{ position: 10, importance: #HIGH }]
  SalesOrderId;

  @UI.lineItem: [{ position: 20, importance: #HIGH }]
  CustomerName;

  @UI.lineItem: [{ position: 30, importance: #MEDIUM }]
  OrderDate;

  @UI.lineItem: [{ position: 40, importance: #MEDIUM }]
  NetAmount;

  @UI.lineItem: [{ position: 50, importance: #LOW }]
  Currency;

  @UI.lineItem: [{ position: 60, importance: #LOW }]
  CreatedBy;

  @UI.lineItem: [{ position: 70, importance: #LOW }]
  CreatedAt;
}

Comportement des valeurs d’importance :

#HIGH : La colonne est toujours affichee, meme sur les plus petits ecrans
#MEDIUM : La colonne est affichee sur les tablettes, sur les smartphones uniquement si l’espace est suffisant
#LOW : La colonne n’est affichee que sur bureau, masquee sur les appareils mobiles

Modes de table responsive

Fiori Elements prend en charge differents modes de table pour l’affichage responsive. Le mode par defaut s’adapte automatiquement :

@UI.presentationVariant: [{
  qualifier: 'Default',
  visualizations: [{
    type: #AS_LINEITEM
  }],
  sortOrder: [{
    by: 'OrderDate',
    direction: #DESC
  }]
}]

Sur les smartphones, les tables sont automatiquement converties en vue liste, ou les champs les plus importants sont affiches les uns en dessous des autres.

Optimiser les champs de selection pour mobile

Les champs de filtre doivent etre reduits sur les appareils mobiles. Utilisez la position pour afficher les filtres les plus importants en premier :

@UI.selectionField: [{ position: 10 }]
Status;  -- Filtre le plus important, toujours visible

@UI.selectionField: [{ position: 20 }]
CustomerName;  -- Deuxieme filtre

@UI.selectionField: [{ position: 30 }]
OrderDate;  -- Troisieme filtre

-- Les filtres supplementaires sont deplaces vers "More Filters"
@UI.selectionField: [{ position: 100 }]
Region;

@UI.selectionField: [{ position: 110 }]
SalesOrg;

Sur les appareils mobiles, Fiori Elements n’affiche par defaut que les 2-3 premiers filtres. Les filtres supplementaires sont accessibles via un dialogue “Adapt Filters”.

Bonnes pratiques du design responsive

1. Elements d’interaction adaptes au tactile

Les boutons et actions doivent etre suffisamment grands pour la saisie tactile. Fiori Elements gere cela automatiquement, mais pour les actions personnalisees, vous devez veiller a la taille minimale :

@UI.lineItem: [
  { position: 10, importance: #HIGH },
  {
    type: #FOR_ACTION,
    dataAction: 'approve',
    label: 'Approuver',
    importance: #HIGH
  }
]
SalesOrderId;

En definissant importance: #HIGH pour l’action, le bouton reste visible meme sur les petits ecrans.

2. Pages objet compactes

Les Object Pages doivent rester claires sur les appareils mobiles. Utilisez judicieusement les facettes et regroupez les informations connexes :

@UI.facet: [
  {
    id: 'GeneralInfo',
    purpose: #HEADER,
    type: #FIELDGROUP_REFERENCE,
    targetQualifier: 'HeaderData',
    position: 10
  },
  {
    id: 'OrderDetails',
    purpose: #STANDARD,
    type: #IDENTIFICATION_REFERENCE,
    label: 'Details',
    position: 20
  },
  {
    id: 'Items',
    purpose: #STANDARD,
    type: #LINEITEM_REFERENCE,
    label: 'Postes',
    targetElement: '_Items',
    position: 30
  }
]

3. Optimiser les informations d’en-tete

L’en-tete d’une Object Page est particulierement important sur les smartphones car il est visible en premier :

@UI.headerInfo: {
  typeName: 'Commande',
  typeNamePlural: 'Commandes',
  title: { value: 'SalesOrderId' },
  description: { value: 'CustomerName' },
  imageUrl: 'StatusIcon"
}

Utilisez imageUrl pour la differenciation visuelle et gardez les titres courts.

4. Actions rapides dans l’en-tete

Pour les utilisateurs mobiles, les actions rapides dans l’en-tete sont particulierement pratiques :

@UI.identification: [
  {
    position: 10,
    type: #FOR_ACTION,
    dataAction: 'approve',
    label: 'Approuver"
  },
  {
    position: 20,
    type: #FOR_ACTION,
    dataAction: 'reject',
    label: 'Rejeter"
  }
]

Ces actions sont affichees de maniere proeminente dans l’en-tete sur les appareils mobiles.

Fonctionnalite hors ligne avec Draft

L’une des exigences les plus importantes pour les applications mobiles est la fonctionnalite hors ligne. Le concept de Draft dans RAP permet aux utilisateurs de sauvegarder les modifications localement et de les synchroniser ulterieurement.

Pourquoi Draft pour le mobile ?

Le Draft Handling offre des avantages decisifs pour les scenarios mobiles :

Auto-Save : Les modifications sont automatiquement sauvegardees, meme en cas de deconnexion
Resume : Les utilisateurs peuvent reprendre les modifications interrompues
Resolution des conflits : Le systeme detecte les conflits lors de la synchronisation
Validation progressive : Les validations ne s’executent qu’a l’activation

Business Object compatible Draft

managed implementation in class zbp_i_salesorder unique;
strict ( 2 );
with draft;

define behavior for ZI_SalesOrder alias Order
persistent table zsalesorder
draft table zdraft_salesorder
lock master total etag LastChangedAt
authorization master ( instance )
etag master LastChangedAt
{
  create;
  update;
  delete;

  field ( readonly ) SalesOrderId;
  field ( readonly ) CreatedBy, CreatedAt, LastChangedBy, LastChangedAt;

  -- Draft Actions
  draft action Edit;
  draft action Activate optimized;
  draft action Discard;
  draft action Resume;
  draft determine action Prepare {
    validation validateCustomer;
    validation validateItems;
  }

  -- Business Actions
  action approve result [1] $self;
  action reject result [1] $self;

  -- Validations
  validation validateCustomer on save { field CustomerId; }
  validation validateItems on save { field _Items; }
}

Validations optimisees pour le mobile

Pour l’utilisation mobile, les validations doivent etre rapides et significatives :

CLASS lhc_order DEFINITION INHERITING FROM cl_abap_behavior_handler.
  PRIVATE SECTION.
    METHODS validateCustomer FOR VALIDATE ON SAVE
      IMPORTING keys FOR Order~validateCustomer.
ENDCLASS.

CLASS lhc_order IMPLEMENTATION.
  METHOD validateCustomer.
    READ ENTITIES OF zi_salesorder IN LOCAL MODE
      ENTITY Order
        FIELDS ( CustomerId )
        WITH CORRESPONDING #( keys )
      RESULT DATA(lt_orders).

    LOOP AT lt_orders INTO DATA(ls_order).
      IF ls_order-CustomerId IS INITIAL.
        APPEND VALUE #(
          %tky = ls_order-%tky
          %element-CustomerId = if_abap_behv=>mk-on
        ) TO failed-order.

        APPEND VALUE #(
          %tky = ls_order-%tky
          %element-CustomerId = if_abap_behv=>mk-on
          %msg = new_message_with_text(
            severity = if_abap_behv_message=>severity-error
            text     = 'Le client doit etre specifie"
          )
        ) TO reported-order.
      ENDIF.
    ENDLOOP.
  ENDMETHOD.
ENDCLASS.

Timeout Draft pour mobile

Les utilisateurs mobiles quittent souvent les applications brusquement. Configurez un timeout Draft approprie :

" Job d'arriere-plan pour nettoyer les anciens Drafts
CLASS zcl_draft_cleanup DEFINITION PUBLIC FINAL CREATE PUBLIC.
  PUBLIC SECTION.
    INTERFACES if_apj_dt_exec_object.
ENDCLASS.

CLASS zcl_draft_cleanup IMPLEMENTATION.
  METHOD if_apj_dt_exec_object~execute.
    DATA(lv_cutoff) = cl_abap_context_info=>get_system_date( ) - 7.

    DELETE FROM zdraft_salesorder
      WHERE draftentitylastchangedatetime < @lv_cutoff.
  ENDMETHOD.
ENDCLASS.

Integration SAP Mobile Start

SAP Mobile Start est l’application mobile native de SAP qui sert de point d’entree unifie pour toutes les applications SAP. L’integration de vos applications Fiori dans Mobile Start necessite quelques etapes de configuration.

Prerequis

Pour l’integration Mobile Start, vous avez besoin de :

SAP BTP Subaccount avec Mobile Services
Content Provider pour le contenu Fiori Launchpad
Mobile App Configuration dans SAP Mobile Services

Configuration Fiori Launchpad

Votre application doit etre correctement configuree dans le Fiori Launchpad :

{
  "sap.app": {
    "id": "zsalesorder.manage",
    "type": "application",
    "title": "{{title}}",
    "description": "{{description}}",
    "crossNavigation": {
      "inbounds": {
        "SalesOrder-manage": {
          "semanticObject": "SalesOrder",
          "action": "manage",
          "signature": {
            "parameters": {},
            "additionalParameters": "allowed"
          }
        }
      }
    }
  }
}

Proprietes specifiques au mobile

Dans la configuration de l’application, vous pouvez definir des proprietes specifiques au mobile :

{
  "sap.mobile": {
    "startupImage": "images/startup.png",
    "definesOwnFullscreenMode": false,
    "definesOwnStatusBar": false
  },
  "sap.ui5": {
    "dependencies": {
      "minUI5Version": "1.120.0",
      "libs": {
        "sap.m": {},
        "sap.fe.templates": {}
      }
    }
  }
}

Notifications push

Mobile Start prend en charge les notifications push. Celles-ci peuvent etre envoyees depuis ABAP Cloud via SAP Mobile Services :

CLASS zcl_mobile_notification DEFINITION PUBLIC FINAL CREATE PUBLIC.
  PUBLIC SECTION.
    METHODS send_approval_notification
      IMPORTING
        iv_user_id TYPE syuname
        iv_order_id TYPE zsalesorder_id.
ENDCLASS.

CLASS zcl_mobile_notification IMPLEMENTATION.
  METHOD send_approval_notification.
    " Appeler l'API Push de Mobile Services
    DATA(lo_destination) = cl_http_destination_provider=>create_by_comm_arrangement(
      comm_scenario  = 'ZMOBILE_PUSH"
      service_id     = 'MOBILE_PUSH_SRV"
    ).

    DATA(lo_client) = cl_web_http_client_manager=>create_by_http_destination( lo_destination ).

    DATA(ls_notification) = VALUE zst_push_notification(
      user_id = iv_user_id
      title   = 'Approbation requise"
      body    = |La commande { iv_order_id } attend votre approbation|
      data    = |{ "semanticObject": "SalesOrder", "action": "manage" }|
    ).

    lo_client->get_http_request( )->set_text( /ui2/cl_json=>serialize( ls_notification ) ).
    lo_client->execute( if_web_http_client=>post ).
  ENDMETHOD.
ENDCLASS.

Optimisation des performances pour mobile

Les reseaux mobiles sont souvent lents et peu fiables. Optimisez les performances de vos applications :

1. Reduire le volume de donnees

Chargez uniquement les donnees necessaires :

@UI.presentationVariant: [{
  qualifier: 'MobileView',
  maxItems: 20,
  visualizations: [{ type: #AS_LINEITEM }],
  sortOrder: [{ by: 'OrderDate', direction: #DESC }]
}]

2. Chargement paresseux pour les associations

define root view entity ZI_SalesOrder
  as select from zsalesorder
  association [0..*] to ZI_SalesOrderItem as _Items
    on $projection.SalesOrderId = _Items.SalesOrderId
{
  key sales_order_id as SalesOrderId,
      customer_name  as CustomerName,
      order_date     as OrderDate,
      net_amount     as NetAmount,

      -- Les items ne sont charges qu'a la demande
      _Items
}

3. Agregations cote serveur

Evitez les calculs cote client :

define view entity ZI_SalesOrderAnalytics
  as select from zsalesorder
{
  key sales_order_id as SalesOrderId,

  @Aggregation.default: #SUM
  net_amount as TotalAmount,

  @Aggregation.default: #COUNT
  1 as ItemCount
}

Test sur appareils mobiles

Testez minutieusement vos applications sur differents appareils :

Outils de developpement du navigateur

Chrome et Firefox offrent l’emulation d’appareils :

Ouvrir F12
Activer la barre d’outils des appareils
Tester differents appareils

SAP Business Application Studio

BAS offre des fonctionnalites de previsualisation integrees :

Demarrer la previsualisation
Scanner le code QR avec l’appareil mobile
Test en direct sur un appareil reel

Checklist de test

Tous les champs lisibles sur petit ecran
Zones tactiles suffisamment grandes (min. 44x44 pixels)
Actions importantes toujours visibles
Filtres fonctionnels sur mobile
Sauvegarde Draft en cas de deconnexion
Reprise apres redemarrage de l’application
Performances acceptables sur connexion lente
Modes paysage et portrait fonctionnels

Resume

Les applications Fiori optimisees pour mobile necessitent des decisions de conception deliberees et une utilisation appropriee des annotations et fonctionnalites disponibles :

L’annotation Importance controle quelles colonnes restent visibles sur les petits ecrans
Le design responsive est largement automatise par Fiori Elements
Le Draft Handling permet la fonctionnalite hors ligne et les workflows interruptibles
SAP Mobile Start offre un point d’entree natif pour les applications d’entreprise
L’optimisation des performances est particulierement importante pour les reseaux mobiles

Avec ces bonnes pratiques, vous creez des applications Fiori qui offrent une experience utilisateur optimale sur tous les appareils et augmentent la productivite de vos collaborateurs mobiles.

Sujets connexes

SAP Fiori Elements : Creer des UI sans code - Bases de la generation d’UI
Draft Handling dans RAP - Guide detaille des scenarios Draft
RAP Basics - Introduction au RESTful ABAP Programming Model
CDS Annotations - Reference complete des annotations
Fiori Overview Page (OVP) - Creer des tableaux de bord analytiques