# dbr.controls **dbr.controls.dkl** Simplifica la creación de controles HTML personalizados desde una lista de configuración ### Apoyo [Consultas](/es/productos/v12/tools/querymanager/readme.md). **Controles** - *date .-* Control de tipo fecha. - *time .-* Control de tipo hora. - *datetime .-* Control de tipo fecha y hora. - *hexcolor .-* Control de tipo color. - *textarea .-* Control de tipo memo. - *number .-* Control de tipo numérico. - *integer .-* Control de tipo números enteros. - *decimal .-* Control de tipo decimal. - *file .-* Control de tipo archivo, permite seleccionar archivos. - *bool .-* Control de tipo checkbox. - *numrange .-* Control personalizado. - *select .-* Control de tipo combo. - *inputkey .-* Webcomponent. - *text .-* Control de tipo texto. **Propiedades globales** - *control .-* Tipo de control. - *caption .-* Titulo del control. - *required .-* true/false, true el control es requerido. - *disabled .-* true/false, true el control es deshabilitado. - *wrp_attr .-* Array con clave-valor, atributos HTML del control. ## GenerateHtml ``` dbr.control.GenerateHtml::&db,&controls ``` ##### Parámetros * `db` - Referencia a una conexión de bases de datos. * `controls` - Array de objetos que contienen lo necesario para definir el diseño HTML. ##### Valor de retorno Ninguno (0). ##### Excepciones - Excepciones del interprete Devkron. ##### Ejemplo ``` #include "dkli.dkh" #! module "dbr.control.test" { #include "functions.dkh" #include "serialize.dkh" #include "dbr.dkh" #include "dbr.controls.dkl" new controls { member @"text": { @"control":"text" @"caption":"" @"required":true member @"wrp_attr" { @"class":"col-auto" } }, member @"number" { @"control":"number" @"caption":"" @"required":true member @"wrp_attr" { @"class":"col-auto" } }, member @"select" { @"control":"select" @"caption":"" @"required":true member @"source" { @"type":"query" @"query":"SELECT id, const FROM cdocumentos" @"keyfield":"id" @"showfield":"const" }, member @"wrp_attr" { @"class":"col-auto" } } } #$ div { #! do dbr.control.GenerateHtml(db,controls) #$ } } ``` ### Definición de controles **Variables** - `@control_params (opcional)` Array para establecer los valores a los controles, esta variable puede existir o no. **Establecer valores** Para establecer valores a los controles, la función tiene identificados 3 formas para recuperar el valor de los controles: - `@crud_context` Si existe la variable, la función obtendrá los valores del objeto `parameters` (@crud_context -> parameters). - `@http_context` si existe la variable, la función obtendrá los valores del objeto `request/get` (@http_context -> request/get). - `@control_params` Si existe la variable, la función obtendrá los valores `nombre_del_control` (@control_params -> nombre del control). ``` Prioridad de opciones. ref parameters = record.create() if isset("@control_params"){ ref parameters:@control_params } else if isset("@crud_context"){ ref parameters:@("¶meters") } // para usar la función @ debe iniciar el contexto con `do @context.begin(@crud_context)` else if isset("@http_context"){ ref parameters:@@(@http_context,"&request/get") } Ejemplos simples: control text. value=@@(parameters,"$txt_test") { "text_control": { "name":"txt_test", "value":value } } control num. range. minvalue=@@(parameters,"$ctrl_min") maxvalue=@@(parameters,"$maxvalue") { "num_range_control": { "minname":"ctrl_min" "maxname":"ctrl_max" "minvalue":minvalue "maxvalue":maxvalue } } Valor para el input-key new valor_input_key { @"id":"0001" @"descripcion":"Prueba" } value=to.json(valor_input_key) { "inputkey_control": { "source": { "value":value } } } ``` Estas opciones no aplican para el control input-key, para el control input-key se puede establecer un valor por default desde su objecto `source/value`. ``` { "text_control": // Clave del array, puede definir su propia clave de array. { "name":"Si se omite se asume la clave del array", "id":"si se omite se asume la clave del array", "control":"text", "caption":"Titulo del control", "required":true, //opcional "disabled":false, // opcional "readonly":false, // opcional "value":"valor por default del control", "wrp_attr": // atributos adicionales para el contenedor del control. { "class":"col-auto" } }, "number_control": { "name":"Si se omite se asume la clave del array", "id":"si se omite se asume la clave del array", "control":"number", "caption":"", "required":true, "disabled":false, // opcional "readonly":false, // opcional "value":"valor por default del control", "wrp_attr": { "class":"col-auto" } }, "integer_control": { "name":"Si se omite se asume la clave del array", "id":"si se omite se asume la clave del array", "control":"integer", "caption":"", "required":true, "disabled":false, // opcional "readonly":false, // opcional "value":"valor por default del control", "wrp_attr": { "class":"col-auto" } }, "decimal_control": { "name":"Si se omite se asume la clave del array", "id":"si se omite se asume la clave del array", "control":"decimal", "caption":"", "decimals":2, "required":true, // opcional "disabled":false, // opcional "readonly":false, // opcional "decimals":2, // Cantidad de decimal "value":"valor por default del control", "wrp_attr": { "class":"col-auto" } }, "date_control": { "name":"Si se omite se asume la clave del array", "id":"si se omite se asume la clave del array", "control":"date", "caption":"Fecha", "required":true, // opcional "disabled":false, // opcional "readonly":false, // opcional "value":"valor por default del control", "wrp_attr": { "class":"col-auto" } }, "time_control": { "name":"Si se omite se asume la clave del array", "id":"si se omite se asume la clave del array", "control":"time", "caption":"Hora", "required":true, // opcional "disabled":false, // opcional "readonly":false, // opcional "value":"valor por default del control", "wrp_attr": { "class":"col-auto" } }, "datetime_control": { "name":"Si se omite se asume la clave del array", "id":"si se omite se asume la clave del array", "control":"datetime", "caption":"Fecha/Hora", "required":true, // opcional "disabled":false, // opcional "readonly":false, // opcional "value":"valor por default del control", "wrp_attr": { "class":"col-auto" } }, "hexcolor_control": { "name":"Si se omite se asume la clave del array", "id":"si se omite se asume la clave del array", "control":"hexcolor", "caption":"", "required":true, // opcional "disabled":false, // opcional "readonly":false, // opcional "value":"valor por default del control", "wrp_attr": { "class":"col-auto" } }, "bool_control": { "name":"Si se omite se asume la clave del array", "id":"si se omite se asume la clave del array", "control":"bool", "caption":"Marca esta casilla (true/false)", "value":"valor por default del control", "wrp_attr": { "class":"col-auto form-check align-self-center" } }, "file_control": { "name":" Si se omite se asume la clave del array", "id":" si se omite se asume la clave del array", "control":"file", "caption":"", "required":true, // opcional "disabled":false, // opcional "readonly":false, // opcional "wrp_attr": { "class":"col-auto" } }, "select_control": { "name":"Si se omite se asume la clave del array", "id":"si se omite se asume la clave del array", "control":"select", "caption":"", "required":true, // opcional "disabled":false, // opcional "readonly":false, // opcional "first_text":"Texto de la primera opción del select.", "first_value":"Valor de la primera opción del select, si se omite o es vacío no se crea la primera opción con el texto de first_text." "value":"valor por default del control", "source": { "type":"query/list", "query":"SELECT id, const FROM cdocumentos", // si type = query "keyfield":"id",// campo clave que será el valor de las opciones "showfield":"const",// campo a mostrar en las opciones. "values":"Array con los objetos clave-valor (si type=list)" //ejemplo: [{"clave":"001","valor":"valor 01"},{},{}...] }, "wrp_attr": { "class":"col-auto" }, "opt_attr": { // atributos adicionales para las opciones del select. } }, "inputkey_control": { "name":"Si se omite se asume la clave del array", "id":"si se omite se asume la clave del array", "control":"input-key", "caption":"Input Key", "required":true, // opcional "source": { "type":"query,list,service", "query":"SELECT sys_pk, codigo, descripcion FROM categoria WHERE NOT IFNULL(sys_deleted,0)", // esto aplica si type=query "source":"/!/ventas/venta/?_view=buscar-cliente&search=@search", //URL del servicio donde obetnedrá los datos, esto aplica si type=service "values":"Array con los objetos clave-valor (si type=list)" //ejemplo: [{"clave":"001","valor":"valor 01"},{},{}...] "keyfield":"sys_pk", Campo clave, que será el valor al seleccionar un objeto del array de datos. "showfield":"descripción", Campo que se mostrará en el control al seleccionar un objeto del array de datos. "searchfield":"código", Campo con la cual realizará la búsqueda después de seleccionar un objeto del array de datos. "columns":" código, descripción", //Definición de las columnas que se van a mostrar en la tabla de selección del input-key, columnas de acuerdo al array de datos obtenidos por el servicio o el array definido en campo values según el valor de type. "ccaptions":"Código, Descripción" // Definición de títulos de las columnas en la tabla según el campo columns. "value":"Array con los valores necesario para cargar datos al input-key"//ejemplo: {"clave":"001","valor":"Prueba"} }, "wrp_attr": { "class":"col-auto" } }, "num_range_control": { "mincaption":"Titulo del control mínimo", "maxcaption":"Titulo del control máximo", "minname":"Nombre del control mínimo", "maxname":"Nombre del control máximo", "minid":"Identificador(id) del control mínimo", "maxid":"Identificador(id) del control máximo", "minvalue":"Valor del control mínimo", "maxvalue":"Valor del control máximo", "control":"num-range", "caption":"Titulo del control en general", "required":true, // opcional "readonly":false, // opcional "wrp_attr": { "class":"col-auto" } }, "textarea": { "name":"Si se omite se asume la clave del array", "id":" Si se omite se asume la clave del array", "control":"textarea", "caption":"", "required":true, // opcional "disabled":false, // opcional "readonly":false, // opcional "value":"valor por default del control", } } ```