CloudIO Platform
cloudio.ioVersion 3.0 Docs
  • CloudIO Platform
  • Architecture
  • Service Architecture
  • Scalability
  • Installation
  • Getting Started
    • Overview
    • How Tos
  • UI
    • App Controller
    • Page Controller
    • Controller Component
    • Custom Component
      • Sample Property Definitions
      • Custom Component Types
  • DataSource
    • Server Side Scripts
      • Sample Scripts
      • Module Imports
    • WHO Columns
  • REST APIs
    • Authentication
    • Query
    • Post
    • Status
    • API Playground
  • Workflow REST APIs
    • Introduction
    • PUT
    • GET
    • Instance PUT
    • Instance GET
    • Increment and GET
    • Instance Increment and GET
  • App Deployment
    • CloudIO CLI
    • Patch Management
    • SQL Migrations
    • Component Help
    • Email Setup
    • Configure SSO/OAuth
      • OAUTH 2.0
        • GOOGLE
      • SAML
        • AUTH0
        • AZURE AD
        • OKTA
      • Auto User Creation
    • Test Automation
    • On Premise Agent
  • Oracle Instant client
    • Setup
Powered by GitBook
On this page

Was this helpful?

Edit on GitHub
  1. UI

App Controller

Application level controller

PreviousOverviewNextPage Controller

Last updated 2 years ago

Was this helpful?

App Controller can be used for the following purposes

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

  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

SX prop