Premium Widgets

Custom Steps

Custom Steps

Visualiza avances o estados — con estilo.

Los pasos individuales se pueden construir dinámicamente a partir de tus registros y opcionalmente dotarse de acciones (p. ej. update, delete, popup). Así se crea un indicador de progreso interactivo que no solo informa, sino que también controla.

En esta documentación te mostramos:

• cómo está estructurado el widget,
• qué parámetros puedes adaptar,
• y cómo lo integras paso a paso en tu sistema.

👉 Sigue desplazándote para ver código de ejemplo, resumen de parámetros y consejos de uso.

Código de aplicación

let current := this;
let list := (select 'Auftrag Steps');
let data := {
        uniqueId: "Auftragsphase",
        settings: {
            embedded: true,
            height: "150px",
            fontSizeLabel: "10px",
            fontSizeValue: "20px",
            colorValue: "",
            colorLabel: "#ffffff",
            borderColor: "transparent",
            backgroundColor: "transparent",
            alignX: "center",
            stepWidth: "80px",
            gapY: "10px",
            stepRadius: "8px",
            connectionLine: {
                show: true,
                height: "3px"
            }
        },
        steps: list.[{
                title: title,
                value: value,
                subtitle: "Test",
                colorValue: "",
                backgroundColor: "",
                actions: [{
                        recordId: current.Nr,
                        type: "update",
                        field: "",
                        value: number(Nr)
                    }]
            }]
    };
arcCustomSteps(data)

Parámetros

El widget recibe un objeto con los siguientes componentes principales:

• uniqueId – un identificador único para el widget
• settings – ajustes generales de representación para todos los steps
• steps[] – una lista de pasos individuales con valores de detalle opcionales

Los valores de settings se aplican a todos los steps, pero se pueden sobrescribir de forma específica por step (p. ej. color o ancho).

Bloque de settings

embedded

Tipo: boolean Default: false

Determina si el widget se integra en un layout existente.

• Con true se renuncia a marcos externos, colores de fondo y espaciados estándar.
• Ideal cuando el widget está dentro de un contenedor de componente más grande que controla el layout por sí mismo.

💡 Consejo: Si estableces embedded: true, debes asegurarte de que el elemento circundante tenga una altura adecuada y, en su caso, su propio layout. El widget se adapta entonces completamente a ese marco.

height

Tipo: text Default: "100%"

Define la altura de todo el widget de Steps. Acepta valores CSS clásicos como "150px", "auto" o "100%".

height: "150px",
height: "",

💡 Consejo: Si usas el widget sin integrarlo (embedded: false), deberías establecer una altura fija — especialmente con anchos de step estrechos, para que el layout y el comportamiento de scroll se mantengan consistentes.

fontsizeLabel

Tipo: text Default: "13px"

Determina el tamaño de fuente para title y subtitle dentro de un step. Este valor afecta tanto a la etiqueta superior (title) como a la inferior (subtitle) de cada step — siempre que no se haya definido un valor propio directamente en el step.

fontSizeLabel: "10px", // Pixel-Werte

💡 Consejo: Para layouts compactos se recomienda un tamaño de fuente menor como "10px" o "11px" — especialmente con muchos steps de ancho reducido.

fontsizeValue

Tipo: text Default: "35px"

Indica el tamaño de fuente para el valor central (value) de un step — es decir, el número o identificador dentro del círculo. Este valor influye en la legibilidad y el peso visual del contenido central. Se usa a menudo para números de estado, contadores o fases.

fontSizeValue: "20px", // Pixel-Werte

💡 Consejo: Valores más pequeños como "20px" son adecuados para steps muy compactos, tamaños mayores funcionan bien con pocos pasos de ancho amplio.

colorValue

Tipo: text Default: "#3E6FFF"

Fija el color del texto del elemento value central en el círculo del step. El color se refiere exclusivamente al texto (p. ej. número, estado o identificador) — no al fondo del círculo.

colorValue: "#ddd", // HEX-Werte

💡 Consejo: La legibilidad depende en gran medida del fondo. Asegura un contraste suficiente con backgroundColor.

colorLabel

Tipo: text Default: "#566eb1"

Define el color del texto para title y subtitle dentro de un step. Este valor de color se usa para la etiqueta superior e inferior — mientras el step no indique un color distinto.

 colorLabel: "#ffffff", // HEX-Werte

💡 Consejo: Usa colores de texto claros como #ffffff solo con fondo oscuro — de lo contrario la legibilidad se ve afectada.

borderColor

Tipo: text Default: "#e5e5e5"

Define el color de las líneas de separación entre los steps. Este color se aplica como línea de borde derecha de cada step (excepto en el último). Ayuda a delimitar visualmente los pasos entre sí.

💡 Consejo: Si quieres una representación especialmente reducida o fluida, establece borderColor: "transparent" — así las líneas de separación desaparecen por completo.

backgroundColor

Tipo: text Default: "#f7f8fc"

