BTC AG - Let it snow
Weihnachten im SAP Fiori Launchpad – Tutorial
zurück zur Übersicht

Weihnachten im SAP Fiori Launchpad – Tutorial

Thema: Fiori
Datum: 01.12.22
KommentareLikes 0

BTC AG

Maxim Fuchs

Heute möchten wir Euch zeigen wie Ihr die weihnachtliche Stimmung auch in ihr SAP Fiori Launchpad bekommen. Nach diesem Tutorial seid Ihr in der Lage selbst ein SAP Fiori Launchpad Plugin zu entwickeln, welches Euch winterliche Schneeflocken ins Launchpad zaubert.

BTC AG

Entwicklung eines „besonderen“ Fiori Launchpad Plugins

Voraussetzung

Voraussetzung für die Entwicklung ist das SAP Business Application Studio oder die SAP WebIDE. Die Entwicklung des Plugins wurde in diesem Fall mit der SAP WebIDE gemacht. Zusätzlich muss unter den Einstellungen im Projekt die Extension „SAP Fiori Launchpad Extensibility“ aktiviert sein:

Schritt 1 – Anlegen des Projekts

Zuerst gehen wir in die SAP WebIDE und legen ein neues Projekt (Project from template) mit der Vorlage „SAP Fiori Launchpad Plugin“ an.

Wir wählen im Verlauf des Wizards einen geeigneten Projektnamen, eine Plugin ID und einen Titel. Im Bereich „Sample Code“ wählen wir keine der Checkboxen aus.

Schritt 2 – Anlegen der Schneeflocken Animation

Nach dem das Projekt angelegt ist, kümmern wir uns um die Schneeflockenanimation. Dazu legen wir eine neue Javascript Datei „Flake.js“ mit folgendem Quellcode an:

sap.ui.define([

    "sap/ui/base/Object"

], function(Object) {

    "use strict";

    return Object.extend("snow.controller.Flake", {     

        init: function(x,y) {

            var maxWeight = 5,

            maxSpeed = 3;               

            this.x = x;

            this.y = y;          

            this.r = this.randomBetween(0, 1);

            this.a = this.randomBetween(0, Math.PI);

            this.aStep = 0.01;

            this.weight = this.randomBetween(2, maxWeight);

            this.alpha = (this.weight / maxWeight);

            this.speed = (this.weight / maxWeight) * maxSpeed;

        },

        randomBetween: function(min, max, round) {

            var num = Math.random() * (max - min + 1) + min;

            if (round) {

                return Math.floor(num);

            } else {

                return num;

            }

        },

        distanceBetween: function(vector1, vector2) {

            var dx = vector2.x - vector1.x,

                dy = vector2.y - vector1.y;

            return Math.sqrt(dx * dx + dy * dy);

        },

        update: function() {

            this.x += Math.cos(this.a) * this.r;

            this.a += this.aStep;

            this.y += this.speed;

        }       

    });

});

Du kannst dafür im Projekt einen Ordner „controller“ anlegen und in diesem die Datei erstellen.

Schritt 3 – Animation im Plugin nutzen

In diesem Schritt wollen wir auf die Animation zugreifen. Dazu bearbeiten wir unsere „Component.js“ im Projekt. Zuerst ermöglichen wir unserer Component.js den Zugriff auf die Animation:

sap.ui.define([

    "sap/ui/core/Component",

    "sap/ui/Device",

    "snow/controller/Flake"

], function (Component, Device, Flake) {

 

    return Component.extend("snow.Component", {

Wichtig: Im einzubindenden Code muss die PluginId stehen, welche du gewählt hast. In unserem Fall war dies „snow“. Du findest die PluginId beispielsweise in der Component.js „return Component.extend („PluginId.Component“)“.

Zusätzlich müssen wir das Objekt „Device“ einbinden. 

Im nächsten Schritt wollen wir unsere Schneeflocken erstellen. Dazu fügen wir den folgenden Code in die init-Methode unserer Component.js ein:

//var rendererPromise = this._getRenderer();

   

    // define snow variables

    this._numFlakes = 200;

    this._windowW = Device.resize.width; //window.innerWidth;

    this._windowH = Device.resize.height; //window.innerHeight;

    this._flakes = [];

   

    // get canvas to paint in: there seems to be only one in

    // in the Fiori Launchpad so this should always work

    var canvas = $("canvas").get(0);

    if(!canvas) {

        // stop processing in case we don't have a canvas!

        return;

    }

    this._ctx = canvas.getContext("2d");

   

    // first loop to create all Flake objects

    var i = this._numFlakes, flake, x, y;

    while (i--) {

        // create new flake

        flake = new Flake();

        // get random location

        x = flake.randomBetween(0, this._windowW, true);

        y = flake.randomBetween(0, this._windowH, true);

        flake.init(x, y);

        // add flake

        this._flakes.push(flake);

    }

    // start looping all flakes to move them

    this.loop();

Um unsere Schneeflocken in Bewegung zu versetzen, müssen wir noch die Methode loop, welche im vorhergegangenen Schritt aufgerufen wird, in unserer Component.js erstellen:

loop: function() {

    var i = this._flakes.length,

        flakeA;

   

    // clear canvas

    this._ctx.save();

    this._ctx.setTransform(1, 0, 0, 1, 0, 0);

    this._ctx.clearRect(0, 0, this._windowW, this._windowH);

    this._ctx.restore();

   

    // loop through the flakes and "animate" them

    while (i--) {

        flakeA = this._flakes[i];

        flakeA.update();

       

        this._ctx.beginPath();

        this._ctx.arc(flakeA.x, flakeA.y, flakeA.weight, 0, 2 * Math.PI, false);

        this._ctx.fillStyle = "rgba(255, 255, 255, " + flakeA.alpha + ")";

        this._ctx.fill();

       

        if (flakeA.y >= this._windowH) {

            flakeA.y = -flakeA.weight;

        } 

    }

    // continue animation...

    requestAnimationFrame( this.loop.bind(this) );

},

Schritt 4 – Animation testen und deployen

Im letzten Schritt wollen wir unser Plugin testen. Dazu führen wir das Plugin als SAP Fiori Launchpad Sandbox aus:

Sollte die Animation wie gewünscht funktionieren, kann diese auf ihr SAP System deployed und eingerichtet werden. Eine Anleitung zur Einrichtung des Plugins auf dem System finden Sie hier: Activating Plug-Ins on the ABAP Platform - SAP Help Portal

BTC AG

 

Die vorgestellten Informationen stammen vom Blogbeitrag Surprise your users with a true x-mas user experience: let it snow | SAP Blogs der SAP und wurden in diesem Blog neu auf Deutsch aufbereitet.
Maxim Fuchs
Software Engineer und SAP Fiori Application Developer
Maxim Fuchs - BTC AG