This page View Markdown Open in ChatGPT Open in Claude

Custom Global CSS & JS¶

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.

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.

✓ oncePageLoadWithContext
✓ gridRender
✓ modifyGridRequest
✓ preSaveAndEdit
✓ beforeSaveModalOpen

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