Mini Widgets

Progress Bar

Progress Bar

Progress Bar

La Progress Bar consiste en un código de aplicación que insertas en un campo de fórmula de Ninox en la superficie que desees dentro de la base de datos.

Código de aplicación completo

A continuación ves un código de aplicación de ejemplo para una Progress Bar:

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

uniqueId lo asignas de forma individual y debería ser único en tu superficie. La idea detrás de esto: si creas varias Progress Bars con distintos ajustes en tu página, los estilos no se sobrescriben entre sí.

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

width indica el ancho de tu Progress Bar.

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

height indica el alto de tu Progress Bar.

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

borderRadius indica el redondeo de las esquinas de la Progress Bar.

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

fontSize indica el tamaño de fuente de la etiqueta de valueText.

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

fontColor indica el color de fuente de la etiqueta de valueText.

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

backgroundColor define el color de fondo de tu Progress Bar.

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

progressColor define el color de la barra de progreso.

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 define el valor total de tu Progress Bar. Es decir, el denominador de una fracción.

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

valueProgress define el valor alcanzado hasta ahora. El numerador de una fracción.

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

valueText muestra la denominación junto a tu Progress Bar. Es recomendable mostrar aquí los valores como texto,

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

Valores estándar como fallback

💡 Nota: Si no rellenas valores en los parámetros, en la mayoría de los casos hay un valor de fallback definido en el sistema. En algunos sitios, como campos de cálculo (valores numéricos reales, por ejemplo), esto no tiene sentido. En parámetros de estilo, como colores o tamaños, en cambio sí. Aquí ves el código sin valores rellenados y en los comentarios a continuación los valores estándar:

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: &quot;&quot;, // Kein Fallback         valueProgress: &quot;&quot;, // Kein Fallback         valueText: &quot;&quot; // Kein Fallback     })</code></pre>