Page Controller

Application level controller

Page Controller can be used for the following purposes

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

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