App Controller
Application level controller
App Controller can be used for the following purposes
Customize application level CSS (Look & Feel) using the SX prop
Define utility functions that can be imported across different page controllers within the application
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

Last updated
Was this helpful?