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

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.

Tobias Heinrichs

Mein Name ist Tobias Heinrichs und ich bin Teil des Fachbereichs Mission Mobile. Dort beschäftige ich mich mit der sapui5-Entwicklung, insbesondere unter Nutzung der Neptune Applikationen.

Sie haben Fragen? Kontaktieren Sie mich!




Das könnte Sie auch interessieren


Schreiben Sie einen Kommentar

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





Angebot anfordern
Preisliste herunterladen
Expert Session
Support