Formularios: Campos complejos - Sepiia

query: Nombre del datasource con el que se llenara el arreglo de options. Puede ser tipo element, sepiia o custom. También pueden ‘filtrarse’ con [?(@.<columna> == o =! ‘valor’)].

options: Un arreglo similar a los SELECTION/AUTOCOMPLETE/MULTIPLE con la diferencia que tiene información adicional dentro de data.

header: Un arreglo de objetos con el cual se determina que mostrar en la tabla. Es mandatorio para quien configure el formulario agregar las columnas que quiera mostrar en la tabla, de lo contrario no se verá nada.

name: hace referencia al key dentro de data de cada opción con el cual se accede al valor a mostrar. En el caso de los atributos de elementos, estos se deben referenciar siempre en minúscula. También se puede hacer referencia a las keys propias de cada opción como id, key, label, value, descripcion, parentKey.
label: es el label de la columna que aparecerá en la web/app.

value: Un arreglo con las opciones seleccionadas.

Si se quiere que una opción vaya seleccionada por defecto, se debe agregar el objeto completo de la opción dentro de value.

Forma de usar

La barra de búsqueda filtra coincidencias con cualquier atributo que haya sido configurado en el header. Distingue minúsculas de mayúsculas.

La casilla superior, a la altura de los nombres de la columna, permite seleccionar/ deseleccionar todas las opciones, y cuando está azul y con un guión indica que hay al menos una opción de la lista seleccionada.

Si existen muchas columnas, se puede desplazar hacia la derecha pinchando con el mouse sobre la tabla y moviendo el cursor hacia la izquierda.

En caso de que haya varias opciones, se puede ampliar la cantidad de datos que se muestran en la tabla de 5 a 10 y también permite pasar a una siguiente página.

Tabla con datos dummy


{
    "visible": true,
    "max": "",
    "errortext": "Invalid Tabla ejemplo :",
    "query": "",
    "update": "",
    "label": "Tabla ejemplo",
    "type": "TABLE",
    "callRefresh": true,
    "regex": "",
    "min": "",
    "defaultColor": "",
    "activeColor": "",
    "renderCondition": "",
    "helptext": "",
    "decimals": "",
    "options": [
        {
            "id": 1,
            "key": "c1",
            "label": "PRODUCTO 1",
            "data": {
                "product": "PRODUCTO 1",
                "similarity": "11%",
                "price": 11,
                "discount": {
                    "color": "#F4F6FD",
                    "value": "1%"
                },
                "stock": "701 kg",
                "distributionCenter": "Santiago, Centro 1"
            }
        },
        {
            "id": 2,
            "key": "c2",
            "label": "test 2",
            "data": {
                "product": "PRODUCTO 2",
                "similarity": "22%",
                "price": 22,
                "discount": {
                    "color": "#F4F6FD",
                    "value": "2%"
                },
                "stock": "702 kg",
                "distributionCenter": "Santiago, Centro 2"
            }
        },
        {
            "id": 3,
            "key": "c3",
            "label": "test 3",
            "data": {
                "product": "PRODUCTO 3",
                "similarity": "33%",
                "price": 33,
                "discount": {
                    "color": "#F4F6FD",
                    "value": "3%"
                },
                "stock": "703 kg",
                "distributionCenter": "Santiago, Centro 3"
            }
        },
        {
            "id": 4,
            "key": "c4",
            "label": "test 4",
            "data": {
                "product": "PRODUCTO 4",
                "similarity": "33%",
                "price": 33,
                "discount": {
                    "color": "#F4F6FD",
                    "value": "3%"
                },
                "stock": "703 kg",
                "distributionCenter": "Santiago, Centro 4"
            }
        },
        {
            "id": 5,
            "key": "c5",
            "label": "test 5",
            "data": {
                "product": "PRODUCTO 5",
                "similarity": "33%",
                "price": 33,
                "discount": {
                    "color": "#F4F6FD",
                    "value": "3%"
                },
                "stock": "703 kg",
                "distributionCenter": "Santiago, Centro 5"
            }
        },
        {
            "id": 6,
            "key": "c6",
            "label": "test 6",
            "data": {
                "product": "PRODUCTO 6",
                "similarity": "33%",
                "price": 33,
                "discount": {
                    "color": "#F4F6FD",
                    "value": "3%"
                },
                "stock": "703 kg",
                "distributionCenter": "Santiago, Centro 6"
            }
        }
    ],
    "header": [
        {
            "name": "similarity",
            "label": "Similitud"
        },
        {
            "name": "discount",
            "label": "Descuento",
            "type": "BADGE"
        },
        {
            "name": "product",
            "label": "Producto"
        },
        {
            "name": "stock",
            "label": "Stock"
        },
        {
            "name": "distributionCenter",
            "label": "Centro Dist."
        },
        {
            "name": "price",
            "label": "Precio Prom."
        }
    ],
    "formulla": "",
    "id": 100,
    "value": [],
    "key": "tabla_ejemplo",
    "validate": true
}

