@sava-info-systems/api-maker-with-extensions 1.6.0 → 1.8.0

package/src/assets/schema-types/types.ts

@@ -21,6 +21,9 @@ export interface IAMGlobalRequest {
     body: any;
     eventData: any;
     auth: ISandboxReqAuthObj;
+
+    /** It will be true, when request is coming from actual end user and not from internal code like custom API or not from AM UI. */
+    isApiRequestFromUser?: boolean;
 }
 
 export interface ISandboxReqAuthObj {
@@ -142,17 +145,6 @@ export interface IIsAutoIncrementByAM {
     step?: number; // default value will be 1
 }
 
-export interface IPropertyValidation {
-    required?: boolean; // Allowed Types : *
-    min?: number; // Allowed Types : number | date
-    max?: number; // Allowed Types : number | date
-    minLength?: number; // Allowed Types : string
-    maxLength?: number; // Allowed Types : string
-    unique?: boolean;
-    email?: boolean; // Allowed Types : string
-    validatorFun?: Function;
-}
-
 export interface IPropertyConversion {
     trimStart?: boolean;
     trimEnd?: boolean;
@@ -236,7 +228,7 @@ export interface ISecretTypeCommon extends Pick<IAuthTokenInfoCommon, 'authToken
         sqlServer?: string;
         postgreSQL?: string;
         oracle?: string;
-    }
+    };
 }
 
 export interface IAuthTokenInfo {
@@ -284,7 +276,7 @@ export interface IAuthTokenAWS extends IAuthTokenGroupsProperties {
     tokenExpiration: number; // Up to default expiration of 1 hour (3600000 ms)
 }
 
-export interface IAuthTokenAzureAD extends IAuthTokenGroupsProperties{
+export interface IAuthTokenAzureAD extends IAuthTokenGroupsProperties {
     /** client_id */
     appId: string;
     tenant: string;
@@ -575,7 +567,13 @@ export enum EArrayOperation {
 }
 
 export enum EAPIAccessType {
+    /** API is not accessible for outside world. Can be used from custom API and code from global "g" object.. */
+    NO_ACCESS = 'NO_ACCESS',
+
+    /** API is public and can be accessible without any token. */
     IS_PUBLIC = 'IS_PUBLIC',
+
+    /** API can be accessible using tokens. Required tokens depends on authTokenInfo configuration.. */
     TOKEN_ACCESS = 'TOKEN_ACCESS',
 }
 
@@ -817,7 +815,7 @@ export interface ICollectionIdentity {
     noCycle?: boolean;
 
     /**
-     * If true, it will skip pre hook & post hook running.
+     * Default: true, If true, it will skip pre hook & post hook running.
      */
     skipHookRunning?: boolean;
 }
@@ -845,6 +843,7 @@ export interface IApiParamsGetById extends IAMGlobalBaseParams {
     id: any;
     primaryKey?: string;
     select?: any;
+    deep?: IApiParamsDeepFormat[] | string[] | string;
 }
 
 export interface IApiParamsSave extends IAMGlobalBaseParams {
@@ -1086,7 +1085,7 @@ export interface IWSObject {
     validatedTokens: {
         apiUser?: any; // IApiUser
         amUser?: any; // IUser
-    }
+    };
 }
 
 export type IWSObject_P = Partial<IWSObject>;
@@ -1236,6 +1235,7 @@ export interface IDBMasterConfig {
     /**
      * Default : browser timezone.
      * Dates will be converted into this timezone before display in grid and sending to database query.
+     * Timezone List : https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
      */
     dateTimeZone?: string;
 
@@ -1246,7 +1246,7 @@ export interface IDBMasterConfig {
      * It will not work when unsupported format options of primeNg calendar control are used.
      *
      * PrimeNG calendar does not support time format but it will be automatically appended.
-     * This format will be applicable to all Calendar control in UI.
+     * This format will be default for all Calendar control in UI.
      */
     dateTimeFormat?: string;
 
@@ -1258,29 +1258,75 @@ export interface IDBMasterConfig {
         hideDeleteAllConfirmation?: boolean;
 
         showRefreshButton?: boolean;
-        showExportButton?: boolean;
+
+        /**
+         * Default : T.EDBMasterOperationsOrder.theme_selector,
+         *           T.EDBMasterOperationsOrder.column_selector,
+         *           T.EDBMasterOperationsOrder.global_search,
+         *           T.EDBMasterOperationsOrder.import,
+         *           T.EDBMasterOperationsOrder.export,
+         *           T.EDBMasterOperationsOrder.refresh,
+         *           T.EDBMasterOperationsOrder.add,
+         *           T.EDBMasterOperationsOrder.custom_actions,
+         *           T.EDBMasterOperationsOrder.delete_all,
+         * */
+        operationsOrder?: (
+            EDBMasterOperationsOrder.custom_actions
+            | EDBMasterOperationsOrder.delete_all
+            | EDBMasterOperationsOrder.add
+            | EDBMasterOperationsOrder.refresh
+            | EDBMasterOperationsOrder.export
+            | EDBMasterOperationsOrder.import
+            | EDBMasterOperationsOrder.global_search
+            | EDBMasterOperationsOrder.column_selector
+            | EDBMasterOperationsOrder.theme_selector)[];
 
         customActionButtons?: IDBMasterTopLevelCustomActionButton[];
 
         importData?: IDBMasterImportData;
+
+        exportData?: {
+            showExportButton?: boolean;
+
+            /** Default : pi pi-download */
+            icon?: string;
+
+            csv?: {
+                enable: boolean;
+
+                /** Default : CSV */
+                labelCSV: string;
+
+                /** Default : CSV Selected */
+                labelCSVSelected: string;
+            }
+            // pdf?: boolean;
+        }
     };
+    /** Provide CDN path of JS/CSS libraries */
     externalLibs?: {
         css?: string[],
         js?: string[],
     },
+    /** Provide names of styles provided in UI Maker. */
+    loadUiMakerStyleNames?: string[],
+
+    /** Pure CSS code which will be included in head tag of the page. */
     cssCode?: {
         runOn: 'header',
         code: string,
     }[],
+
     jsCode?: {
 
         /**
-         * oncePageLoad = Code will be run only once on page load. (config, globalData: any) <br/>
-         * gridRender = Gets executed everytime grid gets data. (gridEvent, gridData, globalData: any) <br/>
-         * modifyGridRequest = You can modify api call request. (gridEvent, reqBody: IQueryFormat, globalData: any) <br/>
-         * preSaveAndEdit = Change data before saving/update/import. (reqBody: any | any[], globalData: any) <br/>
-         * beforeSaveModalOpen = Change data before save modal open. (formData: any , globalData: any) <br/>
-         * beforeEditModalOpen = Change data before edit modal open. (formData: any , globalData: any) <br/>
+         * oncePageLoad = Code will be run only once on page load. config and global data are not available. It will append script to page script tag. <br/>
+         * oncePageLoadWithContext = Code will be run only once on page load with context of data. (config, globalData: any, utils: any, queryParams: any) <br/>
+         * gridRender = Gets executed everytime grid gets data. (gridEvent, gridData, globalData: any, utils: any, queryParams: any) <br/>
+         * modifyGridRequest = You can modify api call request. (gridEvent, reqBody: IQueryFormat, globalData: any, utils: any, queryParams: any) <br/>
+         * preSaveAndEdit = Change data before saving/update/import. (reqBody: any | any[], globalData: any, utils: any, queryParams: any, mode: 'save' | 'edit' | 'import') <br/>
+         * beforeSaveModalOpen = Change data before save modal open. (formData: any , globalData: any, utils: any, queryParams: any) <br/>
+         * beforeEditModalOpen = Change data before edit modal open. (formData: any , globalData: any, utils: any, queryParams: any) <br/>
          *
          */
         appendTo: EDBMasterConfigAppendTo,
@@ -1306,6 +1352,9 @@ export interface IDBMasterConfig {
     grid?: {
         header?: string;
 
+        /** ex: Showing {first} to {last} of {totalRecords} entries */
+        currentPageReportTemplate?: string;
+
         /** Default : false */
         showColumnSelector?: boolean;
 
@@ -1321,18 +1370,21 @@ export interface IDBMasterConfig {
         operations?: {
             delete?: Omit<IDBMasterConfigOperation, 'label'> & { apiCallOverridesDeleteMany?: IDBMasterAPICallOverrides; };
             edit?: Omit<IDBMasterConfigOperation, 'label'> & { apiCallOverridesGetById?: IDBMasterAPICallOverrides; };
+            view?: Omit<IDBMasterConfigOperation, 'label'> & { apiCallOverridesGetById?: IDBMasterAPICallOverrides; };
 
             hideDeleteConfirmation?: boolean;
             hideEditConfirmation?: boolean;
+            /** Default : false, if true, it will not show success message when delete multiple is used. You need to provide that message manually. */
+            hideDeleteManySuccessMessage?: boolean;
 
             disableDoubleClickForEdit?: boolean;
             disableDeleteButtonClickForDelete?: boolean;
 
-            /** Only 3 & do not give duplicates */
-            gridOperationsOrder?: ('delete' | 'edit' | 'custom')[];
+            /** Only 3 */
+            gridOperationsOrder?: (EDBMasterGridOperationsOrder.delete | EDBMasterGridOperationsOrder.edit | EDBMasterGridOperationsOrder.view | EDBMasterGridOperationsOrder.custom)[];
 
-            /** Only 3 & do not give duplicates */
-            gridColumnsOrder?: ('checkbox' | 'actions' | 'dbFields')[];
+            /** Only 3 */
+            gridColumnsOrder?: (EDBMasterGridColumnsOrder.checkbox | EDBMasterGridColumnsOrder.actions | EDBMasterGridColumnsOrder.dbFields)[];
 
             actionColumnWidth?: string;
 
@@ -1438,29 +1490,81 @@ export interface IDBMasterConfig {
         apiCallOverrides?: IDBMasterAPICallOverrides;
     };
     form?: {
+        /** add custom css class to form dialog. */
+        cssClass?: string,
+
+        /** Give style object in angular style to form dialog. */
+        style?: any;
+
+        /** only applicable for top level form modal. */
+        draggable?: boolean;
+
         /** Ex : 90vw */
         width?: string;
 
+        /** Default : true,
+         * If multiple is coming from API which is not mapped to any field, it will show in table.
+         * In case of only one error, it will show in notification.
+         * If false, it will not show table and show first error in notification.
+         * */
+        showOtherFieldErrors?: boolean;
+
         /** If it is empty, and operation.add is true, then it will generate form based on schema with all fields. */
         fields?: IDBMasterConfigFormField[][];
     };
 
-    export?: {
-        csv?: boolean;
-        // pdf?: boolean;
-    }
+}
+
+export enum EDBMasterOperationsOrder {
+    custom_actions = 'custom_actions',
+    delete_all = 'delete_all',
+    add = 'add',
+    refresh = 'refresh',
+    export = 'export',
+    import = 'import',
+    global_search = 'global_search',
+    column_selector = 'column_selector',
+    theme_selector = 'theme_selector',
+}
+
+export enum EDBMasterGridOperationsOrder {
+    delete = 'delete',
+    edit = 'edit',
+    view = 'view',
+    custom = 'custom',
+}
+
+export enum EDBMasterGridColumnsOrder {
+    checkbox = 'checkbox',
+    actions = 'actions',
+    dbFields = 'dbFields',
 }
 
 export interface IDBMasterImportData {
     enable: boolean;
 
+    /** Default : pi pi-file-import */
+    icon?: string;
+
+    /** width of grid. */
+    gridWidth?: string;
+
     fieldMappings: IDBMasterImportGridColumn[];
+
+    /** By default it can use save API. */
+    apiCallOverrides?: IDBMasterAPICallOverrides;
 }
 
 export interface IDBMasterImportGridColumn {
     header: string;
+
+    /** CSV field map */
     sourceField: string;
+
+    /** It will be database field, csv data will be stored into this field after conversion. */
     targetField: string;
+
+    /** CSV data will be converted to this type. */
     convertTargetFieldToType: EType;
 
     /** Default: ISO date format, date-fns format, Dates from CSV will be parsed using this format. */
@@ -1477,6 +1581,9 @@ export interface IDBMasterImportGridColumn {
 
     // calculated property
     filterType?: EDBMasterConfigFilterType;
+
+    /** width of grid column */
+    width?: string;
 }
 
 export interface IDBMasterCustomActionButton {
@@ -1527,6 +1634,7 @@ export interface IDBMasterConfigOperation {
 
     /** Applicable for add button only. */
     label?: string;
+    /** Applicable for add button only. */
     cssClass?: string;
 
     apiCallOverrides?: IDBMasterAPICallOverrides;
@@ -1537,7 +1645,39 @@ export interface IDBMasterAPICallOverrides {
     headers?: any;
     method?: 'POST';
     body?: any;
+
+    /** Primary key field name for current table. _id for mongodb. */
     pkField?: string;
+
+    /**
+     * Below variables are available,
+     * config: IDBMasterConfig,<br/>
+     * formData: any, Not available in case of grid.<br/>
+     * allDropdownDataMap: { [path: string]: any[] }, Not available in case of grid.<br/>
+     * apiResponse: any,<br/>
+     * globalData: any,<br/>
+     * headers: any,<br/>
+     * reqBody: any,<br/>
+     * utils: any,<br/>
+     * queryParams: any,<br/>
+     * mode: any | null,<br/>
+     * */
+    codeBeforeAPICall?: string;
+
+    /**
+     * Below variables are available,
+     * config: IDBMasterConfig,<br/>
+     * formData: any, Not available in case of grid.<br/>
+     * allDropdownDataMap: { [path: string]: any[] }, Not available in case of grid.<br/>
+     * apiResponse: any,<br/>
+     * globalData: any,<br/>
+     * headers: any,<br/>
+     * reqBody: any,<br/>
+     * utils: any,<br/>
+     * queryParams: any,<br/>
+     * mode: any | null,<br/>
+     * */
+    codeAfterAPICall?: string;
 }
 
 export enum EDBMasterMatchMode {
@@ -1560,10 +1700,18 @@ export enum EDBMasterMatchMode {
 }
 
 export interface IDBMasterConfigGridField {
+    /** It will be picked up automatically from schema, but if not provided in schema, you can define at this place. */
+    type?: EType;
+
+    /** Grid header */
     header: string;
+
     /** Database field name or path for nested objects. */
     path?: string; // nested fields like 'country.name' is supported by primeNG grid
 
+    /** If displayField provided, it will display from this field otherwise it will display value of path field. */
+    displayField?: string;
+
     /** Default false, it will format dates in 'dd-MM-yyyy hh:mm:ss a' automatically if 'dateTimeFormat' is not provided. */
     autoFormatDate?: boolean;
 
@@ -1602,11 +1750,13 @@ export interface IDBMasterConfigGridField {
 
     /** custom CSS class to assign */
     dataCellCssClass?: string,
+
+    /** Set column visibility in grid and in export. */
+    visibilityStatus?: EDBMasterConfigGridColumnVisibilityStatus;
 }
 
 /** For internal use only. */
 export interface IDBMasterConfigGridFieldExport extends IDBMasterConfigGridField {
-    type: EType;
 
     /** PrimeNG needs it for export purpose from grid. It should be present in [columns] */
     field?: string;
@@ -1622,92 +1772,202 @@ export enum EDBMasterConfigFilterType {
     date = 'date',
 }
 
+export enum EDBMasterConfigGridColumnVisibilityStatus {
+    /** Default and column is visible in grid. */
+    VISIBLE = 'VISIBLE',
+
+    /** Column is present in grid but hidden by default. Need to select in column selector dropdown. */
+    INVISIBLE = 'INVISIBLE',
+}
+
+// genericConfig : start
 export interface IDBMasterConfigFormField {
-    label: string;
+    /** It is used to find element. */
+    hiddenId?: string;
+    label?: string;
 
     /** This text will be displayed under control in small. HTML supported. */
     helpText?: string;
 
-    path: string;
+    path?: string;
     control: EDBMasterFormControl;
-    disabled?: boolean;
+
+    /** if true, that control will take focus automatically. */
+    autofocus?: boolean;
+
+    /** if true, control will be disabled. If string provides, it will evaluate that string and enable/disable based on that. */
+    disabled?: boolean | string;
+
+    /** if true or undefined, control will be visible. If string provides, it will evaluate that string and make it visible/invisible based on that. */
+    visible?: boolean | string;
 
     validations?: Pick<IPropertyValidation, 'required'>;
     validationErrors?: {
-        required: string;
+        required?: string;
     };
+    // genericConfig : end
 
+    // gridSettings : start
     gridSettings?: IDBMasterConfig;
+    // gridSettings : end
 
+    // textAreaSettings : start
     textAreaSettings?: {
+        /** Give style object in angular style. */
+        style?: any;
+
+        placeholder?: string;
         rows?: number;
         autoResize?: boolean;
-    }
 
-    datePickerSettings?: {
-        showSeconds?: boolean;
-        showTime?: boolean;
-        /** Default : 24 */
-        hourFormat?: '12' | '24';
-        dateTimeFormat?: string;
+        /** Maximum number of character allows in the input field. */
+        maxLength?: number;
 
-        /**
-         * Default : date
-         * Update dateTimeFormat for 'month'(MM-yyyy) & 'year'(yyyy) values.
-         */
-        view?: 'date' | 'month' | 'year';
+        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,
+        }[],
     };
+    // textAreaSettings : end
 
-    colorPickerSettings?: {
-        format?: 'hex' | 'rgb' | 'hsb';
+    // inputTextSettings : start
+    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;
+
+        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;
+        };
     };
+    // inputTextSettings : end
 
-    dropdownSettings?: {
-        showClear?: boolean;
-        dataSource: 'static_data' | 'db_data'; // custom_code = We can call any API in that.
+    // inputNumberSettings : start
+    /** Doc : https://primeng.org/inputnumber */
+    inputNumberSettings?: {
+        /** Give style object in angular style. */
+        style?: any;
 
-        /** it will use used when dataSource is 'static_data'. */
-        staticData?: any[]; // { label: string; value: any; }[] works default.
+        /** custom CSS class to assign to control */
+        cssClass?: string,
 
-        /**
-         * it can pickup IDB values from schema also.
-         */
-        dbData?: Partial<Pick<ICollectionIdentity, 'instance' | 'database' | 'collection' | 'table'>
-            & Pick<IQueryFormat, 'find' | 'select' | 'limit'>>;
+        placeholder?: string;
+        min?: number;
+        max?: number;
+        minFractionDigits?: number;
+        mode?: 'decimal' | 'currency' | '';
 
-        /** Default : label */
-        optionLabel?: string;
+        /** 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 : value */
-        optionValue?: string;
+        /** Default : 'en-US' */
+        locale?: string;
+        prefix?: string;
+        suffix?: string;
 
-        filter?: boolean;
+        // buttons
+        showButtons?: boolean;
 
-        /** one field or multiple comma separated fields are supported without any space in between. */
-        filterBy?: string;
+        /** Default : stacked */
+        buttonLayout?: 'stacked' | 'horizontal' | 'vertical';
+        step?: number;
 
-        filterMatchMode: 'contains' | 'startsWith' | 'endsWith' | 'equals' | 'notEquals' | 'in' | 'lt' | 'lte' | 'gt' | 'gte';
+        /** Whether to use grouping separators, such as thousands separators or thousand/lakh/crore separators. */
+        useGrouping?: boolean;
 
-        /** Default : false, if true it will get latest data when form opens for add/edit operation. */
-        alwaysGetLatestDataOnFormOpen?: boolean;
+        /** Maximum number of character allows in the input field. */
+        maxLength?: number;
 
-        /** Default : true, If false it will not be able to handle huge amount of data. */
-        virtualScroll?: boolean;
+        /** Minimum number of character allows in the input field. */
+        minLength?: number;
 
         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/>
              * formData: any = Entire form object<br/>
-             * column: IDBMasterConfigFormField = Configuration of that form column<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.
+             * 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: EDBMasterDropdownAppendTo,
+            appendTo: EDBMasterInputNumberAppendTo,
             /**
              * // dropdownData is available to use.
              *
@@ -1726,81 +1986,1038 @@ export interface IDBMasterConfigFormField {
              *
              */
             code: string,
-
         }[],
 
-        addNewFormConfig?: IDBMasterConfig;
+        validationErrors?: {
+            minLength?: string;
+        };
     };
+    // inputNumberSettings : end
 
-    autocompleteSettings?: {
-        dropdown?: boolean;
-    };
+    // inputMaskSettings : start
+    inputMaskSettings?: {
+        /** Give style object in angular style. */
+        style?: any;
 
-    fileUploadSettings?: {
-        /**
-         * 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.
+        /** 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/>
          * */
-        uploadApiUrl: string;
-        /** API URL which returns content of file in base64 format. */
-        downloadApiUrl?: string;
-        removeApiUrl?: string;
+        mask?: string;
 
-        /** Allow to select multiple files or not */
-        multiple?: boolean;
+        /** Advisory information to display on input. */
+        placeholder?: string;
 
-        /** ex : image/* */
-        accept?: string;
+        /** Ex : slotChar="mm/dd/yyyy" <br/>
+         * Default placeholder for a mask is underscore that can be customized using slotChar property.
+         *  */
+        slotChar?: string;
 
-        /** Maximum file size allowed in bytes. Default : 10000000 (10MB) */
-        maxFileSize?: number;
+        /** Default : true, Clears the incomplete value on blur. */
+        autoClear?: boolean;
+
+        /** Maximum number of character allows in the input field. */
+        maxLength?: 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: 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,
+        }[],
     };
+    // inputMaskSettings : end
 
-    dividerSettings?: {
-        align?: 'center' | 'left' | 'right' | 'bottom' | 'top';
-        type?: 'dashed' | 'dotted' | 'solid';
-        dividerText?: string;
+    // inputOtpSettings : start
+    inputOtpSettings?: {
+        /** Give style object in angular style. */
         style?: any;
-    }
-}
 
-export enum EDBMasterDropdownAppendTo {
-    modifyDropdownRequest = 'modifyDropdownRequest',
-    onceDropdownDataLoaded = 'onceDropdownDataLoaded',
-}
+        /** Enable the mask option to hide the values in the input fields. */
+        mask?: boolean;
 
-export enum EDBMasterConfigAppendTo {
-    oncePageLoad = 'oncePageLoad',
-    gridRender = 'gridRender',
-    modifyGridRequest = 'modifyGridRequest',
-    preSaveAndEdit = 'preSaveAndEdit',
-    beforeSaveModalOpen = 'beforeSaveModalOpen',
-    beforeEditModalOpen = 'beforeEditModalOpen',
-}
+        /** When integerOnly is present, only integers can be accepted as input. */
+        integerOnly?: boolean;
 
-export enum EDBMasterFormControl {
-    input = 'input',
-    password = 'password',
-    date_picker = 'date_picker',
-    textarea = 'textarea',
-    checkbox = 'checkbox',
-    color_picker = 'color_picker',
+        /** Default : 300px; */
+        uiControlWidth?: string;
+
+        /** Number of characters to initiate. */
+        length?: number;
+    };
+    // inputOtpSettings : end
+
+    // inputPasswordSettings : start
+    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;
+
+        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,
+        }[],
+    };
+    // inputPasswordSettings : end
+
+    // checkboxSettings : start
+    checkboxSettings?: {
+        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,
+        }[],
+    };
+    // checkboxSettings : end
+
+    // radioSettings : start
+    radioSettings?: {
+        displayType?: 'inline' | 'new_line';
+        displayInCenter?: boolean;
+        options: { label: string; value: any }[];
+
+        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,
+        }[],
+    };
+    // radioSettings : end
+
+    // datePickerSettings : start
+    /** 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';
+
+        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,
+        }[],
+    };
+    // datePickerSettings : end
+
+    // colorPickerSettings : start
+    colorPickerSettings?: {
+        /** Give style object in angular style. */
+        style?: any;
+
+        /** custom CSS class to assign to control */
+        cssClass?: string,
+
+        format?: 'hex' | 'rgb' | 'hsb';
+
+        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,
+        }[],
+    };
+    // colorPickerSettings : end
+
+    // dropdownSettings : start
+    dropdownSettings?: {
+        /** Give style object in angular style. */
+        style?: any;
+
+        /** custom CSS class to assign to control */
+        cssClass?: string,
+
+        placeholder?: string;
+        showClear?: boolean;
+        dataSource: 'static_data' | 'db_data' | 'api_call'; // custom_code = We can call any API in that.
+
+        /** it will use used when dataSource is 'static_data'. */
+        staticData?: any[]; // { label: string; value: any; }[] works default.
+
+        /**
+         * it can pickup IDB values from schema also.
+         */
+        dbData?: Partial<Pick<ICollectionIdentity, 'instance' | 'database' | 'collection' | 'table'>
+            & Pick<IQueryFormat, 'find' | 'select' | 'limit' | 'deep' | 'sort'>>;
+
+        /** Default : label */
+        optionLabel?: string;
+
+        /** Default : value */
+        optionValue?: string;
+
+        filter?: boolean;
+
+        /** one field or multiple comma separated fields are supported without any space in between. */
+        filterBy?: string;
+
+        filterMatchMode?: 'contains' | 'startsWith' | 'endsWith' | 'equals' | 'notEquals' | 'in' | 'lt' | 'lte' | 'gt' | 'gte';
+
+        /** Default : false, if true it will get latest data when form opens for add/edit operation. */
+        alwaysGetLatestDataOnFormOpen?: boolean;
+
+        /** Default : false, Make it true to handle huge amount of data. */
+        virtualScroll?: boolean;
+
+        /** on value change of current dropdown, it will change values of these dropdowns and reload them. */
+        reloadDropdownsOfPath?: string[];
+
+        /** API call will happen when these values of path are present in formData */
+        isDependentOnPath?: string[];
+
+        jsCode?: {
+            /**
+             * modifyDropdownRequest = It will run before hitting API call. So we can do whatever we want.<br/>
+             * onceDropdownDataLoaded = Execute code when dropdown data is loaded.<br/>
+             *
+             * Available variables:<br/>
+             * body: IQueryFormat | any. Useful to modify apiCallOverrides also,<br/>
+             * formData: any = Entire form object<br/>
+             * column: IDBMasterConfigFormField = Configuration of that form column. column.dropdownSettings?.dbData?.find will be query to get data. <br/>
+             * allDropdownDataMap: {[path: string]: any[]} = Map of all dropdown data<br/>
+             * dropdownData: any[] = Latest loaded dropdown data<br/>
+             * reloadDropdownsOfPath: string[] = Add path to this variable to reload its dropdown data.<br/>
+             * globalData: any = User will send it using SET_GLOBAL_DATA_TO_USE_IN_ANY_SCRIPT event from parent.<br/>
+             * utils: any = Common utility functions for user to use. <br/>
+             * queryParams: any = Query params received from URL. <br/>
+             */
+            appendTo: EDBMasterDropdownAppendTo,
+            /**
+             * // dropdownData is available to use.
+             *
+             * // Return promise for long awaiting tasks.
+             * new Promise(async (resolve, reject) => {
+             *     await new Promise(r => setTimeout(r, 3000));
+             *     dropdownData[0].name = 'Sample data';
+             *     resolve();
+             * });
+             *
+             * // Directly modify data of grid
+             * dropdownData[0].name = 'Sample data';
+             *
+             * // Return function
+             * (function setData() { dropdownData[0].name = 'Sample data'; } );
+             *
+             */
+            code: string,
+
+        }[],
+
+        addNewFormConfig?: IDBMasterConfig;
+
+        apiCallOverrides?: IDBMasterAPICallOverrides;
+    };
+    // dropdownSettings : end
+
+    // autocompleteSettings : start
+    autocompleteSettings?: {
+        dropdown?: boolean;
+    };
+    // autocompleteSettings : end
+
+    // fileUploadSettings : start
+    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;
+    };
+    // fileUploadSettings : end
+
+    // dividerSettings : start
+    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;
+    };
+    // dividerSettings : end
+
+    // accordionSettings : start
+    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,
+        }[],
+    };
+    // accordionSettings : end
+
+    // tabViewSettings : start
+    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,
+        }[],
+    };
+    // tabViewSettings : end
+
+    // buttonSettings : start
+    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?: 'success' | 'info' | 'warning' | 'danger' | 'help' | 'primary' | 'secondary' | 'contrast' | 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;
+
+        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,
+        }[],
+    };
+    // buttonSettings : end
+
+    // imageSettings : start
+    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;
+
+        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,
+        }[],
+    };
+    // imageSettings : end
+
+    // customHTMLSettings : start
+    customHTMLSettings?: {
+        htmlCode: string;
+    };
+    // customHTMLSettings : end
+
+// genericConfig : start
+}
+
+// genericConfig : end
+
+// genericConfig : start
+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;
+}
+
+// genericConfig : end
+
+// dropdownSettings : start
+export enum EDBMasterDropdownAppendTo {
+    visible = 'visible',
+    disabled = 'disabled',
+    modifyDropdownRequest = 'modifyDropdownRequest',
+    onceDropdownDataLoaded = 'onceDropdownDataLoaded',
+    onChange = 'onChange',
+}
+
+// dropdownSettings : end
+
+// inputTextSettings : start
+export enum EDBMasterInputTextAppendTo {
+    visible = 'visible',
+    disabled = 'disabled',
+    ngModelChange = 'ngModelChange',
+    focus = 'focus',
+    blur = 'blur',
+    keyUp = 'keyUp',
+    keyDown = 'keyDown',
+}
+
+// inputTextSettings : end
+
+// inputOtpSettings : start
+export enum EDBMasterInputOtpAppendTo {
+    visible = 'visible',
+    disabled = 'disabled',
+}
+
+// inputOtpSettings : end
+
+// buttonSettings : start
+export enum EDBMasterButtonAppendTo {
+    visible = 'visible',
+    disabled = 'disabled',
+    click = 'click',
+}
+
+// buttonSettings : end
+
+// imageSettings : start
+export enum EDBMasterImageAppendTo {
+    visible = 'visible',
+    disabled = 'disabled',
+    click = 'click',
+}
+
+// imageSettings : end
+
+// inputNumberSettings : start
+export enum EDBMasterInputNumberAppendTo {
+    visible = 'visible',
+    disabled = 'disabled',
+    ngModelChange = 'ngModelChange',
+    focus = 'focus',
+    blur = 'blur',
+    keyUp = 'keyUp',
+    keyDown = 'keyDown',
+}
+
+// inputNumberSettings : end
+
+// tabViewSettings : start
+export enum EDBMasterTabViewAppendTo {
+    visible = 'visible',
+    disabled = 'disabled',
+    activeIndexChange = 'activeIndexChange',
+}
+
+// tabViewSettings : end
+
+// dividerSettings : start
+export enum EDBMasterDividerAppendTo {
+    visible = 'visible',
+}
+
+// dividerSettings : end
+
+// accordionSettings : start
+export enum EDBMasterAccordionAppendTo {
+    visible = 'visible',
+    disabled = 'disabled',
+    activeIndexChange = 'activeIndexChange',
+}
+
+// accordionSettings : end
+
+// customHTMLSettings : start
+export enum EDBMasterCustomHtmlAppendTo {
+    visible = 'visible',
+}
+
+// customHTMLSettings : end
+
+// inputMaskSettings : start
+export enum EDBMasterInputMaskAppendTo {
+    visible = 'visible',
+    disabled = 'disabled',
+    ngModelChange = 'ngModelChange',
+    focus = 'focus',
+
+    /** If you are trying to modify model value in blur it will not work. It is old bug in PrimeNG. Use complete method instead. */
+    blur = 'blur',
+    complete = 'complete',
+    keyUp = 'keyUp',
+    keyDown = 'keyDown',
+}
+
+// inputMaskSettings : end
+
+// inputPasswordSettings : start
+export enum EDBMasterInputPasswordAppendTo {
+    visible = 'visible',
+    disabled = 'disabled',
+    ngModelChange = 'ngModelChange',
+    focus = 'focus',
+    blur = 'blur',
+    keyUp = 'keyUp',
+    keyDown = 'keyDown',
+}
+
+// inputPasswordSettings : end
+
+// textAreaSettings : start
+export enum EDBMasterTextAreaAppendTo {
+    visible = 'visible',
+    disabled = 'disabled',
+    ngModelChange = 'ngModelChange',
+    focus = 'focus',
+    blur = 'blur',
+    keyUp = 'keyUp',
+    keyDown = 'keyDown',
+}
+
+// textAreaSettings : end
+
+// checkboxSettings : start
+export enum EDBMasterCheckboxAppendTo {
+    visible = 'visible',
+    disabled = 'disabled',
+    ngModelChange = 'ngModelChange',
+}
+
+// checkboxSettings : end
+
+// radioSettings : start
+export enum EDBMasterRadioAppendTo {
+    visible = 'visible',
+    disabled = 'disabled',
+    ngModelChange = 'ngModelChange',
+}
+
+// radioSettings : end
+
+// colorPickerSettings : start
+export enum EDBMasterColorPickerAppendTo {
+    visible = 'visible',
+    disabled = 'disabled',
+    ngModelChange = 'ngModelChange',
+}
+
+// colorPickerSettings : end
+
+// datePickerSettings : start
+export enum EDBMasterDatePickerAppendTo {
+    visible = 'visible',
+    disabled = 'disabled',
+    ngModelChange = 'ngModelChange',
+    focus = 'focus',
+    blur = 'blur',
+}
+
+// datePickerSettings : end
+
+// fileUploadSettings : start
+export enum EDBMasterFileUploadAppendTo {
+    visible = 'visible',
+    disabled = 'disabled',
+}
+
+// fileUploadSettings : end
+
+// gridSettings : start
+export enum EDBMasterGridAppendTo {
+    visible = 'visible',
+    disabled = 'disabled',
+}
+
+// gridSettings : end
+
+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',
+}
+
+// genericConfig : start
+export enum EDBMasterFormControl {
+    input = 'input',
+    inputNumber = 'inputNumber',
+    inputMask = 'inputMask',
+    inputOtp = 'inputOtp',
+    password = 'password',
+    date_picker = 'date_picker',
+    textarea = 'textarea',
+    checkbox = 'checkbox',
+    radio = 'radio',
+    color_picker = 'color_picker',
     dropdown = 'dropdown',
     file_upload = 'file_upload',
     grid = 'grid',
     divider = 'divider',
-    // Save is working for editor but setting data is not working. PrimeNG has bug in it.
-    // editor = 'editor',
-    // auto_complete = 'auto_complete',
+
+    // Field holder controls
+    accordion = 'accordion',
+    tab_view = 'tab_view',
+
+    // utility controls
+    button = 'button',
+    image = 'image',
+    customHTML = 'customHTML',
 }
 
