Datos tipados (Spans)

Lees una fila de un informe y pintas cada celda con el formato correcto: el dinero con su simbolo, la fecha en local, los minutos como duracion, los bytes como MB. Todo sin formatear a mano ni acordarte de la cultura del cliente.

Comparten patron: les pasas el valor crudo y ellos deciden como mostrarlo. Casi todos aceptan un Label/Key, un Icon opcional y un FontSize. El formato y la region salen del RegionService interno, asi que el mismo componente se ve bien en cualquier pais. Mapean 1:1 con las columnas que devuelve un informe del SDK: la columna trae el dato, el span lo pinta.

El tipo del dato manda: si tienes un decimal de euros usa DnzSpanMoney, si es un porcentaje DnzSpanPercent, si son minutos DnzSpanMinutes. No hay un span generico que valga para todo.

Que formatea cada uno

AutoColor: verde positivo, rojo negativo

DnzSpanMoney, DnzSpanDecimal y DnzSpanPercent traen AutoColor. Con el activado, el valor se pinta verde si es positivo y rojo si es negativo. Ideal para saldos, margenes o variaciones, donde el signo distingue lo que suma de lo que resta sin escribir una sola condicion.

<DnzSpanMoney Amount=@cliente.Saldo AutoColor=true />

<DnzSpanMoney Amount=@factura.Total />

DnzSpanMoney

Importes de dinero con el simbolo de moneda y el formato de la region del cliente. Para listados de facturas, totales y resumenes.

<DnzSpanMoney Amount=@factura.Total AutoColor=true />

Con etiqueta e icono para un KPI en una tarjeta:

<DnzSpanMoney Amount=@resumen.PendienteCobro Label="Pendiente de cobro" Icon="payments" AutoColorRed=true FontSize="20px" />

Parametros

DnzSpanDecimal

Cualquier decimal con un sufijo libre detras: unidades de stock, kilos, lo que sea. Lo que DnzSpanMoney hace con la moneda, este lo deja a tu eleccion via Symbol.

<DnzSpanDecimal Value=@articulo.Stock Symbol=" uds" />

Una diferencia con color segun el signo:

<DnzSpanDecimal Value=@diferencia Symbol=" kg" AutoColor=true />

Parametros

DnzSpanPercent

Porcentaje listo: tu das el numero en escala humana (12.5), el le pone el % y recorta los decimales sobrantes.

<DnzSpanPercent Value=@informe.Margen Decimals="2" AutoColor=true />

Parametros

DnzSpanInteger

Entero limpio: trunca la parte decimal del valor y lo pinta sin separadores ni simbolos. Para contadores y cantidades enteras donde los decimales sobran.

<DnzSpanInteger Value=@(item.Quantity) />

Parametros

DnzSpanDate

Fecha (sin hora) en formato amigable y localizado, con un badge opcional que dice si es Hoy, Ayer, Manana, Pasado o Futuro. Trabaja con DateOnly.

<DnzSpanDate Value=@DateOnly.FromDateTime(item.FechaCreacion) />

Con el badge de estado para una agenda de vencimientos:

<DnzSpanDate Value=@vencimiento.Fecha ShowStatus=true />

Parametros

DnzSpanDateTime

Fecha y hora completas. Puede pintarse en modo relativo (hace 5 min), como caption discreto, o con el badge de estado. Trabaja con DateTime (en UTC, como todo en Dinaup).

<DnzSpanDateTime Value=@item.FechaModificacion />

Modo relativo para un feed de actividad reciente:

<DnzSpanDateTime Value=@evento.Cuando Relative=true ShowStatus=true />

Parametros

DnzSpanMinutes

Convierte un numero de minutos en una duracion corta y legible: 45 -> 45m, 90 -> 1h 30m, 180 -> 3h. Aguanta negativos (les antepone el signo). Para tiempos de servicio, citas o tareas medidas en minutos.

<DnzSpanMinutes Value=@cita.DuracionMinutos />

Parametros

DnzSpanKV

Par clave-valor: la etiqueta arriba o a la izquierda y el valor debajo o al lado. Es el bloque de detalle tipico de un dialogo o una ficha. A diferencia del resto, este recibe el valor ya formateado como string (o un ChildContent con markup libre).

<DnzSpanKV Key="Estado" Value=@item.Estado Icon="check_circle" />

<DnzSpanKV Key="Total" Horizontal=true Icon="euro" TextRight=true>
    <DnzSpanMoney Amount=@factura.Total />
</DnzSpanKV>

Parametros

DnzSpanBytes

Tamano de fichero a partir de un long de bytes, con conversion automatica de unidad: elige entre B, KB, MB, GB o TB segun la magnitud. Para adjuntos, backups y almacenamiento.

<DnzSpanBytes Value=@adjunto.TamanoBytes />

Parametros

DnzSpanGigaBytes

Igual que DnzSpanBytes pero partiendo de GB (decimal). Sube a TB o baja a MB/KB segun el valor, y puede pintar en color cuando se acerca a la cuota.

<DnzSpanGigaBytes Value=@tenant.AlmacenamientoGb AutoColor=true />

Parametros

DnzSpanGrams

Peso a partir de gramos (decimal). Por debajo de 1000 lo muestra en gr; a partir de ahi salta a Kg. Pensado para basculas y pesaje en TPV.

<DnzSpanGrams Value=@TPV.HeaderFacturaModel.Peso FontSize="15px" />

Parametros

DnzTimeSpanDisplay

Pinta un TimeSpan descompuesto en partes con su etiqueta: 2d 3h 15m. Solo muestra las partes que no son cero, asi que una duracion corta sale limpia. Numero y etiqueta se estilan por separado.

<DnzTimeSpanDisplay Value=@(sesion.Fin - sesion.Inicio) ShowSeconds=true />

Con texto para el caso vacio:

<DnzTimeSpanDisplay Value=@tarea.TiempoInvertido EmptyText="Sin registrar" />

Parametros

DnzTimeSpanDisplayCompact

El mismo desglose que DnzTimeSpanDisplay, pero con numero y etiqueta en tamano pequeno. Atajo comodo para tablas y celdas: ya trae las clases de estilo puestas.

<DnzTimeSpanDisplayCompact Value=@tarea.Duracion />

Parametros

DnzTimeSpanDisplayBadge

El mismo desglose, pero cada parte va dentro de un badge de color. Para resaltar duraciones en cabeceras o resumenes.

<DnzTimeSpanDisplayBadge Value=@sesion.Duracion />

Parametros

Patron tipico: columna de informe -> span

Estos componentes encajan directamente sobre las filas que devuelve un informe del SDK. Cada columna tiene su span.

@foreach (var fila in informe.Filas)
{
    <DnzSpanKV Key="Cliente" Value=@fila.Cliente @key=@fila.ID />
    <DnzSpanMoney Amount=@fila.Total AutoColor=true />
    <DnzSpanDate Value=@fila.Fecha ShowStatus=true />
}

Relacionado

• KPIs y metricas — cuando el dato tipado es la cifra protagonista de una tarjeta.
• Badges y estados — para estados y etiquetas de color, no valores numericos.
• Tablas e informes — listados donde estos spans son las celdas.
• Catalogo de componentes — el resto de familias de DinaZen.
• Intro a DinaZen — como encaja la libreria con el SDK.
• Informes de Dinaup Flex — de donde salen las columnas que pintas.
• Cliente Dinaup (SDK .NET) — el que trae los datos.