Tabla con datos de un datasource

El datasource debe proveer los datos propios de una opción como el id, label, key, value description, parentKey. Cualquier otro valor que proporcione el datasource se agregara a data y podrá ser mostrado en la tabla si se configura en el header.


{
    "name": "Ejemplo tabla",
    "type": "DB",
    "method": "SELECT u.id, u.id as key, u.usuario, u.nombre ||' '|| u.apellido as label, '' as value, u.nombre, u.apellido, u.id_perfil, p.nombre as nombre_perfil FROM gestion.usuario u JOIN gestion.perfil p on u.id_perfil = p.id WHERE u.id_operacion = 8 AND u.flg_activo = '1' ORDER BY u.nombre, u.apellido",
    "minTtlCache": 1,
    "outputFields": []
}


{
    "visible": true,
    "max": "",
    "errortext": "Invalid Tabla ejemplo :",
    "query": "sepiia.TEST_TABLE",
    "update": "",
    "label": "Tabla ejemplo",
    "type": "TABLE",
    "callRefresh": true,
    "regex": "",
    "min": "",
    "defaultColor": "",
    "activeColor": "",
    "renderCondition": "",
    "helptext": "",
    "decimals": "",
    "options": [],
    "header": [
        {
            "name": "id",
            "label": "Id Usuario"
        },
        {
            "name": "usuario",
            "label": "Usuario"
        },
        {
            "name": "nombre",
            "label": "Nombre"
        },
        {
            "name": "apellido",
            "label": "Apellido"
        },
        {
            "name": "id_perfil",
            "label": "Id perfil"
        },
        {
            "name": "nombre_perfil",
            "label": "Nombre Perfil"
        }
    ],
    "formulla": "",
    "id": 100,
    "value": [],
    "key": "tabla_ejemplo",
    "validate": true
}

TABLE_VIEW

Configuración

type: TABLE_VIEW.

query: Nombre del datasource con el que se llenara el arreglo de options. Puede ser tipo element, sepiia o custom. También pueden ‘filtrarse’ con [?(@.<columna> == o =! ‘valor’)].

options: Un arreglo similar a los SELECTION/AUTOCOMPLETE/MULTIPLE con la diferencia que tiene información adicional dentro de “data”.

header: Un arreglo de objetos con el cual se determina que mostrar en la tabla. Es mandatorio para quien configure el formulario agregar las columnas que quiera mostrar en la tabla, de lo contrario no se verá nada.

name: hace referencia al key dentro de “data” de cada opción con el cual se accede al valor a mostrar. En el caso de los atributos de elementos, estos se deben referenciar siempre en minúscula. También se puede hacer referencia a las keys propias de cada opción como id, key, label, value, descripcion, parentKey.
label: es el label de la columna que aparecerá en la web/app.

Tabla con datos de un datasource


{
  "errortext": "Invalid Tabla solo para ver ejemplo :",
  "update": "",
  "type": "TABLE_VIEW",
  "callRefresh": true,
  "min": "0",
  "defaultColor": "",
  "renderCondition": "",
  "validStatus": true,
  "helptext": "",
  "options": [],
  "formulla": "",
  "id": 1,
  "value": "",
  "key": "tabla_view_ejemplo",
  "validate": true,
  "visible": true,
  "max": "0",
  "query": "sepiia.TEST_TABLE",
  "label": "Tabla solo para ver ejemplo",
  "validateCondition": "",
  "regex": "",
  "activeColor": "",
  "inputRegex": "",
  "decimals": "",
  "header": [
    {
      "name": "id",
      "label": "Id Usuario"
    },
    {
      "name": "usuario",
      "label": "Usuario"
    },
    {
      "name": "nombre",
      "label": "Nombre"
    },
    {
      "name": "apellido",
      "label": "Apellido"
    },
    {
      "name": "id_perfil",
      "label": "Id perfil"
    },
    {
      "name": "nombre_perfil",
      "label": "Nombre Perfil"
    }
  ]
}

MSG_<TIPO>

Configuración

type:

MSG_INFO: Utiliza el color de sepiia info.
MSG_ALERT: Utiliza el color de sepiia warning.
MSG_ERROR: Utiliza el color de sepiia danger.
MSG_SUCCESS: Utiliza el color de sepiia success.

value: Mensaje a mostrar. Puede ser generado por la formulla.

formulla: Fórmula a ejecutar. Debe retornar el mensaje a mostrar.

Ejemplo MSG_INFO


{
    "visible": true,
    "max": "",
    "errortext": "",
    "query": "",
    "update": "",
    "label": "",
    "type": "MSG_INFO",
    "callRefresh": false,
    "regex": "",
    "min": "",
    "defaultColor": "",
    "activeColor": "",
    "renderCondition": "",
    "helptext": "",
    "decimals": "",
    "options": [],
    "formulla": "js('Soy un mensaje de info: #_ELEMENT.key#')",
    "id": 1,
    "value": "",
    "key": "msg_info",
    "validate": false
}

