Johannes Behrndt
5. April 2017

Neptune: Eigene Elemente im NAD erstellen

SAPUI5 - Neptune Application Designer

Mithilfe des Neptune Application Designers (NAD) ist es möglich, mit verhältnismäßig geringem Aufwand plattformübergreifende Apps zu erstellen, die mit ihrem SAP-System verbunden sind.

Unser E-Book zum Thema Neptune User Experience Platform

E-Book: Neptune Platform

Was ist Neptune? Welche Vorteile es Ihnen bringt und wie Sie es in Ihrer Systemlandschaft einführen.

Die Elemente der Apps werden per Drag & Drop ausgewählt und eingefügt. Neben der Auswahlliste wird währenddessen der aktuelle Aufbau der App strukturiert dargestellt. In diesem Artikel wird erklärt, wie man Elemente anpassen und erweitern kann, falls die Elemente in der Auswahlliste nicht den Anforderungen genügen.

Neptune Application Designer Element Liste

In der Auswahlliste sind fast alle in SAPUI5 enthaltenen Elemente vorhanden. Wenn neue Elemente in SAPUI5 eingeführt werden, wird zeitnah von Neptune Software ein Update nachgereicht, welches die neuen Element auch im NAD verfügbar macht. Bis dahin kann das neue Attribut über den Custom Attribute String genutzt werden.

Hinweis Custom Button

Anleitung zum Erweitern des Ratingindicators

Nun ist es jedoch möglich, dass ein Element benötigt wird, welches nicht in sapui5 existiert oder dass ein bereits vorhandenes Element erweitert werden muss. Im Folgenden wird erklärt, wie sie dies im Neptune Application Designer realisieren können. Die Struktur der Beispiel-App ist mit Absicht simpel gehalten:

Aufbau Beispiellapp

Es wird ein Ratingindicator als Basis genommen und erweitert, sodass neben dem eigentlichen Indicator noch ein Text und ein Submit-Button angezeigt wird. das Ergebnis sieht dann aus wie folgt:

Fertiges erweitertes Element

Als erstes erstellt man ein “Script Code”-Element in der App. In diesem Element wird die Erweiterung des Elements beschrieben.

// Mit sap.ui.define() wird ein neues Modul erstellt
sap.ui.define([
// In diesem Array werden die Abhängigkeiten angegeben
  "sap/ui/core/Control",
  "sap/m/RatingIndicator",
  "sap/m/Label",
  "sap/m/Button"
], function (Control, RatingIndicator, Label, Button) {
    "use strict";
// In der extend-Methode findet die eigentliche Erweiterung statt
    return Control.extend("sap.ui.demo.wt.control.ProductRating", {
      metadata : {
          properties : {
              value:  {type : "float", defaultValue : 0}
          },
// An dieser Stelle wird festgelegt, aus welchen Objekten das neue Element bestehen soll
          aggregations : {
              _rating : {type : "sap.m.RatingIndicator", multiple: false, visibility : "hidden"},
              _label : {type : "sap.m.Label", multiple: false, visibility : "hidden"},
              _button : {type : "sap.m.Button", multiple: false, visibility : "hidden"}
          },
          events : {
              change : {
                  parameters : {
                      value : {type : "int"}
                  }
              }
          }
      },
      init : function () {
          this.setAggregation("_rating", new RatingIndicator({
              value: this.getValue(),
              iconSize: "2rem",
              visualMode: "Half",
              liveChange: this._onRate.bind(this)
          }));
// Hier wird das Label erstellt mit einem initalen Text
          this.setAggregation("_label", new Label({
              text: "Please rate the product"
          }).addStyleClass("sapUiTinyMargin"));
// Hier wird der Submit Button erstellt
         this.setAggregation("_button", new Button({
              text: "Submit",
              press: this._onSubmit.bind(this)
          }))
          ;
      },
      setValue: function (iValue) {
          this.setProperty("value", iValue, true);
          this.getAggregation("_rating").setValue(iValue);
      },
// Der Unterstrich vor dem Methodenname markiert die Methode als private
// Diese Methode passt den Text im Label an, wenn der User das Rating ändert
      _onRate : function (oEvent) {
          var fValue = oEvent.getParameter("value");
          this.setValue(fValue);
          this.getAggregation("_label").setText("You chose " + fValue + " of " 
          + oEvent.getSource().getMaxValue() + " possible stars");
      },
// Sobald der User den Submit Button klickt, wird das Rating deaktiviert und der Text angepasst
      _onSubmit : function (oEvent) {
          this.getAggregation("_rating").setEnabled(false);
          this.getAggregation("_label").setText("You successfully rated this product");
          this.getAggregation("_button").setEnabled(false);
          this.fireEvent("change", {
              value: this.getValue()
          });
      },
// In dieser Methode wird der auszugebende HTML-Code festgelegt
      renderer : function (oRM, oControl) {
          oRM.write("<div");
          oRM.writeControlData(oControl);
          oRM.addClass("myAppDemoWTProductRating");
          oRM.writeClasses();
          oRM.write(">");
          oRM.renderControl(oControl.getAggregation("_rating"));
          oRM.renderControl(oControl.getAggregation("_label"));
          oRM.renderControl(oControl.getAggregation("_button"));
          oRM.write("</div>");
      },
   });
});

Um das Element darzustellen und auf der Seite zu platzieren, wird folgender Code benötigt.

var productRating = new sap.ui.demo.wt.control.ProductRating();
headerDetail.addContentMiddle(productRating);

Ich hoffe, dass ihnen dieser Artikel geholfen hat. Bei Anmerkungen oder Fragen kommen sie gerne auf mich zu oder nutzen sie die Kommentarfunktion.

In diesem kostenlosen Webinar bekommen Sie einen Überblick über verschiedene Best Practices sowie Anwendungsgebiete und Ideen, welche Apps Sie mit der Entwicklungsplattform Neptune realisieren können.

Johannes Behrndt

Johannes Behrndt

Seit über 10 Jahren berate ich große und mittelständische Unternehmen rund um mobile Lösungen, insbesondere im SAP-Umfeld. Ich habe den Überblick über die relevanten SAP-Prozesse und kenne die neuesten Technologien für mobile Lösungen.

Sie haben Fragen? Kontaktieren Sie mich!



Das könnte Sie auch interessieren

Der Neptune Application Designer (kurz NAD) besteht aus zahlreichen Fenstern, die individuell skaliert werden können. So können schnell wichtige Fenster verbreitert und unwichtige Fenster verkleinert werden. Aber Achtung: Sobald ein […]

weiterlesen

WWDC, Google I/O, MCW, Neptune Summit...? 250 Teilnehmer aus der ganzen Welt haben sich in Oslo getroffen und gespannt gelauscht, was es bei Neptune Software Neues gibt.

weiterlesen

Über den Service Pushwoosh ist es Ihnen nicht nur möglich Nachrichten an die Benutzer Ihrer Neptune-Apps zu senden, damit diese mit Informationen versorgt werden. Sie können darüber hinaus das Benutzererlebnis […]

weiterlesen

Schreiben Sie einen Kommentar

Bitte füllen Sie alle mit * gekennzeichneten Felder aus. Ihre E-Mail Adresse wird nicht veröffentlicht.





Kontaktieren Sie uns!
Sophie Weber
Sophie Weber Kundenservice