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;
/** database field name, UI control value will be saved on this property in save/update object. */
path?: string;
/** UI control type */
control?: EDBMasterFormControl;
/**
* Default : col-lg mt-4 col-md-{ 12 / ((columns.length === 2 ? 4 : columns.length) / 2) } <br/>
* It will be applied to parent div which holds UI control in it.
* */
cssClassDiv?: string;
/** 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;
/** Generates UI controls. */
fields?: IDBMasterConfigFormField[][];
validations?: Pick<IPropertyValidation, 'required'>;
validationErrors?: {
required?: string;
};
textAreaSettings?: {
/** Give style object in angular style. */
style?: any;
placeholder?: string;
rows?: number;
autoResize?: boolean;
/** Maximum number of character allows in the input field. */
maxLength?: number;
/** Advisory information to display in a tooltip on hover. */
tooltip?: string;
/** Type of CSS position. */
tooltipPosition?: 'left' | 'top' | 'bottom' | 'right';
tooltipStyleClass?: string;
jsCode?: {
/**
* Available variables:<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/>
* 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/>
* config: IDBMasterConfigFormField <br/>
* event: any <br/>
*/
appendTo: EDBMasterTextAreaAppendTo,
/**
* // 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,
}[],
};
inputTextSettings?: {
/** Give style object in angular style. */
style?: any;
placeholder?: string;
/** Default is off */
autocomplete?: 'on' | 'off' | undefined;
/** Default is false */
spellcheck?: 'true' | 'false' | undefined;
/** Maximum number of character allows in the input field. */
maxLength?: number;
/** Minimum number of character allows in the input field. */
minLength?: number;
/** Advisory information to display in a tooltip on hover. */
tooltip?: string;
/** Type of CSS position. */
tooltipPosition?: 'left' | 'top' | 'bottom' | 'right';
tooltipStyleClass?: string;
jsCode?: {
/**
* Available variables:<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/>
* 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/>
* config: IDBMasterConfigFormField <br/>
* event: any <br/>
*/
appendTo: EDBMasterInputTextAppendTo,
/**
* // 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,
}[],
validationErrors?: {
minLength?: string;
};
};
/** Doc : https://primeng.org/inputnumber */
inputNumberSettings?: {
/** Give style object in angular style. */
style?: any;
/** custom CSS class to assign to control */
cssClass?: string,
placeholder?: string;
min?: number;
max?: number;
minFractionDigits?: number;
mode?: 'decimal' | 'currency' | '';
/** The currency to use in currency formatting. Possible values are the ISO 4217 currency codes, such as "USD" for the US dollar, "EUR" for the euro, or "CNY" for the Chinese RMB. There is no default value; if the style is "currency", the currency property must be provided. */
currency?: string;
/** Default : 'en-US' */
locale?: string;
prefix?: string;
suffix?: string;
// buttons
showButtons?: boolean;
/** Default : stacked */
buttonLayout?: 'stacked' | 'horizontal' | 'vertical';
step?: number;
/** Whether to use grouping separators, such as thousands separators or thousand/lakh/crore separators. */
useGrouping?: boolean;
/** Maximum number of character allows in the input field. */
maxLength?: number;
/** Minimum number of character allows in the input field. */
minLength?: number;
/** Advisory information to display in a tooltip on hover. */
tooltip?: string;
/** Type of CSS position. */
tooltipPosition?: 'left' | 'top' | 'bottom' | 'right';
tooltipStyleClass?: string;
jsCode?: {
/**
* Available variables:<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/>
* 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/>
* config: IDBMasterConfigFormField <br/>
* event: any <br/>
*/
appendTo: EDBMasterInputNumberAppendTo,
/**
* // 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,
}[],
validationErrors?: {
minLength?: string;
};
};
inputMaskSettings?: {
/** Give style object in angular style. */
style?: any;
/** custom CSS class to assign to control */
cssClass?: string,
/** Ex : mask="99-999999", mask="(999) 999-9999? x99999" <br/>
* Mask format can be a combination of the following definitions; <br/>
* a for alphabetic characters, <br/>
* 9 for numeric characters and <br/>
* * for alphanumeric characters. <br/>
* In addition, formatting characters like ( , ) , - are also accepted. <br/>
*
* ? is used to mark anything after the question mark optional. <br/>
* */
mask?: string;
/** Advisory information to display on input. */
placeholder?: string;
/** Ex : slotChar="mm/dd/yyyy" <br/>
* Default placeholder for a mask is underscore that can be customized using slotChar property.
* */
slotChar?: string;
/** Default : true, Clears the incomplete value on blur. */
autoClear?: boolean;
/** Maximum number of character allows in the input field. */
maxLength?: number;
/** Advisory information to display in a tooltip on hover. */
tooltip?: string;
/** Type of CSS position. */
tooltipPosition?: 'left' | 'top' | 'bottom' | 'right';
tooltipStyleClass?: string;
jsCode?: {
/**
* Available variables:<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/>
* 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/>
* config: IDBMasterConfigFormField <br/>
* event: any <br/>
*/
appendTo: EDBMasterInputMaskAppendTo,
/**
* // 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,
}[],
};
inputOtpSettings?: {
/** Give style object in angular style. */
style?: any;
/** Enable the mask option to hide the values in the input fields. */
mask?: boolean;
/** When integerOnly is present, only integers can be accepted as input. */
integerOnly?: boolean;
/** Default : 300px; */
uiControlWidth?: string;
/** Number of characters to initiate. */
length?: number;
/** Advisory information to display in a tooltip on hover. */
tooltip?: string;
/** Type of CSS position. */
tooltipPosition?: 'left' | 'top' | 'bottom' | 'right';
tooltipStyleClass?: string;
};
inputPasswordSettings?: {
/** Give style object in angular style. */
style?: any;
/** custom CSS class to assign to control */
cssClass?: string,
placeholder?: string;
/** Maximum number of character allows in the input field. */
maxLength?: number;
/** Advisory information to display in a tooltip on hover. */
tooltip?: string;
/** Type of CSS position. */
tooltipPosition?: 'left' | 'top' | 'bottom' | 'right';
tooltipStyleClass?: string;
jsCode?: {
/**
* Available variables:<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/>
* 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/>
* config: IDBMasterConfigFormField <br/>
* event: any <br/>
*/
appendTo: EDBMasterInputPasswordAppendTo,
/**
* // 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,
}[],
};
checkboxSettings?: {
/** Advisory information to display in a tooltip on hover. */
tooltip?: string;
/** Type of CSS position. */
tooltipPosition?: 'left' | 'top' | 'bottom' | 'right';
tooltipStyleClass?: string;
jsCode?: {
/**
* Available variables:<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/>
* 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/>
* config: IDBMasterConfigFormField <br/>
* event: any <br/>
*/
appendTo: EDBMasterCheckboxAppendTo,
/**
* // 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,
}[],
};
ratingSettings?: {
/** Advisory information to display in a tooltip on hover. */
tooltip?: string;
/** Type of CSS position. */
tooltipPosition?: 'left' | 'top' | 'bottom' | 'right';
tooltipStyleClass?: string;
/** When specified a cancel icon is displayed to allow removing the value. */
cancel?: boolean;
/** Style class of the on icon. */
iconOnClass?: string;
/** Inline style of the on icon. */
iconOnStyle?: any;
/** Style class of the off icon. */
iconOffClass?: string;
/** Inline style of the off icon. */
iconOffStyle?: any;
/** Style class of the cancel icon. */
iconCancelClass?: string;
/** Inline style of the cancel icon. */
iconCancelStyle?: any;
/** Number of stars. */
stars?: number;
/** cancel rating custom HTML */
cancelIconHTML?: string;
onIconHTML?: string;
offIconHTML?: string;
jsCode?: {
/**
* Available variables:<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/>
* 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/>
* config: IDBMasterConfigFormField <br/>
* event: any <br/>
*/
appendTo: EDBMasterRatingAppendTo,
/**
* // 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,
}[],
};
radioSettings?: {
displayType?: 'inline' | 'new_line';
displayInCenter?: boolean;
options: { label: string; value: any }[];
/** Advisory information to display in a tooltip on hover. */
tooltip?: string;
/** Type of CSS position. */
tooltipPosition?: 'left' | 'top' | 'bottom' | 'right';
tooltipStyleClass?: string;
jsCode?: {
/**
* Available variables:<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/>
* 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/>
* config: IDBMasterConfigFormField <br/>
* event: any <br/>
*/
appendTo: EDBMasterRadioAppendTo,
/**
* // 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,
}[],
};
/** It's value will be Date object. */
datePickerSettings?: {
/** Give style object in angular style. */
style?: any;
/** custom CSS class to assign to control */
cssClass?: string,
placeholder?: string;
showSeconds?: boolean;
showTime?: boolean;
/** Default : 24 */
hourFormat?: '12' | '24';
/** ex: dd-MM-yyyy hh:mm:ss a */
dateTimeFormat?: string;
/** Whether to display timepicker only. Use hourFormat 12 to display AM/PM in UI. */
timeOnly?: boolean;
/** The minimum selectable date. */
minDate?: Date;
/** The maximum selectable date. */
maxDate?: Date;
/**
* Default : date
* Update dateTimeFormat for 'month'(MM-yyyy) & 'year'(yyyy) values.
*/
view?: 'date' | 'month' | 'year';
/** Advisory information to display in a tooltip on hover. */
tooltip?: string;
/** Type of CSS position. */
tooltipPosition?: 'left' | 'top' | 'bottom' | 'right';
tooltipStyleClass?: string;
jsCode?: {
/**
* Available variables:<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/>
* 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/>
* config: IDBMasterConfigFormField <br/>
* event: any <br/>
*/
appendTo: EDBMasterDatePickerAppendTo,
/**
* // 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,
}[],
};
colorPickerSettings?: {
/** Give style object in angular style. */
style?: any;
/** custom CSS class to assign to control */
cssClass?: string,
format?: 'hex' | 'rgb' | 'hsb';
/** Advisory information to display in a tooltip on hover. */
tooltip?: string;
/** Type of CSS position. */
tooltipPosition?: 'left' | 'top' | 'bottom' | 'right';
tooltipStyleClass?: string;
jsCode?: {
/**
* Available variables:<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/>
* 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/>
* config: IDBMasterConfigFormField <br/>
* event: any <br/>
*/
appendTo: EDBMasterColorPickerAppendTo,
/**
* // 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,
}[],
};
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 | auto complete | multi select, it will change values of these dropdowns | auto completes | multi selects and reload them. */
reloadDropdownsOfPath?: string[];
/** API call will happen when these values of path are present in formData */
isDependentOnPath?: string[];
/** Advisory information to display in a tooltip on hover. */
tooltip?: string;
/** Type of CSS position. */
tooltipPosition?: 'left' | 'top' | 'bottom' | 'right';
tooltipStyleClass?: 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/>
* reqBody: 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;
};
autocompleteSettings?: {
/** Give style object in angular style. */
style?: any;
/** custom CSS class to assign to control */
cssClass?: string,
placeholder?: string;
showClear?: boolean;
/** Minimum number of characters to initiate a search. */
minLengthForSearch?: number;
/** Delay between keystrokes to wait before sending a query. */
delay?: number;
/** When present, autocomplete clears the manual input if it does not match of the suggestions to force only accepting values from the suggestions. */
forceSelection?: number;
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;
/** one field or multiple comma separated fields are supported without any space in between. */
filterBy?: string;
filterMatchMode?: 'contains' | 'startsWith' | 'endsWith';
/** 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 | auto complete | multi select, it will change values of these dropdowns | auto completes | multi selects and reload them. */
reloadDropdownsOfPath?: string[];
/** API call will happen when these values of path are present in formData */
isDependentOnPath?: string[];
/** Displays a button next to the input field when enabled. */
dropdown?: boolean;
/** Advisory information to display in a tooltip on hover. */
tooltip?: string;
/** Type of CSS position. */
tooltipPosition?: 'left' | 'top' | 'bottom' | 'right';
tooltipStyleClass?: string;
/** Maximum number of character allows in the input field. */
maxLength?: number;
addNewFormConfig?: IDBMasterConfig;
apiCallOverrides?: IDBMasterAPICallOverrides;
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/>
* reqBody: 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: EDBMasterAutoCompleteAppendTo,
/**
* // 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,
}[],
};
multiselectSettings?: {
/** Give style object in angular style. */
style?: any;
/** custom CSS class to assign to control */
cssClass?: string,
placeholder?: string;
showClear?: boolean;
/** Minimum number of characters to initiate a search. */
minLength?: number;
/** Delay between keystrokes to wait before sending a query. */
delay?: number;
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;
/** Whether to show the header. */
showHeader?: boolean;
/** Enable filter */
filter?: boolean;
/** one field or multiple comma separated fields are supported without any space in between. */
filterBy?: string;
/** Default: 'contains', Defines how the items are filtered. */
filterMatchMode?: 'endsWith' | 'startsWith' | 'contains' | '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;
/** Decides how many selected item labels to show at most. */
maxSelectedLabels?: number;
/** Decides how many items can be selected at most. */
selectionLimit?: number;
/** Ex: "{0} items selected", Label to display after exceeding max selected labels. defaults "ellipsis" keyword to indicate a text-overflow. */
selectedItemsLabel?: string;
/** Whether to show the checkbox at header to toggle all items at once. */
showToggleAll?: boolean;
/** Name of the disabled field of an option. */
optionDisabled?: string;
/** Name of the label field of an option group. */
optionGroupLabel?: string;
/** Name of the options field of an option group. */
optionGroupChildren?: string;
/** Advisory information to display in a tooltip on hover. */
tooltip?: string;
/** Type of CSS position. */
tooltipPosition?: 'left' | 'top' | 'bottom' | 'right';
tooltipStyleClass?: string;
/**
* Defines how the selected items are displayed.
* @group Props
*/
display: 'comma' | 'chip';
/** on value change of current dropdown | auto complete | multi select, it will change values of these dropdowns | auto completes | multi selects and reload them. */
reloadDropdownsOfPath?: string[];
/** API call will happen when these values of path are present in formData */
isDependentOnPath?: string[];
addNewFormConfig?: IDBMasterConfig;
apiCallOverrides?: IDBMasterAPICallOverrides;
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/>
* reqBody: 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: EDBMasterMultiSelectAppendTo,
/**
* // 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,
}[],
};
fileUploadSettings?: {
/** Give style object in angular style. */
style?: any;
/** custom CSS class to assign to control */
cssClass?: string,
/** Default : false, When enabled, upload begins automatically after selection is completed. */
auto?: boolean;
/**
* API URL which will be used to upload files.<br/>
* API should return array of objects in below format.<br/>
* You can have other properties and below properties are required.
* [{
* originalName: string,
* uploadPath: string,
* }]
* API Maker's custom API will accept files in "files" form data field.
*
* */
uploadApiUrl: string;
/** API URL which returns content of file in base64 format. */
downloadApiUrl?: string;
removeApiUrl?: string;
/** Allow to select multiple files or not */
multiple?: boolean;
/** ex : image/* */
accept?: string;
/** Maximum file size allowed in bytes. Default : 10000000 (10MB) */
maxFileSize?: number;
/** Maximum number of files that can be uploaded. */
fileLimit?: number;
/** Internal use property to show/hide upload button on UI control. */
_showUploadButton?: boolean;
/** internal use only */
_fileSelectEvent?: any;
/** Advisory information to display in a tooltip on hover. */
tooltip?: string;
/** Type of CSS position. */
tooltipPosition?: 'left' | 'top' | 'bottom' | 'right';
tooltipStyleClass?: string;
};
dividerSettings?: {
/** Give style object in angular style. */
style?: any;
/** custom CSS class to assign to control */
cssClass?: string,
align?: 'center' | 'left' | 'right' | 'bottom' | 'top';
type?: 'dashed' | 'dotted' | 'solid';
dividerText?: string;
};
accordionSettings?: {
/** Give style object in angular style. */
style?: any;
/** custom CSS class to assign to control */
cssClass?: string,
/** Index of the active tab or an array of indexes in multiple mode. */
activeIndex?: number | number[];
/** Default : 0, When form opens, this will be applied. */
defaultIndex?: number;
multiple?: boolean;
tabs: {
/** Give style object in angular style. */
style?: any;
/** Tab header, HTML is supported. */
header: string;
/** Give style object in angular style. */
headerStyle?: any;
/** You can provide single or multiple classes. */
headerCssClass?: string,
disabled?: boolean | string;
fields: IDBMasterConfigFormField[][];
}[];
jsCode?: {
/**
* Available variables:<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/>
* 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/>
* config: IDBMasterConfigFormField <br/>
* event: any <br/>
*/
appendTo: EDBMasterAccordionAppendTo,
/**
* // 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,
}[],
};
tabViewSettings?: {
/** Index of the active tab to change selected tab programmatically. */
activeIndex?: number;
/** Default : 0, When form opens, this will be applied. */
defaultIndex?: number;
/** Give style object in angular style. */
style?: any;
/** custom CSS class to assign to control */
cssClass?: string,
tabs: {
/** Give style object in angular style. */
style?: any;
/** Tab header, HTML is supported. */
header: string;
/** Give style object in angular style. */
headerStyle?: any;
/** You can provide single or multiple classes. */
headerCssClass?: string,
disabled?: boolean;
fields: IDBMasterConfigFormField[][];
}[];
jsCode?: {
/**
* Available variables:<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/>
* 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/>
* config: IDBMasterConfigFormField <br/>
* event: any <br/>
*/
appendTo: EDBMasterTabViewAppendTo,
/**
* // 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,
}[],
};
buttonSettings?: {
/** button label text */
label: string;
/** Give style object in angular style. */
style?: any;
/** custom CSS class to assign to control */
cssClass?: string,
/** Add a link style to the button. */
link?: boolean;
/** ex: pi pi-check , give icon to button */
icon?: string,
/** default : left */
iconPos?: 'left' | 'right' | 'top' | 'bottom';
/** Whether the button is in loading state. */
loading?: boolean;
/** Icon to display in loading state. */
loadingIcon?: string;
/** Defines the style of the button. */
severity?: uiMakerComponentSeverity | null | undefined;
/** Add a shadow to indicate elevation. */
raised?: boolean;
/** Add a circular border radius to the button. */
rounded?: boolean;
/** Add a textual class to the button without a background initially. */
text?: boolean;
/** Add a border class without a background initially. */
outlined?: boolean;
/** Value of the badge. */
badge?: string;
/** Style class of the badge. */
badgeClass?: string;
/** Style class of the badge. */
size?: 'small' | 'large' | undefined | null;
/** Advisory information to display in a tooltip on hover. */
tooltip?: string;
/** Type of CSS position. */
tooltipPosition?: 'left' | 'top' | 'bottom' | 'right';
tooltipStyleClass?: string;
jsCode?: {
/**
* Available variables:<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/>
* 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/>
* config: IDBMasterConfigFormField <br/>
* event: any <br/>
*/
appendTo: EDBMasterButtonAppendTo,
/**
* // 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,
}[],
};
imageSettings?: {
src: string;
/** Give style object in angular style. */
style?: any;
/** custom CSS class to assign to control */
cssClass?: string,
/** it will be assigned to span which is parent of image tag. */
imageParentSpanClass?: string,
/** Attribute of the image element. */
width?: string;
/** Attribute of the image element. */
height?: string;
/** Attribute of the preview image element. */
alt?: string;
/** Controls the preview functionality. */
preview?: boolean;
/** The source path for the preview image. */
previewImageSrc?: string;
/** Advisory information to display in a tooltip on hover. */
tooltip?: string;
/** Type of CSS position. */
tooltipPosition?: 'left' | 'top' | 'bottom' | 'right';
tooltipStyleClass?: string;
jsCode?: {
/**
* Available variables:<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/>
* 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/>
* config: IDBMasterConfigFormField <br/>
* event: any <br/>
*/
appendTo: EDBMasterImageAppendTo,
/**
* // 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,
}[],
};
customHTMLSettings?: {
htmlCode: string;
};
knobSettings?: {
/** Advisory information to display in a tooltip on hover. */
tooltip?: string;
/** Type of CSS position. */
tooltipPosition?: 'left' | 'top' | 'bottom' | 'right';
tooltipStyleClass?: string;
/** Style class of the component. */
cssClass?: string | undefined;
/** Inline style of the component. */
style?: any;
/** Background of the value. */
valueColor?: string | undefined;
/** Background color of the range. */
rangeColor?: string;
/** Color of the value text. */
textColor?: string;
/** Template string of the value. */
valueTemplate?: string;
/** Size of the component in pixels. */
size?: number;
/** Step factor to increment/decrement the value. */
step?: number;
/** Minimum boundary value. */
min?: number;
/** Maximum boundary value. */
max?: number;
/** Width of the knob stroke. */
strokeWidth?: number;
jsCode?: {
/**
* Available variables:<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/>
* 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/>
* config: IDBMasterConfigFormField <br/>
* event: any <br/>
*/
appendTo: EDBMasterKnobAppendTo,
/**
* // 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,
}[],
};
}
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;
/** If value is present it should be from this array. */
enum?: any[];
}
export enum EDBMasterTextAreaAppendTo {
visible = 'visible',
disabled = 'disabled',
ngModelChange = 'ngModelChange',
focus = 'focus',
blur = 'blur',
keyUp = 'keyUp',
keyDown = 'keyDown',
}
export enum EDBMasterCheckboxAppendTo {
visible = 'visible',
disabled = 'disabled',
ngModelChange = 'ngModelChange',
}
export enum EDBMasterRatingAppendTo {
visible = 'visible',
disabled = 'disabled',
ngModelChange = 'ngModelChange',
onRate = 'onRate',
onCancel = 'onCancel',
onFocus = 'onFocus',
onBlur = 'onBlur',
}
export enum EDBMasterKnobAppendTo {
visible = 'visible',
disabled = 'disabled',
ngModelChange = 'ngModelChange',
}
export enum EDBMasterRadioAppendTo {
visible = 'visible',
disabled = 'disabled',
ngModelChange = 'ngModelChange',
}
export enum EDBMasterColorPickerAppendTo {
visible = 'visible',
disabled = 'disabled',
ngModelChange = 'ngModelChange',
}
export enum EDBMasterDatePickerAppendTo {
visible = 'visible',
disabled = 'disabled',
ngModelChange = 'ngModelChange',
focus = 'focus',
blur = 'blur',
}
export enum EDBMasterFileUploadAppendTo {
visible = 'visible',
disabled = 'disabled',
}
export enum EDBMasterGridAppendTo {
visible = 'visible',
disabled = 'disabled',
}
export enum EDBMasterConfigAppendTo {
oncePageLoad = 'oncePageLoad',
oncePageLoadWithContext = 'oncePageLoadWithContext',
gridRender = 'gridRender',
modifyGridRequest = 'modifyGridRequest',
/** run code before save & edit operation of form */
preSaveAndEdit = 'preSaveAndEdit',
beforeSaveModalOpen = 'beforeSaveModalOpen',
beforeEditModalOpen = 'beforeEditModalOpen',
beforeViewModalOpen = 'beforeViewModalOpen',
columnSelectionChanged = 'columnSelectionChanged',
}
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',
auto_complete = 'auto_complete',
multi_select = 'multi_select',
file_upload = 'file_upload',
grid = 'grid',
divider = 'divider',
rating = 'rating',
knob = 'knob',
// Field holder controls
accordion = 'accordion',
tab_view = 'tab_view',
// utility controls
button = 'button',
image = 'image',
customHTML = 'customHTML',
}
export enum EDBMasterCustomActionButtonAppendTo {
click = 'click',
}