@evomatik/evk-forms v2.0.40

EvkForms SEAGeD Producto ®

This library was generated with Angular CLI version 12.0.0.

Instalación

Uso de EvkFormFactory

<evk-form-factory [metadata]="rows" [actionsFields]="acciones"></evk-form-factory>

Inputs

• Metadata - Metadata de la forma a crear
• actionsFields - Arreglo de ActionFields

Uso de SeagedFormFactory

Componente usado para obtener el metadata de la forma a partir de un api.

• idNegocio - Id del component shape
• actionsFields - Arreglo de ActionFields

Estructura de la metadata

ComponentShape

Usado para definir las propiedades del componente que va a contener la forma, tiene los siguientes atributos:

• type - tipo de componente que va a contenr el formulario, actualamente simple-container es el único soportado

SuperContainer

• type - tipo de componente que va a contenr el formulario, acepta dos valores simple-container y expansion-container titulo - Determina el encabezado del contenedor. subtitulo - Determina el encabezado secundario del contenedor. _ order - Determina el orden en el cual se va a visualizar el supercontedor con respecto a los otros supercontenedores que compongan la forma.
• containers - Lista de la secciones contenidas dentro de el supercontenedor

Sección

• type - tipo de componente que va a contenr el formulario, actualamente evk-section-form y evk-expansion-panel es el único soportado titulo - Determina el encabezado del contenedor. subtitulo - Determina el encabezado secundario del contenedor. _ order - Determina el orden en el cual se va a visualizar el supercontedor con respecto a los otros supercontenedores que compongan la forma.
• expansionExpanded - Para las secciones de tipo evk-expansion-panel determina si el expansion panel inicia expandido.
• fields - Lista de los campos (FieldBaseModel) contenidos dentro de el supercontenedor.

FieldBase

Configuración para los capos que se van a mostrar en el formulario