Determina el color de fondo de los círculos de los steps y de las líneas de conexión. Este color se aplica a los círculos centrales (value) así como a las líneas entre steps — pero no al fondo exterior de todo el widget (este suele ser transparente o lo gestiona el contenedor).

backgroundColor: "transparent", // Transparenter Hintergrund
backgroundColor: "#ededed", // HEX-Werte

💡 Consejo: Un fondo claro proporciona un aspecto limpio y moderno. Para efectos especiales también puedes usar "transparent" o colores ligeramente teñidos.

alignX

Tipo: text Valores: "left", "center" (default), "right"

Controla la alineación horizontal de los steps dentro del widget.

alignX: "center", // left, center, right
algnX: "", // default: center

Este ajuste influye en dónde se alinean los steps dentro de la barra, especialmente cuando hay menos steps que espacio disponible.

• "left" → Los steps empiezan totalmente a la izquierda
• "center" → Steps centrados
• "right" → Steps alineados a la derecha

💡 Nota: Esta alineación se aplica tanto a todo el widget como a los contenidos de cada step (p. ej. título, subtítulo, valor).

stepWidth

Tipo: text Ejemplo: "80px" Default: *(vacío)*

Fija el ancho mínimo de cada step. Si no se indica ningún valor, los steps se adaptan automáticamente al ancho de su contenido o contenedor. El ancho afecta tanto al área visible del step como a su área clicable.

stepWidth: "80px", // Pixel-Werte

💡 Consejo: Usa anchos fijos con muchos steps de texto corto para lograr un layout uniforme. Con contenidos variables, es mejor dejarlo vacío y confiar en el escalado automático.

gapY

Tipo: text Ejemplo: "10px" Default: *(vacío)*

Define el espacio vertical (gap) entre los elementos dentro de un step — es decir, entre title, value y subtitle. Este valor actúa dentro de cada step individual, no entre steps.

gapY: "10px", // Pixel-Werte

💡 Consejo: Con un valor menor logras una representación más compacta; espacios mayores resultan más aireados y legibles — especialmente con tamaños de fuente mayores.

stepRadius

Tipo: text Ejemplo: "8px" Default: *(vacío)*

Determina el redondeo del círculo del step (value) mediante el valor CSS border-radius. Un valor alto como "50px" genera un círculo perfectamente redondo — valores más bajos generan rectángulos más suaves o formas de píldora.

stepRadius: "8px", // Pixel-Werte

💡 Consejo: Para diseños de contador clásicos y redondos, usa "50%" o "999px" — para variantes más angulares puedes experimentar con valores como "4px" u "8px".

Bloque connectionLine

En el grupo de settings connectionLine determinas los parámetros de la línea entre tus steps. Con el parámetro show determinas si la línea debe ser visible en absoluto (valores posibles: true / false; default: true). Con el parámetro height defines la altura en píxeles de la línea (default: 3px).

connectionLine: {
                show: true, // true, false
                height: "3px" // Pixel-Werte
            }

steps[]: configurar pasos individuales

Cada entrada en steps es un objeto que describe un step individual. Además de título, valor y acciones, también puedes establecer muchos parámetros de diseño directamente por step — estos sobrescriben entonces los ajustes generales de settings.

{
  title: "In Bearbeitung",
  value: "2",
  subtitle: "laufend",
  width: "90px",
  colorLabel: "#ffffff",
  fontSizeLabel: "11px",
  colorValue: "#00cc99",
  fontSizeValue: "28px",
  backgroundColor: "#222",
  borderColor: "transparent",
  actions: [...]
}

<figure><table><tbody><tr><th>Feld

</th><th>Typ

</th><th>Beschreibung

</th></tr><tr><td>title

</td><td>text

</td><td>Título encima del círculo

</td></tr><tr><td>value

</td><td>text/number

</td><td>Indicador central en el círculo

</td></tr><tr><td>subtitle

</td><td>text

</td><td>Texto debajo del círculo

</td></tr><tr><td>width

</td><td>text

</td><td>Ancho individual del step

</td></tr><tr><td>colorLabel

</td><td>text

</td><td>Color del texto para title y subtitle

</td></tr><tr><td>fontSizeLabel

</td><td>text

</td><td>Tamaño de fuente para title y subtitle

</td></tr><tr><td>colorValue

</td><td>text

</td><td>Color del texto del valor central

</td></tr><tr><td>fontSizeValue

</td><td>text

</td><td>Tamaño de fuente del valor

</td></tr><tr><td>backgroundColor

</td><td>text

</td><td>Color de fondo del círculo y de las líneas de conexión

</td></tr><tr><td>borderColor

</td><td>text

</td><td>Color de la línea de separación del step

</td></tr><tr><td>actions[]

</td><td>array

</td><td>Acciones que se pueden disparar al hacer clic (ver abajo)

</td></tr></tbody></table></figure>💡 Consejo: No tienes que indicar todos los campos. Cada step adopta automáticamente los valores de settings si no se hacen indicaciones propias.