SAPUI5 Advanced

UI Flexibility and Adaption

Demoszenario:

  • App mit dem Titel Ausschreibungen verwalten und der App-ID F2049 der SAP
  • Um diese App zu sehen, sollte die Rolle Z_BR_PURCHASER dem Benutzer zugewiesen sein
Brandeis Consulting & Cadao

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.
Brandeis Consulting & Cadao

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
Brandeis Consulting & Cadao

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
Brandeis Consulting & Cadao

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
Brandeis Consulting & Cadao

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
Brandeis Consulting & Cadao

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:
    • Wie Enduser plus
    • 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.
Brandeis Consulting & Cadao

Konzept der Anpassungen

  • Anpassungen werden auf dem ABAP System gespeichert
  • Die Anpassungen überlagern sich:
    • Developer
    • Keyuser
    • Endusers
  • 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
Brandeis Consulting & Cadao

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.

Brandeis Consulting & Cadao

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.

Brandeis Consulting & Cadao

Übung/Demo Key User Adaption

  • Entfernen von Gruppen
  • Hinzufügen von Feldern
  • Umbenennen von Feldern
Brandeis Consulting & Cadao

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...

Brandeis Consulting & Cadao

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.

Brandeis Consulting & Cadao

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!


==> Info auswählen

Brandeis Consulting & Cadao

Übungsaufgabe auf der Listenanzeige

  • Adaption Project anlegen
  • Visual Editor aufrufen
  • Ausblenden & Hinzufügen von Suchfeldern
  • Einblenden des Clear/Zurücksetzen Buttons
Brandeis Consulting & Cadao

Übungsaufgabe in der Detailsanzeige

  • Navigation in die Details über "Anlegen"
  • Wechsel in den Editor Modus
  • Verschieben von Oberflächenbereichen
  • Ausblenden von Gruppen oder Feldern
  • Hinzufügen von anderen Feldern aus dem Service
Brandeis Consulting & Cadao

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.

Brandeis Consulting & Cadao

Demo & Übung

Demo & Übung
Brandeis Consulting & Cadao

Erweiterung mit Fragmenten (1/2)

Passende Collection auswählen

Unter der ObjectPageSection könnte die subSection als Ziel dienen:

Brandeis Consulting & Cadao

Erweiterung mit Fragmenten (2/2)

Passender Typ

Im Bereich der subSections muss der korrekte Typ ObjectPageSubSection hinzugefügt werden:

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:uxap="sap.uxap" 
                         xmlns:forms="sap.ui.layout.form" 
                         xmlns="sap.m">
    <uxap:ObjectPageSubSection id="opss">
        <uxap:blocks>
            <forms:SimpleForm title="Iconterms - Mein View" 
                              editable="false" 
                              layout="ColumnLayout" 
                              id="formsf">
                <Label id="labelCountry"    text="Incoterms Key"/>
                <Text  id="FieldCountry"    
                       text="{IncotermsClassification}"/>
            </forms:SimpleForm>
        </uxap:blocks>
    </uxap:ObjectPageSubSection>
</core:FragmentDefinition>
NewSection.fragment.xml
Brandeis Consulting & Cadao

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", {
Brandeis Consulting & Cadao

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:uxap="sap.uxap" 
                         xmlns:forms="sap.ui.layout.form" 
                         xmlns="sap.m">
    <uxap:ObjectPageSubSection id="opss">
        <uxap:blocks>
            <forms:SimpleForm title="Iconterms - Mein View" 
                              editable="false" 
                              layout="ColumnLayout" 
                              id="formsf">
                <Label id="labelCountry"    text="Incoterms Key"/>
                <Text  id="FieldCountry"    text="{IncotermsClassification}"/>
                <Button id="ButtonDemo" 
                        text="Button" 
       press=".extension.customer.app.variant1.NewController.onButtonPressed" />
            </forms:SimpleForm>
        </uxap:blocks>
    </uxap:ObjectPageSubSection>
</core:FragmentDefinition>
Brandeis Consulting & Cadao

Erweiterung an vorgesehenen Punkten

Im graphischen Editor

Brandeis Consulting & Cadao

Anpassung in der manifest.json

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

Dokumentation der SAP

Brandeis Consulting & Cadao

Deployment des Adaptation Projects


Paketauswahl - Vorsicht, nur UPPERCASE!

Nach Transportauswahl

Brandeis Consulting & Cadao

Deployment Demo

Demo
  • Was können wir in dem Entwicklungspaket an Objekten sehen?
Brandeis Consulting & Cadao

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.

Brandeis Consulting & Cadao