Mobile-optimierte Fiori Apps: Responsive Design und Offline-Faehigkeit

Mobile Anwendungen sind aus dem modernen Geschaeftsalltag nicht mehr wegzudenken. Mitarbeiter im Aussendienst, Lagerarbeiter mit Scanner-Geraeten oder Fuehrungskraefte, die unterwegs Genehmigungen erteilen - alle erwarten, dass Business-Anwendungen auf ihren mobilen Endgeraeten einwandfrei funktionieren. SAP Fiori wurde von Anfang an mit dem Mobile-First-Gedanken entwickelt, doch um das volle Potenzial auszuschoepfen, muessen Entwickler einige Besonderheiten beachten.

In diesem Artikel lernen Sie, wie Sie Ihre RAP-basierten Fiori-Anwendungen fuer mobile Geraete optimieren. Wir behandeln mobile-spezifische CDS Annotations, Responsive Design Best Practices, Offline-Faehigkeit durch Draft Handling und die Integration mit SAP Mobile Start.

Mobile-First bei SAP Fiori

SAP Fiori basiert auf dem SAPUI5-Framework, das responsive Design bereits im Kern unterstuetzt. Fiori Elements nutzt diese Faehigkeiten und generiert automatisch mobile-freundliche UIs. Dennoch gibt es wichtige Optimierungen, die Sie als Entwickler vornehmen koennen, um die mobile Nutzererfahrung zu verbessern.

Die Herausforderungen mobiler Anwendungen

Mobile Geraete unterscheiden sich grundlegend von Desktop-Arbeitsplaetzen:

Diese Unterschiede erfordern spezifische Anpassungen in der UI-Gestaltung und im Datenmanagement.

Mobile-spezifische CDS Annotations

Fiori Elements verwendet Annotations, um die UI-Generierung zu steuern. Fuer mobile Optimierung sind besonders die importance-Einstellungen und responsive Annotations relevant.

Importance-Annotation fuer Responsive Tables

Die @UI.lineItem-Annotation unterstuetzt eine importance-Eigenschaft, die steuert, welche Spalten auf kleinen Bildschirmen sichtbar bleiben:

@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;
}

Das Verhalten der Importance-Werte:

• #HIGH: Spalte wird immer angezeigt, auch auf kleinsten Bildschirmen
• #MEDIUM: Spalte wird auf Tablets angezeigt, auf Smartphones nur bei ausreichend Platz
• #LOW: Spalte wird nur auf Desktop angezeigt, auf mobilen Geraeten ausgeblendet

Responsive Table Modes

Fiori Elements unterstuetzt verschiedene Table-Modi fuer responsive Darstellung. Der Standard-Modus passt sich automatisch an:

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

Auf Smartphones werden Tabellen automatisch in eine Listenansicht umgewandelt, bei der die wichtigsten Felder untereinander dargestellt werden.

Selection Fields fuer Mobile optimieren

Filter-Felder sollten auf mobilen Geraeten reduziert werden. Nutzen Sie die Position, um die wichtigsten Filter zuerst anzuzeigen:

@UI.selectionField: [{ position: 10 }]
Status;  -- Wichtigster Filter, immer sichtbar

@UI.selectionField: [{ position: 20 }]
CustomerName;  -- Zweiter Filter

@UI.selectionField: [{ position: 30 }]
OrderDate;  -- Dritter Filter

-- Weitere Filter werden in "More Filters" ausgelagert
@UI.selectionField: [{ position: 100 }]
Region;

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

Auf mobilen Geraeten zeigt Fiori Elements standardmaessig nur die ersten 2-3 Filter an. Weitere Filter sind ueber einen “Adapt Filters”-Dialog erreichbar.

Responsive Design Best Practices

1. Touch-freundliche Interaktionselemente

Buttons und Aktionen muessen gross genug fuer Touch-Eingabe sein. Fiori Elements uebernimmt dies automatisch, aber bei Custom Actions sollten Sie auf die Mindestgroesse achten:

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

Durch importance: #HIGH bei der Action bleibt der Button auch auf kleinen Bildschirmen sichtbar.

2. Kompakte Object Pages

Object Pages sollten auf mobilen Geraeten uebersichtlich bleiben. Verwenden Sie Facets sinnvoll und gruppieren Sie zusammengehoerige Informationen:

@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: 'Positionen',
    targetElement: '_Items',
    position: 30
  }
]

3. Header-Informationen optimieren

Der Header einer Object Page ist auf Smartphones besonders wichtig, da er als erstes sichtbar ist:

@UI.headerInfo: {
  typeName: 'Auftrag',
  typeNamePlural: 'Auftraege',
  title: { value: 'SalesOrderId' },
  description: { value: 'CustomerName' },
  imageUrl: 'StatusIcon'
}

Verwenden Sie imageUrl fuer visuelle Unterscheidung und halten Sie Titel kurz.

4. Quick Actions im Header

Fuer mobile Nutzer sind Quick Actions im Header besonders praktisch:

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

Diese Actions werden auf mobilen Geraeten prominent im Header angezeigt.

Offline-Faehigkeit mit Draft

