Plantilla HTML de Barra de Progreso¶

Las plantillas HTML se pueden utilizar para lograr muchos tipos diferentes de elementos UI/UX en una aplicación. Este artículo presenta una descripción general del uso de una Plantilla HTML para presentar una Barra de progreso en la capa de interfaz de usuario de una aplicación.

Para Crear la Plantilla HTML¶

1. Navegue hasta App Workbench
2. Haga clic en la pestaña Apariencia
3. Haga clic en la pestaña Plantillas
4. Confirme que la Colección seleccionada es donde desea agregar la plantilla HTML.
5. Haga clic en el botón +Plantilla
6. Asigne un Nombre. Por ejemplo: barra de progreso
7. Marque para habilitar Traducciones si corresponde
8. Haga clic en el icono de marca de verificación para guardar.
9. Ingrese la sintaxis HTML en la región de la pestaña Fuente. Vea el ejemplo de sintaxis HTML.
10. Haga clic en Guardar
11. Haga clic en +Parámetro y defina los parámetros requeridos. Consulte Parámetros de plantilla.

Ejemplo de Sintaxis HTML¶

<style>
.progress-ecd {
    width: 100%;
    height: 80px;
}
.progress-ecd .hdr span {
    float: right;
}
.progress-ecd .bar {
    position: relative;
    height: 20px;
    background-color: #ccc;
    border-radius: 3px;
}
.progress-ecd .bar .percent {
    color: {{TextColor}};
    background-color: {{BgColor}};
    width: calc({{Porcentaje}} - 25%);
    height: 20px;
    border-radius: 3px;
    padding-left: 3px;
    max-width: 100%;
}
.progress-ecd .bar .ref {
    position: absolute;
    left: 75%;
    top: 0;
    width: 2px;
    height: 20px;
    background-color: #737373;
}
.progress-ecd .bar .ref:before {
    content: attr(data-ref);
    font-weight: 300;
    position: absolute;
    width: 100px;
    left: -50px;
    top: 100%;
    color: #888;
    text-align: center;
}
</style>
<div>
<div class="progress-ecd" style="margin-bottom:20px;">
    <div style="font-size: 16px; font-weight:500; height: 20px; margin-bottom: 4px;">{{Título}}`</div>
    <div class="hdr" style="font-weight: 200; margin-bottom: 8px;">{{Subtítulo}}<span style="font-weight: 500; ">{{Porcentaje}}</span></div>
    <div class="bar">
        <div class="percent">{{Valor}}`</div>
        <div class="ref" data-ref="{{Limitación}}`"></div>
    </div>
</div>
</div>

Parámetros de Plantilla¶

La siguiente lista de Parámetros debe configurarse si está utilizando una barra de progreso como plantilla HTML:

• Color de texto
• ColorBg
• Título
• Subtítulo
• Porcentaje
• Valor
• Límite

Personalización del Color para el Parámetro "límite"¶

Opcionalmente, puede optar por personalizar los colores utilizados por la barra de progreso, para ayudar a indicar visualmente si un valor está por debajo o por encima del parámetro "Límite" definido. Cambiar el color si pasa el límite ayuda a visualizar que se ha cruzado un umbral importante. Por ejemplo, cambiar el color a rojo si se excede un presupuesto y, en caso contrario, mostrarlo en verde. Para lograr esto, puede definir la lógica de la declaración IIF (ver ejemplo) en el objeto de negocio subyacente del panel, convertirla como una cadena para el tipo de datos lógico y luego pasarla como BgColor en la modelo. Esta sintaxis de ejemplo ilustra la declaración IIF utilizada en el objeto de negocio:

IIF(Value >= Limit, '#Color1', '#Color2')

Limitaciones y Avisos¶

Si está utilizando más de una barra de progreso en una sola página o panel con varias filas como un mosaico, todas las barras de progreso heredarán los estilos de la última instancia de forma predeterminada. Esto se debe a que el TextColor, BgColor, y Percent los valores se sustituyen en la definición de estilo de la clase. Para superar esta limitación, puede colocar estos estilos en línea y las barras de progreso se comportarán como se espera cuando tengan valores diferentes.

Ejemplo de estilo en línea:

<div class="percent" style="font-size: 16px; width: calc({{Porcentaje}} - 25%); color: {{TextColor}}; background-color: {{BgColor}};">{{Valor}}