Location Widget (Custom Cascading Dropdowns) is a form component that allows hierarchical selection of geographic locations, from broad categories like province or country down to fine-grained levels such as village. It dynamically populates child dropdowns based on the parent selection.
The Location Widget is designed to capture structured geographic data in a form. Key aspects include:
Country or International City. Enabling them can lock configurations to prevent accidental edits.nonConfigurable) when certain top-level options are enabled to maintain consistency.required selection and custom validations.Complete JSON Object
The location widget remains as a configurable customcascadingdropdowns as long you do not enable the Country and International City options in the configuration ie. you can set from PROVINCE down to Village and alwasy keep configuing these valeus in the drag and drop view.
{
"key": "LocalLocationbzM3wTV0OB",
"id": "LocalLocationbzM3w",
"type": "customcascadingdropdowns",
"props": {
"label": "Location Widget",
"configs": [
{
"key": "PROVINCEieiGe",
"label": "Location Widget Province",
"parent": null,
"dataset": {
"url": "/admin/v1/dataset-items/by-dataset-code/PROVINCE",
"dataField": "data",
"useBaseUrl": true
},
"required": false,
"bindlabel": "label",
"bindvalue": "",
"placeholder": "Select Location Widget Province"
},
{
"key": "DISTRICTieiGe",
"label": "Location Widget District",
"parent": "PROVINCEieiGe",
"dataset": {
"url": "/admin/v1/dataset-items/by-details",
"dataField": "data",
"useBaseUrl": true
},
"required": false,
"bindlabel": "label",
"bindvalue": "",
"placeholder": "Select Location Widget District",
"parentBindKey": "id"
},
{
"key": "SECTORieiGe",
"label": "Location Widget Sector",
"parent": "DISTRICTieiGe",
"dataset": {
"url": "/admin/v1/dataset-items/by-details",
"dataField": "data",
"useBaseUrl": true
},
"required": false,
"bindlabel": "label",
"bindvalue": "",
"placeholder": "Select Location Widget Sector",
"parentBindKey": "id"
},
{
"key": "CELLieiGe",
"label": "Location Widget Cell",
"parent": "SECTORieiGe",
"dataset": {
"url": "/admin/v1/dataset-items/by-details",
"dataField": "data",
"useBaseUrl": true
},
"required": false,
"bindlabel": "label",
"bindvalue": "",
"placeholder": "Select Location Widget Cell",
"parentBindKey": "id"
},
{
"key": "VILLAGEieiGe",
"label": "Location Widget Village",
"parent": "CELLieiGe",
"dataset": {
"url": "/admin/v1/dataset-items/by-details",
"dataField": "data",
"useBaseUrl": true
},
"required": false,
"bindlabel": "label",
"bindvalue": "",
"placeholder": "Select Location Widget Village",
"parentBindKey": "id"
}
],
"required": false,
"nonConfigurable": false,
"dragDisabled": true,
"placeholder": "",
"disabled": false
},
"expressions": {},
"validation": {
"messages": {}
},
"fieldGroup": [],
"wrappers": [
"form-field",
"field-wrapper",
"hidden-field-wrapper",
"hint-field-wrapper",
"irembogov-readonly-wrapper"
]
}
Once you enable COUNTRY as the topmost level drop down, the drag and drop builder adds the country field and the City input field and prevents future configuration on all 3 fields (customcascadingdropdowns , customdropdownpaginated, input) by setting/adding the property field.props.nonConfigurable to true.
{
"key": "CountryxqB4Y",
"id": "CountryxqB4Y",
"type": "customdropdownpaginated",
"props": {
"label": "Location Widget: Country",
"nonConfigurable": true,
"dragDisabled": true,
"useBaseUrl": true,
"dataset": {
"url": "/admin/v1/dataset-items/by-dataset-code/COUNTRY",
"params": {
"size": 50
},
"dataField": "data",
"pagination": "true",
"searching": false
},
"bindLabel": "label",
"bindValue": "label",
"placeholder": "",
"disabled": false,
"hidden": false
},
"expressions": {
"hide": "false"
},
"validation": {
"messages": {}
},
"fieldGroup": [],
"wrappers": [
"form-field",
"field-wrapper",
"hidden-field-wrapper",
"hint-field-wrapper",
"irembogov-readonly-wrapper"
]
},
{
"key": "LocalLocationfgL0H",
"id": "LocalLocationfgL0H",
"type": "customcascadingdropdowns",
"props": {
"label": "Location Widget: Local Location",
"configs": [
{
"key": "PROVINCEdjBwI",
"label": "Location Widget: Local Location Province",
"parent": null,
"dataset": {
"url": "/admin/v1/dataset-items/by-dataset-code/PROVINCE",
"dataField": "data",
"useBaseUrl": true
},
"required": false,
"bindlabel": "label",
"bindvalue": "",
"placeholder": "Select Location Widget: Local Location Province"
},
{
"key": "DISTRICTdjBwI",
"label": "Location Widget: Local Location District",
"parent": "PROVINCEdjBwI",
"dataset": {
"url": "/admin/v1/dataset-items/by-details",
"dataField": "data",
"useBaseUrl": true
},
"required": false,
"bindlabel": "label",
"bindvalue": "",
"placeholder": "Select Location Widget: Local Location District",
"parentBindKey": "id"
},
{
"key": "SECTORdjBwI",
"label": "Location Widget: Local Location Sector",
"parent": "DISTRICTdjBwI",
"dataset": {
"url": "/admin/v1/dataset-items/by-details",
"dataField": "data",
"useBaseUrl": true
},
"required": false,
"bindlabel": "label",
"bindvalue": "",
"placeholder": "Select Location Widget: Local Location Sector",
"parentBindKey": "id"
},
{
"key": "CELLdjBwI",
"label": "Location Widget: Local Location Cell",
"parent": "SECTORdjBwI",
"dataset": {
"url": "/admin/v1/dataset-items/by-details",
"dataField": "data",
"useBaseUrl": true
},
"required": false,
"bindlabel": "label",
"bindvalue": "",
"placeholder": "Select Location Widget: Local Location Cell",
"parentBindKey": "id"
},
{
"key": "VILLAGEdjBwI",
"label": "Location Widget: Local Location Village",
"parent": "CELLdjBwI",
"dataset": {
"url": "/admin/v1/dataset-items/by-details",
"dataField": "data",
"useBaseUrl": true
},
"required": false,
"bindlabel": "label",
"bindvalue": "",
"placeholder": "Select Location Widget: Local Location Village",
"parentBindKey": "id"
}
],
"required": false,
"nonConfigurable": true,
"dragDisabled": true,
"placeholder": "",
"disabled": false,
"hidden": true
},
"expressions": {
"hide": "model?.CountryxqB4Y?.toLowerCase() !== 'rwanda'"
},
"validation": {
"messages": {}
},
"fieldGroup": [],
"wrappers": [
"form-field",
"field-wrapper",
"hidden-field-wrapper",
"hint-field-wrapper",
"irembogov-readonly-wrapper"
]
},
{
"key": "LocationCityqlHwo",
"id": "LocationCityqlHwo",
"type": "input",
"props": {
"nonConfigurable": true,
"dragDisabled": true,
"label": "Location Widget: City",
"disabled": false,
"required": true,
"placeholder": "",
"hidden": false
},
"expressions": {
"hide": "model?.CountryxqB4Y?.toLowerCase() === 'rwanda'",
"props.required": "model?.CountryxqB4Y?.toLowerCase() !== 'rwanda'"
},
"validation": {
"messages": {}
},
"fieldGroup": [],
"wrappers": [
"form-field",
"field-wrapper",
"hidden-field-wrapper",
"hint-field-wrapper",
"irembogov-readonly-wrapper"
]
}
Allowed Custom Properties
Allowed Validations
validator-(n)