Hi Thanks for this great library. I am trying to implement a layout that will stack controls on different resolutions differently. For mobile, it is plain and straightforward and all controls are stacked. But for desktop/tablet view the columns are arranged differently on each row. Is there any way we can achieve it?
Hi @pankaj-z,
This can be implemented relatively easily using breakpoints. The idea is to render the forms as depicted but to collapse them to a vertical list once a certain breakpoint is hit.
The @jsonforms/vue2-vuetify renderers have this already built in. They will render the usual UI Schema, which here could be a VerticalLayout with nested HorizontalLayouts to accomplish the bottom UI. Once the screen estate becomes smaller and a breakpoint is hit, they will collapse.
You can try it yourself here: https://jsonforms-vuetify-renderers.netlify.app/
For the other renderer sets you have to implement this behavior yourself. However it’s relatively simply as all you need is a custom HorizontalRenderer which is able to do this.
How do I create a HorizontalRenderer which doesn’t has a renderer & tester?
The workaround I did is to create a media query that modifies the class of the material UI changing the direction to columns.
Hi @gianlucadibella,
What exactly is the use case? Using a custom renderer is a very easy way to modify the behavior here. Note that you could just register a single custom renderer for HorizontalLayout, VerticalLayout, Group etc. which then behaves appropriately.
Responsive form, on React it wasn’t responsive with Material UI renderers.
Now I was trying to use rules on a custom renderer to hide the component but it doesn’t work. Do you know how to fix this?
Hi @gianlucadibella,
Rules in general work. Please post the full schema and uischema where it doesn’t work for you.
Schema
{
"type": "object",
"title": "Caracterización de Usuario",
"required": [
"age_text",
"dni_text",
"rif_text",
"gender_select",
"hasCar_select",
"hasDebts_select",
"civilStatus_select",
"consignment_select",
"housingType_select",
"referFriend_refer",
"educationType_select",
"hasMotorcycle_select",
"hasSmartPhone_select",
"houseServices_select",
"educationLevel_select",
"hasOtherIncome_select",
"monthlyEarning_text",
"venezuelaState_select",
"enterpriseYears_text",
"monthlySpending_text",
"enterpriseSector_select",
"financingPurpose_text",
"houseYearsLiving_text",
"professionSector_select",
"enterpriseAddress_text",
"peopleLivingCount_text",
"amountWillingToPay_text",
"canDemostrateIncome_select",
"childrenUnder18Count_text",
"canDemostrateExpenses_select",
"childrenEducationLevel_select",
"monthlyEnterpriseCosts_text",
"housePeopleContributing_text",
"monthlyEnterpriseIncome_text",
"monthlyEnterpriseProfit_text",
"monthlyEnterpriseExpenses_text",
"childrenEducationSchoolType_select",
"banks_select",
"course_select",
"dealers_list",
"products_list",
"hascredit_select",
"enjoyMoney_select",
"enjoyParty_select",
"inCaseOfDebt_text",
"newYearParty_select",
"productBrand_select",
"referrerPhone_text",
"mostSellBrands_list",
"partyFrequency_select",
"mostSellProducts_list",
"communityProblems_text",
"paymentInstallment_select",
"activitiesPeriodicity_select",
"canDemostrateProducts_select",
"saveCash_select",
"saveMoney_select",
"reasonMoney_text",
"hasDollarBank_select",
"enterpriseSector_text",
"address_text"
],
"properties": {
"age_text": {
"type": "integer",
"title": "¿Cuál es tu edad?",
"maximum": 100,
"minimum": 1,
"placeholder": "Ingresa tu edad"
},
"dni_text": {
"type": "integer",
"title": "Cédula de Identidad",
"pattern": "^[V|E|P]-[0-9]{5,9}$",
"helpText": "Ejemplo: V-12345678",
"placeholder": "1234567890"
},
"rif_text": {
"type": "integer",
"title": "RIF",
"pattern": "^[J|G|P]-[0-9]{5,9}$$",
"helpText": "Ejemplo: J-12345678-9",
"placeholder": "1234567890"
},
"banks_select": {
"type": "array",
"items": {
"type": "string",
"anyOf": [
{
"const": "0156",
"title": "100%BANCO",
"value": "0156",
"label": "100%BANCO"
},
{
"const": "0172",
"title": "BANCAMIGA BANCO MICROFINANCIERO, C.A.",
"value": "0172",
"label": "BANCAMIGA BANCO MICROFINANCIERO, C.A."
}
]
},
"title": "¿En cuáles de los siguientes bancos tiene usted cuenta activa?",
"uniqueItems": true
},
"dealers_list": {
"type": "array",
"items": {
"type": "string",
"title": "Nombre del Distribuidor"
},
"title": "¿Cuales son sus distribuidores?",
"placeholder": "Nombre de tu distribuidor"
},
"carModel_text": {
"type": "string",
"title": "Modelo del Carro",
"showIf": "hasCar_select",
"placeholder": "Ingrese el modelo de su carro"
},
"enterpriseSector_text": {
"type": "string",
"title": "Especifique a que se dedica su negocio...",
"placeholder": "Ejemplo: venta de calzado, servicios de limpieza, etc."
},
"address_text": {
"type": "string",
"title": "¿Cuál es tu dirección de habitación?",
"placeholder": "Ejemplo: Av. 1 con calle 1, edificio 1, apto 1"
},
"course_select": {
"type": "boolean",
"oneOf": [
{
"const": true,
"title": "Si",
"value": true,
"label": "Si"
},
{
"const": false,
"title": "No",
"value": false,
"label": "No"
}
],
"title": "¿Desearía usted participar en nuestros cursos gratuitos de educación financiera y mercadeo con expertos del área?"
},
"gender_select": {
"type": "string",
"oneOf": [
{
"const": "masculino",
"title": "Masculino",
"value": "masculino",
"label": "Masculino"
},
{
"const": "femenino",
"title": "Femenino",
"value": "femenino",
"label": "Femenino"
}
],
"title": "¿Cuál es tu género?"
},
"hasCar_select": {
"type": "boolean",
"oneOf": [
{
"const": true,
"title": "Si",
"label": "Si",
"value": true
},
{
"const": false,
"title": "No",
"label": "No",
"value": false
}
],
"title": "¿Tienes carro?"
},
"products_list": {
"type": "array",
"items": {
"type": "string",
"title": "Nombre del Producto"
},
"title": "¿Qué productos compras para vender en tu negocio?",
"placeholder": "Ingrese el nombre del producto"
},
"tiktok_select": {
"type": "boolean",
"oneOf": [
{
"const": true,
"title": "Si",
"label": "Si",
"value": true
},
{
"const": false,
"title": "No",
"label" : "No",
"value": false
}
],
"title": "¿Tiene cuenta en TikTok?"
},
"twitter_select": {
"type": "boolean",
"oneOf": [
{
"const": true,
"title": "Si",
"label": "Si",
"value": true
},
{
"const": false,
"title": "No",
"label": "No",
"value": false
}
],
"title": "¿Tiene cuenta en Twitter?"
},
"facebook_select": {
"type": "boolean",
"oneOf": [
{
"const": true,
"title": "Si",
"label": "Si",
"value": true
},
{
"const": false,
"title": "No",
"label": "No",
"value": false
}
],
"title": "¿Tiene cuenta en Facebook?"
},
"hasDebts_select": {
"type": "boolean",
"oneOf": [
{
"const": true,
"title": "Si",
"label": "Si",
"value": true
},
{
"const": false,
"title": "No",
"label": "No",
"value": false
}
],
"title": "¿Tienes Deudas?"
},
"saveCash_select": {
"type": "boolean",
"oneOf": [
{
"const": true,
"title": "Si",
"label": "Si",
"value": true
},
{
"const": false,
"title": "No",
"label": "No",
"value": false
}
],
"title": "¿Ahorra usted efectivo?"
},
"tiktokName_text": {
"type": "string",
"title": "Nombre de usuario en TikTok",
"showIf": "tiktok_select",
"placeholder": "Ingrese el nombre de usuario"
},
"hascredit_select": {
"type": "boolean",
"oneOf": [
{
"const": true,
"title": "Si",
"label": "Si",
"value": true
},
{
"const": false,
"title": "No",
"label": "No",
"value": false
}
],
"title": "¿Ha tenido usted tarjetas de crédito u otro tipo de crédito en los últimos 10 años?"
},
"instagram_select": {
"type": "boolean",
"oneOf": [
{
"const": true,
"title": "Si",
"label": "Si",
"value": true
},
{
"const": false,
"title": "No",
"label": "No",
"value": false
}
],
"title": "¿Tiene cuenta en Instagram ?"
},
"reasonMoney_text": {
"type": "string",
"title": "¿Para qué utiliza sus ahorros?",
"placeholder": "Ahorro, inversión, viajes, etc."
},
"saveMoney_select": {
"type": "boolean",
"oneOf": [
{
"const": true,
"title": "Si",
"label": "Si",
"value": true
},
{
"const": false,
"title": "No",
"label": "No",
"value": false
}
],
"title": "¿Ha ahorrado en el último año?"
},
"twitterName_text": {
"type": "string",
"title": "Nombre de usuario en Twitter",
"showIf": "twitter_select",
"placeholder": "Ingrese el nombre de usuario"
},
"enjoyMoney_select": {
"type": "string",
"oneOf": [
{
"const": "totalmente-de-acuerdo",
"title": "Totalmente de acuerdo",
"value": "totalmente-de-acuerdo",
"label": "Totalmente de acuerdo"
},
{
"const": "parcialmente-de-acuerdo",
"title": "Parcialmente de acuerdo",
"value": "parcialmente-de-acuerdo",
"label": "Parcialmente de acuerdo"
}
],
"title": "El dinero hay que disfrutar en vida sin importar cómo"
},
"enjoyParty_select": {
"type": "boolean",
"oneOf": [
{
"const": true,
"title": "Si",
"label": "Si",
"value": true
},
{
"const": false,
"title": "No",
"label": "No",
"value": false
}
],
"title": "Por ley, los fines de semana voy a una rumba con mis panas"
},
"facebookName_text": {
"type": "string",
"title": "Nombre de usuario en Facebook",
"showIf": "facebook_select",
"placeholder": "Ingrese el nombre de usuario"
},
"inCaseOfDebt_text": {
"type": "string",
"title": "En caso de no poder cumplir con sus cuotas a la fecha de vencimiento del financiamiento",
"placeholder": "¿Cómo planea cubrir la deuda?"
},
"referFriend_refer": {
"type": "array",
"items": {
"anyOf": [
{
"type": "object",
"title": "Teléfono",
"properties": {
"name": {
"type": "string",
"title": "Nombre"
},
"telephone": {
"type": "string",
"title": "Teléfono",
"pattern": "^\\+(?:[0-9]){10,15}[0-9]$"
}
}
},
{
"type": "object",
"title": "Email",
"properties": {
"name": {
"type": "string",
"title": "Nombre"
},
"email": {
"type": "string",
"title": "Email",
"format": "email"
}
}
}
]
},
"title": "Refiere a tus amigos"
},
"civilStatus_select": {
"type": "string",
"oneOf": [
{
"const": "soltero",
"title": "Soltero",
"value": "soltero",
"label": "Soltero"
},
{
"const": "casado",
"title": "Casado",
"value": "casado",
"label": "Casado"
},
{
"const": "concubinato",
"title": "Concubinato",
"value": "concubinato",
"label": "Concubinato"
},
{
"const": "divorciado",
"title": "Divorciado",
"value": "divorciado",
"label": "Divorciado"
},
{
"const": "viudo",
"title": "Viudo",
"value": "viudo",
"label": "Viudo"
}
],
"title": "¿Cuál es tu Estado Civil?"
},
"consignment_select": {
"type": "boolean",
"oneOf": [
{
"const": true,
"title": "Si",
"label": "Si",
"value": true
},
{
"const": false,
"title": "No",
"label": "No",
"value": false
}
],
"title": "¿Usted recibe remesas?"
},
"creditBanks_select": {
"type": "array",
"items": {
"type": "string",
"anyOf": [
{
"const": "0156",
"title": "100%BANCO",
"value": "0156",
"label": "100%BANCO"
},
{
"const": "0172",
"title": "BANCAMIGA BANCO MICROFINANCIERO, C.A.",
"value": "0172",
"label": "BANCAMIGA BANCO MICROFINANCIERO, C.A."
}
]
},
"title": "¿En cuáles de los siguientes bancos tiene usted tarjeta de crédito u otro tipo de crédito?",
"showIf": "hascredit_select",
"uniqueItems": true
},
"housingType_select": {
"type": "string",
"oneOf": [
{
"const": "convivencia-familiar",
"title": "Convivencia Familiar",
"label": "Convivencia Familiar",
"value": "convivencia-familiar"
},
{
"const": "alquilada",
"title": "Alquilada",
"label": "Alquilada",
"value": "alquilada"
},
{
"const": "propia",
"title": "Propia",
"label": "Propia",
"value": "propia"
},
{
"const": "hipotecada",
"title": "Hipotecada",
"label": "Hipotecada",
"value": "hipotecada"
}
],
"title": "¿Cuál es el tipo de tu vivienda?"
},
"instagramName_text": {
"type": "string",
"title": "Nombre de usuario en Instagram",
"showIf": "instagram_select",
"placeholder": "Ingrese el nombre de usuario"
},
"referrerPhone_text": {
"type": "integer",
"title": "Número de télefono de la persona que te refirió",
"pattern": "^\\+(?:[0-9]){10,15}[0-9]$",
"placeholder": "(0414) 9998877"
},
"monthlyEarning_text": {
"type": "integer",
"title": "¿Cuánto gana usted al mes en promedio?",
"minimum": 0,
"placeholder": "Ingrese el monto en dólares"
},
"mostSellBrands_list": {
"type": "array",
"items": {
"type": "string",
"title": "Nombre de la Marca"
},
"title": "¿Cuáles son las marcas que más rotan en su negocio?",
"placeholder": "Ingrese el nombre de la marca"
},
"newYearParty_select": {
"type": "boolean",
"oneOf": [
{
"const": true,
"title": "Si",
"label": "Si",
"value": true
},
{
"const": false,
"title": "No",
"label": "No",
"value": false
}
],
"title": "Cuando hay una fiesta de año nuevo, ¿bebe hasta el amanecer?"
},
"productBrand_select": {
"type": "string",
"oneOf": [
{
"const": "genericos",
"title": "Genéricos",
"label" : "Genéricos",
"value" : "genericos"
},
{
"const": "marca",
"title": "Marca",
"label": "marca",
"value": "marca"
}
],
"title": "¿Prefiere usted comprar productos de marca o productos genéricos?"
},
"saveCashAmount_text": {
"type": "integer",
"title": "¿Cuánto tiene en dólares en efectivo?",
"showIf": "saveCash_select",
"placeholder": "Ingrese el monto"
},
"educationType_select": {
"type": "string",
"oneOf": [
{
"const": "publica",
"title": "Pública",
"label": "Pública",
"value": "publica"
},
{
"const": "privada",
"title": "Privada",
"label": "Privada",
"value": "privada"
},
{
"const": "no-estudia",
"title": "No estudia",
"label": "No estudia",
"value": "no-estudia"
},
{
"const": "no-aplica",
"title": "No aplica",
"label": "No aplica",
"value": "no-aplica"
}
],
"title": "¿Cuál su tipo de educación?"
},
"enterpriseYears_text": {
"type": "integer",
"title": "¿Cuántos años lleva con su negocio?",
"minimum": 0,
"placeholder": "Ingrese el número de años"
},
"hasDollarBank_select": {
"type": "boolean",
"oneOf": [
{
"const": true,
"title": "Si",
"label": "Si",
"value": true
},
{
"const": false,
"title": "No",
"label": "No",
"value": false
}
],
"title": "¿ Tiene cuenta bancaria verde o cuenta en dólares venezolana ?"
},
"hasMotorcycle_select": {
"type": "boolean",
"oneOf": [
{
"const": true,
"title": "Si",
"label": "Si",
"value": true
},
{
"const": false,
"title": "No",
"label": "No",
"value": false
}
],
"title": "¿Tienes Moto?"
},
"hasSmartPhone_select": {
"type": "boolean",
"oneOf": [
{
"const": true,
"title": "Si",
"label": "Si",
"value": true
},
{
"const": false,
"title": "No",
"label": "No",
"value": false
}
],
"title": "¿Tiene usted teléfono inteligente?"
},
"houseServices_select": {
"type": "array",
"items": {
"type": "string",
"anyOf": [
{
"const": "agua",
"title": "Agua",
"label": "Agua",
"value": "agua"
},
{
"const": "luz",
"title": "Luz",
"label": "Luz",
"value": "luz"
},
{
"const": "internet",
"title": "Internet (Netuno, Inter, Supercable, etc.)",
"label": "Internet (Netuno, Inter, Supercable, etc.)",
"value": "internet"
}
]
},
"title": "¿Cuáles son los servicios que tiene en su hogar?",
"uniqueItems": true
},
"monthlySpending_text": {
"type": "integer",
"title": "¿Cuánto gastas al mes en mercado?",
"minimum": 0,
"placeholder": "Ingrese el monto en dólares"
},
"motorCycleModel_text": {
"type": "string",
"title": "Modelo de la moto",
"showIf": "hasMotorcycle_select",
"placeholder": "Ingrese el modelo de su moto"
},
"smartPhoneModel_text": {
"type": "string",
"title": "Modelo del Smartphone",
"showIf": "hasSmartPhone_select",
"placeholder": "Ingrese el modelo de su celular"
},
"whyNotSaveMoney_text": {
"type": "string",
"title": "¿Por qué no ha ahorrado mensualmente?",
"showIf": "saveMoney_select",
"condition": false,
"placeholder": "Ingrese su respuesta"
},
"courseSuggestion_text": {
"type": "string",
"title": "¿Qué tema le gustaría que tratáramos en nuestros cursos?",
"showIf": "course_select",
"placeholder": "Invertir en la bolsa, emprender, etc."
},
"educationLevel_select": {
"type": "string",
"oneOf": [
{
"const": "primaria",
"title": "Primaria",
"label": "Primaria",
"value": "primaria"
},
{
"const": "bachiller",
"title": "Bachiller",
"label": "Bachiller",
"value": "bachiller"
},
{
"const": "tecnico-superior",
"title": "Técnico Superior",
"label": "Técnico Superior",
"value": "tecnico-superior"
},
{
"const": "universitario",
"title": "Universitario",
"label": "Universitario",
"value": "universitario"
},
{
"const": "postgrado",
"title": "Postgrado",
"label": "Postgrado",
"value": "postgrado"
},
{
"const": "doctorado",
"title": "Doctorado",
"label": "Doctorado",
"value": "doctorado"
},
{
"const": "no-estudia",
"title": "No estudia",
"label": "No estudia",
"value": "no-estudia"
},
{
"const": "no-aplica",
"title": "No aplica",
"label": "No aplica",
"value": "no-aplica"
}
],
"title": "¿Cuál es su nivel de educación?"
},
"financingPurpose_text": {
"type": "string",
"title": "¿Cuál es el destino de los fondos en caso de ser aprobado el financiamiento?",
"placeholder": "Ingrese el destino de los fondos"
},
"hasOtherIncome_select": {
"type": "boolean",
"oneOf": [
{
"const": true,
"title": "Si",
"label": "Si",
"value": true
},
{
"const": false,
"title": "No",
"label": "No",
"value": false
}
],
"title": "¿Tiene otros ingresos?"
},
"houseYearsLiving_text": {
"type": "integer",
"title": "¿Cuántos años tiene en la comunidad?",
"minimum": 0,
"placeholder": "10"
},
"mostSellProducts_list": {
"type": "array",
"items": {
"type": "string",
"title": "Nombre del Producto"
},
"title": "¿Cuáles son los productos que más rotan en su negocio?",
"placeholder": "Ingrese el nombre del producto"
},
"partyFrequency_select": {
"type": "string",
"oneOf": [
{
"const": "muy-a-menudo",
"title": "Muy a menudo",
"label": "Muy a menudo",
"value": "muy-a-menudo"
},
{
"const": "con-frecuencia",
"title": "Con frecuencia",
"label": "Con frecuencia",
"value": "con-frecuencia"
},
{
"const": "algunas-veces",
"title": "Algunas veces",
"label": "Algunas veces",
"value": "algunas-veces"
}
],
"title": "Los fines de semana me gusta salir con mis panas a tomar"
},
"venezuelaState_select": {
"type": "string",
"oneOf": [
{
"const": "amazonas",
"title": "Amazonas",
"label": "Amazonas",
"value": "amazonas"
},
{
"const": "anzoategui",
"title": "Anzoátegui",
"label": "Anzoátegui",
"value": "anzoategui"
},
{
"const": "apure",
"title": "Apure",
"label": "Apure",
"value": "apure"
},
{
"const": "aragua",
"title": "Aragua",
"label": "Aragua",
"value": "aragua"
},
{
"const": "barinas",
"title": "Barinas",
"label": "Barinas",
"value": "barinas"
},
{
"const": "bolivar",
"title": "Bolívar",
"label": "Bolívar",
"value": "bolivar"
}
],
"title": "¿En que estado resides?"
},
"communityProblems_text": {
"type": "string",
"title": "¿Cuáles son los problemas más fuertes o dolorosos de su comunidad?",
"placeholder": "Luz, agua, transporte, etc."
},
"enterpriseAddress_text": {
"type": "string",
"title": "¿Cuál es la dirección de su negocio?",
"placeholder": "Ingrese la dirección de su negocio"
},
"peopleLivingCount_text": {
"type": "integer",
"title": "¿Cuántas personas habitan en tu hogar?",
"minimum": 1,
"placeholder": "Ingresa cantidad de personas"
},
"amountWillingToPay_text": {
"type": "integer",
"title": "¿Cuál es el monto que está dispuesto a apartar mensualmente para pagar la deuda?",
"minimum": 0,
"placeholder": "Ingresa monto en dólares"
},
"enterpriseSector_select": {
"type": "string",
"oneOf": [
{
"const": "agricultura",
"title": "Agricultura",
"value": "agricultura",
"label": "Agricultura"
},
{
"const": "ganaderia",
"title": "Ganaderia",
"value": "ganaderia",
"label": "Ganaderia"
}
],
"title": "¿Cuál es el rubro del negocio?"
},
"professionSector_select": {
"type": "string",
"oneOf": [
{
"const": "agricultura",
"title": "Agricultura",
"value": "agricultura",
"label": "Agricultura"
},
{
"const": "ganaderia",
"title": "Ganaderia",
"value": "ganaderia",
"label": "Ganaderia"
},
{
"const": "pesca",
"title": "Pesca",
"value": "pesca",
"label": "Pesca"
}
],
"title": "¿Cual es tu profesión?"
},
"hasDollarBankAmount_text": {
"type": "integer",
"title": "¿Cuánto tiene en dólares en el banco?",
"showIf": "hasDollarBank_select",
"placeholder": "Ingrese el monto"
},
"hasOtherIncomeWhich_text": {
"type": "string",
"title": "¿Menciones sus otros ingresos?",
"showIf": "hasOtherIncome_select",
"placeholder": "Ejemplo: Alquileres, otro negocio, etc."
},
"childrenUnder18Count_text": {
"type": "integer",
"title": "¿Cuántos hijos menores de edad?",
"minimum": 0,
"placeholder": "Ingresa cantidad de hijos"
},
"paymentInstallment_select": {
"type": "string",
"oneOf": [
{
"const": "pequenas-cuotas-semanales",
"title": "Pequeñas cuotas Semanales",
"value": "pequenas-cuotas-semanales",
"label": "Pequeñas cuotas Semanales"
},
{
"const": "cuotas-medianas-mensuales",
"title": "Cuotas medianas Mensuales",
"value": "cuotas-medianas-mensuales",
"label": "Cuotas medianas Mensuales"
}
],
"title": "Prefiere usted ¿pagar en pequeñas cuotas semanales o cuotas medianas mensuales?"
},
"canDemostrateIncome_select": {
"type": "boolean",
"oneOf": [
{
"const": true,
"title": "Si",
"label": "Si",
"value": true
},
{
"const": false,
"title": "No",
"label": "No",
"value": false
}
],
"title": "¿Puede demostrar sus ingresos?"
},
"monthlyEnterpriseCosts_text": {
"type": "integer",
"title": "¿Cuáles son los costos de su negocio?",
"minimum": 0,
"placeholder": "Ingrese la cantidad en dólares"
},
"saveMoneyAmountMonthly_text": {
"type": "integer",
"title": "¿Cuánto ahorra mensualmente?",
"showIf": "saveMoney_select",
"placeholder": "Ingrese el monto en dólares"
},
"activitiesPeriodicity_select": {
"type": "string",
"oneOf": [
{
"const": "nunca",
"title": "Nunca",
"value": "nunca",
"label": "Nunca"
},
{
"const": "casi-nunca",
"title": "Casi Nunca",
"value": "casi-nunca",
"label": "Casi Nunca"
}
],
"title": "Prefiero dedicarme a varias actividades que a pocas"
},
"canDemostrateExpenses_select": {
"type": "boolean",
"oneOf": [
{
"const": true,
"title": "Si",
"label": "Si",
"value": true
},
{
"const": false,
"title": "No",
"label": "No",
"value": false
}
],
"title": "¿Puede demostrar sus gastos?"
},
"canDemostrateProducts_select": {
"type": "boolean",
"oneOf": [
{
"const": true,
"title": "Si",
"label": "Si",
"value": true
},
{
"const": false,
"title": "No",
"label": "No",
"value": false
}
],
"title": "¿Puedes demostrar los productos que vendes?"
},
"housePeopleContributing_text": {
"type": "integer",
"title": "¿Cuántas personas aportan financieramente en el hogar?",
"minimum": 1,
"placeholder": "Ingresa cantidad de personas"
},
"monthlyEnterpriseIncome_text": {
"type": "integer",
"title": "¿Cuál es el ingreso mensual de su negocio?",
"minimum": 0,
"placeholder": "Ingrese la cantidad en dólares"
},
"monthlyEnterpriseProfit_text": {
"type": "integer",
"title": "¿Cuál es la ganancia de su negocio?",
"minimum": 0,
"placeholder": "Ingrese la cantidad en dólares"
},
"childrenEducationLevel_select": {
"type": "string",
"oneOf": [
{
"const": "primaria",
"title": "Primaria",
"value": "primaria",
"label": "Primaria"
},
{
"const": "bachiller",
"title": "Bachiller",
"value": "bachiller",
"label": "Bachiller"
}
],
"title": "¿Cuál es el nivel de educación de tus hijos?"
},
"monthlyEnterpriseExpenses_text": {
"type": "integer",
"title": "¿Cuál es el gasto mensual de su negocio?",
"minimum": 0,
"placeholder": "Ingrese la cantidad en dólares"
},
"childrenEducationSchoolType_select": {
"type": "string",
"oneOf": [
{
"value": "publica",
"const": "publica",
"label": "Pública",
"title": "Pública"
},
{
"const": "privada",
"title": "Privada",
"value": "privada",
"label": "Privada"
}
],
"title": "¿Cuál es el tipo de educación de tus hijos?"
}
}
}
UI Schema, in the reply
UI SCHEMA
{
"type": "Group",
"label": "Duración estimada: 10 minutos",
"elements": [
{
"type": "Group",
"label": "Acerca de ti",
"elements": [
{
"type": "HorizontalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/age_text"
},
{
"type": "Control",
"scope": "#/properties/gender_select"
}
]
},
{
"type": "HorizontalLayout",
"elements": [
{
"type": "Control",
"label": "¿Cúal es tu cédula?",
"scope": "#/properties/dni_text"
},
{
"type": "Control",
"label": "¿Cuál es el RIF de tu negocio?",
"scope": "#/properties/rif_text"
}
]
},
{
"type": "HorizontalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/venezuelaState_select"
},
{
"type": "Control",
"scope": "#/properties/housingType_select"
}
]
},{
"type": "VerticalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/address_text"
}
]
}
]
},
{
"type": "Group",
"label": "Un poco más...",
"elements": [
{
"type": "HorizontalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/civilStatus_select"
},
{
"type": "Control",
"scope": "#/properties/houseYearsLiving_text"
}
]
},
{
"type": "HorizontalLayout",
"elements": [
{
"type": "Control",
"label": "¿Puedes demostrar tus ingresos?",
"scope": "#/properties/canDemostrateIncome_select"
},
{
"type": "Control",
"label": "¿Recibes remesa?",
"scope": "#/properties/consignment_select"
}
]
},
{
"type": "HorizontalLayout",
"elements": [
{
"type": "Control",
"label": "¿Puedes demostrar tus gastos?",
"scope": "#/properties/canDemostrateExpenses_select"
},
{
"type": "Control",
"scope": "#/properties/monthlyEarning_text"
}
]
}
]
},
{
"type": "Group",
"label": "Acerca tus bienes",
"elements": [
{
"type": "VerticalLayout",
"elements": [
{
"type": "Control",
"label": "¿Tienes carro?",
"scope": "#/properties/hasCar_select"
},
{
"rule": {
"effect": "SHOW",
"condition": {
"scope": "#/properties/hasCar_select",
"schema": {
"const": true
}
}
},
"type": "Control",
"scope": "#/properties/carModel_text"
},
{
"type": "Control",
"label": "¿Tienes Moto?",
"scope": "#/properties/hasMotorcycle_select"
},
{
"rule": {
"effect": "SHOW",
"condition": {
"scope": "#/properties/hasMotorcycle_select",
"schema": {
"const": true
}
}
},
"type": "Control",
"scope": "#/properties/motorCycleModel_text"
},
{
"type": "Control",
"label": "¿Tiene usted teléfono inteligente?",
"scope": "#/properties/hasSmartPhone_select"
},
{
"rule": {
"effect": "SHOW",
"condition": {
"scope": "#/properties/hasSmartPhone_select",
"schema": {
"const": true
}
}
},
"type": "Control",
"scope": "#/properties/smartPhoneModel_text"
}
]
}
]
},
{
"type": "Group",
"label": "Acerca tu familia",
"elements": [
{
"type": "HorizontalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/childrenUnder18Count_text"
},
{
"type": "Control",
"scope": "#/properties/peopleLivingCount_text"
}
]
},
{
"type": "VerticalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/housePeopleContributing_text"
}
]
},
{
"type": "HorizontalLayout",
"elements": [
{
"type": "Control",
"label": "¿Cuál es el nivel de educación de tus hijos?",
"scope": "#/properties/childrenEducationLevel_select"
},
{
"type": "Control",
"label": "¿Cuál es el tipo de educación de tus hijos?",
"scope": "#/properties/childrenEducationSchoolType_select"
}
]
}
]
},
{
"type": "Group",
"label": "Acerca tu profesión",
"elements": [
{
"type": "HorizontalLayout",
"elements": [
{
"type": "Control",
"label": "¿Cuál su nivel de educación?",
"scope": "#/properties/educationLevel_select"
},
{
"type": "Control",
"label": "¿Cuál su tipo de educación?",
"scope": "#/properties/educationType_select"
}
]
},
{
"type": "VerticalLayout",
"elements": [
{
"type": "Control",
"label": "¿Cuál es tu profesión?",
"scope": "#/properties/professionSector_select"
}
]
}
]
},
{
"type": "Group",
"label": "Servicios",
"elements": [
{
"type": "VerticalLayout",
"elements": [
{
"type": "Control",
"label": "¿Que servicios posee tu vivienda?",
"scope": "#/properties/houseServices_select"
}
]
}
]
},
{
"type": "Group",
"label": "Acerca tus finanzas",
"elements": [
{
"type": "HorizontalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/monthlySpending_text"
}
]
},
{
"type": "HorizontalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/monthlyEnterpriseIncome_text"
},
{
"type": "Control",
"scope": "#/properties/monthlyEnterpriseCosts_text"
}
]
},
{
"type": "HorizontalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/monthlyEnterpriseProfit_text"
},
{
"type": "Control",
"scope": "#/properties/monthlyEnterpriseExpenses_text"
}
]
}
]
},
{
"type": "Group",
"label": "Un poco más...",
"elements": [
{
"type": "HorizontalLayout",
"elements": [
{
"type": "Control",
"label": "¿Tienes Deudas?",
"scope": "#/properties/hasDebts_select"
},
{
"type": "Control",
"label": "¿Tiene otros ingresos?",
"scope": "#/properties/hasOtherIncome_select"
}
]
},
{
"type": "VerticalLayout",
"elements": [
{
"rule": {
"effect": "SHOW",
"condition": {
"scope": "#/properties/hasOtherIncome_select",
"schema": {
"const": true
}
}
},
"type": "Control",
"scope": "#/properties/hasOtherIncomeWhich_text"
},
{
"type": "Control",
"scope": "#/properties/amountWillingToPay_text"
}
]
},
{
"type": "HorizontalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/financingPurpose_text"
}
]
}
]
},
{
"type": "Group",
"label": "Acerca tu negocio",
"elements": [
{
"type": "VerticalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/enterpriseYears_text"
},
{
"type": "Control",
"label": "¿Cuál es el rubro del negocio?",
"scope": "#/properties/enterpriseSector_select"
},
{
"type": "Control",
"scope": "#/properties/enterpriseSector_text"
},
{
"type": "Control",
"scope": "#/properties/enterpriseAddress_text"
}
]
}
]
},
{
"type": "Group",
"elements": [
{
"type": "VerticalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/referFriend_refer"
}
]
}
]
},
{
"type": "Group",
"elements": [
{
"type": "VerticalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/mostSellBrands_list"
},
{
"type": "Control",
"scope": "#/properties/mostSellProducts_list"
},
{
"type": "Control",
"scope": "#/properties/products_list"
},
{
"type": "Control",
"scope": "#/properties/canDemostrateProducts_select"
}
]
}
]
},
{
"type": "Group",
"elements": [
{
"type": "VerticalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/dealers_list"
}
]
}
]
},
{
"type": "Group",
"label": "Acerca de ti y tu negocio",
"elements": [
{
"type": "VerticalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/inCaseOfDebt_text"
}
]
},
{
"type": "VerticalLayout",
"elements": [
{
"type": "Control",
"label": "El dinero hay que disfrutar en vida sin importar cómo",
"scope": "#/properties/enjoyMoney_select"
},
{
"type": "Control",
"label": "Por ley, los fines de semana voy a una rumba con mis panas",
"scope": "#/properties/enjoyParty_select"
}
]
},
{
"type": "VerticalLayout",
"elements": [
{
"type": "Control",
"label": "Los fines de semana me gusta salir con mis panas a tomar",
"scope": "#/properties/partyFrequency_select"
},
{
"type": "Control",
"label": "Cuando hay una fiesta de año nuevo, ¿bebe hasta el amanecer?",
"scope": "#/properties/newYearParty_select"
}
]
},
{
"type": "VerticalLayout",
"elements": [
{
"type": "Control",
"label": "Prefiere usted ¿pagar en pequeñas cuotas semanales o cuotas medianas mensuales?",
"scope": "#/properties/paymentInstallment_select"
},
{
"type": "Control",
"label": "Prefiero dedicarme a varias actividades que a pocas",
"scope": "#/properties/activitiesPeriodicity_select"
}
]
}
]
},
{
"type": "Group",
"label": "Cuéntanos más...",
"elements": [
{
"type": "HorizontalLayout",
"elements": [
{
"type": "Control",
"label": "¿Desearía usted participar en nuestros cursos gratuitos de educación financiera y mercadeo con expertos del área?",
"scope": "#/properties/course_select"
}
]
},
{
"type": "VerticalLayout",
"elements": [
{
"rule": {
"effect": "SHOW",
"condition": {
"scope": "#/properties/course_select",
"schema": {
"const": true
}
}
},
"type": "Control",
"scope": "#/properties/courseSuggestion_text"
}
]
},
{
"type": "VerticalLayout",
"elements": [
{
"type": "Control",
"label": "¿En cuáles de los siguientes bancos tiene usted cuenta activa?",
"scope": "#/properties/banks_select"
},
{
"type": "Control",
"label": "¿Ha tenido usted tarjetas de crédito u otro tipo de crédito en los últimos 10 años?",
"scope": "#/properties/hascredit_select"
},
{
"rule": {
"effect": "SHOW",
"condition": {
"scope": "#/properties/hascredit_select",
"schema": {
"const": true
}
}
},
"type": "Control",
"scope": "#/properties/creditBanks_select"
},
{
"type": "Control",
"label": "¿Prefiere usted comprar productos de marca o productos genéricos?",
"scope": "#/properties/productBrand_select"
}
]
},
{
"type": "VerticalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/communityProblems_text"
}
]
}
]
},
{
"type": "Group",
"label": "Tus redes sociales",
"elements": [
{
"type": "VerticalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/facebook_select"
},
{
"type": "Control",
"scope": "#/properties/tiktok_select"
},
{
"type": "Control",
"scope": "#/properties/instagram_select"
},
{
"type": "Control",
"scope": "#/properties/twitter_select"
},
{
"rule": {
"effect": "SHOW",
"condition": {
"scope": "#/properties/facebook_select",
"schema": {
"const": true
}
}
},
"type": "Control",
"scope": "#/properties/facebookName_text"
},
{
"rule": {
"effect": "SHOW",
"condition": {
"scope": "#/properties/tiktok_select",
"schema": {
"const": true
}
}
},
"type": "Control",
"scope": "#/properties/tiktokName_text"
},
{
"rule": {
"effect": "SHOW",
"condition": {
"scope": "#/properties/instagram_select",
"schema": {
"const": true
}
}
},
"type": "Control",
"scope": "#/properties/instagramName_text"
},
{
"rule": {
"effect": "SHOW",
"condition": {
"scope": "#/properties/twitter_select",
"schema": {
"const": true
}
}
},
"type": "Control",
"scope": "#/properties/twitterName_text"
},
{
"type": "Control",
"scope": "#/properties/referrerPhone_text"
}
]
}
]
},
{
"type": "Group",
"label": "Tus finanzas",
"elements": [
{
"type": "VerticalLayout",
"elements": [
{
"type": "Control",
"label": "¿Ha ahorrado en el último año?",
"scope": "#/properties/saveMoney_select"
},
{
"rule": {
"effect": "SHOW",
"condition": {
"scope": "#/properties/saveMoney_select",
"schema": {
"const": false
}
}
},
"type": "Control",
"scope": "#/properties/whyNotSaveMoney_text"
},
{
"rule": {
"effect": "SHOW",
"condition": {
"scope": "#/properties/saveMoney_select",
"schema": {
"const": true
}
}
},
"type": "Control",
"scope": "#/properties/saveMoneyAmountMonthly_text"
},
{
"type": "Control",
"label": "¿ Tiene cuenta bancaria verde o cuenta en dólares venezolana ?",
"scope": "#/properties/hasDollarBank_select"
},
{
"rule": {
"effect": "SHOW",
"condition": {
"scope": "#/properties/hasDollarBank_select",
"schema": {
"const": true
}
}
},
"type": "Control",
"scope": "#/properties/hasDollarBankAmount_text"
},
{
"type": "Control",
"label": "¿Ahorra usted efectivo?",
"scope": "#/properties/saveCash_select"
},
{
"rule": {
"effect": "SHOW",
"condition": {
"scope": "#/properties/saveCash_select",
"schema": {
"const": true
}
}
},
"type": "Control",
"scope": "#/properties/saveCashAmount_text"
}
]
},
{
"type": "VerticalLayout",
"elements": [
{
"type": "Control",
"label": "¿Para qué utiliza sus ahorros?",
"scope": "#/properties/reasonMoney_text"
}
]
}
]
}
]
}
The effects defined in the UI Schema aren’t working. I did some workaround on the Custom Render to hide it. Some components on the schema have this “showIf” property. Depending on the showIf value, I show or hide the element in the frontend.
It is a temporal fix until I get it to work with the UI Schema effects.