SAPUI5 Advanced

UI Flexibility and Adaption

Demoszenario:

  • App mit dem Titel Produkte klassifizieren und der App-ID F2151 der SAP
  • Um diese App zu sehen, sollte die Business Rolle SAP_BR_TRD_CLS_SPECIALIST dem Benutzer zugewiesen sein

Motivation für Anpassungen

SAP liefert tausende Fiori Standard Apps aus

  • Diese passen nicht für jeden Kunden/Abteilung/Anwender
  • Die Akzeptanz einer Anwendung ist höher, wenn sich der Anwender mit seinen Begriffen und Workflows darin wiederfindet.

Anpassen, kopieren oder neu entwickeln

Wenn die Standard-App nicht passt, dann gibt es unterschiedliche Möglichkeiten

Neu Entwickeln

  • Nutzung bestehender Services
  • 100% der Anforderung umsetzbar, auch sehr spezielle Anforderungen
  • Entkopplung vom Standard
  • Für die Wartung selber verantwortlich
  • Verhältnismässig aufwändig

Kopieren

  • Nutzung bestehender Services
  • Beliebig anpassbar
  • Entkopplung vom Standard - Fehlerkorrekturen müssen selber nachgezogen werden
  • Für die Wartung selber verantwortlich

Anpassen

  • App bleibt unverändert
  • Viele typische Änderungen sind möglich
  • Der Standard wird weiter genutzt
  • Es ist nicht alles machbar

Ebenen der Anpassungen

  1. Enduser - Einfache Anpassungen für sich selber
  2. Key User - Einfache Anpassungen für alle
  3. Developer - Komplexere Anpassungen mit Varianten

Enduser Anpassungen

  • Einfache Anpassungen nur für den eigenen Benutzer
  • Tool ist die normale Anwendungsoberfläche
  • Nur für Filter und Tabellen möglich
  • Deployment: Anpassungen auf dem System

Key User Anpassungen

  • Einfache Anpassungen für alle Benutzer:
    • Felder ein- und ausblenden
    • Felder umbenennen
    • Im Service vorhandene Felder hinzufügen
    • Drag & Drop
    • Neue Gruppen
    • URL Einbettungen
  • Deployment: Anpassungen werden im Backend gespeichert und sollten von Q in P System transportiert werden

Developer Anpassungen

  • Komplexere Anpassungen für alle
  • auch als Varianten, so dass nicht alle Endbenutzer mit der gleichen Anpassung arbeiten müssen.
  • Entwicklung in der BAS Entwicklungsumgebung
  • Möglichkeiten:
    • Properties der Oberflächenelemente anpassen
    • Eigene Controller
    • Eigene Aktionen
    • Redefinition von bestehendem Code
    • Eigene Fragmente
  • Erzeugung einer App-Variante, die Transportiert werden muss. Eintragung in den Katalog notwendig.

Konzept der Anpassungen

  • Anpassungen werden auf dem ABAP System gespeichert
  • Die Anpassungen überlagern sich:
    • Developer
    • Keyuser
    • Endusers

Voraussetzung für alle drei Arten von Adaptions

FlexEnabled: true in der manifest.json

