/**
* Form field configuration for UI controls.
* Defines the appearance, behavior, and validation of individual form inputs.
*/
export interface IDBMasterConfigFormField {
/**
* Unique identifier for programmatic element access.
* Useful for dynamic field manipulation.
*/
hiddenId?: string;
/** Display label for the form field. */
label?: string;
/**
* Help text displayed below the control.
* Supports HTML formatting for rich content.
*/
helpText?: string;
/**
* Database field path where the control value is stored.
* Supports nested paths using dot notation.
* @example 'name', 'address.city', 'user.contact.email'
*/
path?: string;
/** Type of UI control to render. */
control?: EDBMasterFormControl;
/**
* CSS classes for the parent div wrapping the control.
* @default 'col-lg mt-4 col-md-{calculated based on columns.length}'
*/
cssClassDiv?: string;
/**
* Auto-focus this control when form opens.
* @default false
*/
autofocus?: boolean;
/**
* Disable the control or use expression to conditionally disable.
* When a string is provided, it's evaluated as JavaScript.
* @example true | false | "formData.type === 'readonly'"
*/
disabled?: boolean | string;
/**
* Control visibility or use expression to conditionally show/hide.
* When a string is provided, it's evaluated as JavaScript.
* @default true
* @example true | false | "formData.userRole === 'admin'"
*/
visible?: boolean | string;
/**
* Nested form fields for complex layouts.
* Enables hierarchical form structures within this field.
*/
fields?: IDBMasterConfigFormField[][];
/** Validation rules for this field. */
validations?: Pick<IPropertyValidation, 'required'> & {
/**
* Dynamic required validation function.
* Evaluated when form data changes to determine if field is required.
* Note: When present, this takes precedence over static 'required' property.
* @example "formData.type === 'individual' ? true : false"
*/
requiredFun?: string;
};
/** Custom validation error messages. */
validationErrors?: {
/** Custom error message for required field validation. */
required?: string;
};
/**
* Multi-line text input configuration.
*/
textAreaSettings?: {
/** Inline style object (Angular style binding format). */
style?: any;
/** Placeholder text displayed when empty. */
placeholder?: string;
/** Initial number of visible text rows. */
rows?: number;
/**
* Automatically adjust height based on content.
* @default false
*/
autoResize?: boolean;
/** Maximum character length allowed. */
maxLength?: number;
/** Tooltip text displayed on hover. */
tooltip?: string;
/**
* Tooltip position relative to the element.
* @default 'top'
*/
tooltipPosition?: 'left' | 'top' | 'bottom' | 'right';
/** CSS class for tooltip styling. */
tooltipStyleClass?: string;
/** Custom event handlers and behavior scripts. */
jsCode?: {
/**
* Event type or lifecycle hook for code execution.
* Available variables in scope:
* - formData: Complete form object
* - column: This field's configuration
* - allDropdownDataMap: Map of all dropdown data by path
* - globalData: User-provided global context
* - utils: Common utility functions
* - queryParams: URL query parameters
* - config: Form field configuration
* - event: Native event object
*/
appendTo: EDBMasterTextAreaAppendTo,
/**
* JavaScript code or function to execute.
* @example
* // Async operation
* new Promise(async (resolve, reject) => {
* await new Promise(r => setTimeout(r, 3000));
* formData.description = 'Updated';
* resolve();
* });
*/
code: string | (($scope: IDBMasterUIPageUtilsScope) => any),
}[],
};
editorSettings?: {
/** Give style object in angular style. */
style?: any;
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;
/** Only those controls and formats will be allowed
* ex: ['background', 'bold', 'color', 'font', 'code', 'italic', 'link', 'size', 'strike', 'script', 'underline', 'blockquote', 'header', 'indent', 'list', 'align', 'direction', 'code-block', 'image', 'video', 'clean']
* */
formats?: 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: EDBMasterEditorAppendTo,
/**
* // 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 | (($scope: IDBMasterUIPageUtilsScope) => any),
}[],
};
/**
* Text input control configuration.
* Single-line text entry with validation and autocomplete support.
*
* **Features:**
* - Character length limits (min/max)
* - Autocomplete on/off control
* - Spellcheck toggle
* - Tooltip support
* - Custom event handlers
*
* @example
* // Basic text input with length limit
* inputTextSettings: {
* placeholder: 'Enter your name',
* maxLength: 100,
* autocomplete: 'off'
* }
*
* @example
* // Text input with validation and tooltip
* inputTextSettings: {
* minLength: 3,
* maxLength: 50,
* tooltip: 'Username must be 3-50 characters',
* tooltipPosition: 'top',
* validationErrors: {
* minLength: 'Username must be at least 3 characters'
* }
* }
*/
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 | (($scope: IDBMasterUIPageUtilsScope) => any),
}[],
validationErrors?: {
minLength?: string;
};
};
/** Doc : https://primeng.org/inputnumber */
/**
* Number input control configuration.
* Numeric entry with spinner buttons, formatting, and validation.
*
* **Features:**
* - Min/max range validation
* - Step increment/decrement
* - Decimal precision control (minFractionDigits)
* - Locale-based formatting
* - Currency mode with ISO 4217 codes
* - Prefix/suffix symbols
* - Grouping separators (thousands, lakhs, crores)
* - Spinner button layouts
*
* @see {@link https://primeng.org/inputnumber PrimeNG InputNumber Documentation}
*
* @example
* // Basic number input with range and step
* inputNumberSettings: {
* min: 0,
* max: 100,
* step: 5,
* showButtons: true,
* buttonLayout: 'stacked'
* }
*
* @example
* // Currency input with formatting
* inputNumberSettings: {
* mode: 'currency',
* currency: 'USD',
* locale: 'en-US',
* minFractionDigits: 2,
* useGrouping: true
* }
*
* @example
* // Percentage input
* inputNumberSettings: {
* suffix: '%',
* min: 0,
* max: 100,
* step: 0.1,
* minFractionDigits: 1
* }
*
* @example
* // Decimal number with custom locale
* inputNumberSettings: {
* mode: 'decimal',
* locale: 'de-DE',
* minFractionDigits: 2,
* useGrouping: true,
* showButtons: true,
* buttonLayout: 'horizontal'
* }
*/
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 | (($scope: IDBMasterUIPageUtilsScope) => any),
}[],
validationErrors?: {
minLength?: string;
};
};
/**
* Input mask control configuration.
* Format text input with predefined patterns (phone, SSN, date, etc.).
*
* **Mask Patterns:**
* - **a**: Alphabetic character (A-Z, a-z)
* - **9**: Numeric character (0-9)
* - **\***: Alphanumeric character (A-Z, a-z, 0-9)
* - **?**: Marks everything after as optional
* - Formatting chars: `( ) - / . , :`
*
* @example
* // Phone number mask
* inputMaskSettings: {
* mask: '(999) 999-9999',
* placeholder: '(123) 456-7890',
* autoClear: true
* }
*
* @example
* // SSN mask
* inputMaskSettings: {
* mask: '999-99-9999',
* slotChar: 'mm/dd/yyyy'
* }
*
* @example
* // Optional extension
* inputMaskSettings: {
* mask: '(999) 999-9999? x99999',
* placeholder: '(123) 456-7890 x12345'
* }
*
* @example
* // Date mask
* inputMaskSettings: {
* mask: '99/99/9999',
* placeholder: 'mm/dd/yyyy',
* slotChar: 'mm/dd/yyyy'
* }
*/
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 | (($scope: IDBMasterUIPageUtilsScope) => any),
}[],
};
/**
* OTP (One-Time Password) input control configuration.
* Multi-character input for verification codes and OTPs.
*
* **Features:**
* - Fixed-length character inputs
* - Auto-focus navigation between fields
* - Integer-only mode
* - Masked display for security
* - Customizable width
*
* @example
* // 6-digit OTP input
* inputOtpSettings: {
* length: 6,
* integerOnly: true,
* mask: true
* }
*
* @example
* // 4-character code (alphanumeric)
* inputOtpSettings: {
* length: 4,
* integerOnly: false,
* uiControlWidth: '250px'
* }
*/
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;
};
/**
* Password input control configuration.
* Secure password entry with strength meter and visibility toggle.
*
* **Features:**
* - Masked character display
* - Toggle visibility button
* - Password strength feedback
* - Custom validation prompts
*
* @example
* // Basic password input
* inputPasswordSettings: {
* placeholder: 'Enter password',
* toggleMask: true
* }
*
* @example
* // Password with strength meter
* inputPasswordSettings: {
* placeholder: 'Create a strong password',
* toggleMask: true,
* feedback: true,
* promptLabel: 'Enter a password',
* weakLabel: 'Weak',
* mediumLabel: 'Medium',
* strongLabel: 'Strong'
* }
*/
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 | (($scope: IDBMasterUIPageUtilsScope) => any),
}[],
};
/**
* Checkbox control configuration.
* Binary selection control for true/false or yes/no values.
*
* **Features:**
* - Boolean value binding
* - Custom event handlers (onChange)
* - Tooltip support
* - Custom styling
*
* @example
* // Basic checkbox
* checkboxSettings: {
* tooltip: 'Check to enable notifications'
* }
*
* @example
* // Checkbox with change handler
* checkboxSettings: {
* jsCode: [{
* appendTo: 'onChange',
* code: ($scope) => {
* if ($scope.formData.agreeToTerms) {
* $scope.utils.messageService.showInfoToast('Thank you for agreeing!');
* }
* }
* }]
* }
*/
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 | (($scope: IDBMasterUIPageUtilsScope) => any),
}[],
};
/**
* Rating control configuration.
* Star-based rating input with customizable icons and count.
*
* **Features:**
* - Configurable number of stars
* - Cancel button to clear rating
* - Custom icon classes and HTML
* - Separate styles for on/off/cancel states
* - Event handlers for rating changes
*
* @example
* // Basic 5-star rating
* ratingSettings: {
* stars: 5,
* cancel: true
* }
*
* @example
* // Custom icon rating (hearts)
* ratingSettings: {
* stars: 5,
* iconOnClass: 'pi pi-heart-fill',
* iconOffClass: 'pi pi-heart',
* iconCancelClass: 'pi pi-ban',
* cancel: true
* }
*
* @example
* // 10-star rating with custom HTML
* ratingSettings: {
* stars: 10,
* onIconHTML: '<i class="fas fa-star" style="color: gold;"></i>',
* offIconHTML: '<i class="far fa-star" style="color: gray;"></i>',
* cancel: false
* }
*/
ratingSettings?: {
/** Advisory information to display in a tooltip on hover. */
tooltip?: string;
/** Type of CSS position. */
tooltipPosition?: 'left' | 'top' | 'bottom' | 'right';
tooltipStyleClass?: string;
/** Default : true, 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 | (($scope: IDBMasterUIPageUtilsScope) => any),
}[],
};
/**
* Radio button control configuration.
* Single selection from a list of mutually exclusive options.
*
* **Features:**
* - Inline or vertical layout
* - Center alignment option
* - Custom label-value pairs
* - Event handlers for selection changes
*
* @example
* // Inline radio buttons
* radioSettings: {
* displayType: 'inline',
* options: [
* { label: 'Active', value: 'active' },
* { label: 'Inactive', value: 'inactive' },
* { label: 'Pending', value: 'pending' }
* ]
* }
*
* @example
* // Vertical radio buttons centered
* radioSettings: {
* displayType: 'new_line',
* displayInCenter: true,
* options: [
* { label: 'Yes', value: true },
* { label: 'No', value: false }
* ]
* }
*/
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 | (($scope: IDBMasterUIPageUtilsScope) => any),
}[],
};
/**
* It's value will be Date object.
* Date picker control configuration.
* Date and time selection with calendar popup.
* Stores value as JavaScript Date object.
*
* **Features:**
* - Date-only, time-only, or date-time modes
* - 12/24 hour format
* - Min/max date constraints
* - Custom date format display
* - Seconds display toggle
* - Inline calendar option
*
* @example
* // Basic date picker
* datePickerSettings: {
* placeholder: 'Select a date',
* dateTimeFormat: 'dd-MM-yyyy'
* }
*
* @example
* // Date and time picker with 12-hour format
* datePickerSettings: {
* showTime: true,
* hourFormat: '12',
* dateTimeFormat: 'dd-MM-yyyy hh:mm a'
* }
*
* @example
* // Time-only picker with seconds
* datePickerSettings: {
* timeOnly: true,
* hourFormat: '24',
* showSeconds: true,
* dateTimeFormat: 'HH:mm:ss'
* }
*
* @example
* // Date picker with range constraints
* datePickerSettings: {
* minDate: new Date(2020, 0, 1),
* maxDate: new Date(),
* dateTimeFormat: 'dd/MM/yyyy'
* }
*/
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 | (($scope: IDBMasterUIPageUtilsScope) => any),
}[],
};
/**
* Color picker control configuration.
* Interactive color selection with multiple format support.
*
* **Features:**
* - Multiple color formats (hex, rgb, hsb)
* - Visual color palette
* - Manual color input
* - Color preview
*
* @example
* // Hex color picker
* colorPickerSettings: {
* format: 'hex'
* }
*
* @example
* // RGB color picker with tooltip
* colorPickerSettings: {
* format: 'rgb',
* tooltip: 'Select a color',
* tooltipPosition: 'top'
* }
*/
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 | (($scope: IDBMasterUIPageUtilsScope) => any),
}[],
};
/**
* Dropdown (select) control configuration.
* Supports static data, database queries, and custom API calls.
*/
dropdownSettings?: {
/** Inline style object (Angular style binding format). */
style?: any;
/** Space-separated CSS class names. */
cssClass?: string,
/** Placeholder text displayed when no selection is made. */
placeholder?: string;
/**
* Show clear button to reset selection.
* @default false
*/
showClear?: boolean;
/**
* Data source type for dropdown options.
* - `static_data`: Use predefined array of options
* - `db_data`: Query database for options
* - `api_call`: Call custom API endpoint
*/
dataSource: 'static_data' | 'db_data' | 'api_call';
/**
* Static dropdown options.
* Used when dataSource is 'static_data'.
* @example [{ label: 'Option 1', value: 1 }, { label: 'Option 2', value: 2 }]
*/
staticData?: any[];
/**
* Database query configuration for dropdown options.
* Can inherit values from schema if field has database relationship defined.
*/
dbData?: Partial<Pick<ICollectionIdentity, 'instance' | 'database' | 'collection' | 'table'>
& Pick<IQueryFormat, 'find' | 'select' | 'limit' | 'deep' | 'sort'>>;
/**
* Property name to display in dropdown.
* @default 'label'
*/
optionLabel?: string;
/**
* Property name to use as option value.
* @default 'value'
*/
optionValue?: string;
/**
* Enable dropdown filtering.
* @default false
*/
filter?: boolean;
/**
* Fields to search when filtering.
* Supports multiple fields (comma-separated, no spaces).
* @example 'name', 'name,email,phone'
*/
filterBy?: string;
/**
* Filter matching strategy.
* @default 'contains'
*/
filterMatchMode?: 'contains' | 'startsWith' | 'endsWith' | 'equals' | 'notEquals' | 'in' | 'lt' | 'lte' | 'gt' | 'gte';
/**
* Reload dropdown data when form opens.
* Ensures options are always up-to-date.
* @default false
*/
alwaysGetLatestDataOnFormOpen?: boolean;
/**
* Enable virtual scrolling for large datasets.
* Improves performance when dealing with thousands of options.
* @default false
*/
virtualScroll?: boolean;
/**
* Dependent dropdown cascade.
* When this dropdown value changes, reload these other dropdowns.
* @example ['city', 'area'] - Reload city and area dropdowns
*/
reloadDropdownsOfPath?: string[];
/**
* Required field dependencies.
* Dropdown only loads data when these fields have values.
* @example ['country', 'state'] - Only load if country and state are selected
*/
isDependentOnPath?: string[];
/** Tooltip text displayed on hover. */
tooltip?: string;
/** Tooltip position relative to the element. */
tooltipPosition?: 'left' | 'top' | 'bottom' | 'right';
/** CSS class for tooltip styling. */
tooltipStyleClass?: string;
/** Custom event handlers and data transformation scripts. */
jsCode?: {
/**
* Event type or lifecycle hook:
* - modifyDropdownRequest: Before API call
* - onceDropdownDataLoaded: After data loaded
* - onChange: When selection changes
*
* Available variables:
* - reqBody: Query object for modification
* - formData: Complete form data
* - dropdownData: Loaded options array
* - reloadDropdownsOfPath: Array to trigger dependent reloads
*/
appendTo: EDBMasterDropdownAppendTo,
code: string | (($scope: IDBMasterUIPageUtilsScope) => any),
}[],
/**
* Nested form configuration for adding new options.
* Opens a modal to create new records that can be immediately selected.
*/
addNewFormConfig?: IDBMasterConfig;
/**
* Custom API endpoint configuration.
* Override default query API with custom endpoint and logic.
*/
apiCallOverrides?: IDBMasterAPICallOverrides;
};
/**
* Autocomplete control configuration.
* Search and select from a list of options with type-ahead functionality.
*
* **Data Sources:**
* - **static_data**: Predefined options array
* - **db_data**: Options from database collection/table
* - **api_call**: Custom API endpoint for dynamic data
*
* **Key Features:**
* - Real-time search filtering
* - Dropdown on arrow click
* - Clear button support
* - Lazy loading with virtual scrolling
* - Min search length threshold
* - Dependent field reloading
*
* @example
* // Basic autocomplete with static data
* autocompleteSettings: {
* dataSource: 'static_data',
* staticData: countries,
* optionLabel: 'name',
* showClear: true
* }
*
* @example
* // Database autocomplete with search filtering
* autocompleteSettings: {
* dataSource: 'db_data',
* dbData: {
* collection: 'users',
* select: { fullName: 1, email: 1 },
* limit: 50
* },
* optionLabel: 'fullName',
* filterBy: 'fullName,email',
* minLengthForSearch: 2
* }
*
* @example
* // Cascading autocomplete with dependencies
* autocompleteSettings: {
* dataSource: 'db_data',
* dbData: { collection: 'cities' },
* isDependentOnPath: ['countryId', 'stateId'],
* reloadDropdownsOfPath: ['districtId'],
* dropdown: true
* }
*/
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 | (($scope: IDBMasterUIPageUtilsScope) => any),
}[],
};
/**
* Multiselect control configuration.
* Select multiple values from a list with chip-based display.
*
* **Data Sources:**
* - **static_data**: Predefined options array
* - **db_data**: Options from database collection/table
* - **api_call**: Custom API endpoint for dynamic data
*
* **Key Features:**
* - Multiple selection with checkboxes
* - Selected items displayed as chips or comma-separated
* - Searchable dropdown with filtering
* - Select all / deselect all toggle
* - Virtual scrolling for large datasets
* - Selection limits and label overflow handling
* - Option grouping support
*
* @example
* // Basic multiselect with static data
* multiselectSettings: {
* dataSource: 'static_data',
* staticData: skills,
* optionLabel: 'name',
* optionValue: 'id',
* display: 'chip',
* filter: true
* }
*
* @example
* // Database multiselect with selection limits
* multiselectSettings: {
* dataSource: 'db_data',
* dbData: { collection: 'permissions' },
* optionLabel: 'name',
* display: 'chip',
* selectionLimit: 5,
* maxSelectedLabels: 3,
* selectedItemsLabel: '{0} permissions selected',
* showToggleAll: true
* }
*
* @example
* // Grouped multiselect options
* multiselectSettings: {
* dataSource: 'static_data',
* staticData: groupedCities,
* optionLabel: 'name',
* optionGroupLabel: 'state',
* optionGroupChildren: 'cities',
* display: 'chip'
* }
*/
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 | (($scope: IDBMasterUIPageUtilsScope) => any),
}[],
};
/**
* File upload control configuration.
* Upload single or multiple files with validation and preview.
*
* **Key Features:**
* - Single or multiple file selection
* - File type restrictions (accept)
* - File size validation
* - File count limits
* - Auto-upload or manual upload
* - Upload/download/remove API integration
*
* **API Requirements:**
* - Upload API should accept files in "files" form data field
* - Upload API must return: `[{ originalName: string, uploadPath: string }]`
* - Download API should return file content in base64 format
*
* @example
* // Single image upload
* fileUploadSettings: {
* uploadApiUrl: '/api/upload',
* downloadApiUrl: '/api/download',
* removeApiUrl: '/api/remove',
* accept: 'image/*',
* maxFileSize: 5000000, // 5MB
* multiple: false,
* auto: true
* }
*
* @example
* // Multiple document upload with limit
* fileUploadSettings: {
* uploadApiUrl: '/api/upload-docs',
* accept: '.pdf,.doc,.docx',
* multiple: true,
* fileLimit: 5,
* maxFileSize: 10000000, // 10MB
* auto: false
* }
*/
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;
};
/**
* Divider control configuration.
* Visual separator for form sections with optional text label.
*
* **Key Features:**
* - Horizontal or vertical orientation
* - Text alignment options
* - Custom styling support
* - Content types (solid line, dashed, dotted)
*
* @example
* // Simple horizontal divider
* dividerSettings: {
* layout: 'horizontal',
* type: 'solid'
* }
*
* @example
* // Divider with centered label
* dividerSettings: {
* layout: 'horizontal',
* align: 'center',
* type: 'dashed'
* }
* // Use 'label' property in parent field to display text
*/
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;
};
/**
* Accordion control configuration.
* Collapsible panels for organizing form fields into sections.
*
* **Features:**
* - Single or multiple panel expansion
* - Default active panel selection
* - Nested form fields within each panel
* - Custom header styling and HTML
* - Disabled panel support
* - Event handlers for panel changes
*
* @example
* // Single-panel accordion
* accordionSettings: {
* defaultIndex: 0,
* multiple: false,
* tabs: [
* {
* header: 'Personal Information',
* fields: [[nameField], [emailField]]
* },
* {
* header: 'Address Details',
* fields: [[addressField], [cityField]]
* }
* ]
* }
*
* @example
* // Multiple panels with custom styling
* accordionSettings: {
* defaultIndex: 0,
* multiple: true,
* activeIndex: [0, 1],
* tabs: [
* {
* header: '<i class="pi pi-user"></i> Profile',
* headerCssClass: 'custom-header',
* fields: [[profileFields]]
* },
* {
* header: 'Settings',
* disabled: true,
* fields: [[settingsFields]]
* }
* ]
* }
*/
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 | (($scope: IDBMasterUIPageUtilsScope) => any),
}[],
};
/**
* Tab view control configuration.
* Tabbed interface for organizing form fields into separate views.
*
* **Features:**
* - Multiple tabs with individual form fields
* - Default active tab selection
* - Programmatic tab switching
* - Custom tab header styling and HTML
* - Disabled tab support
* - Event handlers for tab changes
*
* @example
* // Basic tab view
* tabViewSettings: {
* defaultIndex: 0,
* tabs: [
* {
* header: 'General',
* fields: [[nameField], [descriptionField]]
* },
* {
* header: 'Advanced',
* fields: [[advancedField1], [advancedField2]]
* }
* ]
* }
*
* @example
* // Tabs with icons and custom styling
* tabViewSettings: {
* activeIndex: 1,
* tabs: [
* {
* header: '<i class="pi pi-home"></i> Home',
* headerCssClass: 'tab-home',
* fields: [[homeFields]]
* },
* {
* header: '<i class="pi pi-cog"></i> Settings',
* disabled: false,
* fields: [[settingsFields]]
* },
* {
* header: 'Admin',
* disabled: true,
* fields: [[adminFields]]
* }
* ]
* }
*/
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 | (($scope: IDBMasterUIPageUtilsScope) => any),
}[],
};
/**
* Button control configuration.
* Clickable button with icon, loading state, and style variants.
*
* **Features:**
* - Icon support with positioning (left/right/top/bottom)
* - Loading state with custom icon
* - Multiple severity levels (primary, success, info, warning, danger)
* - Style variants (raised, rounded, text, outlined, link)
* - Badge support
* - Size options (small, large)
* - Custom click handlers
*
* @example
* // Basic button
* buttonSettings: {
* label: 'Submit',
* severity: 'primary',
* icon: 'pi pi-check'
* }
*
* @example
* // Loading button
* buttonSettings: {
* label: 'Processing...',
* loading: true,
* loadingIcon: 'pi pi-spin pi-spinner',
* severity: 'info'
* }
*
* @example
* // Outlined button with badge
* buttonSettings: {
* label: 'Notifications',
* icon: 'pi pi-bell',
* outlined: true,
* badge: '5',
* badgeClass: 'p-badge-danger'
* }
*
* @example
* // Rounded icon button
* buttonSettings: {
* label: '',
* icon: 'pi pi-plus',
* rounded: true,
* raised: true,
* severity: 'success',
* size: 'large'
* }
*/
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 | (($scope: IDBMasterUIPageUtilsScope) => any),
}[],
};
/**
* Image display control configuration.
* Display images with preview functionality and custom styling.
*
* **Features:**
* - Image source URL
* - Width/height control
* - Preview mode with fullscreen
* - Alt text for accessibility
* - Custom parent container styling
* - Tooltip support
*
* @example
* // Basic image display
* imageSettings: {
* src: '/assets/logo.png',
* width: '200px',
* height: 'auto',
* alt: 'Company Logo'
* }
*
* @example
* // Image with preview
* imageSettings: {
* src: '/uploads/product-thumb.jpg',
* previewImageSrc: '/uploads/product-full.jpg',
* preview: true,
* width: '100px',
* height: '100px'
* }
*
* @example
* // Dynamic image from form data
* imageSettings: {
* src: '', // Set via jsCode
* preview: true,
* jsCode: [{
* appendTo: 'onInit',
* code: ($scope) => {
* $scope.column.imageSettings.src = $scope.formData.profilePicture;
* }
* }]
* }
*/
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 | (($scope: IDBMasterUIPageUtilsScope) => any),
}[],
};
/**
* Custom HTML control configuration.
* Render arbitrary HTML content within the form.
*
* **Use Cases:**
* - Custom formatted text and headings
* - Embedded widgets or iframes
* - Custom styling and layout elements
* - Rich content display
*
* ⚠️ **Security Warning:**
* HTML content is sanitized to prevent XSS attacks.
* Some tags and attributes may be stripped.
*
* @example
* // Custom heading
* customHTMLSettings: {
* htmlCode: '<h3 style="color: blue;">Section Title</h3>'
* }
*
* @example
* // Information box
* customHTMLSettings: {
* htmlCode: `
* <div class="alert alert-info">
* <strong>Note:</strong> Please review all fields carefully.
* </div>
* `
* }
*/
customHTMLSettings?: {
htmlCode: string;
};
/**
* Knob control configuration.
* Circular dial input for numeric value selection.
*
* **Features:**
* - Min/max range
* - Step increment
* - Custom colors (value, range, text)
* - Adjustable size and stroke width
* - Value template formatting
* - Rotary interaction
*
* @example
* // Volume knob (0-100)
* knobSettings: {
* min: 0,
* max: 100,
* step: 1,
* size: 150,
* valueColor: '#3b82f6',
* valueTemplate: '{value}%'
* }
*
* @example
* // Temperature knob with custom colors
* knobSettings: {
* min: -10,
* max: 50,
* step: 0.5,
* valueColor: '#ef4444',
* rangeColor: '#d1d5db',
* textColor: '#1f2937',
* valueTemplate: '{value}°C',
* size: 200,
* strokeWidth: 12
* }
*/
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 | (($scope: IDBMasterUIPageUtilsScope) => any),
}[],
};
}
/**
* Validation rules for schema properties and form fields.
* Define constraints that values must satisfy before being saved.
*/
export interface IPropertyValidation {
/**
* Field is mandatory and must have a non-null, non-empty value.
* Applicable to all data types.
*/
required?: boolean;
/**
* Minimum allowed value.
* Applicable to: number, date
*/
min?: number;
/**
* Maximum allowed value.
* Applicable to: number, date
*/
max?: number;
/**
* Minimum string/array length.
* Applicable to: string, array
*/
minLength?: number;
/**
* Maximum string/array length.
* Applicable to: string, array
*/
maxLength?: number;
/**
* Value must be unique across all records.
* @deprecated API Maker maintains uniqueness internally.
* Avoid using on tables with frequent updates due to performance impact.
*/
unique?: boolean;
/**
* Validate email address format.
* Applicable to: string
*/
email?: boolean;
/**
* Custom validation function.
* Return true if valid, false or error message if invalid.
*/
validatorFun?: Function;
/**
* Enumeration constraint - value must be from this array.
* @example ['active', 'inactive', 'pending']
*/
enum?: any[];
}
export enum EDBMasterTextAreaAppendTo {
visible = 'visible',
disabled = 'disabled',
ngModelChange = 'ngModelChange',
focus = 'focus',
blur = 'blur',
keyUp = 'keyUp',
keyDown = 'keyDown',
}
export enum EDBMasterEditorAppendTo {
visible = 'visible',
disabled = 'disabled',
ngModelChange = 'ngModelChange',
onTextChange = 'onTextChange',
onInit = 'onInit',
onSelectionChange = 'onSelectionChange',
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',
}
/**
* Custom code execution hooks for DB Master lifecycle events.
* Defines when and where custom JavaScript code runs in the application.
*/
export enum EDBMasterConfigAppendTo {
/**
* Execute once on initial page load.
* Appends script to page <script> tag.
* ⚠️ Note: config and globalData are NOT available in this hook.
*/
oncePageLoad = 'oncePageLoad',
/**
* Execute once on page load with full context.
* Available: config, globalData, utils, queryParams
* Use this for initialization that needs access to configuration.
*/
oncePageLoadWithContext = 'oncePageLoadWithContext',
/**
* Execute every time grid renders data.
* Available: gridEvent, gridData, globalData, utils, queryParams
* Use for dynamic row styling or data transformation.
*/
gridRender = 'gridRender',
/**
* Modify grid API request before execution.
* Available: gridEvent, reqBody (IQueryFormat), globalData, utils, queryParams
* Use to add custom filters or modify query parameters.
*/
modifyGridRequest = 'modifyGridRequest',
/**
* Execute once after initial grid data load.
* Available: gridData, globalData, utils, queryParams
*/
onceGridDataLoaded = 'onceGridDataLoaded',
/**
* Execute before save/edit operations.
* Modify data before saving, updating, or importing.
* Available: reqBody (any | any[]), globalData, utils, queryParams, mode ('save' | 'edit' | 'import')
*/
preSaveAndEdit = 'preSaveAndEdit',
/**
* Execute before save form dialog opens.
* Pre-populate or transform form data for new records.
* Available: formData, globalData, utils, queryParams
*/
beforeSaveModalOpen = 'beforeSaveModalOpen',
/**
* Execute before edit form dialog opens.
* Transform loaded data before displaying in edit form.
* Available: formData, globalData, utils, queryParams
*/
beforeEditModalOpen = 'beforeEditModalOpen',
/**
* Execute before view form dialog opens.
* Transform data before displaying in read-only view.
* Available: formData, globalData, utils, queryParams
*/
beforeViewModalOpen = 'beforeViewModalOpen',
/**
* Execute when user changes column visibility.
* React to column show/hide events.
*/
columnSelectionChanged = 'columnSelectionChanged',
/**
* Generate custom delete confirmation dialog.
* Must return IConfirmDialogSettings object.
*/
deleteConfirmationDialogGenerator = 'deleteConfirmationDialogGenerator',
/**
* Generate custom delete-all confirmation dialog.
* Must return IConfirmDialogSettings object.
*/
deleteAllConfirmationDialogGenerator = 'deleteAllConfirmationDialogGenerator',
/**
* Generate custom edit confirmation dialog.
* Must return IConfirmDialogSettings object.
*/
editConfirmationDialogGenerator = 'editConfirmationDialogGenerator',
/**
* Generate custom save confirmation dialog.
* Must return IConfirmDialogSettings object.
*/
saveConfirmationDialogGenerator = 'saveConfirmationDialogGenerator',
/**
* Process grid data before CSV export.
* Modify gridData for export (does not affect displayed data).
* Available: gridData (mutable copy), globalData, utils, queryParams
*/
processDataBeforeExport = 'processDataBeforeExport',
/**
* Process grid data before PDF export.
* Modify gridData for PDF generation (does not affect displayed data).
*
* Available: gridData (mutable copy), jsPdfDoc, globalData, utils, queryParams
*
* **jsPdfDoc**: Pre-created jsPDF instance. You can customize or replace it.
*
* @example
* // Customize PDF document
* const { jsPDF } = window.jspdf;
* const doc = new jsPDF({
* orientation: 'landscape',
* format: 'a4'
* });
* $scope.jsPdfDoc = doc;
* $scope.jsPdfDoc.text("Custom Report Title", 14, 15);
*/
processDataBeforePDFExport = 'processDataBeforePDFExport',
}
/**
* Available form control types for UI generation.
* Each control type has specific settings and behavior.
*/
export enum EDBMasterFormControl {
/** Single-line text input. */
input = 'input',
/** Numeric input with spinner buttons and formatting. */
inputNumber = 'inputNumber',
/** Text input with pattern-based masking (phone, SSN, etc.). */
inputMask = 'inputMask',
/** One-time password multi-character input. */
inputOtp = 'inputOtp',
/** Password input with visibility toggle and strength meter. */
password = 'password',
/** Date and/or time picker with calendar popup. */
date_picker = 'date_picker',
/** Multi-line text input. */
textarea = 'textarea',
/** Rich text WYSIWYG editor. */
editor = 'editor',
/** Binary checkbox (true/false). */
checkbox = 'checkbox',
/** Radio button group for single selection. */
radio = 'radio',
/** Color picker with multiple format support. */
color_picker = 'color_picker',
/** Dropdown select with single selection. */
dropdown = 'dropdown',
/** Autocomplete with type-ahead search. */
auto_complete = 'auto_complete',
/** Multi-select dropdown with chip display. */
multi_select = 'multi_select',
/** File upload with validation. */
file_upload = 'file_upload',
/** Nested data grid for one-to-many relationships. */
grid = 'grid',
/** Visual separator line. */
divider = 'divider',
/** Star-based rating input. */
rating = 'rating',
/** Circular dial for numeric input. */
knob = 'knob',
/** Collapsible accordion panels (field container). */
accordion = 'accordion',
/** Tabbed view for organizing fields (field container). */
tab_view = 'tab_view',
/** Clickable button with custom actions. */
button = 'button',
/** Image display with preview. */
image = 'image',
/** Custom HTML content. */
customHTML = 'customHTML',
}
export enum EDBMasterCustomActionButtonAppendTo {
click = 'click',
}