Saltar al contenido principal

Elements

Los elementos son las unidades de información o de acción que conforman las Vistas, tanto en formato Show como en loslist o listados.

Parametros​

Los elements tienen los siguientes parametros:

Elements edit

  • Variable: Indica el nombre de la variable sobre la que actua tanto para mostrar los datos como para su edición.
  • Etiqueta: Indica el scope a utilizar para mostrar los datos.
  • Link: Indica el scope a utilizar para mostrar los datos.
  • Editable: Indica el scope a utilizar para mostrar los datos.
  • Tipo: Indica el scope a utilizar para mostrar los datos.
  • Icono: Indica el scope a utilizar para mostrar los datos.
  • Alineamiento: Indica el scope a utilizar para mostrar los datos.
  • Formato: Indica el scope a utilizar para mostrar los datos.
  • Opciones: Indica el scope a utilizar para mostrar los datos.
  • Enum: Indica el los valores posibles a utilizar para mostrar los datos para los Tipo Seleccionable.
  • Abierto por defecto: Indica si el elemento tipo array u objeto esta abierto o cerrado por defecto al mostrarlo en un frame tipo Show.

Variable​

Conforma el valor o contenido de la variable que se muestra en el elemento. Es procesada por mustache por lo que puede contener variables de la forma {{dossier.header.name}} o incluso unir varias.

ejemplo:

{{dossier.header.code}} - {{dossier.header.name}}

Etiqueta​

Es el texto del título que aparece en la parte superior de cada columna o delante de cada elemento en los frames tipo Show.

Ejemplo:

Nombre del expediente

En el caso de querer que tenga un link, se introduce en formato mustache el camino. Puede contener un camino relativo o absoluto.

Ejemplo:

/view/dossier?dc={{dossier.header.code}}

Editable​

Indica si se puede modificar el valor del elemento y de que manera.

Los valores posibles son:

  • readonly: No se puede modificar el valor.
  • write: Se puede modificar el valor.
  • protected: Se puede modificar el valor despues de hacer doble click sobre el elemento.

Tipo​

Tipo de representación de la columna, como:

  • auto: Es el tipo por defecto, se intenta adivinar el tipo de dato.
  • formula: [True|False] Se puede introducir una formula para calcular el valor de la columna, como por ejemplo: {{dossier.file.cost}} - {{dossier.file.prize}} en variable.
  • text: Texto plano
  • lowertext: Texto plano todo en minusculas.
  • uppertext: Texto plano todo en mayusculas.
  • number Número con decimales.
  • number.0: Número sin decimales.
  • number.1: Número con 1 decimal.
  • number.2: Número con 2 decimales.
  • currency: Para mostrar valores de monedas con dos decimales si los tiene.
  • euro: Para mostrar valores de monedas con dos decimales y el simbolo € al final.
  • dollar: Para mostrar valores de monedas con dos decimales y el simbolo $ al final.
  • date: Fecha en formato dd/mm/yyyy
  • smalldate: Fecha en formato dd/mm/yy
  • fixdate: Fecha en formato dd/mm/yyyy, donde los dias ocupan dos caracteres y los meses tambien.
  • fulldate: Fecha en formato dd/mm/ hh:mm:ss, donde los dias ocupan dos caracteres y los meses tambien, y el año ocupa 4 caracteres.
  • time: Hora en formato hh:mm:ss
  • smalltime: Hora en formato hh:mm
  • fixtime: Hora en formato hh:mm:ss, donde las horas ocupan dos caracteres y los minutos tambien.
  • fulltime: Hora en formato hh:mm:ss, donde las horas ocupan dos caracteres y los minutos tambien, y los segundos ocupan dos caracteres.
  • textdate: Fecha en formato dd de mes de yyyy.
  • boolean: Checkbox
  • Seleccionable Muestra un select con los valores posibles indicados en el parametro enum.
  • checkbox
  • percent: numero con decimales y % al final

Icono​

EL icono que se muestra en el elemento. Estos iconos son de la libreria Google Fonts

Alineamiento​

El alineamiento del texto en el elemento. Puede ser left, center o right.

Formato​

El formato del texto en el elemento. Puede ser color, bold, italic o underline. Es un Texto en formato JSON.

  • bold: Texto en negrita. (true|false)
  • italic: Texto en cursiva. (true|false)
  • underline: Texto subrayado. (true|false)
  • strike: Texto tachado. (true|false)
  • size: Tamaño del texto. (px)
  • maxsize: Tamaño máximo del texto. (px)
  • maxlines: Número máximo de lineas. (número)
  • color: Color del texto. (hexadecimal) o today para el color del dia actual o now para el color de la hora actual.
  • background: Color de fondo del texto. (hexadecimal) o today para el color del dia actual o now para el color de la hora actual.

Opciones​

  • options: Se pueden aplicar estas opciones a la columna
    • filter: [True|False] para indicar si se puede filtrar por este elemento en los frames tipo List. Filter. Al pulsar sobre el icono del filtro se despliega un menú con las opciones de filtrado.
    • suffix: Texto a poner despues del valor, como simbolo $,%,€, etc..
    • resume: Junto al nombre de la columna aparecera un valor con una de las siguientes operaciones:
      • sum: La suma de todos lo valores
      • avg: La media de todos los valores
      • count: Cantidad de registros
      • max: Número mas alto
      • min: Número mas bajo
    • resume_suffix: Para los registros de la columna existe la posibilidad de agregar un sufijo, como podria ser el simbolo $ etc..

Enum​

En caso de que el elemento sea un enumerado, se puede indicar los valores posibles que puede tener.

Ejemplo:

{
  "enum": [
    {
      "value": "1",
      "label": "Valor 1"
    },
    {
      "value": "2",
      "label": "Valor 2"
    }
  ]
}

Isopen​

Indica si el elemento esta abierto o cerrado por defecto al mostrarlo en un frame tipo Show.

Ejemplo:

  "isopen": ✅