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 host and port automatically.
// url: 'http://: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
👉 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'],
},
}],
[{
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'],
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'],
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;
`,
}]
}
}]
]
}
};
Interface Documentation
export interface IDBMasterConfigFormField {
/** It is used to find element. */
hiddenId?: string;
label?: string;
/** This text will be displayed under control in small. HTML supported. */
helpText?: string;
path?: string;
control: EDBMasterFormControl;
/** if true, that control will take focus automatically. */
autofocus?: boolean;
/** if true, control will be disabled. If string provides, it will evaluate that string and enable/disable based on that. */
disabled?: boolean | string;
/** if true or undefined, control will be visible. If string provides, it will evaluate that string and make it visible/invisible based on that. */
visible?: boolean | string;
validations?: Pick<IPropertyValidation, 'required'>;
validationErrors?: {
required?: string;
};
dropdownSettings?: {
/** Give style object in angular style. */
style?: any;
/** custom CSS class to assign to control */
cssClass?: string,
placeholder?: string;
showClear?: boolean;
dataSource: 'static_data' | 'db_data' | 'api_call'; // custom_code = We can call any API in that.
/** it will use used when dataSource is 'static_data'. */
staticData?: any[]; // { label: string; value: any; }[] works default.
/**
* it can pickup IDB values from schema also.
*/
dbData?: Partial<Pick<ICollectionIdentity, 'instance' | 'database' | 'collection' | 'table'>
& Pick<IQueryFormat, 'find' | 'select' | 'limit' | 'deep' | 'sort'>>;
/** Default : label */
optionLabel?: string;
/** Default : value */
optionValue?: string;
filter?: boolean;
/** one field or multiple comma separated fields are supported without any space in between. */
filterBy?: string;
filterMatchMode?: 'contains' | 'startsWith' | 'endsWith' | 'equals' | 'notEquals' | 'in' | 'lt' | 'lte' | 'gt' | 'gte';
/** Default : false, if true it will get latest data when form opens for add/edit operation. */
alwaysGetLatestDataOnFormOpen?: boolean;
/** Default : false, Make it true to handle huge amount of data. */
virtualScroll?: boolean;
/** on value change of current dropdown, it will change values of these dropdowns and reload them. */
reloadDropdownsOfPath?: string[];
/** API call will happen when these values of path are present in formData */
isDependentOnPath?: string[];
jsCode?: {
/**
* modifyDropdownRequest = It will run before hitting API call. So we can do whatever we want.<br/>
* onceDropdownDataLoaded = Execute code when dropdown data is loaded.<br/>
*
* Available variables:<br/>
* body: IQueryFormat | any. Useful to modify apiCallOverrides also,<br/>
* formData: any = Entire form object<br/>
* column: IDBMasterConfigFormField = Configuration of that form column. column.dropdownSettings?.dbData?.find will be query to get data. <br/>
* allDropdownDataMap: {[path: string]: any[]} = Map of all dropdown data<br/>
* dropdownData: any[] = Latest loaded dropdown data<br/>
* reloadDropdownsOfPath: string[] = Add path to this variable to reload its dropdown data.<br/>
* globalData: any = User will send it using SET_GLOBAL_DATA_TO_USE_IN_ANY_SCRIPT event from parent.<br/>
* utils: any = Common utility functions for user to use. <br/>
* queryParams: any = Query params received from URL. <br/>
*/
appendTo: EDBMasterDropdownAppendTo,
/**
* // dropdownData is available to use.
*
* // Return promise for long awaiting tasks.
* new Promise(async (resolve, reject) => {
* await new Promise(r => setTimeout(r, 3000));
* dropdownData[0].name = 'Sample data';
* resolve();
* });
*
* // Directly modify data of grid
* dropdownData[0].name = 'Sample data';
*
* // Return function
* (function setData() { dropdownData[0].name = 'Sample data'; } );
*
*/
code: string,
}[],
addNewFormConfig?: IDBMasterConfig;
apiCallOverrides?: IDBMasterAPICallOverrides;
};
}
export interface IPropertyValidation {
required?: boolean; // Allowed Types : *
min?: number; // Allowed Types : number | date
max?: number; // Allowed Types : number | date
minLength?: number; // Allowed Types : string
maxLength?: number; // Allowed Types : string
unique?: boolean;
email?: boolean; // Allowed Types : string
validatorFun?: Function;
}
export enum EDBMasterDropdownAppendTo {
visible = 'visible',
disabled = 'disabled',
modifyDropdownRequest = 'modifyDropdownRequest',
onceDropdownDataLoaded = 'onceDropdownDataLoaded',
onChange = 'onChange',
}
export enum EDBMasterFormControl {
input = 'input',
inputNumber = 'inputNumber',
inputMask = 'inputMask',
inputOtp = 'inputOtp',
password = 'password',
date_picker = 'date_picker',
textarea = 'textarea',
checkbox = 'checkbox',
radio = 'radio',
color_picker = 'color_picker',
dropdown = 'dropdown',
file_upload = 'file_upload',
grid = 'grid',
divider = 'divider',
// Field holder controls
accordion = 'accordion',
tab_view = 'tab_view',
// utility controls
button = 'button',
image = 'image',
customHTML = 'customHTML',
}