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

Page Controller

Application level controller

PreviousApp ControllerNextController Component

Last updated 2 years ago

Was this helpful?

Page Controller can be used for the following purposes

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

  2. Define event handler functions for supported components on the page

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

If you want complete control on the page, then define an empty page and return a PageComponent that takes up and control the whole page.

Example Page Controller

import React from 'react';
import { Box } from '@mui/material';
import type { BaseFunctionProps, FormatColumnValueFunction, IOComponentProps, IconValueWithToolTip } from 'cloudio';
import { getSessionProperty } from 'cloudio';
import platform from 'platform';

function getUserName() {
    return getSessionProperty(platform, 'userName');
}

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

const NF = {
  USD: new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD',
  }),
};

const formatColumnValue: FormatColumnValueFunction = ({ viewAttribute, value, rawValue, record, theme }) => {
  if (rawValue) {
      let icon: IconValueWithToolTip | undefined;
      switch (rawValue) {
          case 7:
              icon = { iconName: 'check', color: theme.palette.success.main, iconType: 'light' };
              break;
          case 9:
              icon = { iconName: 'wrench', color: theme.palette.warning.main, iconType: 'light' };
              break;
          case 8:
              icon = { iconName: 'times', color: theme.palette.error.main, iconType: 'light' };
              break;
          default:
              icon = { iconName: 'desktop', color: theme.palette.primary.main, iconType: 'light', iconSize: 30, tooltip: 'some tooltip...' + value };
              break;
      }
      return { value, icon };
  }
  return value;
}

function onSomeTextFieldChange({ pageId, itemId, platform, oldValue, value, ...otherProps }: BaseFunctionProps) {
  // validate the user entered value
  if (value === 'test') {
      // show an error message to the user
      platform.showError(`Invalid value ${value}!`);
      // return the oldValue to override user entered value
      return oldValue;
  }
  return value;
}

function someDebugFunction(props: BaseFunctionProps) {
  // use this function to just print all the incoming properties
  // console.log(props);
}

async function getPageSX({ theme, platform, appUid }: BaseFunctionProps) {
  // refer https://mui.com/system/the-sx-prop/
  /*
  const darkMode = theme.palette.mode === 'dark';
  return {
      bgcolor: darkMode ? '#000' : '#fff',
      '& #someId': { display: 'none' },
      '& .someCSSClassName': { backgroundColor: theme.palette.background.paper }
  };
  */
  return {};
}

// must export a default object with all the functions to be used by this page
export default {
  formatColumnValue,
  // getPageSX, // page level sx prop refer https://mui.com/system/the-sx-prop/
  onSomeTextFieldChange,
  someDebugFunction,
  PageComponent, // PageComponent will be rendered at the root of the page and will get unmounted when the page is exited.
}

Navigation Steps

Navigate to the Pages tab on the sidebar and click on the Edit Page icon as shown below

SX prop