Tile Feed 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 |
| contentText | Anzuzeigender Text in der Mitte des Tile. | |
| subContentText | Anzuzeigender Text unter dem contentText. Dieser ist grau und wird etwas kleiner angezeigt als der contentText | |
| 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 |