Grid Configurations¶
UI Maker is deprecated
UI Maker is kept for the projects which use it and will be removed in API Maker v4. New admin screens are better built with any frontend framework on top of the generated APIs.
Hide delete, edit, view action buttons in row¶
-
Set below properties as true in any object of specific row to hide that particular action button
____hide_delete_button
____hide_edit_button
____hide_view_button
-
To hide custom action button, you can provide property in below format
____hide_+ actionName
Example¶
export interface IDBMasterConfig {
theme?: EDBMasterTheme;
/**
* Used in many places. Use in add form will look like ex: Add ${screenName}.<br/>
* You can provide value like 'Person' | 'Contact Details'. <br/>
* It gives more personalized success/error messages for that particular screen.
*/
screenName?: string;
/** Default : false */
showThemeSelector?: boolean;
/**
* 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;
/**
* Default : 'dd-MM-yyyy hh:mm:ss a'
* System is using date-fns formats to format date object in grid cells.
* This format will be converted automatically for primeNG calendar control.
* 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 default for all Calendar control in UI.
*/
dateTimeFormat?: string;
operations?: {
add?: IDBMasterConfigOperation;
hideAddConfirmation?: boolean;
/** Default : false. If true, it will not show delete all button. */
hideDeleteAllButton?: boolean;
hideDeleteAllConfirmation?: boolean;
showRefreshButton?: 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;
}
};
externalLibs?: {
css?: string[],
js?: string[],
},
cssCode?: {
runOn: 'header',
code: string,
}[],
jsCode?: {
/**
* 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,
/**
* // gridEvent, gridData are available to use.
*
* // Return promise for long awaiting tasks.
* new Promise(async (resolve, reject) => {
* await new Promise(r => setTimeout(r, 3000));
* gridData[0].name = 'Sample data';
* resolve();
* });
*
* // Directly modify data of grid
* gridData[0].name = 'Sample data';
*
* // Return function
* (function setData() { gridData[0].name = 'Sample data'; } );
*
*/
code: string,
}[],
grid: {
header: 'Students',
minWidth: '80rem',
showColumnSelector: true,
selection: {
mode: 'multiple',
checkboxSelection: true,
},
fields: [{
header: 'Name',
path: 'name',
enableSorting: true,
}, {
header: 'APL Contact',
path: 'apl_contact',
dbData: {
collection: 'apl_contacts',
pkField: '_id',
displayField: 'contact_name',
}
}, {
header: 'Address',
path: 'preferred_address',
enableSorting: true,
visibilityStatus: T.EDBMasterConfigGridColumnVisibilityStatus.INVISIBLE,
}, {
header: 'Mobile No',
path: 'mobile',
}, {
header: 'Created At',
path: 'createdAt',
autoFormatDate: true,
dateTimeFormat: 'dd-MM-yyyy hh:mm:ss a',
}, {
header: 'Boolean',
path: 'boolField',
}]
// apiCallOverrides: {
// url: `:beHostPort/api/custom-api/:userPath/custom-get-grid-data`,
// },
operations: {
delete: {
enable: true,
cssClass: 'text-danger',
// apiCallOverrides: {
// url: `:beHostPort/api/custom-api/:userPath/custom-delete-by-id`,
// pkField: '_id', // 👈 Primary key of current table
// },
//
// apiCallOverridesDeleteMany: {
// url: `:beHostPort/api/custom-api/:userPath/custom-delete-many`,
// pkField: '_id', // 👈 Primary key of current table
// }
},
edit: {
enable: true,
cssClass: 'text-info',
// apiCallOverrides: {
// url: `:beHostPort/api/custom-api/:userPath/custom-edit-by-id`,
// },
//
// apiCallOverridesGetById: {
// url: `:beHostPort/api/custom-api/:userPath/custom-get-by-id`,
// pkField: '_id', // 👈 Primary key of current table
// }
},
hideDeleteConfirmation: true,
hideEditConfirmation: true,
gridOperationsOrder: [
T.EDBMasterGridOperationsOrder.delete,
T.EDBMasterGridOperationsOrder.edit,
T.EDBMasterGridOperationsOrder.custom,
],
gridColumnsOrder: [
T.EDBMasterGridColumnsOrder.checkbox,
T.EDBMasterGridColumnsOrder.dbFields,
T.EDBMasterGridColumnsOrder.actions,
],
actionColumnWidth: '120px',
customActionButtons: [{
actionName: 'approve',
cssClass: 'pi pi-check',
style: {
color: 'yellow',
},
confirmationMessageScript: "`Do you want to approve ${selectedGridItems.name}?`",
}],
},
selectFieldsForQuery: {
// 'current_ctc': -1,
// 'name': 1,
// 'preferred_address': 1,
// 'mobile': 1,
// 'createdAt': 1,
},
filter: {
showGlobalSearch: true,
globalSearchFields: ['name', 'preferred_address', 'mobile', 'createdAt'],
rowFilter: true,
},
pagination: {
showPagination: true,
rowsPerPage: 10,
serverSidePagination: true,
},
grouping: {
groupRowsBy: 'name',
headerStyle: {
fontWeight: 'bold',
},
headerCssClass: 'text-primary',
footerStyle: {
fontWeight: 'bold',
},
footerCssClass: 'text-danger text-right',
footerColumnPath: 'name'
},
sortMode: 'multiple',
multiSortMeta: [{
field: 'name',
order: 1,
}],
},
}
Interface Documentation¶
👉 This interface documentation contains only grid configuration just to focus on context of grid. It has many other things also.
export interface IDBMasterConfig {
grid?: {
header?: string;
/** ex: Showing {first} to {last} of {totalRecords} entries */
currentPageReportTemplate?: string;
/** Default : false */
showColumnSelector?: boolean;
/** Default : 50rem */
minWidth?: string;
/** Default : 40rem */
breakpoint?: string;
/** Used for nested grid only. From this field it will pickup data array and show grid based on that */
dataFieldPath?: string;
operations?: {
delete?: Omit<IDBMasterConfigOperation, 'label'> & { apiCallOverridesDeleteMany?: IDBMasterAPICallOverrides; };
edit?: 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 */
gridOperationsOrder?: (EDBMasterGridOperationsOrder.delete | EDBMasterGridOperationsOrder.edit | EDBMasterGridOperationsOrder.custom)[];
/** Only 3 */
gridColumnsOrder?: (EDBMasterGridColumnsOrder.checkbox | EDBMasterGridColumnsOrder.actions | EDBMasterGridColumnsOrder.dbFields)[];
actionColumnWidth?: string;
customActionButtons?: IDBMasterCustomActionButton[];
};
/**
* If empty, it will generate grid for all fields of schema in schema order.
* It will not generate _id for Mongo DB.
*/
fields?: IDBMasterConfigGridField[],
/**
* Ex1 : { name: 1 }
* Ex2 : { password : -1 }
* It supports syntax of select object in API Maker's query API.
* By default, all fields of database table will be selected.
* Not applicable for nested grids.
*/
selectFieldsForQuery?: {
[field: string]: 1 | -1
};
/**
* Default : 'single'. Default sorting is executed on a single column, in order to enable multiple field sorting,
* set sortMode property to "multiple" and use metakey(ctrl | cmd) when clicking on another column.
*/
sortMode?: 'single' | 'multiple';
/**
* Ex : [{ field: 'name', order: 1 }]
* Useful to have columns sorted by default.
* To make it work, field should have enableSorting true.
*/
multiSortMeta?: { field: string; order: -1 | 1 }[];
pagination?: {
/** Default : false */
showPagination?: boolean;
/** Default : false, this will not work for nested grid. */
serverSidePagination?: boolean;
/** Default : 10 */
rowsPerPage?: number;
/** Default : [10, 20, 50, 100, 500, 1000] */
rowsPerPageOptions?: number[];
}
grouping?: {
// rowGroupMode: 'subheader'; // default : subheader. rowspan = is not supported.
/** group by column name */
groupRowsBy: string;
/** Give style object in angular style. */
headerStyle?: any;
/** You can provide single or multiple classes. */
headerCssClass?: string,
/** Give style object in angular style. */
footerStyle?: any;
/** You can provide single or multiple classes. */
footerCssClass?: string,
/** Group footer will be generated from this property of object. */
footerColumnPath?: string,
}
selection?: {
/** Default grid selection mode is multiple */
mode: 'single' | 'multiple';
/** name of primary key field. Default : it will be automatically pickup from schema. */
dataKey?: string;
/** Default : true, If true we need Ctrl | Cmd to select row. */
metaKeySelection?: boolean;
/** Default : false, Works only with mode=multiple. If true it will show checkbox column for selection. */
checkboxSelection?: boolean;
}
filter?: {
/** Default : false, if true you can filter in all fields */
showGlobalSearch?: boolean;
// country.name is supported by primeNG table.
/**
* Ex: ['name', 'first_name', 'country.name']
* It will work only for string & number fields.
* For string, it will check for contains and for number type, will be exact match query.
*/
globalSearchFields?: string[];
/** Default : false, if true it will show filter for each column */
rowFilter?: boolean;
}
apiCallOverrides?: IDBMasterAPICallOverrides;
};
}