8.2 Configuración de ficha

Configuración de ficha


 
Para poder configurar una ficha se utiliza DevToolKit.
Pasos a seguir:
  1. Se escoge el ambiente en el cual se va a configurar la Ficha.
  1. Se ingresa con el usuario y contraseña del administrador de la Organización en donde trabajará.
  1. Se accede al Login y posteriormente se ingresa a OpenTools.
  1. Se selecciona el “CardEditor”.
Captura de pantalla de DevTools
Captura de Login de DevTools
 
Posteriormente, se hacen los siguientes pasos:
  1. Se selecciona el actor.
  1. Se selecciona el “Source” de búsqueda.
  1. Se selecciona o se ingresa el valor de búsqueda.
  1. Se hace clic en “Load” y se cargará el layout (estructura) con los componentes del template guardados en base de datos.
  1. Una vez realizado cambios al código se hace clic en “Save” para guardar los cambios y ver reflejado de inmediato el mismo.
 

Layout (estructura) de la Ficha

La ficha está compuesta por dos secciones:
  • CentralLayout: Corresponde a todos los componentes que aparecen en la parte izquierda del ejemplo.
  • RightLayout: Los componentes que aparecen en la parte derecha del ejemplo.
 
Right y Central Layout.
Right y Central Layout.
 

Componente Tipo Indicador (KPI)

Existen varios componentes de tipo indicador que varían según el tamaño.
 
Tipos de componentes
Tipos de componentes
 
Posición Tipo Nombre (Código) Nombre (Template)
Central KPI kpi1SmallElement Elemento cuadrado 6
kpi1MediumElement Elemento cuadrado 4
kpi1LargeElement Elemento cuadrado 3
kpi2SmallElement Elemento 6
kpi2MediumElement Elemento 4
kpi2LargeElement Elemento 3
kpi2ExtraLargeElement Elemento 2
 
Se configura de la siguiente forma, en este código se muestran dos indicadores:
"centralLayout": [ { "type": "kpi2ExtraLargeElement", "elements": [ getKPIElement("EST_PRO_AG", "success", "success", "fa-solid fa-file-signature", atts, db, 'Cantidad de accesos aprobados', params.accesos.count, ''), getKPIElement("NO_PL_PRO_", "info", "info", "fa-solid fa-calendar-days", atts, db, 'Fecha último ingreso', params.accesos.lastAccess, '') ] } ],
Parámetro
Descripción
“type”
Corresponde al código del componente.
“EST_PRO_AG”
Corresponde al código del atributo a mostrar en el indicador.
“success”, “success”
Corresponde al color del ícono (Colores permitidos e íconos).
“fa-solid fa-file.signature”
Corresponde al ícono (Colores permitidos e íconos).
‘Cantidad de accesos aprobados’
Corresponde al título que aparece en el indicador, en caso el atributo colocado antes no exista, de lo contrario se muestra el nombre del atributo (label).
params.accesos.count
Query de conteo, pero en lugar de una query puede colocarse el formato en el cual se debe mostrar el valor en caso sea numérico.
 

Tabla con valores por columnas

Tabla con valores por columnas
Tabla con valores por columnas
Se configura de la siguiente forma, en esta imagen se muestran 10 columnas.
{ "title": "title", "icon": "las la-file-alt scale5 mr-2", "message": "Este es una tabla", "header": [ { "name": "lote_cod", "label": "Lote" }, { "name": "lot_facdate", "label": "Fecha factura" }, { "name": "no_anim", "label": "N° animales" }, { "name": "kgtot_buy", "label": "KG comprados en origen" }, { "name": "kgpredio_buy", "label": "KG recibidos en predio" }, { "name": "lot_destar", "label": "% destara" }, { "name": "valueani_buy", "label": "Neto ($)" }, { "name": "comision_buy", "label": "Comisión ($)" }, { "name": "flete_buy", "label": "Flete ($)" }, { "name": "otserv_buy", "label": "Otros ($)" } ], "content": [] }
Parámetro
Descripción
type
Código del componente (bootstrapTable).
title
Título de la tabla.
icon
Ícono a mostrar en la tabla.
header
Se enlistan los atributos a mostrar en las columnas de la tabla. Cada columna se configura con los siguientes parámetros.
name
Código del atributo.
label
Título de la columna.
content
En esta sección se configura de donde se obtienen los datos.
 
 

Tabla con valores por filas

Existen tablas de una columna y de dos columnas, ambas se configuran de forma similar.
Tabla con valores por filas.
Tabla con valores por filas.
 
Se configura de la siguiente manera, en el ejemplo se muestra una tabla con cuatro atributos.
{ "type": "largeTable", "elements": { "tittle": "Totales de compra", "icon": "las fa-solid fa-dollar-sign scale5 mr-2", "rows": [ getTableElement("ULTFACT_SELL", atts, db, 'Monto última factura', '$', "0", "###,###"), getTableElement("ULTFACSELL_DATE", atts, db, 'Fecha última factura', "", ''), getTableElement("CST_MATADER", atts, db, 'Mataderos', "0", '', "###,###"), getTableElement("CSTOTKG_VTA", atts, db, 'Total kg vendidos', "0", '', "###,###"), ] } }
Parámetro
Descripción
“type”
Código de la tabla (largeTable).
“title”
Título de la tabla.
“icon”
Icono de la tabla.
“rows”
Se configuran los atributos que se mostrarán en cada fila, en el ejemplo se muestra una tabla con cuatro filas de datos. Cada fila tiene los siguientes parámetros.
“ULTFACT_SELL”
Código del atributo a mostrar.
“Monto última factura”
Título del atributo.
‘$’
Unidad de medida, en este caso el símbolo pesos.
“0”
Si no hay información muestra un valor 0.
‘###,###”
Formato del número, es un número entero (sin decimales) y en caso de ser número de más de tres dígitos se usa el separador por coma.