Control de barra de progreso

Este control proporciona una representación visual de cuánto le falta al usuario para completar una operación en particular.

La visualización del control de barra de progreso da al usuario una comprensión inmediata de cuantas pestañas, páginas o campos de entrada se han completado. Se utiliza generalmente como cabecera en formularios web o en pestañas.

Propiedades de configuración

Puede definir o modificar las propiedades de configuración del control, como por ejemplo las propiedades de aspecto y comportamiento, en la pestaña de propiedades de Configuración. Puede definir las propiedades de configuración de la fórmula en la pestaña Sucesos.

Tamaño de pantalla: Una propiedad de configuración que tenga el icono Tamaños de pantalla además del nombre de propiedad, puede tener distintos valores para cada tamaño de pantalla. Si no define un valor, el tamaño de la pantalla hereda el valor del siguiente tamaño de pantalla más grande como su valor predeterminado. Si está utilizando el editor del escritorio de Process Designer, está estableciendo el valor para el tamaño de pantalla grande. Los otros tamaños de pantalla heredan este valor.

Definiciones de temas: Las definiciones de temas especifican los colores y estilos de un control y determinan el aspecto del control. Puede obtener una vista previa del aspecto de los controles en el editor de temas. Consulte Temas.

En la tabla siguiente se muestran las propiedades de configuración del aspecto para el control de barra de progreso:

Tabla 1. Propiedades de configuración del aspecto para el control de barra de progreso
Propiedad de configuración del aspecto	Descripción	Tipo de datos
Estilo de color	Especifica un estilo de color para el color de relleno de la barra de progreso. Los colores corresponden a variables en el tema especificado. El estilo de color predeterminado es Predeterminado (gris).	`String`
Con bandas	Cuando está seleccionado, añade bandas a la barra de progreso.	`Boolean`
Activo	Cuando está seleccionado y Con bandas también está seleccionado, hace que se muevan las bandas de la barra de progreso.	`Boolean`
Radio	Especifica la redondez de las esquinas de la barra de progreso, en píxeles o en unidades em. Por ejemplo, `15px` o `1em`. Si solo se especifica un número sin especificar unidad, se interpreta que se trata de píxeles. De forma predeterminada, no hay ningún radio de borde especificado.	`String`
Anchura	Especifica la anchura de la barra de progreso en píxeles, en porcentajes o en unidades em. Por ejemplo: `800px` o `80%` o `50em`. Si solo se especifica un número sin especificar unidad, se interpreta que se trata de píxeles.	`String`
Altura	Especifica la altura del pozo en píxeles o en unidades em. Por ejemplo, `15px` o `1em`. Si solo se especifica un número sin especificar unidad, se interpreta que se trata de píxeles. De forma predeterminada, no hay ninguna altura especificada.	`String`

En la tabla siguiente se muestran las propiedades de configuración del comportamiento para el control de barra de progreso:

Tabla 2. Propiedades de configuración del comportamiento del control de barra de progreso
Propiedad de configuración del comportamiento	Descripción	Tipo de datos
Valor máximo	Especifica el valor numérico total del progreso (no se debe confundir con Anchura). Por ejemplo, `100`.	`Integer`

Ejemplo

En este ejemplo hay las siguientes propiedades de configuración definidas para el control de barra de progreso:

Propiedades de configuración del comportamiento:
- Valor máximo está establecido en 100.
Propiedades de configuración del aspecto:
- Estilo de color está establecido en Info.
- Con bandas está seleccionado.
- Activo está seleccionado.
- Radio está establecido en 1.
- Anchura está establecido en 25%.
Propiedades de configuración de sucesos:
- Para el suceso Al cargar, se utiliza el método setProgress para establecer la barra de progreso en 50: me.setProgress(50);

Estas propiedades y sus valores dan como resultado una barra de progreso medio llena, de color azul claro, con bandas y animada con esquinas redondeadas, que ocupa el 25% del ancho de página.

Sucesos

Establezca o modifique las propiedades de configuración de la fórmula o los manejadores de sucesos del control en la pestaña Sucesos. Puede definir que los sucesos se desencadenen mediante programación o cuando el usuario interactúa con el control. Para obtener información sobre cómo definir y codificar sucesos, consulte Sucesos definidos por el usuario.

En la tabla siguiente se muestran las propiedades de configuración de la fórmula para el control de barra de progreso:

Tabla 3. Propiedades de configuración de fórmula para el control de barra de progreso
Propiedad de configuración de fórmula	Descripción	Tipo de datos
Fórmula	Expresión a utilizar para calcular el progreso.	`String`

El control de barra de progreso tiene los siguientes tipos de manejadores de sucesos:

Al cargar: Se activa cuando se carga la página.
Al pulsar: Se activa cuando se pulsa en la barra de progreso.

Métodos

Hay los métodos siguientes disponibles para este control:

setWidth(): Establece la anchura de la barra de progreso.
getWidth(): Obtiene el tamaño configurado de la anchura de la barra de progreso (incluyendo la unidad).
setHeight(): Establece la altura de la barra de progreso.
getHeight(): Obtiene el tamaño configurado de la altura de la barra de progreso (incluyendo la unidad).
setColorStyle(): Establece el color de la barra de progreso.
setRadius(): Establece el radio (redondez) de la barra de progreso.
setProgress(): Establece el estado de progreso.
getProgress(): Obtiene el estado de progreso.
setMaximum(): Establece el valor máximo de la barra de progreso.

Para obtener más información sobre cómo utilizar estos métodos, consulte la documentación de JavaScript.

Recursos adicionales

Para obtener información sobre cómo crear un coach, consulte Creación de coaches.
Para obtener información sobre las propiedades estándar (General, Configuración, Posicionamiento, Visibilidad y Atributos HTML), consulte Propiedades de vista de coach.