Eine der wichtigsten Anforderungen fuer mobile Apps ist die Offline-Faehigkeit. Das Draft-Konzept in RAP ermoeglicht es Benutzern, Aenderungen lokal zu speichern und spaeter zu synchronisieren.

Warum Draft fuer Mobile?

Draft Handling bietet fuer mobile Szenarien entscheidende Vorteile:

1. Auto-Save: Aenderungen werden automatisch gespeichert, auch bei Verbindungsabbruch
2. Resume: Benutzer koennen unterbrochene Bearbeitungen fortsetzen
3. Conflict Resolution: Das System erkennt Konflikte bei der Synchronisation
4. Progressive Validation: Validierungen laufen erst bei Aktivierung

Draft-faehiges Business Object

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; }
}

Mobile-optimierte Validierungen

Fuer mobile Nutzung sollten Validierungen schnell und aussagekraeftig sein:

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     = 'Kunde muss angegeben werden'
          )
        ) TO reported-order.
      ENDIF.
    ENDLOOP.
  ENDMETHOD.
ENDCLASS.

Draft Timeout fuer Mobile

Mobile Nutzer verlassen Apps oft abrupt. Konfigurieren Sie einen angemessenen Draft-Timeout:

" Background Job zum Bereinigen alter 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.

SAP Mobile Start Integration

SAP Mobile Start ist die native mobile App von SAP, die als einheitlicher Einstiegspunkt fuer alle SAP-Anwendungen dient. Die Integration Ihrer Fiori-Apps in Mobile Start erfordert einige Konfigurationsschritte.

Voraussetzungen

Fuer die Mobile Start Integration benoetigen Sie:

1. SAP BTP Subaccount mit Mobile Services
2. Content Provider fuer Fiori Launchpad Content
3. Mobile App Configuration in SAP Mobile Services

Fiori Launchpad Konfiguration

Ihre App muss im Fiori Launchpad korrekt konfiguriert sein:

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

Mobile-spezifische App-Eigenschaften

In der App-Konfiguration koennen Sie mobile-spezifische Eigenschaften festlegen:

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

Push-Benachrichtigungen

Mobile Start unterstuetzt Push-Benachrichtigungen. Diese koennen aus ABAP Cloud ueber SAP Mobile Services gesendet werden:

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.
    " Mobile Services Push API aufrufen
    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   = 'Genehmigung erforderlich'
      body    = |Auftrag { iv_order_id } wartet auf Genehmigung|
      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.

Performance-Optimierung fuer Mobile

Mobile Netzwerke sind oft langsam und unzuverlaessig. Optimieren Sie die Performance Ihrer Apps:

1. Datenmenge reduzieren

Laden Sie nur die notwendigen Daten:

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

2. Lazy Loading fuer 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,

      -- Items werden erst bei Bedarf geladen
      _Items
}

3. Aggregationen auf Server-Seite

Vermeiden Sie Client-seitige Berechnungen:

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
}

Testing auf mobilen Geraeten

Testen Sie Ihre Apps gruendlich auf verschiedenen Geraeten:

Browser Developer Tools

Chrome und Firefox bieten Device-Emulation:

1. F12 oeffnen
2. Device Toolbar aktivieren
3. Verschiedene Geraete testen

SAP Business Application Studio

BAS bietet integrierte Preview-Funktionen:

1. Preview starten
2. QR-Code scannen mit mobilem Geraet
3. Live-Testing auf echtem Geraet

Testcheckliste

• Alle Felder auf kleinem Bildschirm lesbar
• Touch-Ziele gross genug (min. 44x44 Pixel)
• Wichtige Actions immer sichtbar
• Filter funktionieren auf Mobile
• Draft-Save bei Verbindungsabbruch
• Resume nach App-Neustart
• Performance bei langsamer Verbindung akzeptabel
• Landscape- und Portrait-Modus funktionieren

Zusammenfassung

Mobile-optimierte Fiori Apps erfordern bewusste Gestaltungsentscheidungen und die richtige Nutzung der verfuegbaren Annotations und Features:

• Importance-Annotation steuert, welche Spalten auf kleinen Bildschirmen sichtbar bleiben
• Responsive Design wird durch Fiori Elements weitgehend automatisch umgesetzt
• Draft Handling ermoeglicht Offline-Faehigkeit und unterbrechbare Workflows
• SAP Mobile Start bietet einen nativen Einstiegspunkt fuer Unternehmens-Apps
• Performance-Optimierung ist fuer mobile Netzwerke besonders wichtig

Mit diesen Best Practices erstellen Sie Fiori-Anwendungen, die auf allen Geraeten eine optimale Nutzererfahrung bieten und die Produktivitaet Ihrer mobilen Mitarbeiter steigern.

Weiterfuehrende Themen

• SAP Fiori Elements: UI ohne Code erstellen - Grundlagen der UI-Generierung
• Draft Handling in RAP - Detaillierte Anleitung zu Draft-Szenarien
• RAP Basics - Einfuehrung in das RESTful ABAP Programming Model
• CDS Annotations - Vollstaendige Annotation-Referenz
• Fiori Overview Page (OVP) - Analytische Dashboards erstellen