{"id":56930,"date":"2024-07-08T10:14:59","date_gmt":"2024-07-08T08:14:59","guid":{"rendered":"https:\/\/www.cubeserv.com\/?p=56930"},"modified":"2024-07-10T09:21:09","modified_gmt":"2024-07-10T07:21:09","slug":"sac-numeric-point-chart-mit-trendvisualisierung","status":"publish","type":"post","link":"https:\/\/www.cubeserv.com\/de\/sac-numeric-point-chart-mit-trendvisualisierung\/","title":{"rendered":"SAC Numeric Point Chart mit Trendvisualisierung"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Neue M\u00f6glichkeiten mit SAC Composites<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

In unserem letzten Blog \u201eCustom Page Navigation mit SAC Composites<\/a>\u201c haben wir einen ersten Blick auf SAC Composites geworfen und einen Corporate Header mit eigener Seitennavigation in Form von klassischen Men\u00fcs umgesetzt.<\/p>

Mit dem Release QRC2\/2024 wurde in der SAC die M\u00f6glichkeit eingef\u00fchrt, ein in einer Story verwendetes Modell durch ein anderes zu ersetzen. Dies wird als Model Repointing bezeichnet. Auch Composites wurden um dieses Feature erweitert und bieten nun die M\u00f6glichkeit, eigene Komponenten mit Datenquellen zu implementieren. In der Story, in der das Composite dann verwendet wird, kann mittels Model Repointing die Datenquelle der Story angebunden werden.<\/p>

In diesem Beitrag konzentrieren wir uns auf die neuen M\u00f6glichkeiten, die das QRC2 Release f\u00fcr die Verwendung von Composites bietet. Was Composites sind und wie sie aufgebaut sind, haben wir bereits im letzten Blog behandelt.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

Fallbeispiel: Visuelle Darstellung einer Abweichung<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Als Beispiel wollen wir das SAC Numeric Point Chart erweitern. Es wird verwendet, um eine Kennzahl und optional eine Abweichung darzustellen. Beispielsweise kann der Umsatz und dessen Abweichung zum Vorjahr darstellt werden.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t
<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Die Abweichung kann farblich als positiv (gr\u00fcn) oder negativ (rot) gekennzeichnet werden. In vielen Projekten haben wir die Anforderung, die Abweichung zus\u00e4tzlich durch ein Symbol, z.B. einen Pfeil, darzustellen. Dies ist in der SAC-Norm nicht m\u00f6glich.<\/p>


Im Folgenden wird ein SAC Composite erstellt, das diese M\u00f6glichkeit bietet. Wir werden auch zeigen, wie einfach es ist, diese neue SAC-Komponente in der Story mit der neuen Funktion Model Reporting zu verwenden.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

Implementierung des Numeric Point Charts als Composite<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Es bieten sich verschiedene M\u00f6glichkeiten an das neue Numeric Point Chart zu implementieren. In unserem Fall haben wir f\u00fcr das Chart eine SAP BW Query verwendet. Wir haben uns daf\u00fcr entschieden, die Abweichung bereits in der Query zu berechnen und verwenden daher nicht die Variance Option des Charts.<\/p>


Die Kennzahl stellen wir als Prim\u00e4rwert und die Abweichung als Sekund\u00e4rwerte im Chart dar. Das Chart ohne Trendpfleil sieht dann wie folgt aus:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t
<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Die Konfiguration im Builder Panel des Charts:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Neben dem Chart verwenden wir ein Text Widget, um den Trendpfeil umzusetzen. Der Font SAP-Icons bietet einige Trenddarstellungen in Form von Pfeilen an (siehe Icon Explorer<\/a> (ondemand.com)<\/a>). Je nach Wert der Abweichung setzen wir den entsprechenden Pfeil in das Text Widget ein.<\/p>

Der schematische Aufbau des Composites sieht dann wie folgt aus:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

In der Outline sieht das Composite dann wie folgt aus:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Funktionen der Schnittstelle des Composites<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Die Schnittstelle des Composites umfasst die Funktionen init<\/strong>, setTitle<\/strong> und setVarianceicon<\/strong>.
Konfiguriert und initialisiert wird das Composite durch die Funktion init<\/strong>. Diese setzt den Chart Title und das Symbol f\u00fcr die Variance. <\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Die Funktion setTitle<\/strong> setzt den Title f\u00fcr das Chart. Dabei schreibt die Funktion den Titeltext in eine Variable. Diese wird als dynamischer Text in die Titelzeile des Charts eingef\u00fcgt.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t
<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Die Funktion setVarianceicon<\/strong> liest das Ergebnis des Charts aus und setzt anhand der Abweichung das entsprechende Symbol in das Text Widget sowie die CSS Klasse, um eine farbliche Darstellung des Symbols zu definieren.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t
<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Die in dieser Funktion verwendeten CSS-Klassen m\u00fcssen in der Story, die das Composite verwendet, definiert werden. In der aktuellen Version der SAC k\u00f6nnen CSS-Klassen noch nicht in Composites selbst definiert werden.<\/p>


Neben den beiden CSS-Klassen f\u00fcr das Text Widget definieren wir auch noch zwei CSS-Klassen f\u00fcr die farbliche Darstellung des Abweichungswertes im Chart. <\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Ereignisse der Schnittstelle des Composites<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Die Schnittelle des Composites umfasst neben den Funktionen auch Ereignisse.<\/p>

Damit das Composite wie ein Standard Numeric point Chart verwendet werden kann, werden die Ereignisse des Diagramms als Ereignisse des Composites nach au\u00dfen geleitet.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Im Ereignis onResultChanged<\/strong> wird die Funktion setVarianceIcon<\/strong> aufgerufen, damit bei \u00c4nderungen der Werte im Chart auch die symbolische Darstellung der Abweichung aktualisiert wird.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Verwendung des Composites in der Story<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

In der Story wird das Composite zuerst importiert und dann der Story hinzugef\u00fcgt.<\/p>


Anschlie\u00dfend muss das Modell und die zu verwendenden Kennzahlen ausgew\u00e4hlt werden. Dies erfolgt \u00fcber die Manage Models Option im Quick Chart Men\u00fc (3 Punkte) des Composites. <\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Es erscheint der Manage Models Dialog<\/strong>. Dieser zeigt das im Composite verwendete Model an. Sie k\u00f6nnen \u00fcber den Button \u201eReplace Objects or Model\u201c<\/strong> entweder eine andere Kennzahl aus dem gleichen Modell oder ein anderes Modell ausw\u00e4hlen.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

In diesem Beispiel verwenden wir das gleiche Modell wie im Composite.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Im darauffolgenden Dialog Replace Objects in Use<\/strong> sehen wir welche Kennzahlen derzeit im Composite verwendet werden. \u00dcber das x rechts neben den Kennzahlen k\u00f6nnen wir diese in einem ersten Schritt entfernen.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Anschlie\u00dfend ziehen wir per Drag & Drop die Kennzahlen in den Bereich Mapped Objects<\/strong>, die wir an dieser Stelle in unserer Story verwenden wollen. In diesem Beispiel ersetzen wir die Kennzahlen Umsatz CY<\/strong> und Umsatz CY vs PY<\/strong> durch die Kennzahlen Kosten CY<\/strong> und Kosten CY vs PY<\/strong>. Danach dr\u00fccken wir den Button Review.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t
<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Im folgenden Dialog k\u00f6nnen wir sehen, ob wir alle Kennzahlen zugeordnet haben und ob es noch offene Punkte gibt. Sind alle offenen Punkte abgearbeitet, k\u00f6nnen wir mit dem Button Replace Objects<\/strong> den Austausch von Modell und\/oder Kennzahlen durchf\u00fchren.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Das Ergebnis sieht in dem Fall wie folgt aus:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Der Titel lautet aber noch Umsatz. Dazu m\u00fcssen wir noch die Funktion Init<\/strong> des Composites im Event onInitilization<\/strong> der Page aufrufen und den Titel des Charts \u00fcbergeben. Da Skripte erst zur Laufzeit aufgerufen werden, sehen Sie die \u00c4nderungen erst wenn Sie die Story im View Mode aufrufen.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Ausblick: SAC Composites<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Composites sind bereits ein leistungsf\u00e4higes Werkzeug. Wir sehen aber noch einige Punkte, die den Nutzen weiter erh\u00f6hen werden.<\/p>