SLIDER

Configuración

type: SLIDER.

value: Valor numérico que representa la selección del slider. Puede ser generado por la formulla.

formulla: Fórmula a ejecutar. Debe retornar un valor numérico.

min: Límite inferior del value.

max: Límite superior del value.

Ejemplo SLIDER


{
    "visible": true,
    "max": "100",
    "errortext": "Invalid Slider 1",
    "query": "",
    "update": "",
    "label": "Slider 1",
    "type": "SLIDER",
    "callRefresh": true,
    "regex": "",
    "min": "0",
    "defaultColor": "",
    "activeColor": "",
    "renderCondition": "",
    "helptext": "Helptext Slider 1",
    "decimals": "",
    "options": [],
    "formulla": "",
    "id": 18,
    "value": "",
    "key": "slider_1",
    "validate": true
}

RANGE_SLIDER

Configuración

type: RANGE_SLIDER.

value: JSON que representa la selección del valor de inicio y valor de término del slider. Puede ser generado por la formulla.

{“start”: <valor>, “end”: <valor>}

formulla: Fórmula a ejecutar. Debe regresar el JSON soportado por el value.

min: Límite inferior de value.start.

max: Límite superior de value.end.

Ejemplo RANGE_SLIDER


{
    "visible": true,
    "max": "100",
    "errortext": "Invalid RangeSlider 1",
    "query": "",
    "update": "",
    "label": "RangeSlider 1",
    "type": "RANGE_SLIDER",
    "callRefresh": true,
    "regex": "",
    "min": "0",
    "defaultColor": "",
    "activeColor": "",
    "renderCondition": "",
    "helptext": "Helptext RangeSlider 1",
    "decimals": "",
    "options": [],
    "formulla": "",
    "id": 19,
    "value": "",
    "key": "range_slider_1",
    "validate": true
}

MULTIPLE_REORDER

Configuración

type: MULTIPLE_REORDER.

query: Nombre del datasource con el que se llenara el arreglo de options. Puede ser tipo element, sepiia o custom. También pueden ‘filtrarse’ con [?(@.<columna> == o =! ‘valor’)].

value: Un JSON array con las opciones seleccionadas en un orden definido.

Si se quiere que una opción vaya seleccionada por defecto, se debe agregar el objeto completo de la opción dentro de value.
Puede ser generado por la formulla.

formulla: Fórmula a ejecutar. Debe regresar el JSON soportado por el value.

Forma de usar

Al hacer click dentro del input se abrirá un modal con la lista de opciones a seleccionar.

Las opciones se pueden seleccionar/deseleccionar de uno en uno o con el botón color morado de seleccionar/deseleccionar todas las opciones. Al terminar la selección hacer clic en OK (botón verde). La lista de opciones se puede filtrar utilizando el input de búsqueda.

Una vez seleccionada las opciones estas se pueden reordenar arrastrando el ícono de hamburguesa (=) en el final del ítem a la posición deseada.

Los cambios realizados son guardados en el formulario, pero solo se verá reflejado su impacto en el resto del formulario una vez que otro campo ejecute un callRefresh o se presione el botón verde de confirmar a la derecha del input MULTIPLE_REORDER.

Input con valores ordenados. Ícono rojo para eliminar e ícono verde para confirmar.

Ejemplo MULTIPLE_REORDER


{
    "visible": true,
    "max": "200",
    "errortext": "Invalid Seleccion multiple reorder:",
    "query": "sepiia.TEST_TABLE",
    "label": "Seleccion multiple reorder:",
    "type": "MULTIPLE_REORDER",
    "callRefresh": true,
    "regex": "",
    "min": "1",
    "defaultColor": "",
    "activeColor": "",
    "renderCondition": "",
    "helptext": "",
    "decimals": "",
    "options": [],
    "formulla": "",
    "id": 4,
    "value": "",
    "key": "custom_multiple_reorder",
    "validate": true
}

En el cache se guardan la opciones seleccionadas de la siguiente manera:

Para columnas reservadas como id, key, label, value, parentKey, description.

[key_seccion].[key_elemento].[indice_opcion].[columna_reservada]

Para columnas dentro de data.

[key_seccion].[key_elemento].[indice_opcion].data.[columna_data]

IDs de las opciones seleccionadas en el orden definido separadas por comas.

[key_seccion].[key_elemento].ids

Keys de las opciones seleccionadas en el orden definido separadas por comas y envuelto en comilla simple.

[key_seccion].[key_elemento].keys

Labels de las opciones seleccionadas en el orden definido separadas por comas.

[key_seccion].[key_elemento].labels


"cache": {
    "_TRIGGER.data_empresa.custom_multiple_reorder": "",
    "_TRIGGER.data_empresa.custom_multiple_reorder.0.data.apellido": "BUGUEÑO"}