Mit diesem Flag wird eine strengere Prüfung in den Editoren erreicht:

 ...
  "sap.ui5": {
    "flexEnabled": true,
    "dependencies": {
      "minUI5Version": "1.129.0",
      "libs": {
        "sap.m": {},
        "sap.ui.core": {}
...

Stabile IDs für Oberflächenelemente - überall!

<mvc:View xmlns="sap.m"
  xmlns:mvc="sap.ui.core.mvc">
  <Page id="page">
    <mvc:XMLView id="myEmbeddedView" viewName="MyView" async="true" />
  </Page>
</mvc:View>

Choose names for your stable IDs that describe the semantics of your views and controls, such as page or table.

Vorgehen für Key User Adaption

Auf dem Entwicklungs oder Testsystem :

  • Rolle SAP_UI_FLEX_KEY_USER zuweisen
  • Anpassungen durchführen
  • Transportieren

Hinweis aus der Doku
Es sollte immer nur ein Anwendungsexperte gleichzeitig die Benutzeroberfläche einer Anwendung anpassen.

Übung/Demo Key User Adaption

  • Entfernen von Gruppen
  • Hinzufügen von Feldern
  • Umbenennen von Feldern

Vorgehen für die Developer Adaptation

Im Business Application Studio (BAS) in einem normalen Fiori Dev Space:

  • Startseite: Link auf New Project From Template
  • Select Template and Target Location: SAPUI5 Adaption Project
  • Target Environment: ABAP
  • Adaptation Project - Basic Information
    • Project Name - Technischer Name der Variante
    • Application Title - Titel für die Anzeige der Variante
    • Namespace - Kundennamensraum

Fortsetzung folgt...

Adaptation Project - Configuration

  • Select System - ABAP System mit der Fiori-Anwendung
  • Select Application - Fiori Anwendung, die angepasst werden soll. Die Suche mit der App-ID (siehe nächste Folie) ist am sichersten, weil es teilweise etwas unübersichtlich in der Liste der Apps zugeht.
  • Select SAP UI5 version - Empfehlung: Auf dem Wert der System Version lassen, wenn es keine guten Gründe gibt, diese zu ändern.

Finden der App-ID

Vorsicht - Genau auf der Seite machen, auf der man auch eine Änderung machen will. Teilweise wechselt man bei Fiori ohne zu merken die App!

User Profile
==> Info auswählen

App ID

Übungsaufgabe auf der Listenanzeige

  • Adaption Project anlegen
  • Visual Editor aufrufen
  • Ausblenden & Hinzufügen von Suchfeldern
  • Einblenden / Ausblenden des Export Excel Buttons

Übungsaufgabe in der Detailsanzeige

  • Navigation in die Details
  • Wechsel in den Editor Modus
  • Verschieben von Oberflächenbereichen
  • Ausblenden von Gruppen oder Feldern
  • Hinzufügen von anderen Feldern aus dem Service

Code Erweiterungen von Adaption Projects

Mögliche Erweiterungen:

  • Fragmente
  • Controller

Entwicklung im Blindflug
Die Erweiterungen werden nicht angezeigt, solange sie Fehlerhaft bzw. nicht 100% passen.

Demo & Übung

Demo & Übung

Erweiterung mit Fragmenten (1/2)

Passende Collection auswählen

App ID

Erweiterung mit Fragmenten (2/2)

Passender Typ

Jedes Oberflächenelement braucht eine id

Ohne idwird die Oberfläche nicht gerendert und man sieht nicht, was geändert wurde.

<!-- Use stable and unique IDs-->
<core:FragmentDefinition xmlns:core="sap.ui.core"
                         xmlns="sap.m">
    <HBox id="storckCustomHBox1">
      <Label id="storckCustomLabel1" text="MyLabel" />
      <Text id="storckCustomText1" text={Customdata} />
    </HBox>
</core:FragmentDefinition>
NewSection.fragment.xml

Aktionen und Controller hinzufügen

Schritte

  • Neuen Controller anlgen: NewController
  • Bestehendes Fragment um einen Button erweitern

Aufruf von Funktionen

Der Pfad für die Handler-Methode im Controller ist nicht ganz trivial:

Beispiel

<Button id="ButtonDemo" 
        text="Button" 
        press=".extension.customer.app.variant1.NewController.onButtonPressed" />

Aufbau
.extension.<ControllerExtensionNamespace>.<ControllerName>.<Funktionsname>

Der <ControllerExtensionNamespace> und der <ControllerName> können bequem aus dem Quellcode des Controllers kopiert werden:

return ControllerExtension.extend(
    "customer.app.variant1.NewController", {

Aktionen und Controller hinzufügen - Beispiel

Controller NewController.js

sap.ui.define([
    'sap/ui/core/mvc/ControllerExtension'
  ],
  function (
    ControllerExtension
  ) {
    "use strict";
    return ControllerExtension.extend(
       "customer.app.variant1.NewController", {
      onButtonPressed: function(){
        alert('Hallo Welt');
        console.log('Hallo Welt');
      }

Fragment NewSection.fragment.xml

<!-- Use stable and unique IDs-->
<core:FragmentDefinition xmlns:core="sap.ui.core"
                         xmlns="sap.m">
    <HBox id="storckCustomHBox1">
      <Label id="storckCustomLabel1" text="MyLabel" />
      <Text id="storckCustomText1" text={Customdata} />
      <Button id="ButtonDemo" text="Button" 
       press=".extension.customer.app.variant1.NewController.onButtonPressed" />
    </HBox>
</core:FragmentDefinition>

Erweiterung an vorgesehenen Punkten

Im graphischen Editor

Anpassung in der manifest.json

  • Ersetzen von OData Services
  • Annotationsdateien Hinzufügen
  • OData Services hinzufügen
  • Neue Datenmodelle anlegen

Dokumentation der SAP

Deployment des Adaptation Projects


Paketauswahl - Vorsicht, nur UPPERCASE!

Nach Transportauswahl

Deployment Demo

Demo
  • Was können wir in dem Entwicklungspaket an Objekten sehen?

Administration des Layered Respository

Diese Tools sind für den SAP Support. Sie können aber auch für den Kunden nützlich sein. Sind aber nicht 100% dokumentiert

Transaktion SUI_SUPPORT ist eine Toolsammlung für alle möglichen Fiori Oberflächenthemen. Unter Anderem die Anzeigen der existierenden Anpassungen über alle Layer hinweg.

* Die Developer Adaption basiert auf einer vom System erstellten **Kopie** der originalen App

* Die Anpassungen sind sehr stabil gegenüber Änderungen von der SAP

* Der Entwickler kann die App aktualisieren und damit sein Adaption Projekt

div class="col"> <div> Unter der `ObjectPageSection` könnte die subSection als Ziel dienen: ![](https://files.brandeis.de/O7nteB/direct) </div><div> ![](https://files.brandeis.de/Q0tA7A/direct) </div></div

Im Bereich der subSections muss der korrekte Typ `ObjectPageSubSection` hinzugefügt werden: ![](https://files.brandeis.de/RbVpsS/direct)