Badge
Mit dem Badge-Modul verleihst du deinen Datenbank-Einträgen eine schnelle und prägnante visuelle Aussagekraft. Ob Statusanzeigen, Kategorisierungen oder Kennzeichnungen – Badges machen Informationen auf einen Blick erfassbar. Es ist Teil unseres Essential UI Bundles, das vier Module für eine optimale Darstellung deiner Inhalte bietet: Layout, Interaction, Badge und Card. Während sich die Module unseres Bundles den gleichen optimierten JS-Code teilen und dadurch eine hohe Performance und Flexibilität bieten, ermöglichen sie dir durch ihr unterschiedliches Grunddesign eine schnellere Umsetzung passender Darstellungen.
Funktion und Aussehen
Das Badge-Modul ist darauf ausgelegt, kleine, aber aussagekräftige Informationen visuell hervorzuheben. Du kannst Badges in verschiedenen Formen, Größen und Farben gestalten, um sie perfekt in dein bestehendes Design zu integrieren. Sie eignen sich ideal, um beispielsweise den Status eines Auftrags, die Priorität einer Aufgabe oder die Anzahl ungelesener Nachrichten anzuzeigen. Die individuelle Gestaltung erfolgt wie gewohnt über den Style-Key oder den Class-Key. Nutze den Class-Key, um deine eigenen globalen Classes zu referenzieren.
Nutzer-Interaktion
Obwohl Badges primär zur Anzeige dienen, können auch sie mit Interaktionen versehen werden. Du kannst jedem Badge eine beliebige Anzahl an Actions zuweisen. Jede Action besteht aus einem auslösenden Trigger und einem Array von Scripts, die bei Auslösen des Triggers ausgeführt werden. Als Trigger können Klick, Mausbewegung und alle weiteren HTML Mouse Events eingesetzt werden. Je nach Anwendung können auch andere HTML Events funktionieren. Eine Liste solcher Events findest du beispielsweise hier. Weitere Infos zu Actions findest du in diesem Teil unserer Doku.
Modulcode
GIP_badge({
uniqueId: "myUniqueName" + Nr
embedded: true
direction: "horizontal"
blocks: [{
value: *any*
}],
})GIP_badge({
uniqueId: "myUniqueName" + Nr
embedded: true
direction: "horizontal"
style: ""
blocks: [{
style: ""
value: *any*
}],
})GIP_badge({
uniqueId: "myUniqueName" + Nr
embedded: true
direction: "horizontal"
class: ""
style: ""
blocks: [{
class: ""
style: ""
value: *any*
actions: [{
trigger: "click"
scripts: [{
type: ""
}],
}],
}],
actions: [{
trigger: "click"
scripts: [{
type: ""
}],
}],
})GIP_badge({
uniqueId: "",
embedded: {
height: "",
styleHtml: "",
styleStri: "",
presets: "",
},
direction: "",
class: "",
style: "",
blocks: [{
class: "",
style: "",
value: *any*,
actions: [{
trigger: "",
scripts: [{
type: "",
}],
}],
}],
actions: [{
trigger: "",
scripts: [{
type: "",
}],
}],
})html( raw(GIP_master({})) +
raw(GIP_badge({
uniqueId: "",
embedded: {
height: "",
styleHtml: "",
styleStri: "",
presets: "",
},
direction: "",
class: "",
style: "",
blocks: [{
class: "",
style: "",
value: *any*,
actions: [{
trigger: "",
scripts: [{
type: "",
}],
}],
}],
actions: [{
trigger: "",
scripts: [{
type: "",
}],
}],
})
))Key-Table
Beispiele
Badge: Basis
Beschreibung
Wir möchten mithilfe von einem Badge den aktuell gewählten Status in einem dynamischen Ninox-Auswahlfeld anzeigen. Dabei sollen auch die Hintergrundfarbe und das Symbol des gesetzten Status korrekt dargestellt werden.
Die Status-Optionen als Grundlage für die dynamische Auswahl befinden sich in einer Ninox-Tabelle namens "Status". Hierin werden die Bezeichnung, Farbe und das Symbol der Option gesetzt.
Code des Beispiels
let statusRecord := record(Status,number('Status-Auswahl'));
html(raw(GIP_master({})) +
raw(GIP_badge({
uniqueId: "StatusAnzeige" + Nr,
embedded: false,
style: "color: black; border: none; background-color: " + statusRecord.Farbe + ";",
blocks: [{
value: GIP_materialSymbols(parseJSON(statusRecord.Symbol))
}, {
value: statusRecord.Bezeichnung
}]
})))let statusRecord := record(Status,number('Status-Auswahl'));
GIP_badge({
uniqueId: "StatusAnzeige" + Nr,
embedded: true,
style: "color: black; border: none; background-color: " + statusRecord.Farbe + ";",
blocks: [{
value: GIP_materialSymbols(parseJSON(statusRecord.Symbol))
}, {
value: statusRecord.Bezeichnung
}]
})Badge: Checkbox mit Material Symbol
Beschreibung
Wir möchten eine einfache Checkbox erstellen. Dafür nutzen wir die Material-Symbols "check_box" (angehakte Checkbox) und "check_box_outline_blank" (leere Checkbox). Um die Checkbox und den Text "Aufgabe erledigt?" zu gruppieren, nutzen wir in diesem Fall ein GIP-Badge. Zusätzlich dient das Badge auch dazu, die Update-Action für das Ninox-'Ja / Nein'-Feld zu bauen. Mit entsprechendem Styling, kann dasselbe Ergebnis aber auch mit Layout, Interaction und Card erzielt werden.
Code des Beispiels
html(raw(GIP_master({})) +
raw(GIP_badge({
uniqueId: "Checkbox" + Nr,
embedded: false,
direction: "horizontal",
class: "",
style: "background-color: inherit; color: inherit; border: none;",
blocks: [{
class: "",
style: "",
value: if 'Ja / Nein' = true then
GIP_materialSymbols({
embedded: true,
style: "",
scalingFactor: 0,
weight: 0,
filling: 1,
color: "",
secondColor: "#bcf0ad",
icon: "check_box"
})
else
GIP_materialSymbols({
embedded: true,
style: "",
scalingFactor: 0,
weight: 0,
filling: 0,
color: "",
secondColor: "",
icon: "check_box_outline_blank"
})
end
}, {
class: "",
style: "",
value: "Aufgabe erledigt?"
}],
actions: [{
trigger: "click",
scripts: [{
type: "update",
recordId: raw(Nr),
fieldId: fieldId(this, "Ja / Nein"),
value: not 'Ja / Nein'
}]
}]
})))GIP_badge({
uniqueId: "Checkbox" + Nr,
embedded: true,
direction: "horizontal",
class: "",
style: "background-color: inherit; color: inherit; border: none;",
blocks: [{
class: "",
style: "",
value: if 'Ja / Nein' = true then
GIP_materialSymbols({
embedded: true,
style: "",
scalingFactor: 0,
weight: 0,
filling: 1,
color: "",
secondColor: "#bcf0ad",
icon: "check_box"
})
else
GIP_materialSymbols({
embedded: true,
style: "",
scalingFactor: 0,
weight: 0,
filling: 0,
color: "",
secondColor: "",
icon: "check_box_outline_blank"
})
end
}, {
class: "",
style: "",
value: "Aufgabe erledigt?"
}],
actions: [{
trigger: "click",
scripts: [{
type: "update",
recordId: raw(Nr),
fieldId: fieldId(this, "Ja / Nein"),
value: not 'Ja / Nein'
}]
}]
})Badge: Globale CSS-Classes
Beschreibung
Wir möchten ein GIP-Badge stylen und dafür eine globale CSS-Class nutzen. Dafür können wir entweder eine Auswahl an GIP-Color-Classes nutzen (teilweise basierend auf Ninox-eigenen Button-Stylings) oder wir legen eine eigene CSS-Class an. Wie im Bild zu sehen, wird durch die Class auch das Material-Symbol im Text beeinflusst. Das liegt daran, dass Material-Symbols im Hintergrund eine spezielle Schriftart sind, die mit den herkömmlichen CSS-Stylings für Schriften gestyled werden kann.
Infos zu den existierenden GIP-Color-Classes und dazu, wie du eigene CSS-Classes anlegst, findest du im Kapitel "Globaler CSS-Code".
Code des Beispiels
---
############### Füge den folgenden CSS-Code in die globale Funktion "GIP_customCSS()" ein und lade Ninox neu: ###############
---;
"
.MyCustomClass {
color: #FFAA3A;
border-width: 2px;
border-color: #7F0000;
border-style: dotted dashed solid double;
}
";
---
############### Füge den folgenden Code in dein Ninox-Formelfeld ein: ###############
---;
html(raw(GIP_master({})) +
raw(GIP_layout({
uniqueId: "HorizontalBadge" + Nr,
embedded: false,
direction: "horizontal",
style: "gap: 8px;",
blocks: [{
value: GIP_layout({
uniqueId: "VerticalBadge1" + Nr,
embedded: true,
direction: "vertical",
style: "gap: 8px;",
blocks: [{
value: GIP_badge({
uniqueId: "GIPColorPlain" + Nr,
embedded: true,
class: "GIPColorPlain",
blocks: [{
value: GIP_materialSymbols({
icon: "spa"
})
}, {
value: "GIPColorPlain"
}]
})
}, {
value: GIP_badge({
uniqueId: "GIPColorPurple" + Nr,
embedded: true,
class: "GIPColorPurple",
blocks: [{
value: GIP_materialSymbols({
icon: "spa"
})
}, {
value: "GIPColorPurple"
}]
})
}, {
value: GIP_badge({
uniqueId: "GIPColorBlue" + Nr,
embedded: true,
class: "GIPColorBlue",
blocks: [{
value: GIP_materialSymbols({
icon: "spa"
})
}, {
value: "GIPColorBlue"
}]
})
}, {
value: GIP_badge({
uniqueId: "GIPColorRed" + Nr,
embedded: true,
class: "GIPColorRed",
blocks: [{
value: GIP_materialSymbols({
icon: "spa"
})
}, {
value: "GIPColorRed"
}]
})
}]
})
}, {
value: GIP_layout({
uniqueId: "VerticalBadge2" + Nr,
embedded: true,
direction: "vertical",
style: "gap: 8px;",
blocks: [{
value: GIP_badge({
uniqueId: "GIPColorGreen" + Nr,
embedded: true,
class: "GIPColorGreen",
blocks: [{
value: GIP_materialSymbols({
icon: "spa"
})
}, {
value: "GIPColorGreen"
}]
})
}, {
value: GIP_badge({
uniqueId: "GIPColorWhite" + Nr,
embedded: true,
class: "GIPColorWhite",
blocks: [{
value: GIP_materialSymbols({
icon: "spa"
})
}, {
value: "GIPColorWhite"
}]
})
}, {
value: GIP_badge({
uniqueId: "GIPColorNyan" + Nr,
embedded: true,
class: "GIPColorNyan",
blocks: [{
value: GIP_materialSymbols({
icon: "spa"
})
}, {
value: "GIPColorNyan"
}]
})
}, {
value: GIP_badge({
uniqueId: "MyCustomClass" + Nr,
embedded: true,
class: "MyCustomClass",
blocks: [{
value: GIP_materialSymbols({
icon: "spa"
})
}, {
value: "MyCustomClass"
}]
})
}]
})
}]
})))---
############### Füge den folgenden CSS-Code in die globale Funktion "GIP_customCSS()" ein und lade Ninox neu: ###############
---;
"
.MyCustomClass {
color: #FFAA3A;
border-width: 2px;
border-color: #7F0000;
border-style: dotted dashed solid double;
}
";
---
############### Füge den folgenden Code in dein Ninox-Formelfeld ein: ###############
---;
GIP_layout({
uniqueId: "HorizontalBadge" + Nr,
embedded: true,
direction: "horizontal",
style: "gap: 8px;",
blocks: [{
value: GIP_layout({
uniqueId: "VerticalBadge1" + Nr,
embedded: true,
direction: "vertical",
style: "gap: 8px;",
blocks: [{
value: GIP_badge({
uniqueId: "GIPColorPlain" + Nr,
embedded: true,
class: "GIPColorPlain",
blocks: [{
value: GIP_materialSymbols({
icon: "spa"
})
}, {
value: "GIPColorPlain"
}]
})
}, {
value: GIP_badge({
uniqueId: "GIPColorPurple" + Nr,
embedded: true,
class: "GIPColorPurple",
blocks: [{
value: GIP_materialSymbols({
icon: "spa"
})
}, {
value: "GIPColorPurple"
}]
})
}, {
value: GIP_badge({
uniqueId: "GIPColorBlue" + Nr,
embedded: true,
class: "GIPColorBlue",
blocks: [{
value: GIP_materialSymbols({
icon: "spa"
})
}, {
value: "GIPColorBlue"
}]
})
}, {
value: GIP_badge({
uniqueId: "GIPColorRed" + Nr,
embedded: true,
class: "GIPColorRed",
blocks: [{
value: GIP_materialSymbols({
icon: "spa"
})
}, {
value: "GIPColorRed"
}]
})
}]
})
}, {
value: GIP_layout({
uniqueId: "VerticalBadge2" + Nr,
embedded: true,
direction: "vertical",
style: "gap: 8px;",
blocks: [{
value: GIP_badge({
uniqueId: "GIPColorGreen" + Nr,
embedded: true,
class: "GIPColorGreen",
blocks: [{
value: GIP_materialSymbols({
icon: "spa"
})
}, {
value: "GIPColorGreen"
}]
})
}, {
value: GIP_badge({
uniqueId: "GIPColorWhite" + Nr,
embedded: true,
class: "GIPColorWhite",
blocks: [{
value: GIP_materialSymbols({
icon: "spa"
})
}, {
value: "GIPColorWhite"
}]
})
}, {
value: GIP_badge({
uniqueId: "GIPColorNyan" + Nr,
embedded: true,
class: "GIPColorNyan",
blocks: [{
value: GIP_materialSymbols({
icon: "spa"
})
}, {
value: "GIPColorNyan"
}]
})
}, {
value: GIP_badge({
uniqueId: "MyCustomClass" + Nr,
embedded: true,
class: "MyCustomClass",
blocks: [{
value: GIP_materialSymbols({
icon: "spa"
})
}, {
value: "MyCustomClass"
}]
})
}]
})
}]
})