Dropdown Form Control
Show dropdown with database data
let dbMasterConfig: T.IDBMasterConfig = {
form: {
fields: [
[{
label: 'Person',
control: T.EDBMasterFormControl.dropdown,
path: 'person_id',
dropdownSettings: {
showClear: true,
dataSource: 'db_data',
dbData: { // Optional, it can pickup instance,database,collection details from schema.
collection: 'persons',
select: 'person_name, mobile_no, _id'
},
optionLabel: 'person_name', // 👈 It will be displayed in UI, HTML supported
optionValue: '_id', // 👈 It will be saved in database.
filter: true,
filterBy: 'person_name,mobile_no,_id',
// filterBy: 'person_name',
filterMatchMode: 'contains',
// virtualScroll: false,
alwaysGetLatestDataOnFormOpen: true,
},
validations: {
required: true,
}
}]
]
}
};
Show static data
let dbMasterConfig: T.IDBMasterConfig = {
form: {
fields: [
[{
label: 'Gender',
control: T.EDBMasterFormControl.dropdown,
path: 'gender',
dropdownSettings: {
showClear: true,
dataSource: 'static_data',
staticData: [{
label: 'Male', // Shown In UI
value: 'male', // Saved In DB
data: 'some other property data 1',
}, {
label: 'Female',
value: 'female',
data: 'some other property data 1',
}],
optionLabel: 'label', // 👈 It will be displayed in UI, HTML supported
optionValue: 'value', // 👈 It will be saved in database.
filter: true,
filterBy: 'label',
filterMatchMode: 'contains',
},
validations: {
required: true,
}
}]
]
}
};
Show data from custom API
let dbMasterConfig: T.IDBMasterConfig = {
form: {
fields: [
[{
label: 'Cities',
control: T.EDBMasterFormControl.dropdown,
path: 'city_id',
dropdownSettings: {
dataSource: 'api_call',
optionLabel: 'city_name',
optionValue: '_id',
apiCallOverrides: {
// :userPath = it will be replaced with admin user path by master page automatically.
// :beHostPort = it will be replaced with API Maker backend's protocol and host and port automatically. ex : https://example.com
// url: ':beHostPort/api/custom-api/:userPath/list-of-cities', // 👈 Use this to make it dynamic
url: 'http://localhost:38246/api/custom-api/admin/list-of-cities',
},
jsCode: [{
appendTo: T.EDBMasterDropdownAppendTo.modifyDropdownRequest,
code: `
reqBody.state_id = formData.state_id;
console.log(body);
`
}],
},
}]
]
}
};
Add new item support
let dbMasterConfig: T.IDBMasterConfig = {
form: {
fields: [
[{
label: 'Product Categories',
control: T.EDBMasterFormControl.dropdown,
path: 'product_category_id',
dropdownSettings: {
showClear: true,
dataSource: 'db_data',
dbData: {
collection: 'product_categories',
select: 'name'
},
optionLabel: 'name',
optionValue: '_id',
addNewFormConfig: { // 👈 Opens add product category & saves & reloads dropdown
screenName: 'Product Category',
form: {
width: '500px',
fields: [
[{ // field
label: 'Name',
control: T.EDBMasterFormControl.input,
path: 'name',
}]
]
}
}
},
validations: {
required: true,
}
}]
]
}
};
Dependent Dropdowns | Auto Completes | Multi Selects
👉 It supports N level of dependent dropdowns with any type of complexity.
let dbMasterConfig: T.IDBMasterConfig = {
form: {
fields: [
[{
path: 'planetId',
control: T.EDBMasterFormControl.dropdown,
dropdownSettings: {
showClear: true,
dataSource: 'db_data',
dbData: {
collection: 'ui_maker_planet',
},
optionValue: '_id',
optionLabel: 'name',
reloadDropdownsOfPath: ['continentId'], // 👈 dropdown | auto complete | multi select path
},
}],
[{
path: 'continentId',
control: T.EDBMasterFormControl.dropdown,
dropdownSettings: {
showClear: true,
dataSource: 'db_data',
dbData: {
collection: 'ui_maker_continent',
},
optionValue: '_id',
optionLabel: 'name',
isDependentOnPath: ['planetId'],
reloadDropdownsOfPath: ['countryId'], // 👈 dropdown | auto complete | multi select path
jsCode: [{
appendTo: T.EDBMasterDropdownAppendTo.modifyDropdownRequest,
code: `
reqBody.find.planetId = formData.planetId;
`,
}]
}
}],
[{
path: 'countryId',
control: T.EDBMasterFormControl.dropdown,
dropdownSettings: {
showClear: true,
dataSource: 'db_data',
dbData: {
collection: 'ui_maker_country',
},
optionValue: '_id',
optionLabel: 'name',
isDependentOnPath: ['continentId'],
reloadDropdownsOfPath: ['stateId'], // 👈 dropdown | auto complete | multi select path
jsCode: [{
appendTo: T.EDBMasterDropdownAppendTo.modifyDropdownRequest,
code: `
reqBody.find.continentId = formData.continentId;
`,
}]
}
}],
[{
path: 'stateId',
control: T.EDBMasterFormControl.dropdown,
dropdownSettings: {
showClear: true,
dataSource: 'db_data',
dbData: {
collection: 'ui_maker_states',
},
optionValue: '_id',
optionLabel: 'name',
isDependentOnPath: ['countryId'],
jsCode: [{
appendTo: T.EDBMasterDropdownAppendTo.modifyDropdownRequest,
code: `
reqBody.find.countryId = formData.countryId;
`,
}]
}
}]
]
}
};