+// genericConfig : end
+
 export interface IDBMasterMessageFromIframeToParent {
     fromDBMaster: string;
     eventType: IDBMasterEventFromIframeToParent;
@@ -1812,6 +3029,9 @@ export interface IDBMasterMessageFromParentToIframe {
     eventData: any;
 }
 
+/**
+ * Iframe parent will receive these events via messages.
+ */
 export enum IDBMasterEventFromIframeToParent {
     PAGE_READY = 'PAGE_READY',
     RECORD_SAVED = 'RECORD_SAVED',
@@ -1826,26 +3046,114 @@ export enum IDBMasterEventFromIframeToParent {
     DROPDOWN_ADD_NEW_RECORD_SAVED = 'DROPDOWN_ADD_NEW_RECORD_SAVED',
 }
 
+/**
+ * Iframe parent can send these messages to UI Page via message.
+ */
 export enum IDBMasterEventFromParentToIframe {
+    /** You can trigger add button click. */
     TRIGGER_ADD_NEW_BUTTON_CLICK = 'TRIGGER_ADD_NEW_BUTTON_CLICK',
+
+    /** You can trigger refresh button click of grid. */
     TRIGGER_REFRESH_BUTTON_CLICK = 'TRIGGER_REFRESH_BUTTON_CLICK',
+
+    /** Need to pass object and those properties will be sent in grid load query. */
     DATA_TO_APPEND_IN_GRID_LOAD_FIND_QUERY = 'DATA_TO_APPEND_IN_GRID_LOAD_FIND_QUERY',
+
+    /** Need to pass object and those properties will be sent in SAVE API call. */
     DATA_TO_APPEND_IN_RECORD_SAVE_API_PAYLOAD = 'DATA_TO_APPEND_IN_RECORD_SAVE_API_PAYLOAD',
+
+    /** Need to pass object and those properties will be sent in Update API call. */
     DATA_TO_APPEND_IN_RECORD_UPDATE_API_PAYLOAD = 'DATA_TO_APPEND_IN_RECORD_UPDATE_API_PAYLOAD',
+
+    /** Pass object which will be used in global variable named "globalData" in custom code. */
     SET_GLOBAL_DATA_TO_USE_IN_ANY_SCRIPT = 'SET_GLOBAL_DATA_TO_USE_IN_ANY_SCRIPT',
+
+    /** Send message to iframe when you are done with setting required data in globalData or other required places. */
     PARENT_READY = 'PARENT_READY', // parent will send message when it is ready with grid conditions.
 }
 
+export interface IDBMasterUIPageUtilsScope {
+    globalData: any;
+    utils: {
+        schema: any;
+        dbMaser: any;
+        errorsMap: { [path: string]: string };
+        messageService: {
+            showErrorToast(msg: string, otherProps?: any): void;
+            showSuccessToast(msg: string, otherProps?: any): void;
+            showInfoToast(msg: string, otherProps?: any): void;
+            showWarningToast(msg: string, otherProps?: any): void;
+        }
+
+        /**
+         * form fields are in nested form, it returns simple array of form fields.
+         * It will not include fields from grid control as they are having different form and grid control itself is a form.
+         * It will include all fields of accordion, tab controls.
+         * It will include fields having path property.
+         * */
+        getFlatArrayOfAllFormFields(
+            fields: IDBMasterConfigFormField[][]
+        ): Promise<IDBMasterConfigFormField[]>;
+
+        /**
+         * form fields are in nested form, it returns simple array of form fields.
+         * It will also include form fields from grid control.
+         * It will include all fields of accordion, tab controls.
+         * */
+        getFlatArrayOfAllFormFieldsIncludingGridFields(
+            fields: IDBMasterConfigFormField[][]
+        ): Promise<IDBMasterConfigFormField[]>;
+
+        /** It finds form element having that path.
+         * It will also check into grid form fields.
+         * It can find element having hiddenId
+         * */
+        findFormElement(pathOrHiddenId: string): IDBMasterConfigFormField | undefined;
+
+        /**
+         * It will return list of all controls provided in arguments.
+         * */
+        findFormElementOfControl(control: EDBMasterFormControl): IDBMasterConfigFormField[];
+
+        /** It finds grid element having that path. */
+        findGridElement(path: string): IDBMasterConfigGridField | undefined;
+    };
+    queryParams: any;
+    userUtils: { [utilName: string]: any };
+    event: any | null;
+    config: IDBMasterConfig | null;
+    column: IDBMasterConfigFormField | null;
+    formData: any | null;
+    allDropdownDataMap: { [path: string]: any[] } | null;
+    reqBody: any | null;
+    gridData: any[] | null;
+    dropdownData: any[] | null;
+    reloadDropdownsOfPath: string[] | null;
+    mode: 'save' | 'edit' | 'view' | 'import' | null,
+    apiResponse: any | null;
+    headers: any | null;
+    selectedGridItems: any | null;
+
+    /** It will be available in case of EDBMasterConfigAppendTo.beforeSaveModalOpen */
+    getByIdResp: any | null;
+    env: {
+        BE_HOST_PORT: string,
+    }
+}
+
 /**
  * If you want to hide custom action provide below property
  * ____hide_actionName = true
  */
-export enum IDBMasterSpecialRowProperties {
-    /** if this property found in row with value true, it will hide delete button for that row even if that is supported. */
+export enum EDBMasterSpecialRowProperties {
+    /** if this property found in row with truthy value, it will hide delete button for that row even if that is supported. */
     ____hide_delete_button = '____hide_delete_button',
 
-    /** if this property found in row with value true, it will hide edit button for that row even if that is supported. */
+    /** if this property found in row with truthy value, it will hide edit button for that row even if that is supported. */
     ____hide_edit_button = '____hide_edit_button',
+
+    /** if this property found in row with truthy value, it will hide view button for that row even if that is supported. */
+    ____hide_view_button = '____hide_view_button',
 }
 
 // ==== DB Master configurations End ====