App Controller

Application level controller

App Controller can be used for the following purposes

1. Customize application level CSS (Look & Feel) using the SX prop

2. Define utility functions that can be imported across different page controllers within the application

3. Define an application level React component that will stay mounted while the application is in use

Example App Controller

import React from 'react';

function AppComponent(props) {
    console.log(props, 'AppComponent.render');
    React.useEffect(() => {
        // fetch and initialize app level data
        console.log(props, 'AppComponent.useEffect');
    }, []);
    return null;
}

export default {
    // refer https://mui.com/system/the-sx-prop
    getAppSX: async ({ theme, platform, appUid }) => {
        const darkMode = theme.palette.mode === 'dark';
        /*
        return {
            bgcolor: darkMode ? '#000' : '#fff',
            '& #someId': { display: 'none' },
            '& .someCSSClassName': { backgroundColor: theme.palette.background.paper }
        };
        */
        return {};
    },
    someCustomAppLevelUtilFunction: async () => {
        // you can invoke this function from any page controller
        // import { someCustomAppLevelUtilFunction } from 'app';
        // await someCustomAppLevelUtilFunction();
    },
    AppComponent, // AppComponent will be rendered at the root of the application and will remain mounted on all Pages within this Application
}

Navigation Steps

Navigate to the App Settings on the sidebar and click on the Edit Application Controller icon on the header as shown below