Mini Widgets

Progress Bar

2.0.1

Order widget

Progress Bar

The progress bar consists of an application code that you insert into a Ninox formula field on your desired interface in the database.

Complete Application Code

Below you see a sample application code for a progress bar:

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

You assign uniqueId individually, and it should be unique on your interface. The purpose behind this is: If you create multiple progress bars with different settings on your page, the styles do not overwrite each other.

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

width specifies the width of your progress bar.

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

height specifies the height of your progress bar.

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

borderRadius specifies the rounding of the progress bar corners.

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

fontSize specifies the font size of the label for valueText.

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

fontColor specifies the font color of the label for valueText.

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

backgroundColor defines the background color of your progress bar.

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

progressColor defines the color of the progress bar.

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 defines the total value of your progress bar, essentially the denominator of a fraction.

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

valueProgress defines the value achieved so far, the numerator of a fraction.

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

valueText outputs the label next to your progress bar. It makes sense to output the values as text here.

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

Standard Values as Fallback

💡 Note: If you do not enter values for the parameters, there is most often a fallback value stored in the system. In some places, such as calculation fields (actual numerical values for example), this does not make sense. However, in style parameters, like colors or sizes, it does. Here you see the code without entered values and in the comments behind it the standard values:

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  
    })