Mini Widgets

Progress Bar

2.0.1

Progress Bar

Die Progress Bar besteht aus einem Anwendungscode, den du in einem Ninox Formel-Feld auf deiner Wunschoberfläche in der Datenbank einfügst.

Gesamter Anwendungscode

Folgend siehst du einen beispielhaften Anwendungscode für eine Progress Bar:

arcCustomProgressBar({
		uniqueId: "",
		width: "",
		height: "",
		borderRadius: "",
		fontSize: "",
		fontColor: "",
		backgroundColor: "",
		progressColor: "",
		valueTotal: "",
		valueProgress: "",
		valueText: ""
	})

uniqueId vergibst du individuell und sollte einzigartig auf deiner Oberfläche sein. Sinn dahinter ist: Wenn du mehrere Progress Bars mit unterschiedlichen Settings auf deiner Seite erstellst, überschrieben sich die Styles nicht.

 uniqueId: "Progress 1", // Text in ""

width gibt die Weite deiner Progress Bar an.

width: "300px", // Pixel-Werte in ""
width: "100%", // Prozent-Werte in "" / Orientiert sich prozentual an der Breite des Formelfeldes.

height gibt die Höhe deiner Progress Bar an.

height: "300px", // Pixel-Werte in ""
height: "100%", // Prozent-Werte in "" / Orientiert sich prozentual an der Breite des Formelfeldes.

borderRadius gibt die Abrundung der Progressbar-Ecken an.

borderRadius: "4px", // Pixel-Werte in ""
borderradius: "", // default: 50%

fontSize gibt die Schriftgröße der Beschriftung von valueText wieder.

fontSize: "14px", // Pixel-Werte in ""

fontColor gibt die Schriftfarbe der Beschriftung von valueText wieder.

fontColor: "#FFFFFF", // HEX Code in ""

backgroundColor definiert die Hintergrundfarbe deiner Progress Bar

backgroundColor: "#EEEEEE", // HEX Code in ""

progressColor definiert die Farbe des Fortschrittbalkens.

progressColor: "#FFBF00", // HEX Coe in ""
progressColor: if Status= 2 then "#FFBF00" else "#e9ecf4", // Ninox-Formeln, -Schreibweisen & -Konfditionen möglich. Wichtig ist, dass text() bei ausgegeben wird.

valueTotal definiert den Gesamtwert deiner Progress Bar. Sozusagen den Nenner einer Bruchzahl.

valueTotal: 20, // Zahlenwert 
valueTotal: Projekt.umsatzZiel, // Referenzierte Ninox-Felder. Auch gehen Ninox-Funktionen & -Schreibweisen.

valueProgress definiert den bislang erreichten Wert. Den Zähler einer Bruchzahl.

valueProgress: 10, // Zahlenwert 
valueProgress: Projekt.umsatzAktuell// Referenzierte Ninox-Felder. Auch gehen Ninox-Funktionen & -Schreibweisen.

valueText gibt die Bezeichnung neben deiner Progress Bar aus. Sinnvoll ist es, hier die Werte als Text auszugeben,

 valueText: Projekt.umsatzAktuell + " / " + Projekt.umsatzZiel

Standard-Werte als Fallback

💡 Hinweis: Trägst du keine Werte hinter die Parameter ein, so ist in den meisten Fällen ein Fallback-Wert im System hinterlegt. An manchen Stellen, wie Berechnungsfelder (Tatsächliche Zahlenwerte zum Beispiel) macht das keinen Sinn. In Style-Parametern, wie Farben oder Größen hingegen schon. Hier siehst du den Code ohne eingetragene Werte und in den Kommentaren dahinter die Standard-Werte:

arcCustomProgressBar({
        uniqueId: "", // Kein Fallback 
        width: "", // Fallback: 100%
        fontSize: "", // Fallback: 12px  
        fontColor: "", // Fallbacke: #000000 (schwarz) 
        backgroundColor: "", // Fallback: #EEEEEE
        progressColor: "", // Fallback: 
            if data.progressColor = "" then
            switch complete do
            case true:
                "#76CD3C" // gelb
            case false:
                if number(data.valueTotal) < number(data.valueProgress) then
                    "#000"
                else
                    "#FFBF00" // grün
                end
            default:
                "#e9ecf4"
            end
        else
            text(data.progressColor)
        end;

        valueTotal: "", // Kein Fallback 
        valueProgress: "", // Kein Fallback 
        valueText: "" // Kein Fallback  
    })

Zurück

Badges

Zurück

Badges

Weiter

Short Numbers

Weiter

Short Numbers