Drop-down of departamento and dependent municipio

[narvaezcarlos]

i want show in a vtex form two dependent drop-down, try use json schema to define an departamento porperty and municpio propertye that change whet departamente change but i dont know how tu get this

this myjson schema

{
“name”: “Registro”,
“schema”: {
“title”: “Registro”,
“type”: “object”,
“properties”: {
“nombre”: {
“type”: “string”,
“title”: “Nombre”,
“description”: “Ingrese su nombre”
},
“apellido”: {
“type”: “string”,
“title”: “Apellido”,
“description”: “Ingrese su apellido”
},
“tipoDocumento”: {
“title”: “Tpo de documento”,
“type”: “string”,
“enum”: [
“Cédula de ciudadania”,
“Tarjeta de extranjería”,
“Cédula de extranjería”,
“NIT”,
“Pasaporte”
]
},
“numDocumento”: {
“title”: “Documento”,
“type”: “string”,
“description”: “Ingrese su número de documento”
},
“celular”: {
“title”: “Telefono”,
“type”: “string”,
“description”: “Ingrese su teléfono”
},
“email”: {
“title”: “Email”,
“type”: “string”,
“format”: “email”,
“description”: “Ingrese su email”
},
“habeasData”: {
“type”: “boolean”,
“title”: “¿Acepta términos y condiciones?”
},
“tipoCliente”: {
“title”: “Tipo de Cliente”,
“type”: “string”
},
“departamento”: {
“title”: “Departamento”,
“type”: “string”,
“enum”: [
“Amazonas”,
“Antioquia”,
“Arauca”,
“Atlántico”,
“Bogotá, D.C.”,
“Bolívar”,
“Boyacá”,
“Caldas”,
“Caquetá”,
“Casanare”,
“Cesar”,
“Chocó”,
“Córdoba”,
“Cundinamarca”,
“Guainía”,
“Guaviare”,
“Huila”,
“La Guajira”,
“Magdalena”,
“Meta”,
“Nariño”,
“Norte De Santander”,
“Putumayo”,
“Quindio”,
“Risaralda”,
“San Andrés, Providencia Y Santa Catalina”,
“Santander”,
“Sucre”,
“Tolima”,
“Valle Del Cauca”,
“Vaupés”,
“Vichada”
]
},
“municipio”: {
“title”: “Municipio”,
“type”: “string”,
“enum”: [“Leticia”, “Puerto Nariño”],
“if”: {
“properties”: { “departamento”: { “const”: “Amazonas” } }
}
},
“gananciaMes”: {
“title”: “Ganancias del mes”,
“type”: “string”
},
“customUrl”: {
“title”: “Link personalizado”,
“type”: “string”
}
}
}
}

and this my field form

"form-input.dropdown#departamento-embajadora-register": {
	"props": {
		"pointer": "#/properties/departamento",
		"placeholder": "Departamento"
	}
},
"form-input.dropdown#municipio-embajadora-register": {
	"props": {
		"pointer": "#/properties/municipio",
		"placeholder": "Municipio"
	}
},

[KarinaMota]

Hi Carlos!

We’re revisiting some topics in our community that remained unanswered, and I found yours!

We found an example of a schema that has exactly the functionality you need here:

Default value of field dependent on drop down not being updated

I’ll leave here an example of how your schema should be:

{
  "title": "Optional Components",
  "required": [
    "component"
  ],
  "properties": {
    "component": {
      "title": "Component",
      "type": "object",
      "properties": {
        "component": {
          "title": "Component",
          "type": "string",
          "enum": [
            "São Paulo",
            "Rio de Janeiro"
          ]
        }
      },
      "required": [
        "component"
      ],
      "dependencies": {
        "component": {
          "oneOf": [
            {
              "properties": {
                "component": {
                  "enum": [
                    "São Paulo"
                  ]
                },
                "template": {
                  "type": "string",
                  "enum": [
                    "São Paulo",
                    "Santos",
                    "Campinas"
                  ]
                }
              }
            },
            {
              "properties": {
                "component": {
                  "enum": [
                    "Rio de Janeiro"
                  ]
                },
                "template": {
                  "type": "string",
                  "enum": [
                    "Rio de Janeiro",
                    "Niterói",
                    "São Gonçalo"
                  ]
                }
              }
            }
          ]
        }
      }
    }
  }
}

Karina Mota
Field Software Engineer | VTEX