Tile Numeric Content
Einführung
Ein Tile ist ein interaktives Kachel-Element, das als Einstiegspunkt zu einer Anwendung, Funktion oder Auswertung dient. Es bietet eine kompakte visuelle Darstellung (z. B. Titel, Status, Kennzahlen) und ermöglicht den schnellen Zugriff per Klick oder Touch. Dieses Tile bietet die Möglichkeit, einen Text als Content anzuzeigen. Außerdem kann man einen Value hinterlegen, der groß auf dem Tile angezeigt wird. Das Tile tritt nur im Frontend auf, und ist daher für das Backend irrelevant. Er ist nicht im SAP-System zu finden.
Attribute im Designer
| Attribut | Beschreibung | Standardwert |
|---|---|---|
| controlId | Eindeutige Id der Komponente | Wird automatisch generiert |
| width | Breite des Tile | |
| header | Gibt den anzuzeigenden Text im Header an. Dieser ist links oben in der Tile platziert und fett geschrieben. | |
| subheader | Gibt den anzuzeigenden Text im Subheader an. Dieser ist unter dem Header platziert und grau. | |
| backgroundImage | Hier kann ein Bild als Hintergrund für den Tile hinterlegt werden. Das eingefügte Bild füllt den Tile vollständig aus. | |
| sizeBehavior | Steuert, ob sich das Tile responsiv an das Layout anpasst oder immer eine feste, aber kleine Größe behält. Man kann zwischen "Responsive" (passt die Größe responsiv an) und "Small" (immer feste Größe) wählen. | Responsive |
| mode | Steuert, wie der Kopfbereich (Header, Subheader) dargestellt wird. Man kann zwischen "ContentMode", "HeaderMode" und "LineMode" (blendet nur Header und Subheader ein. Das Tile wird in einer Zeile dargestellt) wählen. | ContentMode |
| frameType | Steuert die Größe des Tiles und legt fest, wie viel Platz Header und Content bekommen. Man kann zwischen den folgenden We rten wählen: "OneByOne", "TwoByOne", "TwoThirds", "Auto", "TwoByHalf", "OneByHalf", "Stretch". | OneByOne |
| visible | Steuert die Sichtbarkeit des Tiles. Bei True ist es sichtbar, bei False nicht | True |
| footer | Legt den Text im Footer fest. Dieser wird unten links angezeigt und ist standardmäßig grau. | |
| footerColor | Legt die Farbe des Textes im Footer fest. Man kann zwischen "Neutral" (Grau), "Good" (Grün), "Critical" (Gelb), "Error" (Rot), "None" (Schwarz) wählen | Neutral |
| unit | Legt einen Text als Einheit fest. Diese wird links von dem Footer angezeigt und ist grau. Unit und Footer sind mit einem Komma getrennt. | |
| class | Platz für benutzerdefinierte CSS. | sapUiTinyMarginBegin sapUiTinyMarginTop |
| spanS | Gibt die Breite des Controls im Grid-Layout an. Definiert, wie viele Spalten eingenommen werden sollen | 12 |
| spanM | Gibt die Breite des Controls im Grid-Layout an. Definiert, wie viele Spalten eingenommen werden sollen | 12 |
| spanL | Gibt die Breite des Controls im Grid-Layout an. Definiert, wie viele Spalten eingenommen werden sollen | 12 |
| spanXL | Gibt die Breite des Controls im Grid-Layout an. Definiert, wie viele Spalten eingenommen werden sollen | 12 |
| formatterValue | Wenn true, dann enthält der Value einen numerischen Wert und keinen Scale. Wenn false, wird der Scale angezeigt und der Wert darf auch nicht numerisch sein. | false |
| icon | Hier kann der Link zu einem Icon eingefügt werden. | |
| iconDescription | Beschreibung zu einem Icon, die über einen Tooltip angezeigt wird, wenn die Maus über dem Tile schwebt. | |
| indicator | Gibt die Richtung der Abweichung vom Wert ab. Bei "Up" zeigt der Pfeil nach oben, bei "Down" nach unten, bei "None" ist keiner angezeigt. | None |
| nullifyValue | Wenn true und formatterValue true, dann wird "0" angezeigt, wenn ein nicht numerischer Wert für den value gesetzt wird. Wenn false und formatterValue true, dann wird nichts angezeigt, wenn ein nicht numerischer Wert für value gewählt wird. Wenn formatterValue false, verändert diese Eigenschaft nichts. | true |
| scale | Hier kann eine Skalierung gewählt werden. | |
| truncateValueTo | Gibt an, wie viele Zeichen des Values auf dem Tile angezeigt werden. | 4 |
| value | Hier kann ein Value eingegeben werden, der mittig rechts auf dem Tile angezeigt wird. Der Text wird fett dargestellt. | |
| valueColor | Die Farbe, in der der Value auf dem Tile angezeigt wird.Man kann zwischen "Neutral" (Grau), "Good" (Grün), "Critical" (Gelb), "Error" (Rot), "None" (Schwarz) wählen | Neutral |