Custom Global CSS & JS
Custom CSS
👉 This CSS will be appended in header so it will be available everywhere.
👉 You can also modify behaviour of existing applied classed in the page.
👉 You can dynamically append these classes to UI elements using custom JS code via different "appendTo".
export interface IDBMasterConfig {
cssCode: [{
runOn: 'header',
code: `
.font-orange { color: orange; }
`,
}],
}
Custom JS
👉 You can add custom JS code using below method and change UI page behaviour as per your business requirement.
👉 Many hooks are available For example.
export interface IDBMasterConfig {
jsCode: [{
appendTo: T.EDBMasterConfigAppendTo.oncePageLoadWithContext,
code: `
console.log(config);
`
}, {
appendTo: T.EDBMasterConfigAppendTo.gridRender,
code: `
// 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 = 'Mayur';
// resolve();
// });
// Directly modify data of grid
// gridData[0].name = 'Mayur';
// Below is working
// (function test() { gridData[0].name = 'Mayur'; } );
`
}, {
appendTo: T.EDBMasterConfigAppendTo.modifyGridRequest,
code: `
// console.log(moment);
// console.log(_);
// gridEvent, reqBody are available to use.
// reqBody.find.name = 'Jaclyn';
`
}, {
appendTo: T.EDBMasterConfigAppendTo.preSaveAndEdit,
code: `
// gridEvent, reqBody are available to use.
// reqBody.find.name = 'Jaclyn';
// delete reqBody.name;
// console.log('from preSaveAndEdit', reqBody);
`
}, {
appendTo: T.EDBMasterConfigAppendTo.beforeSaveModalOpen,
code: `
// const field = utils.findFormElement('custom_api_in_dropdown'); // custom_api_in_dropdown = path of field
const field = utils.findFormElement('10'); // hiddenId field
console.log(field);
const allFormFieldsNoGridFields = utils.getFlatArrayOfAllFormFields();
// console.log(allFormFieldsNoGridFields);
const allFormFields = utils.getFlatArrayOfAllFormFieldsIncludingGridFields();
// console.log(allFormFields);
`
}],
}