Button Form Control

Example

let dbMasterConfig: T.IDBMasterConfig = {
    form: {
        fields: [
            [{
                label: ' ',
                control: T.EDBMasterFormControl.button,
                buttonSettings: {
                    label: 'Reload',
                    cssClass: 'font-monospace',
                    // link: true,
                    icon: 'pi pi-check',
                    iconPos: 'right',
                    size: 'small',
                    // severity: 'warning',
                    style: {
                        color: 'white',
                        width: '100px',
                    },
                    jsCode: [{
                        appendTo: T.EDBMasterButtonAppendTo.click,
                        code: `
                            // console.log(column);
                            // console.log(config);
                            // column.buttonSettings.disabled = true;

                            console.log(utils);
                            utils.messageService.showSuccessToast('hello', {life: 5000});
                            utils.errorsMap['product_categories_lookup_id'] = 'error from custom code';
                        `,
                    }]
                }
            }]
        ]
    }
};

Interface Documentation

export interface IDBMasterConfigFormField {
    /** It is used to find element. */
    hiddenId?: string;
    label?: string;

    /** This text will be displayed under control in small. HTML supported. */
    helpText?: string;

    path?: string;
    control: EDBMasterFormControl;

    /** if true, that control will take focus automatically. */
    autofocus?: boolean;

    /** if true, control will be disabled. If string provides, it will evaluate that string and enable/disable based on that. */
    disabled?: boolean | string;

    /** if true or undefined, control will be visible. If string provides, it will evaluate that string and make it visible/invisible based on that. */
    visible?: boolean | string;

    validations?: Pick<IPropertyValidation, 'required'>;
    validationErrors?: {
        required?: string;
    };

    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;

        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,
        }[],
    };

}


export interface IPropertyValidation {
    required?: boolean; // Allowed Types : *
    min?: number; // Allowed Types : number | date
    max?: number; // Allowed Types : number | date
    minLength?: number; // Allowed Types : string
    maxLength?: number; // Allowed Types : string
    unique?: boolean;
    email?: boolean; // Allowed Types : string
    validatorFun?: Function;
}


export enum EDBMasterButtonAppendTo {
    visible = 'visible',
    disabled = 'disabled',
    click = 'click',
}


export enum EDBMasterFormControl {
    input = 'input',
    inputNumber = 'inputNumber',
    inputMask = 'inputMask',
    inputOtp = 'inputOtp',
    password = 'password',
    date_picker = 'date_picker',
    textarea = 'textarea',
    checkbox = 'checkbox',
    radio = 'radio',
    color_picker = 'color_picker',
    dropdown = 'dropdown',
    file_upload = 'file_upload',
    grid = 'grid',
    divider = 'divider',

    // Field holder controls
    accordion = 'accordion',
    tab_view = 'tab_view',

    // utility controls
    button = 'button',
    image = 'image',
    customHTML = 'customHTML',
}