• controlName - Permite asignar un nombre dentro del formulario al construirlo, este atributo no es visual dentro de la interfaz de usuario.
• required - Permite saber el tipo de campo que se debe de pintar dentro del formulario, los tipos de campos soportados son los siguientes: text, select, textArea, checkBox, autocomplete date y time.
• value - Permite establecer un valor por default dentro del campo, debe ser escrito en minúsculas.
• width - Permite saber cuál será el ancho de ese campo, también debe ser escrito en minúsculas. Además para el manejo de catálogos existen la siguientes propiedades: _ discriminator - Se utiliza para catálogos genéricos (que se encuentran en la tabla CATALOGO_VALOR), para cargar las opciones basta con agregar la propiedad discrminator usando el discriminador establecido para los valores que deseamos mostrar. Ejemplo: Para cargar las opciones de sexo, se utiliza "discriminator": "SEXO".
• url - Esta propiedad se utiliza para cargar catálogos que no son genéricos (sus valores no se encuentran en la tabla CATALOGO_VALOR, sino en una tabla propia). Como estos catálogos cuentan con una tabla propia, se puede utilizar su API para obtener los valores, por lo que en la propiedad url, se debe agregar la ruta de la api (de options) del catálogo a cargar. Ejemplo: Para cargar las opciones de los estados de México, se utiliza la siguiente url: "url": "/seaged-catalogos/estados/paises/143/estados/options". Es importante aclarar que no se debe agregar a la url el protocolo, ip o puerto. (http://10.0.1.64:9004). Las opciones discriminator y url, NO deben usarse al mismo tiempo en un elemento, se usa una o la otra.
• dependenceOn - Esta propiedad se utiliza para los catálogos que dependen de la selección de un valor en otro catálogo para saber que opciones mostrarán. Por ejemplo, para mostrar los municipios, primero debemos saber que estado seleccionaron, eso mismo pasa para las colonias, etc. Para dichos casos se utiliza una combinación de las propiedades dependenceOn y url. En dependenceOn, se debe agregar el controlName del catálogo del cual depende nuestro elemento y en la url se agrega la url de la api de nuestro catálogo. Ejemplo, cargar municipios:

Events

Arreglo se ActionFiled, define acciones a realizar y cuando realizarlas, ActionField tiene las siguientes propiedades:

• name: Nombre de la función que se quiere ejecutar
• phase - Nombre de la fase o evento que determina el momento cuando se va a ejecutar la función

Ejemplo

` { "title": "Shape", "type": "simple-container", "containers": [{ "title": 'Prueba', "type": "simple-container", "containers": [ { "order" : 1, "title" : "Medidas de protección ratificadas", "type": "evk-table-form", "groupName": "grupo1", "fields" : [ { "controlName" : "interviniente", "showInSubForm" : true, "label" : "Interviniente", "required" : false, "order" : 1, "controlType" : "autocomplete", "type" : "string", "options": {"label": null, "value": ""}, {"label": "Juan", "value": "juan"}, {"label": "Pedro", "value": "pedro"}, {"label": "María", "value": "maria"} , "value" : "", "width" : 40, }, { "controlName" : "medidaRatificada", "label" : "Medidas ratificadas", "showInSubForm" : true, "required" : false, "order" : 1, "controlType" : "autocomplete", "type" : "string", "options": {"label": null, "value": ""}, {"label": "Hombre", "value": "H"}, {"label": "Mujer", "value": "M"}, {"label": "Otro", "value": "O"} , "value" : "", "width" : 40, "url" : null, "discriminator" : "DESCRCIPCION-MEDIDAS-DE-PROTECCION" } ] }, { "title": "Seccion 1", "type": "evk-section-form", "fields": [ { "controlName": "nombreSolicitante", "label": "Nombre del solictante", "required": false, "order": 1, "controlType": "text", "type": "string", "options": [], "value": "", "width": 33, "maxLength": 150, "minLength": 10, "control": { "id": "1", "events": { "name": "printCurrentValue", "phase": "change" }, { "name": "printCurrentValue", "phase": "focusout" } , "rules": { "name": "validMaxLength", "validateValue": 100 }, { "name": "validMinLength", "validateValue": 2 }, { "name": "validRequired", "validateValue": true } } }, { "controlName": "apellido1Solicitante", "label": "Apellido paterno del solicitante", "required": true, "order": 2, "controlType": "text", "type": "string", "options": [], "value": "", "width": 34, "maxLength": 150, "minLength": 10 }, { "controlName": "apellido2Solicitante", "label": "Apellido materno del solicitante", "required": true, "order": 1, "controlType": "text", "type": "string", "options": [], "value": "", "width": 33, "maxLength": 150, "minLength": 10 },

            ]
        },
        {
            "title": "Sección 2",
            "type": "evk-expansion-panel",
            "fields": [
                {
                    "controlName": "terminosCondiciones",
                    "label": "¿Acepta terminos y condiciones?",
                    "required": true,
                    "order": 2,
                    "controlType": "checkbox",
                    "type": "string",
                    "options": [],
                    "value": null,
                    "width": 50,
                    "dependenceView": {
                        "controlName": "generoSolicitante",
                        "value": "H"
                    }
                },
                {
                    "controlName": "generoSolicitante",
                    "label": "Genero del solicitante",
                    "required": true,
                    "order": 1,
                    "controlType": "select",
                    "discriminator": "GENERO",
                    "type": "string",
                    "options": [
                        {"label": null, "value": ""},
                        {"label": "Hombre", "value": "H"},
                        {"label": "Mujer", "value": "M"},
                        {"label": "Otro", "value": "O"}
                    ],
                    "value": null,
                    "width": 50,
                    "control": {
                        "id": "1",
                        "events": [
                            {
                                "name": "printCurrentValue",
                                "phase": "selectionChange"
                            }
                        ],
                        "rules": [
                            {
                                "name": "validMaxLength",
                                "validateValue": 100
                            },
                            {
                                "name": "validMinLength",
                                "validateValue": 2
                            },
                            {
                                "name": "validRequired",
                                "validateValue": true
                            }
                        ]
                    }
                }

            ]
        }
    ]
}]

} `