CE-1727 - Improve (fix?) next/submit handling for validation screen and linear flow.

Tag release

.circleci/config.yml

@@ -115,7 +115,7 @@ workflows:
           context: [ qqq-maven-registry-credentials, kingsrook-slack, build-qqq-sample-app ]
           filters:
             branches:
-              ignore: /(main|integration.*)/
+              ignore: /(main|dev|integration.*)/
             tags:
               ignore: /(version|snapshot)-.*/
   deploy:
@@ -124,7 +124,7 @@ workflows:
           context: [ qqq-maven-registry-credentials, kingsrook-slack, build-qqq-sample-app ]
           filters:
             branches:
-              only: /(main|integration.*)/
+              only: /(main|dev|integration.*)/
             tags:
               only: /(version|snapshot)-.*/
 

cypress.config.ts

@@ -1,12 +0,0 @@
-import {defineConfig} from "cypress";
-
-export default defineConfig({
-   e2e: {
-      viewportHeight: 1000,
-      viewportWidth: 1200,
-      setupNodeEvents(on, config)
-      {
-      // implement node event listeners here
-      },
-   },
-});

package.json

@@ -6,7 +6,7 @@
       "@auth0/auth0-react": "1.10.2",
       "@emotion/react": "11.7.1",
       "@emotion/styled": "11.6.0",
-      "@kingsrook/qqq-frontend-core": "1.0.97",
+      "@kingsrook/qqq-frontend-core": "1.0.108",
       "@mui/icons-material": "5.4.1",
       "@mui/material": "5.11.1",
       "@mui/styles": "5.11.1",
@@ -59,7 +59,7 @@
       "build": "react-scripts build",
       "clean": "rm -rf node_modules package-lock.json lib",
       "eject": "react-scripts eject",
-      "clean-and-install": "rm -rf node_modules/ && rm -rf package-lock.json && rm -rf lib/ && npm install --legacy-peer-deps",
+      "clean-and-install": "rm -rf node_modules/ && rm -rf package-lock.json && rm -rf lib/ && npm install --legacy-peer-deps && npm dedupe --force",
       "npm-install": "npm install --legacy-peer-deps",
       "prepublishOnly": "tsc -p ./ --outDir lib/",
       "start": "BROWSER=none react-scripts --max-http-header-size=65535 start",

pom.xml

@@ -29,7 +29,7 @@
    <packaging>jar</packaging>
 
    <properties>
-      <revision>0.20.0-SNAPSHOT</revision>
+      <revision>0.23.0-SNAPSHOT</revision>
 
       <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
       <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
@@ -66,7 +66,7 @@
       <dependency>
          <groupId>com.kingsrook.qqq</groupId>
          <artifactId>qqq-backend-core</artifactId>
-         <version>0.20.0-20240308.165846-65</version>
+         <version>0.21.0</version>
       </dependency>
       <dependency>
          <groupId>org.slf4j</groupId>
@@ -154,11 +154,11 @@
                   <versionTagPrefix>version-</versionTagPrefix>
                </gitFlowConfig>
                <skipFeatureVersion>true</skipFeatureVersion> <!-- Keep feature names out of versions -->
-               <postReleaseGoals>install</postReleaseGoals>  <!-- Let CI run deploys -->
                <commitDevelopmentVersionAtStart>true</commitDevelopmentVersionAtStart>
                <versionDigitToIncrement>1</versionDigitToIncrement> <!-- In general, we update the minor -->
                <versionProperty>revision</versionProperty>
                <skipUpdateVersion>true</skipUpdateVersion>
+               <skipTestProject>true</skipTestProject> <!-- we allow CI to do the tests -->
             </configuration>
          </plugin>
 

src/App.tsx

@@ -49,6 +49,7 @@ import EntityEdit from "qqq/pages/records/edit/RecordEdit";
 import RecordQuery from "qqq/pages/records/query/RecordQuery";
 import RecordDeveloperView from "qqq/pages/records/view/RecordDeveloperView";
 import RecordView from "qqq/pages/records/view/RecordView";
+import RecordViewByUniqueKey from "qqq/pages/records/view/RecordViewByUniqueKey";
 import GoogleAnalyticsUtils, {AnalyticsModel} from "qqq/utils/GoogleAnalyticsUtils";
 import Client from "qqq/utils/qqq/Client";
 import ProcessUtils from "qqq/utils/qqq/ProcessUtils";
@@ -392,6 +393,13 @@ export default function App()
                   component: <RecordView table={table} />,
                });
 
+               routeList.push({
+                  name: `${app.label} View`,
+                  key: `${app.name}.view`,
+                  route: `${path}/key`,
+                  component: <RecordViewByUniqueKey table={table} />,
+               });
+
                routeList.push({
                   name: `${app.label}`,
                   key: `${app.name}.edit`,
@@ -664,8 +672,14 @@ export default function App()
    const [dotMenuOpen, setDotMenuOpen] = useState(false);
    const [keyboardHelpOpen, setKeyboardHelpOpen] = useState(false);
    const [helpHelpActive] = useState(queryParams.has("helpHelp"));
-   const [userId] = useState(user.email);
+   const [userId, setUserId] = useState(user?.email);
 
+   useEffect(() =>
+   {
+      setUserId(user?.email)
+   }, [user]);
+
+   
    const [googleAnalyticsUtils] = useState(new GoogleAnalyticsUtils());
 
    /*******************************************************************************

src/CommandMenu.tsx

@@ -36,7 +36,7 @@ import Icon from "@mui/material/Icon";
 import Typography from "@mui/material/Typography";
 import {makeStyles} from "@mui/styles";
 import {Command} from "cmdk";
-import React, {useContext, useEffect, useRef} from "react";
+import React, {useContext, useEffect, useRef, useState} from "react";
 import {useNavigate} from "react-router-dom";
 import QContext from "QContext";
 import HistoryUtils, {QHistoryEntry} from "qqq/utils/HistoryUtils";
@@ -62,16 +62,21 @@ const useStyles = makeStyles((theme: any) => ({
    }
 }));
 
+const A_FIRST = -1;
+const B_FIRST = 1;
+
 const CommandMenu = ({metaData}: Props) =>
 {
+   const [searchString, setSearchString] = useState("");
+
    const navigate = useNavigate();
    const pathParts = location.pathname.replace(/\/+$/, "").split("/");
 
-   const {accentColor, tableMetaData, dotMenuOpen, setDotMenuOpen, keyboardHelpOpen, setKeyboardHelpOpen, setTableMetaData, tableProcesses} = useContext(QContext);
+   const {accentColor, tableMetaData, dotMenuOpen, setDotMenuOpen, keyboardHelpOpen, setKeyboardHelpOpen, setTableMetaData, tableProcesses, recordAnalytics} = useContext(QContext);
 
    const classes = useStyles();
 
-   function evalueKeyPress(e: KeyboardEvent)
+   function evaluateKeyPress(e: KeyboardEvent)
    {
       ///////////////////////////////////////////////////////////////////////////
       // if a dot pressed, not from a "text" element, then toggle command menu //
@@ -82,6 +87,7 @@ const CommandMenu = ({metaData}: Props) =>
          if (e.key === "." && !keyboardHelpOpen)
          {
             e.preventDefault();
+            recordAnalytics({category: "globalEvents", action: "dotMenuKeyboardShortcut"});
             setDotMenuOpen(true);
          }
          else if (e.key === "?" && !dotMenuOpen)
@@ -107,20 +113,20 @@ const CommandMenu = ({metaData}: Props) =>
 
       const down = (e: KeyboardEvent) =>
       {
-         evalueKeyPress(e);
+         evaluateKeyPress(e);
-      }
+      };
 
-      document.addEventListener("keydown", down)
+      document.addEventListener("keydown", down);
       return () =>
       {
-         document.removeEventListener("keydown", down)
+         document.removeEventListener("keydown", down);
-      }
+      };
-   }, [tableMetaData, dotMenuOpen, keyboardHelpOpen])
+   }, [tableMetaData, dotMenuOpen, keyboardHelpOpen]);
 
    useEffect(() =>
    {
       setDotMenuOpen(false);
-   }, [location.pathname])
+   }, [location.pathname]);
 
    function goToItem(path: string)
    {
@@ -162,73 +168,117 @@ const CommandMenu = ({metaData}: Props) =>
       return (null);
    }
 
+
+   /*******************************************************************************
+    ** sort a section (e.g, tables, apps).
+    **
+    ** put labels that start-with the search word first.
+    *******************************************************************************/
+   function comparator(labelA: string, labelB: string)
+   {
+      if (searchString != "")
+      {
+         let aStartsWith = labelA.toLowerCase().startsWith(searchString.toLowerCase());
+         let bStartsWith = labelB.toLowerCase().startsWith(searchString.toLowerCase());
+
+         if (aStartsWith && !bStartsWith)
+         {
+            return A_FIRST;
+         }
+         else if (bStartsWith && !aStartsWith)
+         {
+            return B_FIRST;
+         }
+
+         const indexOfSpace = searchString.indexOf(" ");
+         if (indexOfSpace > 0)
+         {
+            aStartsWith = labelA.toLowerCase().startsWith(searchString.substring(0, indexOfSpace).toLowerCase());
+            bStartsWith = labelB.toLowerCase().startsWith(searchString.substring(0, indexOfSpace).toLowerCase());
+
+            if (aStartsWith && !bStartsWith)
+            {
+               return A_FIRST;
+            }
+            else if (bStartsWith && !aStartsWith)
+            {
+               return B_FIRST;
+            }
+         }
+      }
+
+      return (labelA.localeCompare(labelB));
+   }
+
+
    /*******************************************************************************
     **
     *******************************************************************************/
    function ActionsSection()
    {
-      let tableNames : string[]= [];
+      let tableNames: string[] = [];
       metaData.tables.forEach((value: QTableMetaData, key: string) =>
       {
          tableNames.push(value.name);
-      })
+      });
-      tableNames = tableNames.sort((a: string, b:string) =>
+      tableNames = tableNames.sort((a: string, b: string) =>
       {
          const labelA = metaData.tables.get(a).label ?? "";
          const labelB = metaData.tables.get(b).label ?? "";
-         return (labelA.localeCompare(labelB));
+         return comparator(labelA, labelB);
-      })
+      });
 
       const path = location.pathname;
-      return tableMetaData && !path.endsWith("/edit") && !path.endsWith("/create") && !path.endsWith("#audit") && ! path.endsWith("copy") &&
+      return tableMetaData && !path.endsWith("/edit") && !path.endsWith("/create") && !path.endsWith("#audit") && !path.endsWith("copy") &&
          (
             <Command.Group heading={`${tableMetaData.label} Actions`}>
                {
                   tableMetaData.capabilities.has(Capability.TABLE_INSERT) && tableMetaData.insertPermission &&
-               <Command.Item onSelect={() => goToItem(`${pathParts.slice(0, -1).join("/")}/create`)} key={`${tableMetaData.label}-new`} value="New"><Icon sx={{color: accentColor}}>add</Icon>New</Command.Item>
+                  <Command.Item onSelect={() => goToItem(`${pathParts.slice(0, -1).join("/")}/create`)} key={`${tableMetaData.label}-new`} value="New"><Icon sx={{color: accentColor}}>add</Icon>New</Command.Item>
                }
                {
                   tableMetaData.capabilities.has(Capability.TABLE_INSERT) && tableMetaData.insertPermission &&
-               <Command.Item onSelect={() => goToItem(`${pathParts.join("/")}/copy`)} key={`${tableMetaData.label}-copy`} value="Copy"><Icon sx={{color: accentColor}}>copy</Icon>Copy</Command.Item>
+                  <Command.Item onSelect={() => goToItem(`${pathParts.join("/")}/copy`)} key={`${tableMetaData.label}-copy`} value="Copy"><Icon sx={{color: accentColor}}>copy</Icon>Copy</Command.Item>
                }
                {
                   tableMetaData.capabilities.has(Capability.TABLE_UPDATE) && tableMetaData.editPermission &&
-               <Command.Item onSelect={() => goToItem(`${pathParts.join("/")}/edit`)} key={`${tableMetaData.label}-edit`} value="Edit"><Icon sx={{color: accentColor}}>edit</Icon>Edit</Command.Item>
+                  <Command.Item onSelect={() => goToItem(`${pathParts.join("/")}/edit`)} key={`${tableMetaData.label}-edit`} value="Edit"><Icon sx={{color: accentColor}}>edit</Icon>Edit</Command.Item>
                }
                {
                   metaData && metaData.tables.has("audit") &&
-               <Command.Item onSelect={() => goToItem(`${pathParts.join("/")}#audit`)} key={`${tableMetaData.label}-audit`} value="Audit"><Icon sx={{color: accentColor}}>checklist</Icon>Audit</Command.Item>
+                  <Command.Item onSelect={() => goToItem(`${pathParts.join("/")}#audit`)} key={`${tableMetaData.label}-audit`} value="Audit"><Icon sx={{color: accentColor}}>checklist</Icon>Audit</Command.Item>
                }
                {
                   tableProcesses && tableProcesses.length > 0 &&
-               (
+                  (
-                  tableProcesses.map((process) => (
+                     tableProcesses.map((process) => (
-                     <Command.Item onSelect={() => goToItem(`${pathParts.join("/")}/${process.name}`)} key={`${process.name}`} value={`${process.label}`}><Icon sx={{color: accentColor}}>{getIconName(process.iconName, "play_arrow")}</Icon>{process.label}</Command.Item>
+                        <Command.Item onSelect={() => goToItem(`${pathParts.join("/")}/${process.name}`)} key={`${process.name}`} value={`${process.label}`}><Icon sx={{color: accentColor}}>{getIconName(process.iconName, "play_arrow")}</Icon>{process.label}</Command.Item>
-                  ))
+                     ))
-               )
+                  )
                }
                <Command.Separator />
             </Command.Group>
          );
    }
 
+
    /*******************************************************************************
     **
     *******************************************************************************/
    function TablesSection()
    {
-      let tableNames : string[]= [];
+      let tableNames: string[] = [];
       metaData.tables.forEach((value: QTableMetaData, key: string) =>
       {
          tableNames.push(value.name);
-      })
+      });
-      tableNames = tableNames.sort((a: string, b:string) =>
+      tableNames = tableNames.sort((a: string, b: string) =>
       {
          const labelA = metaData.tables.get(a).label ?? "";
          const labelB = metaData.tables.get(b).label ?? "";
-         return (labelA.localeCompare(labelB));
+         return comparator(labelA, labelB);
-      })
+      });
-      return(
+      return (
          <Command.Group heading="Tables">
             {
                tableNames.map((tableName: string, index: number) =>
@@ -243,6 +293,7 @@ const CommandMenu = ({metaData}: Props) =>
       );
    }
 
+
    /*******************************************************************************
     **
     *******************************************************************************/
@@ -252,16 +303,16 @@ const CommandMenu = ({metaData}: Props) =>
       metaData.apps.forEach((value: QAppMetaData, key: string) =>
       {
          appNames.push(value.name);
-      })
+      });
 
-      appNames = appNames.sort((a: string, b:string) =>
+      appNames = appNames.sort((a: string, b: string) =>
       {
          const labelA = getFullAppLabel(metaData.appTree, a, 1, "") ?? "";
          const labelB = getFullAppLabel(metaData.appTree, b, 1, "") ?? "";
-         return (labelA.localeCompare(labelB));
+         return comparator(labelA, labelB);
-      })
+      });
 
-      return(
+      return (
          <Command.Group heading="Apps">
             {
                appNames.map((appName: string, index: number) =>
@@ -276,33 +327,37 @@ const CommandMenu = ({metaData}: Props) =>
       );
    }
 
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
    function RecentlyViewedSection()
    {
       const history = HistoryUtils.get();
       const options = [] as any;
       history.entries.reverse().forEach((entry, index) =>
          options.push({label: `${entry.label} index`, id: index, key: index, path: entry.path, iconName: entry.iconName})
-      )
+      );
 
       let appNames: string[] = [];
       metaData.apps.forEach((value: QAppMetaData, key: string) =>
       {
          appNames.push(value.name);
-      })
+      });
 
-      appNames = appNames.sort((a: string, b:string) =>
+      appNames = appNames.sort((a: string, b: string) =>
       {
          const labelA = metaData.apps.get(a).label ?? "";
          const labelB = metaData.apps.get(b).label ?? "";
-         return (labelA.localeCompare(labelB));
+         return comparator(labelA, labelB);
-      })
+      });
 
       const entryMap = new Map<string, boolean>();
-      return(
+      return (
          <Command.Group heading="Recently Viewed Records">
             {
                history.entries.reverse().map((entry: QHistoryEntry, index: number) =>
-                  ! entryMap.has(entry.label) && entryMap.set(entry.label, true) && (
+                  !entryMap.has(entry.label) && entryMap.set(entry.label, true) && (
                      <Command.Item onSelect={() => goToItem(`${entry.path}`)} key={`${entry.label}-${index}`} value={entry.label}><Icon sx={{color: accentColor}}>{entry.iconName}</Icon>{entry.label}</Command.Item>
                   )
                )
@@ -311,29 +366,101 @@ const CommandMenu = ({metaData}: Props) =>
       );
    }
 
-   const containerElement = useRef(null)
+   const containerElement = useRef(null);
 
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
    function closeKeyboardHelp()
    {
       setKeyboardHelpOpen(false);
    }
 
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
    function closeDotMenu()
    {
       setDotMenuOpen(false);
    }
 
+
+   /*******************************************************************************
+    ** filter function for cmd-k library
+    **
+    *******************************************************************************/
+   function doFilter(value: string, search: string)
+   {
+      setSearchString(search);
+
+      /////////////////////
+      // split on spaces //
+      /////////////////////
+      const searchParts = search.toLowerCase().split(" ");
+      if (searchParts.length == 1)
+      {
+         //////////////////////////////////////////////
+         // if only 1 word, just do an includes test //
+         //////////////////////////////////////////////
+         return (value.toLowerCase().includes(search.toLowerCase()) ? 1 : 0);
+      }
+      else
+      {
+         ////////////////////////////////////////
+         // else split the value on spaces too //
+         ////////////////////////////////////////
+         const valueParts = value.toLowerCase().split(" ");
+         if (searchParts.length > valueParts.length)
+         {
+            //////////////////////////////////////////////////////////////////////////////////
+            // if there are more words in the search than in the value, then it can't match //
+            // e.g. "order c" can't ever match, say "order"                                 //
+            //////////////////////////////////////////////////////////////////////////////////
+            return (0);
+         }
+
+         /////////////////////////////////////////////////////////////////////////////////////////////////////////////
+         // iterate over the search parts - if any don't match the corresponding value parts, then it's a non-match //
+         /////////////////////////////////////////////////////////////////////////////////////////////////////////////
+         let valueIndex = 0;
+         for (let i = 0; i < searchParts.length; i++)
+         {
+            let foundMatch = false;
+            for (; valueIndex < valueParts.length; valueIndex++)
+            {
+               if (valueParts[valueIndex].includes(searchParts[i]))
+               {
+                  foundMatch = true;
+                  break;
+               }
+            }
+
+            if (!foundMatch)
+            {
+               return (0);
+            }
+         }
+
+         /////////////////////////////////
+         // if no failure, return a hit //
+         /////////////////////////////////
+         return (1);
+      }
+   }
+
    return (
       <React.Fragment>
          <Box ref={containerElement} className="raycast" sx={{position: "relative", zIndex: 10_000}}>
             {
                <Dialog open={dotMenuOpen} onClose={closeDotMenu}>
-                  <Command.Dialog open={dotMenuOpen} onOpenChange={setDotMenuOpen} container={containerElement.current} label="Test Global Command Menu">
+                  <Command.Dialog open={dotMenuOpen} onOpenChange={setDotMenuOpen} container={containerElement.current} filter={(value, search) => doFilter(value, search)}>
                      <Box sx={{display: "flex"}}>
-                        <Command.Input placeholder="Search for Tables, Actions, or Recently Viewed Items..."/>
+                        <Command.Input placeholder="Search for Tables, Actions, or Recently Viewed Items..." />
                         <Button onClick={closeDotMenu}><Icon>close</Icon></Button>
                      </Box>
-                     <Command.Loading  />
+                     <Command.Loading />
                      <Command.Separator />
                      <Command.List>
                         <Command.Empty>No results found.</Command.Empty>
@@ -381,6 +508,6 @@ const CommandMenu = ({metaData}: Props) =>
             </Dialog>
          }
       </React.Fragment>
-   )
+   );
-}
+};
 export default CommandMenu;

src/main/java/com/kingsrook/qqq/frontend/materialdashboard/model/metadata/MaterialDashboardTableMetaData.java

@@ -134,17 +134,36 @@ public class MaterialDashboardTableMetaData extends QSupplementalTableMetaData
 
       for(FieldRule fieldRule : CollectionUtils.nonNullList(fieldRules))
       {
-         qInstanceValidator.assertCondition(fieldRule.getTrigger() != null, prefix + "has a fieldRule without a trigger");
+         validateFieldRule(qInstance, tableMetaData, qInstanceValidator, fieldRule, prefix);
-         qInstanceValidator.assertCondition(fieldRule.getAction() != null, prefix + "has a fieldRule without an action");
+      }
+   }
 
-         if(qInstanceValidator.assertCondition(StringUtils.hasContent(fieldRule.getSourceField()), prefix + "has a fieldRule without a sourceField"))
-         {
-            qInstanceValidator.assertNoException(() -> tableMetaData.getField(fieldRule.getSourceField()), prefix + "has a fieldRule with an unrecognized sourceField: " + fieldRule.getSourceField());
-         }
 
-         if(qInstanceValidator.assertCondition(StringUtils.hasContent(fieldRule.getTargetField()), prefix + "has a fieldRule without a targetField"))
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   static void validateFieldRule(QInstance qInstance, QTableMetaData tableMetaData, QInstanceValidator qInstanceValidator, FieldRule fieldRule, String prefix)
+   {
+      qInstanceValidator.assertCondition(fieldRule.getTrigger() != null, prefix + "has a fieldRule without a trigger");
+      qInstanceValidator.assertCondition(fieldRule.getAction() != null, prefix + "has a fieldRule without an action");
+
+      if(qInstanceValidator.assertCondition(StringUtils.hasContent(fieldRule.getSourceField()), prefix + "has a fieldRule without a sourceField"))
+      {
+         qInstanceValidator.assertNoException(() -> tableMetaData.getField(fieldRule.getSourceField()), prefix + "has a fieldRule with an unrecognized sourceField: " + fieldRule.getSourceField());
+      }
+
+      if(StringUtils.hasContent(fieldRule.getTargetField()))
+      {
+         qInstanceValidator.assertNoException(() -> tableMetaData.getField(fieldRule.getTargetField()), prefix + "has a fieldRule with an unrecognized targetField: " + fieldRule.getTargetField());
+      }
+
+      if(StringUtils.hasContent(fieldRule.getTargetWidget()))
+      {
+         if(qInstanceValidator.assertCondition(qInstance.getWidget(fieldRule.getTargetWidget()) != null, prefix + "has a widgetRule with an unrecognized targetWidget: " + fieldRule.getTargetWidget()))
          {
-            qInstanceValidator.assertNoException(() -> tableMetaData.getField(fieldRule.getTargetField()), prefix + "has a fieldRule with an unrecognized targetField: " + fieldRule.getTargetField());
+            qInstanceValidator.assertCondition(CollectionUtils.nonNullList(tableMetaData.getSections()).stream().anyMatch(s -> fieldRule.getTargetWidget().equals(s.getWidgetName())),
+               prefix + "has a widgetRule with a targetWidget which is not used in any sections on the table");
          }
       }
    }

src/main/java/com/kingsrook/qqq/frontend/materialdashboard/model/metadata/fieldrules/FieldRule.java

@@ -38,6 +38,8 @@ public class FieldRule implements Serializable
    private FieldRuleAction  action;
    private String           targetField;
 
+   private String targetWidget;
+
 
 
    /*******************************************************************************
@@ -162,4 +164,35 @@ public class FieldRule implements Serializable
       return (this);
    }
 
+
+
+   /*******************************************************************************
+    ** Getter for targetWidget
+    *******************************************************************************/
+   public String getTargetWidget()
+   {
+      return (this.targetWidget);
+   }
+
+
+
+   /*******************************************************************************
+    ** Setter for targetWidget
+    *******************************************************************************/
+   public void setTargetWidget(String targetWidget)
+   {
+      this.targetWidget = targetWidget;
+   }
+
+
+
+   /*******************************************************************************
+    ** Fluent setter for targetWidget
+    *******************************************************************************/
+   public FieldRule withTargetWidget(String targetWidget)
+   {
+      this.targetWidget = targetWidget;
+      return (this);
+   }
+
 }

src/main/java/com/kingsrook/qqq/frontend/materialdashboard/model/metadata/fieldrules/FieldRuleAction.java

@@ -27,5 +27,6 @@ package com.kingsrook.qqq.frontend.materialdashboard.model.metadata.fieldrules;
  *******************************************************************************/
 public enum FieldRuleAction
 {
-   CLEAR_TARGET_FIELD
+   CLEAR_TARGET_FIELD,
+   RELOAD_WIDGET
 }

src/qqq/components/buttons/DefaultButtons.tsx

@@ -30,14 +30,17 @@ import MDButton from "qqq/components/legacy/MDButton";
 
 export const standardWidth = "150px";
 
+const standardML = {xs: 1, md: 3};
+
 interface QCreateNewButtonProps
 {
    tablePath: string;
 }
+
 export function QCreateNewButton({tablePath}: QCreateNewButtonProps): JSX.Element
 {
    return (
-      <Box display="inline-block" ml={3} mr={0} width={standardWidth}>
+      <Box display="inline-block" ml={standardML} mr={0} width={standardWidth}>
          <Link to={`${tablePath}/create`}>
             <MDButton variant="gradient" color="info" fullWidth startIcon={<Icon>add</Icon>}>
                Create New
@@ -54,6 +57,7 @@ interface QSaveButtonProps
    onClickHandler?: any,
    disabled: boolean
 }
+
 QSaveButton.defaultProps = {
    label: "Save",
    iconName: "save"
@@ -62,7 +66,7 @@ QSaveButton.defaultProps = {
 export function QSaveButton({label, iconName, onClickHandler, disabled}: QSaveButtonProps): JSX.Element
 {
    return (
-      <Box ml={3} width={standardWidth}>
+      <Box ml={standardML} width={standardWidth}>
          <MDButton type="submit" variant="gradient" color="info" size="small" onClick={onClickHandler} fullWidth startIcon={<Icon>{iconName}</Icon>} disabled={disabled}>
             {label}
          </MDButton>
@@ -72,17 +76,18 @@ export function QSaveButton({label, iconName, onClickHandler, disabled}: QSaveBu
 
 interface QDeleteButtonProps
 {
-   onClickHandler: any
+   onClickHandler: any;
-   disabled?: boolean
+   disabled?: boolean;
 }
 
 QDeleteButton.defaultProps = {
    disabled: false
 };
+
 export function QDeleteButton({onClickHandler, disabled}: QDeleteButtonProps): JSX.Element
 {
    return (
-      <Box ml={3} width={standardWidth}>
+      <Box ml={standardML} width={standardWidth}>
          <MDButton variant="gradient" color="primary" size="small" onClick={onClickHandler} fullWidth startIcon={<Icon>delete</Icon>} disabled={disabled}>
             Delete
          </MDButton>
@@ -93,7 +98,7 @@ export function QDeleteButton({onClickHandler, disabled}: QDeleteButtonProps): J
 export function QEditButton(): JSX.Element
 {
    return (
-      <Box ml={3} width={standardWidth}>
+      <Box ml={standardML} width={standardWidth}>
          <Link to="edit">
             <MDButton variant="gradient" color="dark" size="small" fullWidth startIcon={<Icon>edit</Icon>}>
                Edit
@@ -132,7 +137,7 @@ interface QCancelButtonProps
    onClickHandler: any;
    disabled: boolean;
    label?: string;
-   iconName?: string
+   iconName?: string;
 }
 
 export function QCancelButton({
@@ -140,7 +145,7 @@ export function QCancelButton({
 }: QCancelButtonProps): JSX.Element
 {
    return (
-      <Box ml="auto" width={standardWidth}>
+      <Box ml={standardML} mb={2} width={standardWidth}>
          <MDButton type="button" variant="outlined" color="dark" size="small" fullWidth startIcon={<Icon>{iconName}</Icon>} onClick={onClickHandler} disabled={disabled}>
             {label}
          </MDButton>
@@ -155,15 +160,15 @@ QCancelButton.defaultProps = {
 
 interface QSubmitButtonProps
 {
-   label?: string
+   label?: string;
-   iconName?: string
+   iconName?: string;
-   disabled: boolean
+   disabled: boolean;
 }
 
 export function QSubmitButton({label, iconName, disabled}: QSubmitButtonProps): JSX.Element
 {
    return (
-      <Box ml={3} width={standardWidth}>
+      <Box ml={standardML} width={standardWidth}>
          <MDButton type="submit" variant="gradient" color="dark" size="small" fullWidth startIcon={<Icon>{iconName}</Icon>} disabled={disabled}>
             {label}
          </MDButton>

src/qqq/components/forms/DynamicForm.tsx

@@ -172,16 +172,14 @@ function QDynamicForm({formData, formLabel, bulkEditMode, bulkEditSwitchChangeHa
                            <Grid item xs={12} sm={6} key={fieldName}>
                               {labelElement}
                               <DynamicSelect
-                                 tableName={field.possibleValueProps.tableName}
+                                 fieldPossibleValueProps={field.possibleValueProps}
-                                 processName={field.possibleValueProps.processName}
-                                 fieldName={fieldName}
                                  isEditable={field.isEditable}
                                  fieldLabel=""
                                  initialValue={values[fieldName]}
-                                 initialDisplayValue={field.possibleValueProps.initialDisplayValue}
                                  bulkEditMode={bulkEditMode}
                                  bulkEditSwitchChangeHandler={bulkEditSwitchChanged}
                                  otherValues={otherValuesMap}
+                                 useCase="form"
                               />
                               {formattedHelpContent}
                            </Grid>

src/qqq/components/forms/DynamicFormField.tsx

@@ -19,16 +19,17 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {InputAdornment, InputLabel} from "@mui/material";
+import {Box, InputAdornment, InputLabel} from "@mui/material";
-import Box from "@mui/material/Box";
 import Switch from "@mui/material/Switch";
 import {ErrorMessage, Field, useFormikContext} from "formik";
-import React, {useState} from "react";
+import DynamicFormUtils from "qqq/components/forms/DynamicFormUtils";
+import React, {useMemo, useState} from "react";
 import AceEditor from "react-ace";
 import colors from "qqq/assets/theme/base/colors";
 import BooleanFieldSwitch from "qqq/components/forms/BooleanFieldSwitch";
 import MDInput from "qqq/components/legacy/MDInput";
 import MDTypography from "qqq/components/legacy/MDTypography";
+import {flushSync} from "react-dom";
 
 // Declaring props types for FormField
 interface Props
@@ -85,6 +86,51 @@ function QDynamicFormField({
       }
    };
 
+   ///////////////////////////////////////////////////////////////////////////////////////
+   // check the field meta data for behavior that says to do toUpperCase or toLowerCase //
+   ///////////////////////////////////////////////////////////////////////////////////////
+   let isToUpperCase = useMemo(() => DynamicFormUtils.isToUpperCase(formFieldObject?.fieldMetaData), [formFieldObject]);
+   let isToLowerCase = useMemo(() => DynamicFormUtils.isToLowerCase(formFieldObject?.fieldMetaData), [formFieldObject]);
+
+   ////////////////////////////////////////////////////////////////////////
+   // if the field has a toUpperCase or toLowerCase behavior on it, then //
+   // apply that rule.  But also, to avoid the cursor always jumping to  //
+   // the end of the input, do some manipulation of the selection.       //
+   // See: https://giacomocerquone.com/blog/keep-input-cursor-still      //
+   // Note, we only want an onChange handle if we're doing one of these  //
+   // behaviors, (because teh flushSync is potentially slow).  hence, we //
+   // put the onChange in an object and assign it with a spread          //
+   ////////////////////////////////////////////////////////////////////////
+   let onChange: any = {};
+   if (isToUpperCase || isToLowerCase)
+   {
+      onChange.onChange = (e: any) =>
+      {
+         const beforeStart = e.target.selectionStart;
+         const beforeEnd = e.target.selectionEnd;
+
+         flushSync(() =>
+         {
+            let newValue = e.currentTarget.value;
+            if (isToUpperCase)
+            {
+               newValue = newValue.toUpperCase();
+            }
+            if (isToLowerCase)
+            {
+               newValue = newValue.toLowerCase();
+            }
+            setFieldValue(name, newValue);
+         });
+
+         const input = document.getElementById(name) as HTMLInputElement;
+         if (input)
+         {
+            input.setSelectionRange(beforeStart, beforeEnd);
+         }
+      };
+   }
+
    let field;
    let getsBulkEditHtmlLabel = true;
    if (type === "checkbox")
@@ -102,7 +148,7 @@ function QDynamicFormField({
    else if (type === "ace")
    {
       let mode = "text";
-      if(formFieldObject && formFieldObject.languageMode)
+      if (formFieldObject && formFieldObject.languageMode)
       {
          mode = formFieldObject.languageMode;
       }
@@ -133,7 +179,7 @@ function QDynamicFormField({
    {
       field = (
          <>
-            <Field {...rest} onWheel={handleOnWheel} name={name} type={type} as={MDInput} variant="outlined" label={label} InputLabelProps={inputLabelProps} InputProps={inputProps} fullWidth disabled={isDisabled}
+            <Field {...rest} {...onChange} onWheel={handleOnWheel} name={name} type={type} as={MDInput} variant="outlined" label={label} InputLabelProps={inputLabelProps} InputProps={inputProps} fullWidth disabled={isDisabled}
                onKeyPress={(e: any) =>
                {
                   if (e.key === "Enter")
@@ -173,7 +219,8 @@ function QDynamicFormField({
                   id={`bulkEditSwitch-${name}`}
                   checked={switchChecked}
                   onClick={bulkEditSwitchChanged}
-                  sx={{top: "-4px",
+                  sx={{
+                     top: "-4px",
                      "& .MuiSwitch-track": {
                         height: 20,
                         borderRadius: 10,

src/qqq/components/forms/DynamicFormUtils.ts

@@ -22,6 +22,7 @@
 import {AdornmentType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/AdornmentType";
 import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
 import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
+import {FieldPossibleValueProps} from "qqq/models/fields/FieldPossibleValueProps";
 import * as Yup from "yup";
 
 
@@ -135,11 +136,11 @@ class DynamicFormUtils
             // the "nullable(true)" here doesn't mean that you're allowed to set the field to null... //
             // rather, it's more like "null is how empty will be treated" or some-such...             //
             ////////////////////////////////////////////////////////////////////////////////////////////
-            return (Yup.string().required(`${field.label} is required.`).nullable(true));
+            return (Yup.string().required(`${field.label ?? "This field"} is required.`).nullable(true));
          }
          else
          {
-            return (Yup.string().required(`${field.label} is required.`));
+            return (Yup.string().required(`${field.label ?? "This field"} is required.`));
          }
       }
       return (null);
@@ -155,35 +156,49 @@ class DynamicFormUtils
       {
          const field = qFields[i];
 
+         if(!dynamicFormFields[field.name])
+         {
+            continue;
+         }
+
          /////////////////////////////////////////
          // add props for possible value fields //
          /////////////////////////////////////////
-         if (field.possibleValueSourceName && dynamicFormFields[field.name])
+         if (field.possibleValueSourceName || field.inlinePossibleValueSource)
          {
-            let initialDisplayValue = null;
+            let props: FieldPossibleValueProps =
+               {
+                  isPossibleValue: true,
+                  fieldName: field.name,
+                  initialDisplayValue: null
+               }
+
             if (displayValues)
             {
-               initialDisplayValue = displayValues.get(field.name);
+               props.initialDisplayValue = displayValues.get(field.name);
             }
 
-            if (tableName)
+            if(field.inlinePossibleValueSource)
             {
-               dynamicFormFields[field.name].possibleValueProps =
+               //////////////////////////////////////////////////////////////////////
-                  {
+               // handle an inline PVS - which is a list of possible value objects //
-                     isPossibleValue: true,
+               //////////////////////////////////////////////////////////////////////
-                     tableName: tableName,
+               props.possibleValues = field.inlinePossibleValueSource;
-                     initialDisplayValue: initialDisplayValue,
+            }
-                  };
+            else if (tableName)
+            {
+               props.tableName = tableName;
+            }
+            else if (processName)
+            {
+               props.processName = processName;
             }
             else
             {
-               dynamicFormFields[field.name].possibleValueProps =
+               props.possibleValueSourceName = field.possibleValueSourceName;
-                  {
-                     isPossibleValue: true,
-                     processName: processName,
-                     initialDisplayValue: initialDisplayValue,
-                  };
             }
+
+            dynamicFormFields[field.name].possibleValueProps = props;
          }
       }
    }
@@ -202,7 +217,7 @@ class DynamicFormUtils
 
       if (Array.isArray(disabledFields))
       {
-         return (disabledFields.indexOf(fieldName) > -1)
+         return (disabledFields.indexOf(fieldName) > -1);
       }
       else
       {
@@ -210,6 +225,44 @@ class DynamicFormUtils
       }
    }
 
+
+   /***************************************************************************
+    * check if a field has the TO_UPPER_CASE behavior on it.
+    ***************************************************************************/
+   public static isToUpperCase(fieldMetaData: QFieldMetaData): boolean
+   {
+      return this.hasBehavior(fieldMetaData, "TO_UPPER_CASE");
+   }
+
+
+   /***************************************************************************
+    * check if a field has the TO_LOWER_CASE behavior on it.
+    ***************************************************************************/
+   public static isToLowerCase(fieldMetaData: QFieldMetaData): boolean
+   {
+      return this.hasBehavior(fieldMetaData, "TO_LOWER_CASE");
+   }
+
+
+   /***************************************************************************
+    * check if a field has a specific behavior name on it.
+    ***************************************************************************/
+   private static hasBehavior(fieldMetaData: QFieldMetaData, behaviorName: string): boolean
+   {
+      if (fieldMetaData && fieldMetaData.behaviors)
+      {
+         for (let i = 0; i < fieldMetaData.behaviors.length; i++)
+         {
+            if (fieldMetaData.behaviors[i] == behaviorName)
+            {
+               return (true);
+            }
+         }
+      }
+
+      return (false);
+   }
+
 }
 
 export default DynamicFormUtils;

src/qqq/components/forms/DynamicSelect.tsx

@@ -30,20 +30,17 @@ import TextField from "@mui/material/TextField";
 import {ErrorMessage, useFormikContext} from "formik";
 import colors from "qqq/assets/theme/base/colors";
 import MDTypography from "qqq/components/legacy/MDTypography";
+import {FieldPossibleValueProps} from "qqq/models/fields/FieldPossibleValueProps";
 import Client from "qqq/utils/qqq/Client";
 import React, {useEffect, useState} from "react";
 
 interface Props
 {
-   tableName?: string;
+   fieldPossibleValueProps: FieldPossibleValueProps;
-   processName?: string;
-   fieldName?: string;
-   possibleValueSourceName?: string;
    overrideId?: string;
    fieldLabel: string;
    inForm: boolean;
    initialValue?: any;
-   initialDisplayValue?: string;
    initialValues?: QPossibleValue[];
    onChange?: any;
    isEditable?: boolean;
@@ -53,16 +50,12 @@ interface Props
    otherValues?: Map<string, any>;
    variant: "standard" | "outlined";
    initiallyOpen: boolean;
+   useCase: "form" | "filter";
 }
 
 DynamicSelect.defaultProps = {
-   tableName: null,
-   processName: null,
-   fieldName: null,
-   possibleValueSourceName: null,
    inForm: true,
    initialValue: null,
-   initialDisplayValue: null,
    initialValues: undefined,
    onChange: null,
    isEditable: true,
@@ -97,51 +90,49 @@ export const getAutocompleteOutlinedStyle = (isDisabled: boolean) =>
          borderColor: inputBorderColor
       }
    });
-}
+};
 
 
 const qController = Client.getInstance();
 
-function DynamicSelect({tableName, processName, fieldName, possibleValueSourceName, overrideId, fieldLabel, inForm, initialValue, initialDisplayValue, initialValues, onChange, isEditable, isMultiple, bulkEditMode, bulkEditSwitchChangeHandler, otherValues, variant, initiallyOpen}: Props)
+function DynamicSelect({fieldPossibleValueProps, overrideId, fieldLabel, inForm, initialValue, initialValues, onChange, isEditable, isMultiple, bulkEditMode, bulkEditSwitchChangeHandler, otherValues, variant, initiallyOpen, useCase}: Props)
 {
+   const {fieldName, initialDisplayValue, possibleValueSourceName, possibleValues, processName, tableName} = fieldPossibleValueProps;
+
    const [open, setOpen] = useState(initiallyOpen);
    const [options, setOptions] = useState<readonly QPossibleValue[]>([]);
    const [searchTerm, setSearchTerm] = useState(null);
    const [firstRender, setFirstRender] = useState(true);
-   const [otherValuesWhenResultsWereLoaded, setOtherValuesWhenResultsWereLoaded] = useState(JSON.stringify(Object.fromEntries((otherValues))))
+   const [otherValuesWhenResultsWereLoaded, setOtherValuesWhenResultsWereLoaded] = useState(JSON.stringify(Object.fromEntries((otherValues))));
 
    useEffect(() =>
    {
-      if(tableName && processName)
+      if (tableName && processName)
       {
-         console.log("DynamicSelect - you may not provide both a tableName and a processName")
+         console.log("DynamicSelect - you may not provide both a tableName and a processName");
       }
-      if(tableName && !fieldName)
+      if (tableName && !fieldName)
       {
          console.log("DynamicSelect - if you provide a tableName, you must also provide a fieldName");
       }
-      if(processName && !fieldName)
+      if (processName && !fieldName)
       {
          console.log("DynamicSelect - if you provide a processName, you must also provide a fieldName");
       }
-      if(fieldName && possibleValueSourceName)
+      if (!fieldName && !possibleValueSourceName)
-      {
-         console.log("DynamicSelect - if you provide a fieldName and a possibleValueSourceName, the possibleValueSourceName will be ignored");
-      }
-      if(!fieldName && !possibleValueSourceName)
       {
          console.log("DynamicSelect - you must provide either a fieldName (and a tableName or processName) or a possibleValueSourceName");
       }
-      if(fieldName)
+      if (fieldName && !possibleValueSourceName)
       {
-         if(!tableName || !processName)
+         if (!tableName || !processName)
          {
-            console.log("DynamicSelect - if you provide a fieldName, you must also provide a tableName or processName");
+            console.log("DynamicSelect - if you provide a fieldName and not a possibleValueSourceName, then you must also provide a tableName or processName");
          }
       }
-      if(possibleValueSourceName)
+      if (possibleValueSourceName)
       {
-         if(tableName || processName)
+         if (tableName || processName)
          {
             console.log("DynamicSelect - if you provide a possibleValueSourceName, you should not also provide a tableName or processName");
          }
@@ -175,9 +166,38 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
       setFieldValueRef = setFieldValue;
    }
 
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   const filterInlinePossibleValues = (searchTerm: string, possibleValues: QPossibleValue[]): QPossibleValue[] =>
+   {
+      return possibleValues.filter(pv => pv.label?.toLowerCase().startsWith(searchTerm));
+   }
+
+
+   /***************************************************************************
+    **
+    ***************************************************************************/
+   const loadResults = async (): Promise<QPossibleValue[]> =>
+   {
+      if(possibleValues)
+      {
+         return filterInlinePossibleValues(searchTerm, possibleValues)
+      }
+      else
+      {
+         return await qController.possibleValues(tableName, processName, possibleValueSourceName ?? fieldName, searchTerm ?? "", null, otherValues, useCase);
+      }
+   }
+
+
+   /***************************************************************************
+    **
+    ***************************************************************************/
    useEffect(() =>
    {
-      if(firstRender)
+      if (firstRender)
       {
          // console.log("First render, so not searching...");
          setFirstRender(false);
@@ -198,9 +218,9 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
       (async () =>
       {
          // console.log(`doing a search with ${searchTerm}`);
-         const results: QPossibleValue[] = await qController.possibleValues(tableName, processName, fieldName ?? possibleValueSourceName, searchTerm ?? "", null, otherValues);
+         const results: QPossibleValue[] = await loadResults();
 
-         if(tableMetaData == null && tableName)
+         if (tableMetaData == null && tableName)
          {
             let tableMetaData: QTableMetaData = await qController.loadTableMetaData(tableName);
             setTableMetaData(tableMetaData);
@@ -211,7 +231,7 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
          // console.log(`${results}`);
          if (active)
          {
-            setOptions([ ...results ]);
+            setOptions([...results]);
          }
       })();
 
@@ -219,50 +239,67 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
       {
          active = false;
       };
-   }, [ searchTerm ]);
+   }, [searchTerm]);
 
-   // todo - finish... call it in onOpen?
+
+   /***************************************************************************
+    ** todo - finish... call it in onOpen?
+    ***************************************************************************/
    const reloadIfOtherValuesAreChanged = () =>
    {
-      if(JSON.stringify(Object.fromEntries(otherValues)) != otherValuesWhenResultsWereLoaded)
+      if (JSON.stringify(Object.fromEntries(otherValues)) != otherValuesWhenResultsWereLoaded)
       {
          (async () =>
          {
             setLoading(true);
             setOptions([]);
+
             console.log("Refreshing possible values...");
-            const results: QPossibleValue[] = await qController.possibleValues(tableName, processName, fieldName ?? possibleValueSourceName, searchTerm ?? "", null, otherValues);
+            const results: QPossibleValue[] = await loadResults();
+
             setLoading(false);
-            setOptions([ ...results ]);
+            setOptions([...results]);
             setOtherValuesWhenResultsWereLoaded(JSON.stringify(Object.fromEntries(otherValues)));
          })();
       }
-   }
+   };
 
+
+   /***************************************************************************
+    **
+    ***************************************************************************/
    const inputChanged = (event: React.SyntheticEvent, value: string, reason: string) =>
    {
       // console.log(`input changed.  Reason: ${reason}, setting search term to ${value}`);
-      if(reason !== "reset")
+      if (reason !== "reset")
       {
          // console.log(` -> setting search term to ${value}`);
          setSearchTerm(value);
       }
    };
 
+
+   /***************************************************************************
+    **
+    ***************************************************************************/
    const handleBlur = (x: any) =>
    {
       setSearchTerm(null);
-   }
+   };
 
+
+   /***************************************************************************
+    **
+    ***************************************************************************/
    const handleChanged = (event: React.SyntheticEvent, value: any | any[], reason: string, details?: string) =>
    {
       // console.log("handleChanged.  value is:");
       // console.log(value);
       setSearchTerm(null);
 
-      if(onChange)
+      if (onChange)
       {
-         if(isMultiple)
+         if (isMultiple)
          {
             onChange(value);
          }
@@ -271,12 +308,16 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
             onChange(value ? new QPossibleValue(value) : null);
          }
       }
-      else if(setFieldValueRef && fieldName)
+      else if (setFieldValueRef && fieldName)
       {
          setFieldValueRef(fieldName, value ? value.id : null);
       }
    };
 
+
+   /***************************************************************************
+    **
+    ***************************************************************************/
    const filterOptions = (options: { id: any; label: string; }[], state: FilterOptionsState<{ id: any; label: string; }>): { id: any; label: string; }[] =>
    {
       /////////////////////////////////////////////////////////////////////////////////
@@ -284,8 +325,12 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
       // get options whose text/label matches the input (e.g., not ids that match)   //
       /////////////////////////////////////////////////////////////////////////////////
       return (options);
-   }
+   };
 
+
+   /***************************************************************************
+    **
+    ***************************************************************************/
    // @ts-ignore
    const renderOption = (props: Object, option: any, {selected}) =>
    {
@@ -293,23 +338,24 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
 
       try
       {
-         const field = tableMetaData?.fields.get(fieldName)
+         const field = tableMetaData?.fields.get(fieldName);
-         if(field)
+         if (field)
          {
             const adornment = field.getAdornment(AdornmentType.CHIP);
-            if(adornment)
+            if (adornment)
             {
-               const color = adornment.getValue("color." + option.id) ?? "default"
+               const color = adornment.getValue("color." + option.id) ?? "default";
                const iconName = adornment.getValue("icon." + option.id) ?? null;
                const iconElement = iconName ? <Icon>{iconName}</Icon> : null;
                content = (<Chip label={option.label} color={color} icon={iconElement} size="small" variant="outlined" sx={{fontWeight: 500}} />);
             }
          }
       }
-      catch(e)
+      catch (e)
-      { }
+      {
+      }
 
-      if(isMultiple)
+      if (isMultiple)
       {
          content = (
             <>
@@ -331,8 +377,12 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
             {content}
          </li>
       );
-   }
+   };
 
+
+   /***************************************************************************
+    **
+    ***************************************************************************/
    const bulkEditSwitchChanged = () =>
    {
       const newSwitchValue = !switchChecked;
@@ -353,7 +403,7 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
    const autocomplete = (
       <Box>
          <Autocomplete
-            id={overrideId ?? fieldName ?? possibleValueSourceName}
+            id={overrideId ?? fieldName ?? possibleValueSourceName ?? "anonymous"}
             sx={autocompleteSX}
             open={open}
             fullWidth
@@ -361,7 +411,7 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
             {
                setOpen(true);
                // console.log("setting open...");
-               if(options.length == 0)
+               if (options.length == 0)
                {
                   // console.log("no options yet, so setting search term to ''...");
                   setSearchTerm("");
@@ -374,19 +424,19 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
             isOptionEqualToValue={(option, value) => value !== null && value !== undefined && option.id === value.id}
             getOptionLabel={(option) =>
             {
-               if(option === null || option === undefined)
+               if (option === null || option === undefined)
                {
                   return ("");
                }
 
                // @ts-ignore
-               if(option && option.length)
+               if (option && option.length)
                {
                   // @ts-ignore
                   option = option[0];
                }
                // @ts-ignore
-               return option.label
+               return option.label;
             }}
             options={options}
             loading={loading}
@@ -433,7 +483,7 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
             inForm &&
             <Box mt={0.75}>
                <MDTypography component="div" variant="caption" color="error" fontWeight="regular">
-                  {!isDisabled && <div className="fieldErrorMessage"><ErrorMessage name={fieldName ?? possibleValueSourceName} render={msg => <span data-field-error="true">{msg}</span>} /></div>}
+                  {!isDisabled && <div className="fieldErrorMessage"><ErrorMessage name={overrideId ?? fieldName ?? possibleValueSourceName ?? "anonymous"} render={msg => <span data-field-error="true">{msg}</span>} /></div>}
                </MDTypography>
             </Box>
          }
@@ -450,7 +500,8 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
                   id={`bulkEditSwitch-${fieldName}`}
                   checked={switchChecked}
                   onClick={bulkEditSwitchChanged}
-                  sx={{top: "-4px",
+                  sx={{
+                     top: "-4px",
                      "& .MuiSwitch-track": {
                         height: 20,
                         borderRadius: 10,
@@ -469,7 +520,7 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
    else
    {
       return (
-         <Box mb={1.5}>
+         <Box>
             {autocomplete}
          </Box>
       );

src/qqq/components/forms/EntityForm.tsx

@@ -43,9 +43,10 @@ import DynamicFormUtils from "qqq/components/forms/DynamicFormUtils";
 import MDTypography from "qqq/components/legacy/MDTypography";
 import HelpContent from "qqq/components/misc/HelpContent";
 import QRecordSidebar from "qqq/components/misc/RecordSidebar";
+import DynamicFormWidget from "qqq/components/widgets/misc/DynamicFormWidget";
+import FilterAndColumnsSetupWidget from "qqq/components/widgets/misc/FilterAndColumnsSetupWidget";
 import PivotTableSetupWidget from "qqq/components/widgets/misc/PivotTableSetupWidget";
 import RecordGridWidget, {ChildRecordListData} from "qqq/components/widgets/misc/RecordGridWidget";
-import ReportSetupWidget from "qqq/components/widgets/misc/ReportSetupWidget";
 import {FieldRule, FieldRuleAction, FieldRuleTrigger} from "qqq/models/fields/FieldRules";
 import HtmlUtils from "qqq/utils/HtmlUtils";
 import Client from "qqq/utils/qqq/Client";
@@ -87,7 +88,7 @@ EntityForm.defaultProps = {
 ////////////////////////////////////////////////////////////////////////////
 let formikSetFieldValueFunction = (field: string, value: any, shouldValidate?: boolean): void =>
 {
-}
+};
 
 function EntityForm(props: Props): JSX.Element
 {
@@ -118,11 +119,12 @@ function EntityForm(props: Props): JSX.Element
    const [, forceUpdate] = useReducer((x) => x + 1, 0);
 
    const [showEditChildForm, setShowEditChildForm] = useState(null as any);
+   const [modalDataChangedCounter, setModalDataChangedCount] = useState(0);
 
    const [notAllowedError, setNotAllowedError] = useState(null as string);
 
    const [formValuesJSON, setFormValuesJSON] = useState("");
-   const [formValues, setFormValues] = useState({} as {[name: string]: any});
+   const [formValues, setFormValues] = useState({} as { [name: string]: any });
 
    const {pageHeader, setPageHeader} = useContext(QContext);
 
@@ -203,7 +205,7 @@ function EntityForm(props: Props): JSX.Element
    /*******************************************************************************
     **
     *******************************************************************************/
-   const deleteChildRecord = (name: string, widgetData: any, rowIndex: number) =>
+   function deleteChildRecord(name: string, widgetData: any, rowIndex: number)
    {
       updateChildRecordList(name, "delete", rowIndex);
    };
@@ -281,6 +283,8 @@ function EntityForm(props: Props): JSX.Element
       setRenderedWidgetSections(newRenderedWidgetSections);
       forceUpdate();
 
+      setModalDataChangedCount(modalDataChangedCounter + 1);
+
       setShowEditChildForm(null);
    }
 
@@ -290,7 +294,7 @@ function EntityForm(props: Props): JSX.Element
     *******************************************************************************/
    useEffect(() =>
    {
-      const newRenderedWidgetSections: {[name: string]: JSX.Element} = {};
+      const newRenderedWidgetSections: { [name: string]: JSX.Element } = {};
       for (let widgetName in renderedWidgetSections)
       {
          const widgetMetaData = metaData.widgets.get(widgetName);
@@ -350,12 +354,11 @@ function EntityForm(props: Props): JSX.Element
    }
 
 
-
    /*******************************************************************************
     ** if we have a widget that wants to set form-field values, they can take this
     ** function in as a callback, and then call it with their values.
     *******************************************************************************/
-   function setFormFieldValuesFromWidget(values: {[name: string]: any})
+   function setFormFieldValuesFromWidget(values: { [name: string]: any })
    {
       for (let key in values)
       {
@@ -369,13 +372,13 @@ function EntityForm(props: Props): JSX.Element
     *******************************************************************************/
    function getWidgetSection(widgetMetaData: QWidgetMetaData, widgetData: any): JSX.Element
    {
-      if(widgetMetaData.type == "childRecordList")
+      if (widgetMetaData.type == "childRecordList")
       {
          widgetData.viewAllLink = null;
          widgetMetaData.showExportButton = false;
 
-         return <RecordGridWidget
+         return Object.keys(childListWidgetData).length > 0 && (<RecordGridWidget
-            key={new Date().getTime()} // added so that editing values actually re-renders...
+            key={`${formValues["tableName"]}-${modalDataChangedCounter}`}
             widgetMetaData={widgetMetaData}
             data={widgetData}
             disableRowClick
@@ -384,21 +387,31 @@ function EntityForm(props: Props): JSX.Element
             addNewRecordCallback={() => openAddChildRecord(widgetMetaData.name, widgetData)}
             editRecordCallback={(rowIndex) => openEditChildRecord(widgetMetaData.name, widgetData, rowIndex)}
             deleteRecordCallback={(rowIndex) => deleteChildRecord(widgetMetaData.name, widgetData, rowIndex)}
-         />;
+         />);
       }
 
-      if(widgetMetaData.type == "reportSetup")
+      if (widgetMetaData.type == "filterAndColumnsSetup")
       {
-         return <ReportSetupWidget
+         /////////////////////////////////////////////////////////////////////////////////////////////////////////
+         // if the widget metadata specifies a table name, set form values to that so widget knows which to use //
+         // (for the case when it is not being specified by a separate field in the record)                     //
+         /////////////////////////////////////////////////////////////////////////////////////////////////////////
+         if (widgetData?.tableName)
+         {
+            formValues["tableName"] = widgetData?.tableName;
+         }
+
+         return <FilterAndColumnsSetupWidget
             key={formValues["tableName"]} // todo, is this good?  it was added so that editing values actually re-renders...
             isEditable={true}
             widgetMetaData={widgetMetaData}
+            widgetData={widgetData}
             recordValues={formValues}
             onSaveCallback={setFormFieldValuesFromWidget}
-         />
+         />;
       }
 
-      if(widgetMetaData.type == "pivotTableSetup")
+      if (widgetMetaData.type == "pivotTableSetup")
       {
          return <PivotTableSetupWidget
             key={formValues["tableName"]} // todo, is this good?  it was added so that editing values actually re-renders...
@@ -406,10 +419,23 @@ function EntityForm(props: Props): JSX.Element
             widgetMetaData={widgetMetaData}
             recordValues={formValues}
             onSaveCallback={setFormFieldValuesFromWidget}
-         />
+         />;
       }
 
-      return (<Box>Unsupported widget type: {widgetMetaData.type}</Box>)
+      if (widgetMetaData.type == "dynamicForm")
+      {
+         return <DynamicFormWidget
+            key={formValues["savedReportId"]} // todo - pull this from the metaData (could do so above too...)
+            isEditable={true}
+            widgetMetaData={widgetMetaData}
+            widgetData={widgetData}
+            recordValues={formValues}
+            record={record}
+            onSaveCallback={setFormFieldValuesFromWidget}
+         />;
+      }
+
+      return (<Box>Unsupported widget type: {widgetMetaData.type}</Box>);
    }
 
 
@@ -435,12 +461,12 @@ function EntityForm(props: Props): JSX.Element
    function setupFieldRules(tableMetaData: QTableMetaData)
    {
       const mdbMetaData = tableMetaData?.supplementalTableMetaData?.get("materialDashboard");
-      if(!mdbMetaData)
+      if (!mdbMetaData)
       {
          return;
       }
 
-      if(mdbMetaData.fieldRules)
+      if (mdbMetaData.fieldRules)
       {
          const newFieldRules: FieldRule[] = [];
          for (let i = 0; i < mdbMetaData.fieldRules.length; i++)
@@ -455,83 +481,164 @@ function EntityForm(props: Props): JSX.Element
    //////////////////
    // initial load //
    //////////////////
-   if (!asyncLoadInited)
+   useEffect(() =>
    {
-      setAsyncLoadInited(true);
+      if (!asyncLoadInited)
-      (async () =>
       {
-         const tableMetaData = await qController.loadTableMetaData(tableName);
+         setAsyncLoadInited(true);
-         setTableMetaData(tableMetaData);
+         (async () =>
-         recordAnalytics({location: window.location, title: (props.isCopy ? "Copy" : props.id ? "Edit" : "New") + ": " + tableMetaData.label});
-
-         setupFieldRules(tableMetaData);
-
-         const metaData = await qController.loadMetaData();
-         setMetaData(metaData);
-
-         /////////////////////////////////////////////////
-         // define the sections, e.g., for the left-bar //
-         /////////////////////////////////////////////////
-         const tableSections = TableUtils.getSectionsForRecordSidebar(tableMetaData, [...tableMetaData.fields.keys()], (section: QTableSection) =>
          {
-            const widget = metaData.widgets.get(section.widgetName);
+            const tableMetaData = await qController.loadTableMetaData(tableName);
-            if(widget)
+            setTableMetaData(tableMetaData);
+            recordAnalytics({location: window.location, title: (props.isCopy ? "Copy" : props.id ? "Edit" : "New") + ": " + tableMetaData.label});
+
+            setupFieldRules(tableMetaData);
+
+            const metaData = await qController.loadMetaData();
+            setMetaData(metaData);
+
+            /////////////////////////////////////////////////
+            // define the sections, e.g., for the left-bar //
+            /////////////////////////////////////////////////
+            const tableSections = TableUtils.getSectionsForRecordSidebar(tableMetaData, [...tableMetaData.fields.keys()], (section: QTableSection) =>
             {
-               if(widget.type == "childRecordList" && widget.defaultValues?.has("manageAssociationName"))
+               const widget = metaData?.widgets?.get(section.widgetName);
+               if (widget)
                {
-                  return (true);
+                  if (widget.type == "childRecordList" && widget.defaultValues?.has("manageAssociationName"))
+                  {
+                     return (true);
+                  }
+
+                  if (widget.type == "filterAndColumnsSetup" || widget.type == "pivotTableSetup" || widget.type == "dynamicForm")
+                  {
+                     return (true);
+                  }
                }
 
-               if(widget.type == "reportSetup" || widget.type == "pivotTableSetup")
+               return (false);
-               {
+            });
-                  return (true);
+            setTableSections(tableSections);
-               }
-            }
 
-            return (false);
+            const fieldArray = [] as QFieldMetaData[];
-         });
+            const sortedKeys = [...tableMetaData.fields.keys()].sort();
-         setTableSections(tableSections);
+            sortedKeys.forEach((key) =>
-
-         const fieldArray = [] as QFieldMetaData[];
-         const sortedKeys = [...tableMetaData.fields.keys()].sort();
-         sortedKeys.forEach((key) =>
-         {
-            const fieldMetaData = tableMetaData.fields.get(key);
-            fieldArray.push(fieldMetaData);
-         });
-
-         /////////////////////////////////////////////////////////////////////////////////////////
-         // if doing an edit or copy, fetch the record and pre-populate the form values from it //
-         /////////////////////////////////////////////////////////////////////////////////////////
-         let record: QRecord = null;
-         let defaultDisplayValues = new Map<string, string>();
-         if (props.id !== null)
-         {
-            record = await qController.get(tableName, props.id);
-            setRecord(record);
-            recordAnalytics({category: "tableEvents", action: props.isCopy ? "copy" : "edit", label: tableMetaData?.label + " / " + record?.recordLabel});
-
-            const titleVerb = props.isCopy ? "Copy" : "Edit";
-            setFormTitle(`${titleVerb} ${tableMetaData?.label}: ${record?.recordLabel}`);
-
-            if (!props.isModal)
             {
-               setPageHeader(`${titleVerb} ${tableMetaData?.label}: ${record?.recordLabel}`);
+               const fieldMetaData = tableMetaData.fields.get(key);
-            }
+               fieldArray.push(fieldMetaData);
-
-            tableMetaData.fields.forEach((fieldMetaData, key) =>
-            {
-               if (props.isCopy && fieldMetaData.name == tableMetaData.primaryKeyField)
-               {
-                  return;
-               }
-               initialValues[key] = record.values.get(key);
             });
 
-            /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+            /////////////////////////////////////////////////////////////////////////////////////////
-            // these checks are only for updating records, if copying, it is actually an insert, which is checked after this block //
+            // if doing an edit or copy, fetch the record and pre-populate the form values from it //
-            /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+            /////////////////////////////////////////////////////////////////////////////////////////
-            if (!props.isCopy)
+            let record: QRecord = null;
+            let defaultDisplayValues = new Map<string, string>();
+            if (props.id !== null)
+            {
+               record = await qController.get(tableName, props.id);
+               setRecord(record);
+               recordAnalytics({category: "tableEvents", action: props.isCopy ? "copy" : "edit", label: tableMetaData?.label + " / " + record?.recordLabel});
+
+               const titleVerb = props.isCopy ? "Copy" : "Edit";
+               setFormTitle(`${titleVerb} ${tableMetaData?.label}: ${record?.recordLabel}`);
+
+               if (!props.isModal)
+               {
+                  setPageHeader(`${titleVerb} ${tableMetaData?.label}: ${record?.recordLabel}`);
+               }
+
+               tableMetaData.fields.forEach((fieldMetaData, key) =>
+               {
+                  if (props.isCopy && fieldMetaData.name == tableMetaData.primaryKeyField)
+                  {
+                     return;
+                  }
+                  initialValues[key] = record.values.get(key);
+               });
+
+               /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+               // these checks are only for updating records, if copying, it is actually an insert, which is checked after this block //
+               /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+               if (!props.isCopy)
+               {
+                  if (!tableMetaData.capabilities.has(Capability.TABLE_UPDATE))
+                  {
+                     setNotAllowedError("Records may not be edited in this table");
+                  }
+                  else if (!tableMetaData.editPermission)
+                  {
+                     setNotAllowedError(`You do not have permission to edit ${tableMetaData.label} records`);
+                  }
+               }
+            }
+            else
+            {
+               ///////////////////////////////////////////
+               // else handle preparing to do an insert //
+               ///////////////////////////////////////////
+               setFormTitle(`Creating New ${tableMetaData?.label}`);
+               recordAnalytics({category: "tableEvents", action: "new", label: tableMetaData?.label});
+
+               if (!props.isModal)
+               {
+                  setPageHeader(`Creating New ${tableMetaData?.label}`);
+               }
+
+               ////////////////////////////////////////////////////////////////////////////////////////////////
+               // if default values were supplied for a new record, then populate initialValues, for formik. //
+               ////////////////////////////////////////////////////////////////////////////////////////////////
+               for (let i = 0; i < fieldArray.length; i++)
+               {
+                  const fieldMetaData = fieldArray[i];
+                  const fieldName = fieldMetaData.name;
+                  const defaultValue = (defaultValues && defaultValues[fieldName]) ? defaultValues[fieldName] : fieldMetaData.defaultValue;
+                  if (defaultValue)
+                  {
+                     initialValues[fieldName] = defaultValue;
+
+                     ///////////////////////////////////////////////////////////////////////////////////////////
+                     // we need to set the initialDisplayValue for possible value fields with a default value //
+                     // so, look them up here now if needed                                                   //
+                     ///////////////////////////////////////////////////////////////////////////////////////////
+                     if (fieldMetaData.possibleValueSourceName)
+                     {
+                        const results: QPossibleValue[] = await qController.possibleValues(tableName, null, fieldName, null, [initialValues[fieldName]]);
+                        if (results && results.length > 0)
+                        {
+                           defaultDisplayValues.set(fieldName, results[0].label);
+                        }
+                     }
+                  }
+               }
+            }
+
+            ///////////////////////////////////////////////////
+            // if an override heading was passed in, use it. //
+            ///////////////////////////////////////////////////
+            if (props.overrideHeading)
+            {
+               setFormTitle(props.overrideHeading);
+               if (!props.isModal)
+               {
+                  setPageHeader(props.overrideHeading);
+               }
+            }
+
+            //////////////////////////////////////
+            // check capabilities & permissions //
+            //////////////////////////////////////
+            if (props.isCopy || !props.id)
+            {
+               if (!tableMetaData.capabilities.has(Capability.TABLE_INSERT))
+               {
+                  setNotAllowedError("Records may not be created in this table");
+               }
+               else if (!tableMetaData.insertPermission)
+               {
+                  setNotAllowedError(`You do not have permission to create ${tableMetaData.label} records`);
+               }
+            }
+            else
             {
                if (!tableMetaData.capabilities.has(Capability.TABLE_UPDATE))
                {
@@ -542,200 +649,123 @@ function EntityForm(props: Props): JSX.Element
                   setNotAllowedError(`You do not have permission to edit ${tableMetaData.label} records`);
                }
             }
-         }
-         else
-         {
-            ///////////////////////////////////////////
-            // else handle preparing to do an insert //
-            ///////////////////////////////////////////
-            setFormTitle(`Creating New ${tableMetaData?.label}`);
-            recordAnalytics({category: "tableEvents", action: "new", label: tableMetaData?.label});
 
-            if (!props.isModal)
+            /////////////////////////////////////////////////////////////////////
-            {
+            // make sure all initialValues are properly formatted for the form //
-               setPageHeader(`Creating New ${tableMetaData?.label}`);
+            /////////////////////////////////////////////////////////////////////
-            }
-
-            ////////////////////////////////////////////////////////////////////////////////////////////////
-            // if default values were supplied for a new record, then populate initialValues, for formik. //
-            ////////////////////////////////////////////////////////////////////////////////////////////////
             for (let i = 0; i < fieldArray.length; i++)
             {
                const fieldMetaData = fieldArray[i];
-               const fieldName = fieldMetaData.name;
+               if (fieldMetaData.type == QFieldType.DATE_TIME && initialValues[fieldMetaData.name])
-               const defaultValue = (defaultValues && defaultValues[fieldName]) ? defaultValues[fieldName] : fieldMetaData.defaultValue;
-               if (defaultValue)
                {
-                  initialValues[fieldName] = defaultValue;
+                  initialValues[fieldMetaData.name] = ValueUtils.formatDateTimeValueForForm(initialValues[fieldMetaData.name]);
+               }
+            }
 
-                  ///////////////////////////////////////////////////////////////////////////////////////////
+            setInitialValues(initialValues);
-                  // we need to set the initialDisplayValue for possible value fields with a default value //
+
-                  // so, look them up here now if needed                                                   //
+            /////////////////////////////////////////////////////////
-                  ///////////////////////////////////////////////////////////////////////////////////////////
+            // get formField and formValidation objects for Formik //
-                  if (fieldMetaData.possibleValueSourceName)
+            /////////////////////////////////////////////////////////
+            const {
+               dynamicFormFields,
+               formValidations,
+            } = DynamicFormUtils.getFormData(fieldArray, disabledFields);
+            DynamicFormUtils.addPossibleValueProps(dynamicFormFields, fieldArray, tableName, null, record ? record.displayValues : defaultDisplayValues);
+
+            /////////////////////////////////////
+            // group the formFields by section //
+            /////////////////////////////////////
+            const dynamicFormFieldsBySection = new Map<string, any>();
+            let t1sectionName;
+            let t1section;
+            const nonT1Sections: QTableSection[] = [];
+            const newRenderedWidgetSections: { [name: string]: JSX.Element } = {};
+            const newChildListWidgetData: { [name: string]: ChildRecordListData } = {};
+
+            for (let i = 0; i < tableSections.length; i++)
+            {
+               const section = tableSections[i];
+               const sectionDynamicFormFields: any[] = [];
+
+               if (section.isHidden)
+               {
+                  continue;
+               }
+
+               const hasFields = section.fieldNames && section.fieldNames.length > 0;
+               if (hasFields)
+               {
+                  for (let j = 0; j < section.fieldNames.length; j++)
                   {
-                     const results: QPossibleValue[] = await qController.possibleValues(tableName, null, fieldName, null, [initialValues[fieldName]]);
+                     const fieldName = section.fieldNames[j];
-                     if (results && results.length > 0)
+                     const field = tableMetaData.fields.get(fieldName);
+
+                     if (!field)
                      {
-                        defaultDisplayValues.set(fieldName, results[0].label);
+                        console.log(`Omitting un-found field ${fieldName} from form`);
+                        continue;
+                     }
+
+                     ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+                     // if id !== null (and we're not copying) - means we're on the edit screen -- show all fields on the edit screen. //
+                     // || (or) we're on the insert screen in which case, only show editable fields.                                   //
+                     ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+                     if ((props.id !== null && !props.isCopy) || field.isEditable)
+                     {
+                        sectionDynamicFormFields.push(dynamicFormFields[fieldName]);
                      }
                   }
-               }
-            }
-         }
 
-         ///////////////////////////////////////////////////
+                  if (sectionDynamicFormFields.length === 0)
-         // if an override heading was passed in, use it. //
-         ///////////////////////////////////////////////////
-         if (props.overrideHeading)
-         {
-            setFormTitle(props.overrideHeading);
-            if (!props.isModal)
-            {
-               setPageHeader(props.overrideHeading);
-            }
-         }
-
-         //////////////////////////////////////
-         // check capabilities & permissions //
-         //////////////////////////////////////
-         if (props.isCopy || !props.id)
-         {
-            if (!tableMetaData.capabilities.has(Capability.TABLE_INSERT))
-            {
-               setNotAllowedError("Records may not be created in this table");
-            }
-            else if (!tableMetaData.insertPermission)
-            {
-               setNotAllowedError(`You do not have permission to create ${tableMetaData.label} records`);
-            }
-         }
-         else
-         {
-            if (!tableMetaData.capabilities.has(Capability.TABLE_UPDATE))
-            {
-               setNotAllowedError("Records may not be edited in this table");
-            }
-            else if (!tableMetaData.editPermission)
-            {
-               setNotAllowedError(`You do not have permission to edit ${tableMetaData.label} records`);
-            }
-         }
-
-         /////////////////////////////////////////////////////////////////////
-         // make sure all initialValues are properly formatted for the form //
-         /////////////////////////////////////////////////////////////////////
-         for (let i = 0; i < fieldArray.length; i++)
-         {
-            const fieldMetaData = fieldArray[i];
-            if (fieldMetaData.type == QFieldType.DATE_TIME && initialValues[fieldMetaData.name])
-            {
-               initialValues[fieldMetaData.name] = ValueUtils.formatDateTimeValueForForm(initialValues[fieldMetaData.name]);
-            }
-         }
-
-         setInitialValues(initialValues);
-
-         /////////////////////////////////////////////////////////
-         // get formField and formValidation objects for Formik //
-         /////////////////////////////////////////////////////////
-         const {
-            dynamicFormFields,
-            formValidations,
-         } = DynamicFormUtils.getFormData(fieldArray, disabledFields);
-         DynamicFormUtils.addPossibleValueProps(dynamicFormFields, fieldArray, tableName, null, record ? record.displayValues : defaultDisplayValues);
-
-         /////////////////////////////////////
-         // group the formFields by section //
-         /////////////////////////////////////
-         const dynamicFormFieldsBySection = new Map<string, any>();
-         let t1sectionName;
-         let t1section;
-         const nonT1Sections: QTableSection[] = [];
-         const newRenderedWidgetSections: { [name: string]: JSX.Element } = {};
-         const newChildListWidgetData: { [name: string]: ChildRecordListData } = {};
-
-         for (let i = 0; i < tableSections.length; i++)
-         {
-            const section = tableSections[i];
-            const sectionDynamicFormFields: any[] = [];
-
-            if (section.isHidden)
-            {
-               continue;
-            }
-
-            const hasFields = section.fieldNames && section.fieldNames.length > 0;
-            if(hasFields)
-            {
-               for (let j = 0; j < section.fieldNames.length; j++)
-               {
-                  const fieldName = section.fieldNames[j];
-                  const field = tableMetaData.fields.get(fieldName);
-
-                  if (!field)
                   {
-                     console.log(`Omitting un-found field ${fieldName} from form`);
+                     ////////////////////////////////////////////////////////////////////////////////////////////////
+                     // in case there are no active fields in this section, remove it from the tableSections array //
+                     ////////////////////////////////////////////////////////////////////////////////////////////////
+                     tableSections.splice(i, 1);
+                     i--;
                      continue;
                   }
-
+                  else
-                  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-                  // if id !== null (and we're not copying) - means we're on the edit screen -- show all fields on the edit screen. //
-                  // || (or) we're on the insert screen in which case, only show editable fields.                                   //
-                  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-                  if ((props.id !== null && !props.isCopy) || field.isEditable)
                   {
-                     sectionDynamicFormFields.push(dynamicFormFields[fieldName]);
+                     dynamicFormFieldsBySection.set(section.name, sectionDynamicFormFields);
                   }
                }
-
-               if (sectionDynamicFormFields.length === 0)
-               {
-                  ////////////////////////////////////////////////////////////////////////////////////////////////
-                  // in case there are no active fields in this section, remove it from the tableSections array //
-                  ////////////////////////////////////////////////////////////////////////////////////////////////
-                  tableSections.splice(i, 1);
-                  i--;
-                  continue;
-               }
                else
                {
-                  dynamicFormFieldsBySection.set(section.name, sectionDynamicFormFields);
+                  const widgetMetaData = metaData?.widgets.get(section.widgetName);
+                  const widgetData = await qController.widget(widgetMetaData.name, makeQueryStringWithIdAndObject(tableMetaData, defaultValues));
+
+                  newRenderedWidgetSections[section.widgetName] = getWidgetSection(widgetMetaData, widgetData);
+                  newChildListWidgetData[section.widgetName] = widgetData;
+               }
+
+               //////////////////////////////////////
+               // capture the tier1 section's name //
+               //////////////////////////////////////
+               if (section.tier === "T1")
+               {
+                  t1sectionName = section.name;
+                  t1section = section;
+               }
+               else
+               {
+                  nonT1Sections.push(section);
                }
             }
-            else
-            {
-               const widgetMetaData = metaData.widgets.get(section.widgetName);
-               const widgetData = await qController.widget(widgetMetaData.name, props.id ? `${tableMetaData.primaryKeyField}=${props.id}` : "");
-               newRenderedWidgetSections[section.widgetName] = getWidgetSection(widgetMetaData, widgetData);
-               newChildListWidgetData[section.widgetName] = widgetData;
-            }
 
-            //////////////////////////////////////
+            setT1SectionName(t1sectionName);
-            // capture the tier1 section's name //
+            setT1Section(t1section);
-            //////////////////////////////////////
+            setNonT1Sections(nonT1Sections);
-            if (section.tier === "T1")
+            setFormFields(dynamicFormFieldsBySection);
-            {
+            setValidations(Yup.object().shape(formValidations));
-               t1sectionName = section.name;
+            setRenderedWidgetSections(newRenderedWidgetSections);
-               t1section = section;
+            setChildListWidgetData(newChildListWidgetData);
-            }
-            else
-            {
-               nonT1Sections.push(section);
-            }
-         }
 
-         setT1SectionName(t1sectionName);
+            forceUpdate();
-         setT1Section(t1section);
+         })();
-         setNonT1Sections(nonT1Sections);
+      }
-         setFormFields(dynamicFormFieldsBySection);
+   }, []);
-         setValidations(Yup.object().shape(formValidations));
-         setRenderedWidgetSections(newRenderedWidgetSections);
-         setChildListWidgetData(newChildListWidgetData);
-
-         forceUpdate();
-      })();
-   }
 
 
    //////////////////////////////////////////////////////////////////
@@ -855,16 +885,28 @@ function EntityForm(props: Props): JSX.Element
          let haveAssociationsToPost = false;
          for (let name of Object.keys(childListWidgetData))
          {
+            /////////////////////////////////////////////////////////////////////////////////////////////////////////////
+            // if cannot find association name, continue loop, since cannot tell backend which association this is for //
+            /////////////////////////////////////////////////////////////////////////////////////////////////////////////
             const manageAssociationName = metaData.widgets.get(name)?.defaultValues?.get("manageAssociationName");
             if (!manageAssociationName)
             {
                console.log(`Cannot send association data to backend - missing a manageAssociationName defaultValue in widget meta data for widget name ${name}`);
+               continue;
             }
-            associationsToPost[manageAssociationName] = [];
+
-            haveAssociationsToPost = true;
+            ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-            for (let i = 0; i < childListWidgetData[name].queryOutput?.records?.length; i++)
+            // if the records array exists, add to associations to post - note: even if empty list, the backend will expect this //
+            // association name to be present if it is to act on it (for the case when all associations have been deleted)       //
+            ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+            if (childListWidgetData[name].queryOutput.records)
             {
-               associationsToPost[manageAssociationName].push(childListWidgetData[name].queryOutput.records[i].values);
+               associationsToPost[manageAssociationName] = [];
+               haveAssociationsToPost = true;
+               for (let i = 0; i < childListWidgetData[name].queryOutput?.records?.length; i++)
+               {
+                  associationsToPost[manageAssociationName].push(childListWidgetData[name].queryOutput.records[i].values);
+               }
             }
          }
          if (haveAssociationsToPost)
@@ -912,7 +954,7 @@ function EntityForm(props: Props): JSX.Element
                   else
                   {
                      setAlertContent(error.message);
-                     HtmlUtils.autoScroll(0);
+                     scrollToTopToShowAlert();
                   }
                });
          }
@@ -958,7 +1000,7 @@ function EntityForm(props: Props): JSX.Element
                   else
                   {
                      setAlertContent(error.message);
-                     HtmlUtils.autoScroll(0);
+                     scrollToTopToShowAlert();
                   }
                });
          }
@@ -966,14 +1008,75 @@ function EntityForm(props: Props): JSX.Element
    };
 
 
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function scrollToTopToShowAlert()
+   {
+      if (props.isModal)
+      {
+         document.getElementById("modalTopReference")?.scrollIntoView();
+      }
+      else
+      {
+         HtmlUtils.autoScroll(0);
+      }
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function makeQueryStringWithIdAndObject(tableMetaData: QTableMetaData, object: { [key: string]: any })
+   {
+      const queryParamsArray: string[] = [];
+      if (props.id)
+      {
+         queryParamsArray.push(`${tableMetaData.primaryKeyField}=${encodeURIComponent(props.id)}`);
+      }
+
+      if (object)
+      {
+         for (let key in object)
+         {
+            queryParamsArray.push(`${key}=${encodeURIComponent(object[key])}`);
+         }
+      }
+
+      return (queryParamsArray.join("&"));
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   async function reloadWidget(widgetName: string, additionalQueryParamsForWidget: { [key: string]: any })
+   {
+      const widgetData = await qController.widget(widgetName, makeQueryStringWithIdAndObject(tableMetaData, additionalQueryParamsForWidget));
+      const widgetMetaData = metaData.widgets.get(widgetName);
+
+      /////////////////////////////////////////////////////////////////////////////////////////////////////
+      // todo - rename this - it holds all widget dta, not just child-lists.  also, the type is wrong... //
+      /////////////////////////////////////////////////////////////////////////////////////////////////////
+      const newChildListWidgetData: { [name: string]: ChildRecordListData } = Object.assign({}, childListWidgetData);
+      newChildListWidgetData[widgetName] = widgetData;
+      setChildListWidgetData(newChildListWidgetData);
+
+      const newRenderedWidgetSections = Object.assign({}, renderedWidgetSections);
+      newRenderedWidgetSections[widgetName] = getWidgetSection(widgetMetaData, widgetData);
+      setRenderedWidgetSections(newRenderedWidgetSections);
+      forceUpdate();
+   }
+
+
    /*******************************************************************************
     ** process a form-field having a changed value (e.g., apply field rules).
     *******************************************************************************/
-   function handleChangedFieldValue(fieldName: string, oldValue: any, newValue: any, valueChangesToMake: {[fieldName: string]: any})
+   function handleChangedFieldValue(fieldName: string, oldValue: any, newValue: any, valueChangesToMake: { [fieldName: string]: any })
    {
       for (let fieldRule of fieldRules)
       {
-         if(fieldRule.trigger == FieldRuleTrigger.ON_CHANGE && fieldRule.sourceField == fieldName)
+         if (fieldRule.trigger == FieldRuleTrigger.ON_CHANGE && fieldRule.sourceField == fieldName)
          {
             switch (fieldRule.action)
             {
@@ -981,6 +1084,10 @@ function EntityForm(props: Props): JSX.Element
                   console.log(`Clearing value from [${fieldRule.targetField}] due to change in [${fieldName}]`);
                   valueChangesToMake[fieldRule.targetField] = null;
                   break;
+               case FieldRuleAction.RELOAD_WIDGET:
+                  const additionalQueryParamsForWidget: { [key: string]: any } = {};
+                  additionalQueryParamsForWidget[fieldRule.sourceField] = newValue;
+                  reloadWidget(fieldRule.targetWidget, additionalQueryParamsForWidget);
             }
          }
       }
@@ -1045,11 +1152,11 @@ function EntityForm(props: Props): JSX.Element
             <Grid container spacing={3}>
                {
                   !props.isModal &&
-                  <Grid item xs={12} lg={3}>
+                  <Grid item xs={12} lg={3} className="recordSidebar">
                      <QRecordSidebar tableSections={tableSections} />
                   </Grid>
                }
-               <Grid item xs={12} lg={props.isModal ? 12 : 9}>
+               <Grid item xs={12} lg={props.isModal ? 12 : 9} className={props.isModal ? "" : "recordWithSidebar"}>
 
                   <Formik
                      initialValues={initialValues}
@@ -1068,21 +1175,21 @@ function EntityForm(props: Props): JSX.Element
                         /////////////////////////////////////////////////
                         // if we have values from formik, look at them //
                         /////////////////////////////////////////////////
-                        if(values)
+                        if (values)
                         {
                            ////////////////////////////////////////////////////////////////////////
                            // use stringified values as cheap/easy way to see if any are changed //
                            ////////////////////////////////////////////////////////////////////////
                            const newFormValuesJSON = JSON.stringify(values);
-                           if(formValuesJSON != newFormValuesJSON)
+                           if (formValuesJSON != newFormValuesJSON)
                            {
-                              const valueChangesToMake: {[fieldName: string]: any} = {};
+                              const valueChangesToMake: { [fieldName: string]: any } = {};
 
                               ////////////////////////////////////////////////////////////////////
                               // if the form is dirty (e.g., we're not doing the initial load), //
                               // then process rules for any changed fields                      //
                               ////////////////////////////////////////////////////////////////////
-                              if(dirty)
+                              if (dirty)
                               {
                                  for (let fieldName in values)
                                  {
@@ -1114,7 +1221,7 @@ function EntityForm(props: Props): JSX.Element
                                  setFieldValue(fieldName, valueChangesToMake[fieldName], false);
                               }
 
-                              setFormValues(formValues)
+                              setFormValues(formValues);
                               setFormValuesJSON(JSON.stringify(values));
                            }
                         }
@@ -1201,6 +1308,7 @@ function EntityForm(props: Props): JSX.Element
       return (
          <Box sx={{position: "absolute", overflowY: "auto", maxHeight: "100%", width: "100%"}}>
             <Card sx={{my: 5, mx: "auto", p: 6, pb: 0, maxWidth: "1024px"}}>
+               <span id="modalTopReference"></span>
                {body}
             </Card>
          </Box>

src/qqq/components/horseshoe/Breadcrumbs.tsx

@@ -63,7 +63,7 @@ function QBreadcrumbs({icon, title, route, light}: Props): JSX.Element
    ///////////////////////////////////////////////////////////////////////
    // strip away empty elements of the route (e.g., trailing slash(es)) //
    ///////////////////////////////////////////////////////////////////////
-   if(route.length)
+   if (route.length)
    {
       // @ts-ignore
       route = route.filter(r => r != "");
@@ -74,18 +74,18 @@ function QBreadcrumbs({icon, title, route, light}: Props): JSX.Element
 
    const fullPathToLabel = (fullPath: string, route: string): string =>
    {
-      if(fullPath.endsWith("/"))
+      if (fullPath.endsWith("/"))
       {
          fullPath = fullPath.replace(/\/+$/, "");
       }
 
-      if(pathToLabelMap && pathToLabelMap[fullPath])
+      if (pathToLabelMap && pathToLabelMap[fullPath])
       {
          return pathToLabelMap[fullPath];
       }
 
       return (routeToLabel(route));
-   }
+   };
 
    let pageTitle = branding?.appName ?? "";
    const fullRoutes: string[] = [];
@@ -94,21 +94,24 @@ function QBreadcrumbs({icon, title, route, light}: Props): JSX.Element
    {
       ////////////////////////////////////////////////////////
       // avoid showing "saved view" as a breadcrumb element //
+      // e.g., if at /app/table/savedView/1                 //
       ////////////////////////////////////////////////////////
-      if(routes[i] === "savedView")
+      if (routes[i] === "savedView" && i == routes.length - 1)
       {
          continue;
       }
 
       ///////////////////////////////////////////////////////////////////////
       // avoid showing the table name if it's the element before savedView //
+      // e.g., when at /app/table/savedView/1 (so where i==1)              //
+      // we want to just be showing "App"                                  //
       ///////////////////////////////////////////////////////////////////////
-      if(i < routes.length - 1 && routes[i+1] == "savedView")
+      if (i < routes.length - 1 && routes[i + 1] == "savedView" && i == 1)
       {
          continue;
       }
 
-      if(routes[i] === "")
+      if (routes[i] === "")
       {
          continue;
       }

src/qqq/components/horseshoe/Footer.tsx

@@ -64,13 +64,14 @@ function Footer({company, links}: Props): JSX.Element
       <Box
          width="100%"
          display="flex"
-         flexDirection={{xs: "column", lg: "row"}}
+         flexDirection={{xs: "column", md: "row"}}
          justifyContent="space-between"
          alignItems="center"
          px={1.5}
          style={{
             position: "fixed", bottom: "0px", zIndex: -1, marginBottom: "10px",
          }}
+         left={{xs: "0", xl: "auto"}}
       >
          {
             href && name &&

src/qqq/components/horseshoe/NavBar.tsx

@@ -19,16 +19,16 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {Popper, InputAdornment} from "@mui/material";
+import {Popper, InputAdornment, Box} from "@mui/material";
 import AppBar from "@mui/material/AppBar";
 import Autocomplete from "@mui/material/Autocomplete";
-import Box from "@mui/material/Box";
 import Icon from "@mui/material/Icon";
 import IconButton from "@mui/material/IconButton";
 import ListItemIcon from "@mui/material/ListItemIcon";
+import {Theme} from "@mui/material/styles";
 import TextField from "@mui/material/TextField";
 import Toolbar from "@mui/material/Toolbar";
-import React, {useContext, useEffect, useState} from "react";
+import React, {useContext, useEffect, useRef, useState} from "react";
 import {useLocation, useNavigate} from "react-router-dom";
 import QContext from "QContext";
 import QBreadcrumbs, {routeToLabel} from "qqq/components/horseshoe/Breadcrumbs";
@@ -45,7 +45,8 @@ interface Props
    isMini?: boolean;
 }
 
-interface HistoryEntry {
+interface HistoryEntry
+{
    id: number;
    path: string;
    label: string;
@@ -64,7 +65,7 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
    const route = useLocation().pathname.split("/").slice(1);
    const navigate = useNavigate();
 
-   const {pageHeader} = useContext(QContext);
+   const {pageHeader, setDotMenuOpen} = useContext(QContext);
 
    useEffect(() =>
    {
@@ -99,7 +100,7 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
       const options = [] as any;
       history.entries.reverse().forEach((entry, index) =>
          options.push({label: `${entry.label} index`, id: index, key: index, path: entry.path, iconName: entry.iconName})
-      )
+      );
       setHistory(options);
 
       // Remove event listener on cleanup
@@ -111,7 +112,7 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
    const goToHistory = (path: string) =>
    {
       navigate(path);
-   }
+   };
 
    function buildHistoryEntries()
    {
@@ -119,7 +120,7 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
       const options = [] as any;
       history.entries.reverse().forEach((entry, index) =>
          options.push({label: entry.label, id: index, key: index, path: entry.path, iconName: entry.iconName})
-      )
+      );
       setHistory(options);
    }
 
@@ -133,12 +134,12 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
 
    const handleAutocompleteOnChange = (event: any, value: any, reason: any, details: any) =>
    {
-      if(value)
+      if (value)
       {
          goToHistory(value.path);
       }
       setAutocompleteValue(null);
-   }
+   };
 
    const CustomPopper = function (props: any)
    {
@@ -146,8 +147,8 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
          {...props}
          style={{whiteSpace: "nowrap", width: "auto"}}
          placement="bottom-end"
-      />)
+      />);
-   }
+   };
 
    const renderHistory = () =>
    {
@@ -166,7 +167,7 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
             PopperComponent={CustomPopper}
             isOptionEqualToValue={(option, value) => option.id === value.id}
             sx={recentlyViewedMenu}
-            renderInput={(params) => <TextField {...params}  label="Recently Viewed Records" InputProps={{
+            renderInput={(params) => <TextField {...params} label="Recently Viewed Records" InputProps={{
                ...params.InputProps,
                endAdornment: (
                   <InputAdornment position="end">
@@ -184,7 +185,7 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
             )}
          />
       );
-   }
+   };
 
    // Styles for the navbar icons
    const iconsStyle = ({
@@ -210,21 +211,34 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
    const {pathToLabelMap} = useContext(QContext);
    const fullPathToLabel = (fullPath: string, route: string): string =>
    {
-      if(fullPath.endsWith("/"))
+      if (fullPath.endsWith("/"))
       {
          fullPath = fullPath.replace(/\/+$/, "");
       }
 
-      if(pathToLabelMap && pathToLabelMap[fullPath])
+      if (pathToLabelMap && pathToLabelMap[fullPath])
       {
          return pathToLabelMap[fullPath];
       }
 
       return (routeToLabel(route));
-   }
+   };
 
    const breadcrumbTitle = fullPathToLabel(fullPath, route[route.length - 1]);
 
+   ///////////////////////////////////////////////////////////////////////////////////////////////
+   // set the right-half of the navbar up so that below the 'md' breakpoint, it just disappears //
+   ///////////////////////////////////////////////////////////////////////////////////////////////
+   const navbarRowRight = (theme: Theme, {isMini}: any) =>
+   {
+      return {
+         [theme.breakpoints.down("md")]: {
+            display: "none",
+         },
+         ...navbarRow(theme, isMini)
+      }
+   };
+
    return (
       <AppBar
          position={absolute ? "absolute" : navbarType}
@@ -241,10 +255,15 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
                <QBreadcrumbs icon="home" title={breadcrumbTitle} route={route} light={light} />
             </Box>
             {isMini ? null : (
-               <Box sx={(theme) => navbarRow(theme, {isMini})}>
+               <Box sx={(theme) => navbarRowRight(theme, {isMini})}>
-                  <Box pr={0} mr={-2}>
+                  <Box mt={"-0.25rem"} pb={"0.75rem"} pr={2} mr={-2} sx={{"& *": {cursor: "pointer !important"}}}>
                      {renderHistory()}
                   </Box>
+                  <Box mt={"-1rem"}>
+                     <IconButton size="small" disableRipple color="inherit" onClick={() => setDotMenuOpen(true)}>
+                        <Icon sx={iconsStyle} fontSize="small">search</Icon>
+                     </IconButton>
+                  </Box>
                </Box>
             )}
          </Toolbar>

src/qqq/components/misc/ErrorBoundary.tsx

@@ -0,0 +1,74 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import React, {Component, ErrorInfo} from "react";
+
+interface Props
+{
+   errorElement?: React.ReactNode;
+   children: React.ReactNode;
+}
+
+interface State
+{
+   hasError: boolean;
+}
+
+/*******************************************************************************
+ ** Component that you can wrap around other components that might throw an error,
+ ** to give some isolation, rather than breaking a whole page.
+ ** Credit: https://medium.com/@bobjunior542/how-to-use-error-boundaries-in-react-js-with-typescript-ee90ec814bf1
+ *******************************************************************************/
+class ErrorBoundary extends Component<Props, State>
+{
+   /***************************************************************************
+    *
+    ***************************************************************************/
+   constructor(props: Props)
+   {
+      super(props);
+      this.state = {hasError: false};
+   }
+
+   /***************************************************************************
+    *
+    ***************************************************************************/
+   componentDidCatch(error: Error, errorInfo: ErrorInfo)
+   {
+      console.error("ErrorBoundary caught an error: ", error, errorInfo);
+      this.setState({hasError: true});
+   }
+
+   /***************************************************************************
+    *
+    ***************************************************************************/
+   render()
+   {
+      if (this.state.hasError)
+      {
+         return this.props.errorElement ?? <span>(Error)</span>;
+      }
+
+      return this.props.children;
+   }
+}
+
+export default ErrorBoundary;

src/qqq/components/misc/GotoRecordDialog.tsx

@@ -35,6 +35,7 @@ import DialogTitle from "@mui/material/DialogTitle";
 import Grid from "@mui/material/Grid";
 import Icon from "@mui/material/Icon";
 import TextField from "@mui/material/TextField";
+import {any} from "prop-types";
 import React, {useState} from "react";
 import {useNavigate} from "react-router-dom";
 import {QCancelButton} from "qqq/components/buttons/DefaultButtons";
@@ -71,7 +72,12 @@ function hasGotoFieldNames(tableMetaData: QTableMetaData): boolean
 
 function GotoRecordDialog(props: Props): JSX.Element
 {
-   const fields: QFieldMetaData[] = [];
+   ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
+   // this is an array of array of fields.                                                                      //
+   // that is - each entry in the top-level array is a set of fields that can be used together to goto a record //
+   // such as (pkey), (ukey-field1,ukey-field2).                                                                //
+   ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
+   const options: QFieldMetaData[][] = [];
 
    let pkey = props?.tableMetaData?.fields.get(props?.tableMetaData?.primaryKeyField);
    let addedPkey = false;
@@ -82,31 +88,38 @@ function GotoRecordDialog(props: Props): JSX.Element
       {
          for (let i = 0; i < mdbMetaData.gotoFieldNames.length; i++)
          {
-            // todo - multi-field keys!!
+            const option: QFieldMetaData[] = [];
-            let fieldName = mdbMetaData.gotoFieldNames[i][0];
+            options.push(option);
-            let field = props.tableMetaData.fields.get(fieldName);
+            for (let j = 0; j < mdbMetaData.gotoFieldNames[i].length; j++)
-            if (field)
             {
-               fields.push(field);
+               let fieldName = mdbMetaData.gotoFieldNames[i][j];
-
+               let field = props.tableMetaData.fields.get(fieldName);
-               if (field.name == pkey.name)
+               if (field)
                {
-                  addedPkey = true;
+                  option.push(field);
+
+                  if (pkey != null && field.name == pkey.name)
+                  {
+                     addedPkey = true;
+                  }
                }
             }
          }
       }
    }
 
+   //////////////////////////////////////////////////////////////////////////////////////////
+   // if pkey wasn't in the gotoField options meta-data, go ahead add it as an option here //
+   //////////////////////////////////////////////////////////////////////////////////////////
    if (pkey && !addedPkey)
    {
-      fields.unshift(pkey);
+      options.unshift([pkey]);
    }
 
    const makeInitialValues = () =>
    {
       const rs = {} as { [field: string]: string };
-      fields.forEach((field) => rs[field.name] = "");
+      options.forEach((option) => option.forEach((field) => rs[field.name] = ""));
       return (rs);
    };
 
@@ -141,11 +154,16 @@ function GotoRecordDialog(props: Props): JSX.Element
       }
       else if (e.key == "Enter" && targetId?.startsWith("gotoInput-"))
       {
-         const index = targetId?.replaceAll("gotoInput-", "");
+         const parts = targetId?.split(/-/);
+         const index = parts[1];
          document.getElementById("gotoButton-" + index).click();
       }
    };
 
+
+   /***************************************************************************
+   ** event handler for close button
+   ***************************************************************************/
    const closeRequested = () =>
    {
       if (props.mayClose)
@@ -154,10 +172,47 @@ function GotoRecordDialog(props: Props): JSX.Element
       }
    };
 
-   const goClicked = async (fieldName: string) =>
+
+   /*******************************************************************************
+    ** function to say if an option's submit button should be disabled
+    *******************************************************************************/
+   const isOptionSubmitButtonDisabled = (optionIndex: number) =>
+   {
+      let anyFieldsInThisOptionHaveAValue = false;
+
+      options[optionIndex].forEach((field) =>
+      {
+         if(values[field.name])
+         {
+            anyFieldsInThisOptionHaveAValue = true;
+         }
+      })
+
+      if(!anyFieldsInThisOptionHaveAValue)
+      {
+         return (true);
+      }
+      return (false);
+   }
+
+
+   /***************************************************************************
+   ** event handler for clicking an 'option's go/submit button
+   ***************************************************************************/
+   const optionGoClicked = async (optionIndex: number) =>
    {
       setError("");
-      const filter = new QQueryFilter([new QFilterCriteria(fieldName, QCriteriaOperator.EQUALS, [values[fieldName]])], null, null, "AND", null, 10);
+
+      const criteria: QFilterCriteria[] = [];
+      const queryStringParts: string[] = [];
+      options[optionIndex].forEach((field) =>
+      {
+         criteria.push(new QFilterCriteria(field.name, QCriteriaOperator.EQUALS, [values[field.name]]))
+         queryStringParts.push(`${field.name}=${encodeURIComponent(values[field.name])}`)
+      })
+
+      const filter = new QQueryFilter(criteria, null, null, "AND", null, 10);
+
       try
       {
          const queryResult = await qController.query(props.tableMetaData.name, filter, null, props.tableVariant);
@@ -168,12 +223,26 @@ function GotoRecordDialog(props: Props): JSX.Element
          }
          else if (queryResult.length == 1)
          {
-            navigate(`${props.metaData.getTablePathByName(props.tableMetaData.name)}/${encodeURIComponent(queryResult[0].values.get(props.tableMetaData.primaryKeyField))}`);
+            if(options[optionIndex].length == 1 && options[optionIndex][0].name == pkey?.name)
+            {
+               /////////////////////////////////////////////////
+               // navigate by pkey, if that's how we searched //
+               /////////////////////////////////////////////////
+               navigate(`${props.metaData.getTablePathByName(props.tableMetaData.name)}/${encodeURIComponent(queryResult[0].values.get(props.tableMetaData.primaryKeyField))}`);
+            }
+            else
+            {
+               /////////////////////////////////
+               // else navigate by unique-key //
+               /////////////////////////////////
+               navigate(`${props.metaData.getTablePathByName(props.tableMetaData.name)}/key/?${queryStringParts.join("&")}`);
+            }
+
             close();
          }
          else
          {
-            setError("More than 1 record found...");
+            setError("More than 1 record was found...");
             setTimeout(() => setError(""), 3000);
          }
       }
@@ -187,7 +256,7 @@ function GotoRecordDialog(props: Props): JSX.Element
 
    if (props.tableMetaData)
    {
-      if (fields.length == 0 && !error)
+      if (options.length == 0 && !error)
       {
          setError("This table is not configured for this feature.");
       }
@@ -200,31 +269,38 @@ function GotoRecordDialog(props: Props): JSX.Element
          <DialogContent>
             {props.subHeader}
             {
-               fields.map((field, index) =>
+               options.map((option, optionIndex) =>
-                  (
+                  <Box key={optionIndex}>
-                     <Grid key={field.name} container alignItems="center" py={1}>
+                     {
-                        <Grid item xs={3} textAlign="right" pr={2}>
+                        option.map((field, index) =>
-                           {field.label}
+                           (
-                        </Grid>
+                              <Grid key={field.name} container alignItems="center" py={1}>
-                        <Grid item xs={6}>
+                                 <Grid item xs={3} textAlign="right" pr={2}>
-                           <TextField
+                                    {field.label}
-                              id={`gotoInput-${index}`}
+                                 </Grid>
-                              autoFocus={index == 0}
+                                 <Grid item xs={6}>
-                              autoComplete="off"
+                                    <TextField
-                              inputProps={{width: "100%"}}
+                                       id={`gotoInput-${optionIndex}-${index}`}
-                              onChange={(e) => handleChange(field.name, e.target.value)}
+                                       autoFocus={optionIndex == 0 && index == 0}
-                              value={values[field.name]}
+                                       autoComplete="off"
-                              sx={{width: "100%"}}
+                                       inputProps={{width: "100%"}}
-                              onFocus={event => event.target.select()}
+                                       onChange={(e) => handleChange(field.name, e.target.value)}
-                           />
+                                       value={values[field.name]}
-                        </Grid>
+                                       sx={{width: "100%"}}
-                        <Grid item xs={1} pl={2}>
+                                       onFocus={event => event.target.select()}
-                           <MDButton id={`gotoButton-${index}`} type="submit" variant="gradient" color="info" size="small" onClick={() => goClicked(field.name)} fullWidth startIcon={<Icon>double_arrow</Icon>} disabled={`${values[field.name]}`.length == 0}>
+                                    />
-                              Go
+                                 </Grid>
-                           </MDButton>
+                                 <Grid item xs={1} pl={2}>
-                        </Grid>
+                                    {
-                     </Grid>
+                                       (index == option.length - 1) &&
-                  ))
+                                       <MDButton id={`gotoButton-${optionIndex}`} type="submit" variant="gradient" color="info" size="small" onClick={() => optionGoClicked(optionIndex)} fullWidth startIcon={<Icon>double_arrow</Icon>} disabled={isOptionSubmitButtonDisabled(optionIndex)}>Go</MDButton>
+                                    }
+                                 </Grid>
+                              </Grid>
+                           ))
+                     }
+                  </Box>
+               )
             }
             {
                error &&
@@ -282,7 +358,7 @@ export function GotoRecordButton(props: GotoRecordButtonProps): JSX.Element
    return (
       <React.Fragment>
          {
-            props.buttonVisible && hasGotoFieldNames(props.tableMetaData) && <Button onClick={openGoto}>Go To...</Button>
+            props.buttonVisible && hasGotoFieldNames(props.tableMetaData) && <Button onClick={openGoto} sx={{whiteSpace: "nowrap"}}>Go To...</Button>
          }
          <GotoRecordDialog metaData={props.metaData} tableMetaData={props.tableMetaData} tableVariant={props.tableVariant} isOpen={gotoIsOpen} closeHandler={closeGoto} mayClose={props.mayClose} subHeader={props.subHeader} />
       </React.Fragment>

src/qqq/components/misc/HelpContent.tsx

@@ -22,6 +22,7 @@
 import {QHelpContent} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QHelpContent";
 import Box from "@mui/material/Box";
 import parse from "html-react-parser";
+import ErrorBoundary from "qqq/components/misc/ErrorBoundary";
 import React, {useContext} from "react";
 import Markdown from "react-markdown";
 import QContext from "QContext";
@@ -128,6 +129,7 @@ function HelpContent({helpContents, roles, heading, helpContentKey}: Props): JSX
    let selectedHelpContent = getMatchingHelpContent(helpContentsArray, roles);
 
    let content = null;
+   let errorContent = "Error rendering help content.";
    if (helpHelpActive)
    {
       if (!selectedHelpContent)
@@ -135,6 +137,7 @@ function HelpContent({helpContents, roles, heading, helpContentKey}: Props): JSX
          selectedHelpContent = new QHelpContent({content: ""});
       }
       content = selectedHelpContent.content + ` [${helpContentKey ?? "?"}]`;
+      errorContent += ` [${helpContentKey ?? "?"}]`;
    }
    else if(selectedHelpContent)
    {
@@ -148,7 +151,9 @@ function HelpContent({helpContents, roles, heading, helpContentKey}: Props): JSX
    {
       return <Box display="inline" className="helpContent">
          {heading && <span className="header">{heading}</span>}
-         {formatHelpContent(content, selectedHelpContent.format)}
+         <ErrorBoundary errorElement={<i>{errorContent}</i>}>
+            {formatHelpContent(content, selectedHelpContent.format)}
+         </ErrorBoundary>
       </Box>;
    }
 

src/qqq/components/misc/RecordSidebar.tsx

@@ -22,7 +22,7 @@
 import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
 import {QTableSection} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableSection";
 import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
-import Box from "@mui/material/Box";
+import {Box} from "@mui/material";
 import Card from "@mui/material/Card";
 import Icon from "@mui/material/Icon";
 import {Theme} from "@mui/material/styles";
@@ -76,12 +76,12 @@ function QRecordSidebar({tableSections, widgetMetaDataList, light, stickyTop}: P
 
 
    return (
-      <Card sx={{borderRadius: "0.75rem", position: "sticky", top: stickyTop, overflow: "auto", maxHeight: "calc(100vh - 2rem)"}}>
+      <Card sx={{borderRadius: "0.75rem", position: "sticky", top: stickyTop, overflow: "hidden", maxHeight: "calc(100vh - 2rem)"}}>
-         <Box component="ul" display="flex" flexDirection="column" p={2} m={0} sx={{listStyle: "none"}}>
+         <Box component="ul" display="flex" flexDirection="column" p={2} m={0} sx={{listStyle: "none", overflow: "auto", height: "100%"}}>
             {
                sidebarEntries ? sidebarEntries.map((entry: SidebarEntry, key: number) => (
 
-                  <HashLink key={`section-link-${entry.name}`} to={`#${entry.name}`}>
+                  <Box key={`section-link-${entry.name}`} onClick={() => document.getElementById(entry.name).scrollIntoView()} sx={{cursor: "pointer"}}>
                      <Box key={`section-${entry.name}`} component="li" pt={key === 0 ? 0 : 1}>
                         <MDTypography
                            variant="button"
@@ -112,7 +112,7 @@ function QRecordSidebar({tableSections, widgetMetaDataList, light, stickyTop}: P
 
                         </MDTypography>
                      </Box>
-                  </HashLink>
+                  </Box>
                )) : null
             }
          </Box>

src/qqq/components/misc/SavedViews.tsx

@@ -60,7 +60,7 @@ interface Props
    view?: RecordQueryView;
    viewAsJson?: string;
    viewOnChangeCallback?: (selectedSavedViewId: number) => void;
-   loadingSavedView: boolean
+   loadingSavedView: boolean;
    queryScreenUsage: QueryScreenUsage;
 }
 
@@ -69,6 +69,8 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
    const navigate = useNavigate();
 
    const [savedViews, setSavedViews] = useState([] as QRecord[]);
+   const [yourSavedViews, setYourSavedViews] = useState([] as QRecord[]);
+   const [viewsSharedWithYou, setViewsSharedWithYou] = useState([] as QRecord[]);
    const [savedViewsMenu, setSavedViewsMenu] = useState(null);
    const [savedViewsHaveLoaded, setSavedViewsHaveLoaded] = useState(false);
    const [isSubmitting, setIsSubmitting] = useState(false);
@@ -91,14 +93,14 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
    const CLEAR_OPTION = "New View";
    const NEW_REPORT_OPTION = "Create Report from Current View";
 
-   const {accentColor, accentColorLight} = useContext(QContext);
+   const {accentColor, accentColorLight, userId: currentUserId} = useContext(QContext);
 
-   /////////////////////////////////////////////////////////////////////////////////////////
+   /////////////////////////////////////////////////////////////////////////////////////////////
-   // this component is used by <RecordQuery> - but that component has different usages - //
+   // this component is used by <RecordQuery> - but that component has different usages -     //
-   // e.g., the full-fledged query screen, but also, within other screens (e.g., a modal  //
+   // e.g., the full-fledged query screen, but also, within other screens (e.g., a modal      //
-   // under the ReportSetupWidget).  So, there are some behaviors we only want when we're //
+   // under the FilterAndColumnsSetupWidget).  So, there are some behaviors we only want when //
-   // on the full-fledged query screen, such as changing the URL with saved view ids.     //
+   // we're on the full-fledged query screen, such as changing the URL with saved view ids.   //
-   /////////////////////////////////////////////////////////////////////////////////////////
+   /////////////////////////////////////////////////////////////////////////////////////////////
    const isQueryScreen = queryScreenUsage == "queryScreen";
 
    const openSavedViewsMenu = (event: any) => setSavedViewsMenu(event.currentTarget);
@@ -114,13 +116,13 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
          {
             setSavedViewsHaveLoaded(true);
          });
-   }, [location, tableMetaData])
+   }, [location, tableMetaData]);
 
 
    const baseView = currentSavedView ? JSON.parse(currentSavedView.values.get("viewJson")) as RecordQueryView : tableDefaultView;
    const viewDiffs = SavedViewUtils.diffViews(tableMetaData, baseView, view);
    let viewIsModified = false;
-   if(viewDiffs.length > 0)
+   if (viewDiffs.length > 0)
    {
       viewIsModified = true;
    }
@@ -130,7 +132,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
     *******************************************************************************/
    async function loadSavedViews()
    {
-      if (! tableMetaData)
+      if (!tableMetaData)
       {
          return;
       }
@@ -140,8 +142,24 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
 
       let savedViews = await makeSavedViewRequest("querySavedView", formData);
       setSavedViews(savedViews);
-   }
 
+      const yourSavedViews: QRecord[] = [];
+      const viewsSharedWithYou: QRecord[] = [];
+      for (let i = 0; i < savedViews.length; i++)
+      {
+         const record = savedViews[i];
+         if (record.values.get("userId") == currentUserId)
+         {
+            yourSavedViews.push(record);
+         }
+         else
+         {
+            viewsSharedWithYou.push(record);
+         }
+      }
+      setYourSavedViews(yourSavedViews);
+      setViewsSharedWithYou(viewsSharedWithYou);
+   }
 
 
    /*******************************************************************************
@@ -152,14 +170,13 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
       setSaveFilterPopupOpen(false);
       closeSavedViewsMenu();
       viewOnChangeCallback(record.values.get("id"));
-      if(isQueryScreen)
+      if (isQueryScreen)
       {
          navigate(`${metaData.getTablePathByName(tableMetaData.name)}/savedView/${record.values.get("id")}`);
       }
    };
 
 
-
    /*******************************************************************************
     ** fired when a save option is selected from the save... button/dropdown combo
     *******************************************************************************/
@@ -171,12 +188,12 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
       setSaveFilterPopupOpen(true);
       setIsSaveFilterAs(false);
       setIsRenameFilter(false);
-      setIsDeleteFilter(false)
+      setIsDeleteFilter(false);
 
-      switch(optionName)
+      switch (optionName)
       {
          case SAVE_OPTION:
-            if(currentSavedView == null)
+            if (currentSavedView == null)
             {
                setSavedViewNameInputValue("");
             }
@@ -186,28 +203,28 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
             setIsSaveFilterAs(true);
             break;
          case CLEAR_OPTION:
-            setSaveFilterPopupOpen(false)
+            setSaveFilterPopupOpen(false);
             viewOnChangeCallback(null);
-            if(isQueryScreen)
+            if (isQueryScreen)
             {
                navigate(metaData.getTablePathByName(tableMetaData.name));
             }
             break;
          case RENAME_OPTION:
-            if(currentSavedView != null)
+            if (currentSavedView != null)
             {
                setSavedViewNameInputValue(currentSavedView.values.get("label"));
             }
             setIsRenameFilter(true);
             break;
          case DELETE_OPTION:
-            setIsDeleteFilter(true)
+            setIsDeleteFilter(true);
             break;
          case NEW_REPORT_OPTION:
             createNewReport();
             break;
       }
-   }
+   };
 
 
    /*******************************************************************************
@@ -215,11 +232,11 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
     *******************************************************************************/
    function createNewReport()
    {
-      const defaultValues: {[key: string]: any} = {};
+      const defaultValues: { [key: string]: any } = {};
       defaultValues.tableName = tableMetaData.name;
 
       let filterForBackend = JSON.parse(JSON.stringify(view.queryFilter));
-      filterForBackend  = FilterUtils.prepQueryFilterForBackend(tableMetaData, filterForBackend);
+      filterForBackend = FilterUtils.prepQueryFilterForBackend(tableMetaData, filterForBackend);
 
       defaultValues.queryFilterJson = JSON.stringify(filterForBackend);
       defaultValues.columnsJson = JSON.stringify(view.queryColumns);
@@ -227,7 +244,6 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
    }
 
 
-
    /*******************************************************************************
     ** fired when save or delete button saved on confirmation dialogs
     *******************************************************************************/
@@ -247,7 +263,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
             setSaveFilterPopupOpen(false);
             setSaveOptionsOpen(false);
 
-            await(async() =>
+            await (async () =>
             {
                handleDropdownOptionClick(CLEAR_OPTION);
             })();
@@ -267,14 +283,14 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
             ////////////////////////////////////////////////////////////////////////////
             // strip away incomplete filters too, just for cleaner saved view filters //
             ////////////////////////////////////////////////////////////////////////////
-            FilterUtils.stripAwayIncompleteCriteria(viewObject.queryFilter)
+            FilterUtils.stripAwayIncompleteCriteria(viewObject.queryFilter);
 
             formData.append("viewJson", JSON.stringify(viewObject));
 
             if (isSaveFilterAs || isRenameFilter || currentSavedView == null)
             {
                formData.append("label", savedViewNameInputValue);
-               if(currentSavedView != null && isRenameFilter)
+               if (currentSavedView != null && isRenameFilter)
                {
                   formData.append("id", currentSavedView.values.get("id"));
                }
@@ -285,7 +301,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
                formData.append("label", currentSavedView?.values.get("label"));
             }
             const recordList = await makeSavedViewRequest("storeSavedView", formData);
-            await(async() =>
+            await (async () =>
             {
                if (recordList && recordList.length > 0)
                {
@@ -302,11 +318,11 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
       catch (e: any)
       {
          let message = JSON.stringify(e);
-         if(typeof e == "string")
+         if (typeof e == "string")
          {
             message = e;
          }
-         else if(typeof e == "object" && e.message)
+         else if (typeof e == "object" && e.message)
          {
             message = e.message;
          }
@@ -321,7 +337,6 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
    }
 
 
-
    /*******************************************************************************
     ** hides/shows the save options
     *******************************************************************************/
@@ -331,7 +346,6 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
    };
 
 
-
    /*******************************************************************************
     ** closes save options menu (on clickaway)
     *******************************************************************************/
@@ -346,7 +360,6 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
    };
 
 
-
    /*******************************************************************************
     ** stores the current dialog input text to state
     *******************************************************************************/
@@ -356,7 +369,6 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
    };
 
 
-
    /*******************************************************************************
     ** closes current dialog
     *******************************************************************************/
@@ -366,7 +378,6 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
    };
 
 
-
    /*******************************************************************************
     ** make a request to the backend for various savedView processes
     *******************************************************************************/
@@ -375,7 +386,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
       /////////////////////////
       // fetch saved filters //
       /////////////////////////
-      let savedViews = [] as QRecord[]
+      let savedViews = [] as QRecord[];
       try
       {
          //////////////////////////////////////////////////////////////////
@@ -386,12 +397,12 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
          if (processResult instanceof QJobError)
          {
             const jobError = processResult as QJobError;
-            throw(jobError.error);
+            throw (jobError.error);
          }
          else
          {
             const result = processResult as QJobComplete;
-            if(result.values.savedViewList)
+            if (result.values.savedViewList)
             {
                for (let i = 0; i < result.values.savedViewList.length; i++)
                {
@@ -403,7 +414,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
       }
       catch (e)
       {
-         throw(e);
+         throw (e);
       }
 
       return (savedViews);
@@ -416,17 +427,27 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
 
    const tooltipMaxWidth = (maxWidth: string) =>
    {
-      return ({slotProps: {
+      return ({
-         tooltip: {
+         slotProps: {
-            sx: {
+            tooltip: {
-               maxWidth: maxWidth
+               sx: {
+                  maxWidth: maxWidth
+               }
             }
          }
-      }})
+      });
-   }
+   };
 
    const menuTooltipAttribs = {...tooltipMaxWidth("250px"), placement: "left", enterDelay: 1000} as TooltipProps;
 
+   let disabledBecauseNotOwner = false;
+   let notOwnerTooltipText = null;
+   if (currentSavedView && currentSavedView.values.get("userId") != currentUserId)
+   {
+      disabledBecauseNotOwner = true;
+      notOwnerTooltipText = "You may not save changes to this view, because you are not its owner.";
+   }
+
    const renderSavedViewsMenu = tableMetaData && (
       <Menu
          anchorEl={savedViewsMenu}
@@ -443,75 +464,101 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
          }
          {
             isQueryScreen && hasStorePermission &&
-            <Tooltip {...menuTooltipAttribs} title={<>Save your current filters, columns and settings, for quick re-use at a later time.<br /><br />You will be prompted to enter a name if you choose this option.</>}>
+            <Tooltip {...menuTooltipAttribs} title={notOwnerTooltipText ?? <>Save your current filters, columns and settings, for quick re-use at a later time.<br /><br />You will be prompted to enter a name if you choose this option.</>}>
-               <MenuItem onClick={() => handleDropdownOptionClick(SAVE_OPTION)}>
+               <span>
-                  <ListItemIcon><Icon>save</Icon></ListItemIcon>
+                  <MenuItem disabled={disabledBecauseNotOwner} onClick={() => handleDropdownOptionClick(SAVE_OPTION)}>
-                  {currentSavedView ? "Save..." : "Save As..."}
+                     <ListItemIcon><Icon>save</Icon></ListItemIcon>
-               </MenuItem>
+                     {currentSavedView ? "Save..." : "Save As..."}
+                  </MenuItem>
+               </span>
             </Tooltip>
          }
          {
             isQueryScreen && hasStorePermission && currentSavedView != null &&
-            <Tooltip {...menuTooltipAttribs} title="Change the name for this saved view.">
+            <Tooltip {...menuTooltipAttribs} title={notOwnerTooltipText ?? "Change the name for this saved view."}>
-               <MenuItem disabled={currentSavedView === null} onClick={() => handleDropdownOptionClick(RENAME_OPTION)}>
+               <span>
-                  <ListItemIcon><Icon>edit</Icon></ListItemIcon>
+                  <MenuItem disabled={currentSavedView === null || disabledBecauseNotOwner} onClick={() => handleDropdownOptionClick(RENAME_OPTION)}>
-                  Rename...
+                     <ListItemIcon><Icon>edit</Icon></ListItemIcon>
-               </MenuItem>
+                     Rename...
+                  </MenuItem>
+               </span>
             </Tooltip>
          }
          {
             isQueryScreen && hasStorePermission && currentSavedView != null &&
             <Tooltip {...menuTooltipAttribs} title="Save a new copy this view, with a different name, separate from the original.">
-               <MenuItem disabled={currentSavedView === null} onClick={() => handleDropdownOptionClick(DUPLICATE_OPTION)}>
+               <span>
-                  <ListItemIcon><Icon>content_copy</Icon></ListItemIcon>
+                  <MenuItem disabled={currentSavedView === null} onClick={() => handleDropdownOptionClick(DUPLICATE_OPTION)}>
-                  Save As...
+                     <ListItemIcon><Icon>content_copy</Icon></ListItemIcon>
-               </MenuItem>
+                     Save As...
+                  </MenuItem>
+               </span>
             </Tooltip>
          }
          {
             isQueryScreen && hasDeletePermission && currentSavedView != null &&
-            <Tooltip {...menuTooltipAttribs} title="Delete this saved view.">
+            <Tooltip {...menuTooltipAttribs} title={notOwnerTooltipText ?? "Delete this saved view."}>
-               <MenuItem disabled={currentSavedView === null} onClick={() => handleDropdownOptionClick(DELETE_OPTION)}>
+               <span>
-                  <ListItemIcon><Icon>delete</Icon></ListItemIcon>
+                  <MenuItem disabled={currentSavedView === null || disabledBecauseNotOwner} onClick={() => handleDropdownOptionClick(DELETE_OPTION)}>
-                  Delete...
+                     <ListItemIcon><Icon>delete</Icon></ListItemIcon>
-               </MenuItem>
+                     Delete...
+                  </MenuItem>
+               </span>
             </Tooltip>
          }
          {
             isQueryScreen &&
             <Tooltip {...menuTooltipAttribs} title="Create a new view of this table, resetting the filters and columns to their defaults.">
-               <MenuItem onClick={() => handleDropdownOptionClick(CLEAR_OPTION)}>
+               <span>
-                  <ListItemIcon><Icon>monitor</Icon></ListItemIcon>
+                  <MenuItem onClick={() => handleDropdownOptionClick(CLEAR_OPTION)}>
-                  New View
+                     <ListItemIcon><Icon>monitor</Icon></ListItemIcon>
-               </MenuItem>
+                     New View
+                  </MenuItem>
+               </span>
             </Tooltip>
          }
          {
             isQueryScreen && hasSavedReportsPermission &&
             <Tooltip {...menuTooltipAttribs} title="Create a new Saved Report using your current view of this table as a starting point.">
-               <MenuItem onClick={() => handleDropdownOptionClick(NEW_REPORT_OPTION)}>
+               <span>
-                  <ListItemIcon><Icon>article</Icon></ListItemIcon>
+                  <MenuItem onClick={() => handleDropdownOptionClick(NEW_REPORT_OPTION)}>
-                  Create Report from Current View
+                     <ListItemIcon><Icon>article</Icon></ListItemIcon>
-               </MenuItem>
+                     Create Report from Current View
+                  </MenuItem>
+               </span>
             </Tooltip>
          }
          {
-            isQueryScreen && <Divider/>
+            isQueryScreen && <Divider />
          }
          <MenuItem disabled style={{"opacity": "initial"}}><b>Your Saved Views</b></MenuItem>
          {
-            savedViews && savedViews.length > 0 ? (
+            yourSavedViews && yourSavedViews.length > 0 ? (
-               savedViews.map((record: QRecord, index: number) =>
+               yourSavedViews.map((record: QRecord, index: number) =>
                   <MenuItem sx={{paddingLeft: "50px"}} key={`savedFiler-${index}`} onClick={() => handleSavedViewRecordOnClick(record)}>
                      {record.values.get("label")}
                   </MenuItem>
                )
-            ): (
+            ) : (
                <MenuItem disabled sx={{opacity: "1 !important"}}>
                   <i>You do not have any saved views for this table.</i>
                </MenuItem>
             )
          }
+         <MenuItem disabled style={{"opacity": "initial"}}><b>Views Shared with you</b></MenuItem>
+         {
+            viewsSharedWithYou && viewsSharedWithYou.length > 0 ? (
+               viewsSharedWithYou.map((record: QRecord, index: number) =>
+                  <MenuItem sx={{paddingLeft: "50px"}} key={`savedFiler-${index}`} onClick={() => handleSavedViewRecordOnClick(record)}>
+                     {record.values.get("label")}
+                  </MenuItem>
+               )
+            ) : (
+               <MenuItem disabled sx={{opacity: "1 !important"}}>
+                  <i>You do not have any views shared with you for this table.</i>
+               </MenuItem>
+            )
+         }
       </Menu>
    );
 
@@ -520,7 +567,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
    let buttonBorder = colors.grayLines.main;
    let buttonColor = colors.gray.main;
 
-   if(currentSavedView)
+   if (currentSavedView)
    {
       if (viewIsModified)
       {
@@ -548,23 +595,23 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
          color: buttonColor,
          backgroundColor: buttonBackground,
       }
-   }
+   };
 
    /*******************************************************************************
     **
     *******************************************************************************/
    function isSaveButtonDisabled(): boolean
    {
-      if(isSubmitting)
+      if (isSubmitting)
       {
          return (true);
       }
 
-      const haveInputText = (savedViewNameInputValue != null && savedViewNameInputValue.trim() != "")
+      const haveInputText = (savedViewNameInputValue != null && savedViewNameInputValue.trim() != "");
 
-      if(isSaveFilterAs || isRenameFilter || currentSavedView == null)
+      if (isSaveFilterAs || isRenameFilter || currentSavedView == null)
       {
-         if(!haveInputText)
+         if (!haveInputText)
          {
             return (true);
          }
@@ -593,7 +640,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
                      fontWeight: 500,
                      fontSize: "0.875rem",
                      p: "0.5rem",
-                     ... buttonStyles
+                     ...buttonStyles
                   }}
                >
                   <Icon sx={{mr: "0.5rem"}}>save</Icon>
@@ -624,7 +671,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
                            </>
                         }
 
-                        <Button disableRipple={true} sx={{color: colors.gray.main, ... linkButtonStyle}} onClick={() => handleDropdownOptionClick(CLEAR_OPTION)}>Reset All Changes</Button>
+                        <Button disableRipple={true} sx={{color: colors.gray.main, ...linkButtonStyle}} onClick={() => handleDropdownOptionClick(CLEAR_OPTION)}>Reset All Changes</Button>
                      </>
                   }
                   {
@@ -635,16 +682,20 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
                               {
                                  viewDiffs.map((s: string, i: number) => <li key={i}>{s}</li>)
                               }
-                           </ul></>}>
+                           </ul>
+                           {
+                              notOwnerTooltipText && <i>{notOwnerTooltipText}</i>
+                           }
+                        </>}>
                            <Box display="inline" sx={{...linkButtonStyle, p: 0, cursor: "default", position: "relative", top: "-1px"}}>{viewDiffs.length} Unsaved Change{viewDiffs.length == 1 ? "" : "s"}</Box>
                         </Tooltip>
 
-                        <Button disableRipple={true} sx={linkButtonStyle} onClick={() => handleDropdownOptionClick(SAVE_OPTION)}>Save&hellip;</Button>
+                        {disabledBecauseNotOwner ? <>&nbsp;&nbsp;</> : <Button disableRipple={true} sx={linkButtonStyle} onClick={() => handleDropdownOptionClick(SAVE_OPTION)}>Save&hellip;</Button>}
 
                         {/* vertical rule */}
                         <Box display="inline-block" borderLeft={`1px solid ${colors.grayLines.main}`} height="1rem" width="1px" position="relative" />
 
-                        <Button disableRipple={true} sx={{color: colors.gray.main, ... linkButtonStyle}} onClick={() => handleSavedViewRecordOnClick(currentSavedView)}>Reset All Changes</Button>
+                        <Button disableRipple={true} sx={{color: colors.gray.main, ...linkButtonStyle}} onClick={() => handleSavedViewRecordOnClick(currentSavedView)}>Reset All Changes</Button>
                      </>
                   }
                   {
@@ -663,16 +714,17 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
                                     {
                                        viewDiffs.map((s: string, i: number) => <li key={i}>{s}</li>)
                                     }
-                                 </ul></>}>
+                                 </ul>
+                              </>}>
                                  <Box display="inline" ml="0.25rem" mr="0.25rem" sx={{...linkButtonStyle, p: 0, cursor: "default", position: "relative", top: "-1px"}}>with {viewDiffs.length} Change{viewDiffs.length == 1 ? "" : "s"}</Box>
                               </Tooltip>
-                              <Button disableRipple={true} sx={{color: colors.gray.main, ... linkButtonStyle}} onClick={() => handleSavedViewRecordOnClick(currentSavedView)}>Reset Changes</Button>
+                              <Button disableRipple={true} sx={{color: colors.gray.main, ...linkButtonStyle}} onClick={() => handleSavedViewRecordOnClick(currentSavedView)}>Reset Changes</Button>
                            </>
                         }
 
                         {/* vertical rule */}
                         <Box display="inline-block" ml="0.25rem" borderLeft={`1px solid ${colors.grayLines.main}`} height="1rem" width="1px" position="relative" />
-                        <Button disableRipple={true} sx={{color: colors.gray.main, ... linkButtonStyle}} onClick={() => handleDropdownOptionClick(CLEAR_OPTION)}>Reset to New View</Button>
+                        <Button disableRipple={true} sx={{color: colors.gray.main, ...linkButtonStyle}} onClick={() => handleDropdownOptionClick(CLEAR_OPTION)}>Reset to New View</Button>
                      </Box>
                   }
                </Box>
@@ -702,15 +754,15 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
                         ) : (
                            isSaveFilterAs ? (
                               <DialogTitle id="alert-dialog-title">Save View As</DialogTitle>
-                           ):(
+                           ) : (
                               isRenameFilter ? (
                                  <DialogTitle id="alert-dialog-title">Rename View</DialogTitle>
-                              ):(
+                              ) : (
                                  <DialogTitle id="alert-dialog-title">Update Existing View</DialogTitle>
                               )
                            )
                         )
-                     ):(
+                     ) : (
                         <DialogTitle id="alert-dialog-title">Save New View</DialogTitle>
                      )
                   }
@@ -721,12 +773,12 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
                         </Box>
                      ) : ("")}
                      {
-                        (! currentSavedView || isSaveFilterAs || isRenameFilter) && ! isDeleteFilter ? (
+                        (!currentSavedView || isSaveFilterAs || isRenameFilter) && !isDeleteFilter ? (
                            <Box>
                               {
                                  isSaveFilterAs ? (
                                     <Box mb={3}>Enter a name for this new saved view.</Box>
-                                 ):(
+                                 ) : (
                                     <Box mb={3}>Enter a new name for this saved view.</Box>
                                  )
                               }
@@ -744,10 +796,10 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
                                  }}
                               />
                            </Box>
-                        ):(
+                        ) : (
                            isDeleteFilter ? (
                               <Box>Are you sure you want to delete the view {`'${currentSavedView?.values.get("label")}'`}?</Box>
-                           ):(
+                           ) : (
                               <Box>Are you sure you want to update the view {`'${currentSavedView?.values.get("label")}'`}?</Box>
                            )
                         )
@@ -759,7 +811,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
                         isDeleteFilter ?
                            <QDeleteButton onClickHandler={handleFilterDialogButtonOnClick} disabled={isSubmitting} />
                            :
-                           <QSaveButton label="Save" onClickHandler={handleFilterDialogButtonOnClick} disabled={isSaveButtonDisabled()}/>
+                           <QSaveButton label="Save" onClickHandler={handleFilterDialogButtonOnClick} disabled={isSaveButtonDisabled()} />
                      }
                   </DialogActions>
                </Dialog>

src/qqq/components/processes/ProcessSummaryResults.tsx

@@ -84,7 +84,7 @@ function ProcessSummaryResults({
    );
 
    return (
-      <Box m={3} mt={6}>
+      <Box m={{xs: 0, md: 3}} mt={"3rem!important"}>
          <Grid container>
             <Grid item xs={0} lg={2} />
             <Grid item xs={12} lg={8}>

src/qqq/components/processes/ValidationReview.tsx

@@ -273,7 +273,7 @@ function ValidationReview({
    );
 
    return (
-      <Box m={3}>
+      <Box m={{xs: 0, md: 3}} mt={"3rem!important"}>
          <Grid container spacing={2}>
             <Grid item xs={12} lg={6}>
                <MDTypography color="body" variant="button">

src/qqq/components/query/AssignFilterVariable.tsx

@@ -0,0 +1,66 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2023.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
+import {FilterVariableExpression} from "@kingsrook/qqq-frontend-core/lib/model/query/FilterVariableExpression";
+import Box from "@mui/material/Box";
+import Icon from "@mui/material/Icon";
+import Tooltip from "@mui/material/Tooltip";
+import CriteriaDateField from "qqq/components/query/CriteriaDateField";
+import React, {SyntheticEvent, useState} from "react";
+
+
+export type Expression = FilterVariableExpression;
+
+
+interface AssignFilterButtonProps
+{
+   valueIndex: number;
+   field: QFieldMetaData;
+   valueChangeHandler: (event: React.ChangeEvent | SyntheticEvent, valueIndex?: number | "all", newValue?: any) => void;
+}
+
+CriteriaDateField.defaultProps = {
+   valueIndex: 0,
+   label: "Value",
+   idPrefix: "value-"
+};
+
+export default function AssignFilterVariable({valueIndex, field, valueChangeHandler}: AssignFilterButtonProps): JSX.Element
+{
+   const [isValueAVariable, setIsValueAVariable] = useState(false);
+
+   const handleVariableButtonOnClick = () =>
+   {
+      setIsValueAVariable(!isValueAVariable);
+      const expression = new FilterVariableExpression({fieldName: field.name, valueIndex: valueIndex});
+      valueChangeHandler(null, valueIndex, expression);
+   };
+
+   return <Box display="flex" alignItems="flex-end">
+      <Box>
+         <Tooltip title={`Use a variable as the value for the ${field.label} field`} placement="bottom">
+            <Icon fontSize="small" color="info" sx={{mx: 0.25, cursor: "pointer", position: "relative", top: "2px"}} onClick={handleVariableButtonOnClick}>functions</Icon>
+         </Tooltip>
+      </Box>
+   </Box>;
+}
+

src/qqq/components/query/BasicAndAdvancedQueryControls.tsx

@@ -79,6 +79,8 @@ interface BasicAndAdvancedQueryControlsProps
 
    queryScreenUsage: QueryScreenUsage;
 
+   allowVariables?: boolean;
+
    mode: string;
    setMode: (mode: string) => void;
 }
@@ -114,7 +116,7 @@ export function getCurrentSortIndicator(queryFilter: QQueryFilter, tableMetaData
  *******************************************************************************/
 const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryControlsProps, ref) =>
 {
-   const {metaData, tableMetaData, savedViewsComponent, columnMenuComponent, quickFilterFieldNames, setQuickFilterFieldNames, setQueryFilter, queryFilter, gridApiRef, queryFilterJSON, mode, setMode} = props;
+   const {metaData, tableMetaData, savedViewsComponent, columnMenuComponent, quickFilterFieldNames, setQuickFilterFieldNames, setQueryFilter, queryFilter, gridApiRef, queryFilterJSON, mode, setMode, queryScreenUsage} = props;
 
    /////////////////////
    // state variables //
@@ -181,7 +183,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
    {
       // todo - sometimes i want contains instead of equals on strings (client.name, for example...)
       let defaultOperator = field?.possibleValueSourceName ? QCriteriaOperator.IN : QCriteriaOperator.EQUALS;
-      if (field?.type == QFieldType.DATE_TIME || field?.type == QFieldType.DATE)
+      if (field?.type == QFieldType.DATE_TIME)
       {
          defaultOperator = QCriteriaOperator.GREATER_THAN;
       }
@@ -676,12 +678,14 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
 
                               return (<QuickFilter
                                  key={fieldName}
+                                 allowVariables={props.allowVariables}
                                  fullFieldName={fieldName}
                                  tableMetaData={tableMetaData}
                                  updateCriteria={updateQuickCriteria}
                                  criteriaParam={getQuickCriteriaParam(fieldName)}
                                  fieldMetaData={field}
                                  defaultOperator={defaultOperator}
+                                 queryScreenUsage={queryScreenUsage}
                                  handleRemoveQuickFilterField={null} />);
                            })
                         }
@@ -700,7 +704,9 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
                                  updateCriteria={updateQuickCriteria}
                                  criteriaParam={getQuickCriteriaParam(fieldName)}
                                  fieldMetaData={field}
+                                 allowVariables={props.allowVariables}
                                  defaultOperator={defaultOperator}
+                                 queryScreenUsage={queryScreenUsage}
                                  handleRemoveQuickFilterField={handleRemoveQuickFilterField} />);
                            })
                         }

src/qqq/components/query/CriteriaDateField.tsx

@@ -21,6 +21,7 @@
 
 import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
 import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
+import {FilterVariableExpression} from "@kingsrook/qqq-frontend-core/lib/model/query/FilterVariableExpression";
 import {NowExpression} from "@kingsrook/qqq-frontend-core/lib/model/query/NowExpression";
 import {NowWithOffsetExpression, NowWithOffsetOperator, NowWithOffsetUnit} from "@kingsrook/qqq-frontend-core/lib/model/query/NowWithOffsetExpression";
 import {ThisOrLastPeriodExpression, ThisOrLastPeriodOperator, ThisOrLastPeriodUnit} from "@kingsrook/qqq-frontend-core/lib/model/query/ThisOrLastPeriodExpression";
@@ -34,14 +35,14 @@ import MenuItem from "@mui/material/MenuItem";
 import {styled} from "@mui/material/styles";
 import TextField from "@mui/material/TextField";
 import Tooltip, {tooltipClasses, TooltipProps} from "@mui/material/Tooltip";
-import React, {SyntheticEvent, useEffect, useReducer, useState} from "react";
 import AdvancedDateTimeFilterValues from "qqq/components/query/AdvancedDateTimeFilterValues";
 import {QFilterCriteriaWithId} from "qqq/components/query/CustomFilterPanel";
 import {EvaluatedExpression} from "qqq/components/query/EvaluatedExpression";
 import {makeTextField} from "qqq/components/query/FilterCriteriaRowValues";
+import React, {SyntheticEvent, useReducer, useState} from "react";
 
 
-export type Expression = NowWithOffsetExpression | ThisOrLastPeriodExpression | NowExpression;
+export type Expression = NowWithOffsetExpression | ThisOrLastPeriodExpression | NowExpression | FilterVariableExpression;
 
 
 interface CriteriaDateFieldProps
@@ -52,6 +53,7 @@ interface CriteriaDateFieldProps
    field: QFieldMetaData;
    criteria: QFilterCriteriaWithId;
    valueChangeHandler: (event: React.ChangeEvent | SyntheticEvent, valueIndex?: number | "all", newValue?: any) => void;
+   allowVariables?: boolean;
 }
 
 CriteriaDateField.defaultProps = {
@@ -60,19 +62,30 @@ CriteriaDateField.defaultProps = {
    idPrefix: "value-"
 };
 
-export default function CriteriaDateField({valueIndex, label, idPrefix, field, criteria, valueChangeHandler}: CriteriaDateFieldProps): JSX.Element
+export const NoWrapTooltip = styled(({className, children, ...props}: TooltipProps) => (
+   <Tooltip {...props} classes={{popper: className}}>{children}</Tooltip>
+))({
+   [`& .${tooltipClasses.tooltip}`]: {
+      whiteSpace: "nowrap"
+   },
+});
+
+export default function CriteriaDateField({valueIndex, label, idPrefix, field, criteria, valueChangeHandler, allowVariables}: CriteriaDateFieldProps): JSX.Element
 {
+   const [relativeDateTimeOpen, setRelativeDateTimeOpen] = useState(false);
    const [relativeDateTimeMenuAnchorElement, setRelativeDateTimeMenuAnchorElement] = useState(null);
-   const [forceAdvancedDateTimeDialogOpen, setForceAdvancedDateTimeDialogOpen] = useState(false)
+   const [forceAdvancedDateTimeDialogOpen, setForceAdvancedDateTimeDialogOpen] = useState(false);
    const [, forceUpdate] = useReducer((x) => x + 1, 0);
 
    const openRelativeDateTimeMenu = (event: React.MouseEvent<HTMLElement>) =>
    {
+      setRelativeDateTimeOpen(true);
       setRelativeDateTimeMenuAnchorElement(event.currentTarget);
    };
 
    const closeRelativeDateTimeMenu = () =>
    {
+      setRelativeDateTimeOpen(false);
       setRelativeDateTimeMenuAnchorElement(null);
    };
 
@@ -137,20 +150,12 @@ export default function CriteriaDateField({valueIndex, label, idPrefix, field, c
    const isExpression = criteria.values && criteria.values[valueIndex] && criteria.values[valueIndex].type;
    const currentExpression = isExpression ? criteria.values[valueIndex] : null;
 
-   const NoWrapTooltip = styled(({className, children, ...props}: TooltipProps) => (
-      <Tooltip {...props} classes={{popper: className}}>{children}</Tooltip>
-   ))({
-      [`& .${tooltipClasses.tooltip}`]: {
-         whiteSpace: "nowrap"
-      },
-   });
-
    const tooltipMenuItemFromExpression = (valueIndex: number, tooltipPlacement: "left" | "right", expression: Expression) =>
    {
       let startOfPrefix = "";
-      if(expression.type == "ThisOrLastPeriod")
+      if (expression.type == "ThisOrLastPeriod")
       {
-         if(field.type == QFieldType.DATE_TIME || expression.timeUnit != "DAYS")
+         if (field.type == QFieldType.DATE_TIME || expression.timeUnit != "DAYS")
          {
             startOfPrefix = "start of ";
          }
@@ -191,84 +196,120 @@ export default function CriteriaDateField({valueIndex, label, idPrefix, field, c
       setTimeout(() => setForceAdvancedDateTimeDialogOpen(false), 100);
    }
 
+   const makeFilterVariableTextField = (expression: FilterVariableExpression, valueIndex: number = 0, label = "Value", idPrefix = "value-") =>
+   {
+      const clearValue = (event: React.MouseEvent<HTMLAnchorElement> | React.MouseEvent<HTMLButtonElement>, index: number) =>
+      {
+         valueChangeHandler(event, index, "");
+         document.getElementById(`${idPrefix}${criteria.id}`).focus();
+      };
+
+      const inputProps2: any = {};
+      inputProps2.endAdornment = (
+         <InputAdornment position="end">
+            <IconButton sx={{visibility: expression ? "visible" : "hidden"}} onClick={(event) => clearValue(event, valueIndex)}>
+               <Icon>closer</Icon>
+            </IconButton>
+         </InputAdornment>
+      );
+
+      return <NoWrapTooltip title={<EvaluatedExpression field={field} expression={expression} />} placement="bottom" enterDelay={1000} sx={{marginLeft: "-75px !important", marginTop: "-8px !important"}}><TextField
+         id={`${idPrefix}${criteria.id}`}
+         label={label}
+         variant="standard"
+         autoComplete="off"
+         InputProps={{disabled: true, readOnly: true, unselectable: "off", ...inputProps2}}
+         InputLabelProps={{shrink: true}}
+         value="${VARIABLE}"
+         fullWidth
+      /></NoWrapTooltip>;
+   };
+
+
    return <Box display="flex" alignItems="flex-end">
       {
-         isExpression ? makeDateTimeExpressionTextField(criteria.values[valueIndex], valueIndex, label, idPrefix)
+         isExpression ?
-            : makeTextField(field, criteria, valueChangeHandler, valueIndex, label, idPrefix)
+            currentExpression?.type == "FilterVariableExpression" ? (
+               makeFilterVariableTextField(criteria.values[valueIndex], valueIndex, label, idPrefix)
+            ) : (
+               makeDateTimeExpressionTextField(criteria.values[valueIndex], valueIndex, label, idPrefix)
+            )
+            : makeTextField(field, criteria, valueChangeHandler, valueIndex, label, idPrefix, allowVariables)
       }
-      <Box>
+      {
-         <Tooltip title={`Choose a common relative ${field.type == QFieldType.DATE ? "date" : "date-time"} expression`} placement="bottom">
+         (!isExpression || currentExpression?.type != "FilterVariableExpression") && (
-            <Icon fontSize="small" color="info" sx={{mx: 0.25, cursor: "pointer", position: "relative", top: "2px"}} onClick={openRelativeDateTimeMenu}>date_range</Icon>
+            <><Box>
-         </Tooltip>
+               <Tooltip title={`Choose a common relative ${field.type == QFieldType.DATE ? "date" : "date-time"} expression`} placement="bottom">
-         <Menu
+                  <Icon fontSize="small" color="info" sx={{mx: 0.25, cursor: "pointer", position: "relative", top: "2px"}} onClick={openRelativeDateTimeMenu}>date_range</Icon>
-            open={relativeDateTimeMenuAnchorElement}
+               </Tooltip>
-            anchorEl={relativeDateTimeMenuAnchorElement}
+               <Menu
-            transformOrigin={{horizontal: "left", vertical: "top"}}
+                  open={relativeDateTimeOpen}
-            onClose={closeRelativeDateTimeMenu}
+                  anchorEl={relativeDateTimeMenuAnchorElement}
-         >
+                  transformOrigin={{horizontal: "left", vertical: "top"}}
-            {
+                  onClose={closeRelativeDateTimeMenu}
-               field.type == QFieldType.DATE ?
+               >
-                  <Box display="flex">
+                  {field.type == QFieldType.DATE ?
-                     <Box>
+                     <Box display="flex">
-                        {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 7, "DAYS"))}
+                        <Box>
-                        {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 14, "DAYS"))}
+                           {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 7, "DAYS"))}
-                        {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 30, "DAYS"))}
+                           {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 14, "DAYS"))}
-                        {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 90, "DAYS"))}
+                           {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 30, "DAYS"))}
-                        {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 180, "DAYS"))}
+                           {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 90, "DAYS"))}
-                        {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 1, "YEARS"))}
+                           {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 180, "DAYS"))}
-                        <Divider />
+                           {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 1, "YEARS"))}
-                        <Tooltip title="Define a custom expression" placement="left">
+                           <Divider />
-                           <MenuItem onClick={doForceAdvancedDateTimeDialogOpen}>Custom</MenuItem>
+                           <Tooltip title="Define a custom expression" placement="left">
-                        </Tooltip>
+                              <MenuItem onClick={doForceAdvancedDateTimeDialogOpen}>Custom</MenuItem>
+                           </Tooltip>
+                        </Box>
+                        <Box>
+                           {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "DAYS"))}
+                           {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "DAYS"))}
+                           {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "WEEKS"))}
+                           {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "WEEKS"))}
+                           {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "MONTHS"))}
+                           {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "MONTHS"))}
+                           {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "YEARS"))}
+                           {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "YEARS"))}
+                        </Box>
                      </Box>
-                     <Box>
+                     :
-                        {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "DAYS"))}
+                     <Box display="flex">
-                        {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "DAYS"))}
+                        <Box>
-                        {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "WEEKS"))}
+                           {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 1, "HOURS"))}
-                        {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "WEEKS"))}
+                           {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 12, "HOURS"))}
-                        {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "MONTHS"))}
+                           {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 24, "HOURS"))}
-                        {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "MONTHS"))}
+                           {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 7, "DAYS"))}
-                        {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "YEARS"))}
+                           {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 14, "DAYS"))}
-                        {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "YEARS"))}
+                           {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 30, "DAYS"))}
-                     </Box>
+                           {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 90, "DAYS"))}
-                  </Box>
+                           {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 180, "DAYS"))}
-                  :
+                           {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 1, "YEARS"))}
-                  <Box display="flex">
+                           <Divider />
-                     <Box>
+                           <Tooltip title="Define a custom expression" placement="left">
-                        {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 1, "HOURS"))}
+                              <MenuItem onClick={doForceAdvancedDateTimeDialogOpen}>Custom</MenuItem>
-                        {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 12, "HOURS"))}
+                           </Tooltip>
-                        {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 24, "HOURS"))}
+                        </Box>
-                        {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 7, "DAYS"))}
+                        <Box>
-                        {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 14, "DAYS"))}
+                           {tooltipMenuItemFromExpression(valueIndex, "right", newNowExpression())}
-                        {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 30, "DAYS"))}
+                           {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "HOURS"))}
-                        {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 90, "DAYS"))}
+                           {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "HOURS"))}
-                        {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 180, "DAYS"))}
+                           {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "DAYS"))}
-                        {tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 1, "YEARS"))}
+                           {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "DAYS"))}
-                        <Divider />
+                           {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "WEEKS"))}
-                        <Tooltip title="Define a custom expression" placement="left">
+                           {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "WEEKS"))}
-                           <MenuItem onClick={doForceAdvancedDateTimeDialogOpen}>Custom</MenuItem>
+                           {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "MONTHS"))}
-                        </Tooltip>
+                           {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "MONTHS"))}
-                     </Box>
+                           {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "YEARS"))}
-                     <Box>
+                           {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "YEARS"))}
-                        {tooltipMenuItemFromExpression(valueIndex, "right", newNowExpression())}
+                        </Box>
-                        {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "HOURS"))}
+                     </Box>}
-                        {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "HOURS"))}
+               </Menu>
-                        {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "DAYS"))}
+            </Box><Box>
-                        {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "DAYS"))}
+               <AdvancedDateTimeFilterValues type={field.type} expression={currentExpression} onSave={(expression: any) => saveNewDateTimeExpression(valueIndex, expression)} forcedOpen={forceAdvancedDateTimeDialogOpen} />
-                        {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "WEEKS"))}
+            </Box></>
-                        {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "WEEKS"))}
+         )
-                        {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "MONTHS"))}
+      }
-                        {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "MONTHS"))}
-                        {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "YEARS"))}
-                        {tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "YEARS"))}
-                     </Box>
-                  </Box>
-            }
-         </Menu>
-      </Box>
-      <Box>
-         <AdvancedDateTimeFilterValues type={field.type} expression={currentExpression} onSave={(expression: any) => saveNewDateTimeExpression(valueIndex, expression)} forcedOpen={forceAdvancedDateTimeDialogOpen} />
-      </Box>
    </Box>;
 }
 

src/qqq/components/query/CustomColumnsPanel.tsx

@@ -21,7 +21,9 @@
 
 import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
 import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
-import {Box, FormControlLabel, FormGroup} from "@mui/material";
+
+import {FormControlLabel, FormGroup} from "@mui/material";
+import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import Icon from "@mui/material/Icon";
 import IconButton from "@mui/material/IconButton";
@@ -56,7 +58,7 @@ export const CustomColumnsPanel = forwardRef<any, GridColumnsPanelProps>(
       const someRef = createRef();
 
       const textRef = useRef(null);
-      const [didInitialFocus, setDidInitialFocus] = useState(false)
+      const [didInitialFocus, setDidInitialFocus] = useState(false);
 
       const [openGroups, setOpenGroups] = useState(props.initialOpenedGroups || {});
       const openGroupsBecauseOfFilter = {} as { [name: string]: boolean };
@@ -71,9 +73,9 @@ export const CustomColumnsPanel = forwardRef<any, GridColumnsPanelProps>(
 
       console.log(`Open groups: ${JSON.stringify(openGroups)}`);
 
-      if(!didInitialFocus)
+      if (!didInitialFocus)
       {
-         if(textRef.current)
+         if (textRef.current)
          {
             textRef.current.select();
             setDidInitialFocus(true);
@@ -189,11 +191,11 @@ export const CustomColumnsPanel = forwardRef<any, GridColumnsPanelProps>(
       ///////////////////////////////////////////////////////////////////////////////////////////////////////
       // always sort columns by label.  note, in future may offer different sorts - here's where to do it. //
       ///////////////////////////////////////////////////////////////////////////////////////////////////////
-      const sortedColumns = [... columns];
+      const sortedColumns = [...columns];
       sortedColumns.sort((a, b): number =>
       {
          return a.headerName.localeCompare(b.headerName);
-      })
+      });
 
       for (let i = 0; i < sortedColumns.length; i++)
       {
@@ -361,7 +363,7 @@ export const CustomColumnsPanel = forwardRef<any, GridColumnsPanelProps>(
       const changeFilterText = (newValue: string) =>
       {
          setFilterText(newValue);
-         props.filterTextChanger(newValue)
+         props.filterTextChanger(newValue);
       };
 
       const filterTextChanged = (event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) =>

src/qqq/components/query/CustomFilterPanel.tsx

@@ -28,8 +28,8 @@ import Box from "@mui/material/Box";
 import Button from "@mui/material/Button/Button";
 import Icon from "@mui/material/Icon/Icon";
 import {GridFilterPanelProps, GridSlotsComponentsProps} from "@mui/x-data-grid-pro";
-import React, {forwardRef, useReducer} from "react";
 import {FilterCriteriaRow, getDefaultCriteriaValue} from "qqq/components/query/FilterCriteriaRow";
+import React, {forwardRef, useReducer} from "react";
 
 
 declare module "@mui/x-data-grid"
@@ -49,7 +49,7 @@ declare module "@mui/x-data-grid"
 
 export class QFilterCriteriaWithId extends QFilterCriteria
 {
-   id: number
+   id: number;
 }
 
 
@@ -62,6 +62,7 @@ export const CustomFilterPanel = forwardRef<any, GridFilterPanelProps>(
       const [, forceUpdate] = useReducer((x) => x + 1, 0);
 
       const queryFilter = props.queryFilter;
+
       // console.log(`CustomFilterPanel: filter: ${JSON.stringify(queryFilter)}`);
 
       function focusLastField()
@@ -124,7 +125,7 @@ export const CustomFilterPanel = forwardRef<any, GridFilterPanelProps>(
          }
       }
 
-      if(queryFilter.criteria.length == 1 && !queryFilter.criteria[0].fieldName)
+      if (queryFilter.criteria.length == 1 && !queryFilter.criteria[0].fieldName)
       {
          focusLastField();
       }
@@ -142,7 +143,7 @@ export const CustomFilterPanel = forwardRef<any, GridFilterPanelProps>(
       {
          queryFilter.criteria[index] = newCriteria;
 
-         clearTimeout(debounceTimeout)
+         clearTimeout(debounceTimeout);
          debounceTimeout = setTimeout(() => props.updateFilter(queryFilter), needDebounce ? 500 : 1);
 
          forceUpdate();
@@ -178,6 +179,8 @@ export const CustomFilterPanel = forwardRef<any, GridFilterPanelProps>(
                            updateCriteria={(newCriteria, needDebounce) => updateCriteria(newCriteria, index, needDebounce)}
                            removeCriteria={() => removeCriteria(index)}
                            updateBooleanOperator={(newValue) => updateBooleanOperator(newValue)}
+                           allowVariables={props.allowVariables}
+                           queryScreenUsage={props.queryScreenUsage}
                         />
                         {/*JSON.stringify(criteria)*/}
                      </Box>

src/qqq/components/query/EvaluatedExpression.tsx

@@ -21,9 +21,9 @@
 
 import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
 import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
-import React, {useEffect, useState} from "react";
 import {Expression} from "qqq/components/query/CriteriaDateField";
 import ValueUtils from "qqq/utils/qqq/ValueUtils";
+import React, {useEffect, useState} from "react";
 
 /*******************************************************************************
  ** Helper component to show value inside tooltips that ticks up every second.
@@ -50,13 +50,18 @@ export function EvaluatedExpression({field, expression}: EvaluatedExpressionProp
       return () => clearInterval(interval);
    }, []);
 
-   return <>{`${evaluateExpression(timeForEvaluations, field, expression)}`}</>;
+   return <span style={{fontVariantNumeric: "tabular-nums"}}>{`${evaluateExpression(timeForEvaluations, field, expression)}`}</span>;
 }
 
 const HOUR_MS = 60 * 60 * 1000;
 const DAY_MS = 24 * 60 * 60 * 1000;
 const evaluateExpression = (time: Date, field: QFieldMetaData, expression: Expression): string =>
 {
+   if (expression.type == "FilterVariableExpression")
+   {
+      return (expression.toString());
+   }
+
    let rs: Date = null;
    if (expression.type == "NowWithOffset")
    {

src/qqq/components/query/FilterCriteriaRow.tsx

@@ -35,6 +35,7 @@ import TextField from "@mui/material/TextField";
 import Tooltip from "@mui/material/Tooltip";
 import FieldAutoComplete from "qqq/components/misc/FieldAutoComplete";
 import FilterCriteriaRowValues from "qqq/components/query/FilterCriteriaRowValues";
+import {QueryScreenUsage} from "qqq/pages/records/query/RecordQuery";
 import FilterUtils from "qqq/utils/qqq/FilterUtils";
 import React, {ReactNode, SyntheticEvent, useState} from "react";
 
@@ -72,7 +73,7 @@ export const getValueModeRequiredCount = (valueMode: ValueMode): number =>
       case ValueMode.PVS_MULTI:
          return (null);
    }
-}
+};
 
 export interface OperatorOption
 {
@@ -183,7 +184,7 @@ export const getOperatorOptions = (tableMetaData: QTableMetaData, fieldName: str
    }
 
    return (operatorOptions);
-}
+};
 
 
 interface FilterCriteriaRowProps
@@ -197,13 +198,14 @@ interface FilterCriteriaRowProps
    updateCriteria: (newCriteria: QFilterCriteria, needDebounce: boolean) => void;
    removeCriteria: () => void;
    updateBooleanOperator: (newValue: string) => void;
+   queryScreenUsage?: QueryScreenUsage;
+   allowVariables?: boolean;
 }
 
 FilterCriteriaRow.defaultProps =
-   {
+   {};
-   };
 
-export function validateCriteria(criteria: QFilterCriteria, operatorSelectedValue?: OperatorOption): {criteriaIsValid: boolean, criteriaStatusTooltip: string}
+export function validateCriteria(criteria: QFilterCriteria, operatorSelectedValue?: OperatorOption): { criteriaIsValid: boolean, criteriaStatusTooltip: string }
 {
    let criteriaIsValid = true;
    let criteriaStatusTooltip = "This condition is fully defined and is part of your filter.";
@@ -213,7 +215,7 @@ export function validateCriteria(criteria: QFilterCriteria, operatorSelectedValu
       return (value === null || value == undefined || String(value).trim() === "");
    }
 
-   if(!criteria)
+   if (!criteria)
    {
       criteriaIsValid = false;
       criteriaStatusTooltip = "This condition is not defined.";
@@ -266,7 +268,7 @@ export function validateCriteria(criteria: QFilterCriteria, operatorSelectedValu
    return {criteriaIsValid, criteriaStatusTooltip};
 }
 
-export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria, booleanOperator, updateCriteria, removeCriteria, updateBooleanOperator}: FilterCriteriaRowProps): JSX.Element
+export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria, booleanOperator, updateCriteria, removeCriteria, updateBooleanOperator, queryScreenUsage, allowVariables}: FilterCriteriaRowProps): JSX.Element
 {
    // console.log(`FilterCriteriaRow: criteria: ${JSON.stringify(criteria)}`);
    const [operatorSelectedValue, setOperatorSelectedValue] = useState(null as OperatorOption);
@@ -284,7 +286,7 @@ export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria,
    let defaultFieldValue;
    let field = null;
    let fieldTable = null;
-   if(criteria && criteria.fieldName)
+   if (criteria && criteria.fieldName)
    {
       [field, fieldTable] = FilterUtils.getField(tableMetaData, criteria.fieldName);
       if (field && fieldTable)
@@ -303,9 +305,9 @@ export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria,
 
          let newOperatorSelectedValue = operatorOptions.filter(option =>
          {
-            if(option.value == criteria.operator)
+            if (option.value == criteria.operator)
             {
-               if(option.implicitValues)
+               if (option.implicitValues)
                {
                   return (JSON.stringify(option.implicitValues) == JSON.stringify(criteria.values));
                }
@@ -316,7 +318,7 @@ export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria,
             }
             return (false);
          })[0];
-         if(newOperatorSelectedValue?.label !== operatorSelectedValue?.label)
+         if (newOperatorSelectedValue?.label !== operatorSelectedValue?.label)
          {
             setOperatorSelectedValue(newOperatorSelectedValue);
             setOperatorInputValue(newOperatorSelectedValue?.label);
@@ -379,12 +381,12 @@ export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria,
    {
       criteria.operator = newValue ? newValue.value : null;
 
-      if(newValue)
+      if (newValue)
       {
          setOperatorSelectedValue(newValue);
          setOperatorInputValue(newValue.label);
 
-         if(newValue.implicitValues)
+         if (newValue.implicitValues)
          {
             criteria.values = newValue.implicitValues;
          }
@@ -393,15 +395,15 @@ export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria,
          // we've seen cases where switching operators can sometimes put a null in as the first value... //
          // that just causes a bad time (e.g., null pointers in Autocomplete), so, get rid of that.      //
          //////////////////////////////////////////////////////////////////////////////////////////////////
-         if(criteria.values && criteria.values.length == 1 && criteria.values[0] == null)
+         if (criteria.values && criteria.values.length == 1 && criteria.values[0] == null)
          {
             criteria.values = [];
          }
 
-         if(newValue.valueMode && !newValue.implicitValues)
+         if (newValue.valueMode && !newValue.implicitValues)
          {
             const requiredValueCount = getValueModeRequiredCount(newValue.valueMode);
-            if(requiredValueCount != null && criteria.values.length > requiredValueCount)
+            if (requiredValueCount != null && criteria.values.length > requiredValueCount)
             {
                criteria.values.splice(requiredValueCount);
             }
@@ -424,12 +426,12 @@ export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria,
       // @ts-ignore
       const value = newValue !== undefined ? newValue : event ? event.target.value : null;
 
-      if(!criteria.values)
+      if (!criteria.values)
       {
          criteria.values = [];
       }
 
-      if(valueIndex == "all")
+      if (valueIndex == "all")
       {
          criteria.values = value;
       }
@@ -514,6 +516,8 @@ export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria,
                field={field}
                table={fieldTable}
                valueChangeHandler={(event, valueIndex, newValue) => handleValueChange(event, valueIndex, newValue)}
+               queryScreenUsage={queryScreenUsage}
+               allowVariables={allowVariables}
             />
          </Box>
          <Box display="inline-block">

src/qqq/components/query/FilterCriteriaRowValues.tsx

@@ -23,19 +23,25 @@
 import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
 import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
 import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
+import {FilterVariableExpression} from "@kingsrook/qqq-frontend-core/lib/model/query/FilterVariableExpression";
 import Autocomplete from "@mui/material/Autocomplete";
 import Box from "@mui/material/Box";
 import Icon from "@mui/material/Icon";
 import IconButton from "@mui/material/IconButton";
 import InputAdornment from "@mui/material/InputAdornment/InputAdornment";
 import TextField from "@mui/material/TextField";
-import React, {SyntheticEvent, useReducer} from "react";
+import DynamicFormUtils from "qqq/components/forms/DynamicFormUtils";
 import DynamicSelect from "qqq/components/forms/DynamicSelect";
-import CriteriaDateField from "qqq/components/query/CriteriaDateField";
+import AssignFilterVariable from "qqq/components/query/AssignFilterVariable";
+import CriteriaDateField, {NoWrapTooltip} from "qqq/components/query/CriteriaDateField";
 import {QFilterCriteriaWithId} from "qqq/components/query/CustomFilterPanel";
+import {EvaluatedExpression} from "qqq/components/query/EvaluatedExpression";
 import FilterCriteriaPaster from "qqq/components/query/FilterCriteriaPaster";
 import {OperatorOption, ValueMode} from "qqq/components/query/FilterCriteriaRow";
+import {QueryScreenUsage} from "qqq/pages/records/query/RecordQuery";
 import ValueUtils from "qqq/utils/qqq/ValueUtils";
+import React, {SyntheticEvent, useReducer} from "react";
+import {flushSync} from "react-dom";
 
 interface Props
 {
@@ -44,7 +50,9 @@ interface Props
    field: QFieldMetaData;
    table: QTableMetaData;
    valueChangeHandler: (event: React.ChangeEvent | SyntheticEvent, valueIndex?: number | "all", newValue?: any) => void;
-   initiallyOpenMultiValuePvs?: boolean
+   initiallyOpenMultiValuePvs?: boolean;
+   queryScreenUsage?: QueryScreenUsage;
+   allowVariables?: boolean;
 }
 
 FilterCriteriaRowValues.defaultProps =
@@ -52,6 +60,10 @@ FilterCriteriaRowValues.defaultProps =
       initiallyOpenMultiValuePvs: false
    };
 
+
+/***************************************************************************
+ * get the type to use for an <input> from a QFieldMetaData
+ ***************************************************************************/
 export const getTypeForTextField = (field: QFieldMetaData): string =>
 {
    let type = "search";
@@ -72,8 +84,15 @@ export const getTypeForTextField = (field: QFieldMetaData): string =>
    return (type);
 };
 
-export const makeTextField = (field: QFieldMetaData, criteria: QFilterCriteriaWithId, valueChangeHandler?: (event: (React.ChangeEvent | React.SyntheticEvent), valueIndex?: (number | "all"), newValue?: any) => void, valueIndex: number = 0, label = "Value", idPrefix = "value-") =>
+
+/***************************************************************************
+ * Make an <input type=text> (actually, might be a different type, but that's
+ * the gist of it), for a field.
+ ***************************************************************************/
+export const makeTextField = (field: QFieldMetaData, criteria: QFilterCriteriaWithId, valueChangeHandler?: (event: (React.ChangeEvent | React.SyntheticEvent), valueIndex?: (number | "all"), newValue?: any) => void, valueIndex: number = 0, label = "Value", idPrefix = "value-", allowVariables = false) =>
 {
+   const isExpression = criteria.values && criteria.values[valueIndex] && criteria.values[valueIndex].type;
+   const inputId = `${idPrefix}${criteria.id}`;
    let type = getTypeForTextField(field);
    const inputLabelProps: any = {};
 
@@ -88,14 +107,16 @@ export const makeTextField = (field: QFieldMetaData, criteria: QFilterCriteriaWi
       value = ValueUtils.formatDateTimeValueForForm(value);
    }
 
+   /***************************************************************************
+    * Event handler for the clear 'x'.
+    ***************************************************************************/
    const clearValue = (event: React.MouseEvent<HTMLAnchorElement> | React.MouseEvent<HTMLButtonElement>, index: number) =>
    {
       valueChangeHandler(event, index, "");
-      document.getElementById(`${idPrefix}${criteria.id}`).focus();
+      document.getElementById(inputId).focus();
    };
 
 
-
    /*******************************************************************************
     ** Event handler for key-down events - specifically added here, to stop pressing
     ** 'tab' in a date or date-time from closing the quick-filter...
@@ -104,7 +125,7 @@ export const makeTextField = (field: QFieldMetaData, criteria: QFilterCriteriaWi
    {
       if (field.type == QFieldType.DATE || field.type == QFieldType.DATE_TIME)
       {
-         if(e.code == "Tab")
+         if (e.code == "Tab")
          {
             console.log("Tab on date or date-time - don't close me, just move to the next sub-field!...");
             e.stopPropagation();
@@ -112,6 +133,44 @@ export const makeTextField = (field: QFieldMetaData, criteria: QFilterCriteriaWi
       }
    };
 
+
+   /***************************************************************************
+    * make a version of the text field for when the criteria's value is set to
+    * be a "variable"
+    ***************************************************************************/
+   const makeFilterVariableTextField = (expression: FilterVariableExpression, valueIndex: number = 0, label = "Value", idPrefix = "value-") =>
+   {
+      const clearValue = (event: React.MouseEvent<HTMLAnchorElement> | React.MouseEvent<HTMLButtonElement>, index: number) =>
+      {
+         valueChangeHandler(event, index, "");
+         document.getElementById(`${idPrefix}${criteria.id}`).focus();
+      };
+
+      const inputProps2: any = {};
+      inputProps2.endAdornment = (
+         <InputAdornment position="end">
+            <IconButton sx={{visibility: expression ? "visible" : "hidden"}} onClick={(event) => clearValue(event, valueIndex)}>
+               <Icon>closer</Icon>
+            </IconButton>
+         </InputAdornment>
+      );
+
+      return <NoWrapTooltip title={<EvaluatedExpression field={field} expression={expression} />} placement="bottom" enterDelay={1000} sx={{marginLeft: "-75px !important", marginTop: "-8px !important"}}><TextField
+         id={`${idPrefix}${criteria.id}`}
+         label={label}
+         variant="standard"
+         autoComplete="off"
+         InputProps={{disabled: true, readOnly: true, unselectable: "off", ...inputProps2}}
+         InputLabelProps={{shrink: true}}
+         value="${VARIABLE}"
+         fullWidth
+      /></NoWrapTooltip>;
+   };
+
+
+   ///////////////////////////////////////////////////////////////////////////
+   // set up an 'x' icon as an end-adornment, to clear value from the field //
+   ///////////////////////////////////////////////////////////////////////////
    const inputProps: any = {};
    inputProps.endAdornment = (
       <InputAdornment position="end">
@@ -121,23 +180,87 @@ export const makeTextField = (field: QFieldMetaData, criteria: QFilterCriteriaWi
       </InputAdornment>
    );
 
-   return <TextField
+
-      id={`${idPrefix}${criteria.id}`}
+   /***************************************************************************
-      label={label}
+    * onChange event handler.  deals with, if the field has a to upper/lower
-      variant="standard"
+    * case rule on it, to apply that transform, and adjust the cursor.
-      autoComplete="off"
+    * See:  https://giacomocerquone.com/blog/keep-input-cursor-still
-      type={type}
+    ***************************************************************************/
-      onChange={(event) => valueChangeHandler(event, valueIndex)}
+   function onChange(event: any)
-      onKeyDown={handleKeyDown}
+   {
-      value={value}
+      const beforeStart = event.target.selectionStart;
-      InputLabelProps={inputLabelProps}
+      const beforeEnd = event.target.selectionEnd;
-      InputProps={inputProps}
+
-      fullWidth
+      let isToUpperCase = DynamicFormUtils.isToUpperCase(field);
-      autoFocus={true}
+      let isToLowerCase = DynamicFormUtils.isToLowerCase(field);
-   />;
+
+      if (isToUpperCase || isToLowerCase)
+      {
+         flushSync(() =>
+         {
+            let newValue = event.currentTarget.value;
+
+            if (isToUpperCase)
+            {
+               newValue = newValue.toUpperCase();
+            }
+            if (isToLowerCase)
+            {
+               newValue = newValue.toLowerCase();
+            }
+
+            event.currentTarget.value = newValue;
+         });
+
+         const input = document.getElementById(inputId);
+         if (input)
+         {
+            // @ts-ignore
+            input.setSelectionRange(beforeStart, beforeEnd);
+         }
+      }
+
+      valueChangeHandler(event, valueIndex);
+   }
+
+   ////////////////////////
+   // return the element //
+   ////////////////////////
+   return <Box sx={{margin: 0, padding: 0, display: "flex"}}>
+      {
+         isExpression ? (
+            makeFilterVariableTextField(criteria.values[valueIndex], valueIndex, label, idPrefix)
+         ) : (
+            <TextField
+               id={inputId}
+               label={label}
+               variant="standard"
+               autoComplete="off"
+               type={type}
+               onChange={onChange}
+               onKeyDown={handleKeyDown}
+               value={value}
+               InputLabelProps={inputLabelProps}
+               InputProps={inputProps}
+               fullWidth
+               autoFocus={true}
+            />
+         )
+      }
+      {
+         allowVariables && (
+            <AssignFilterVariable field={field} valueChangeHandler={valueChangeHandler} valueIndex={valueIndex} />
+         )
+      }
+   </Box>;
 };
 
-function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueChangeHandler, initiallyOpenMultiValuePvs}: Props): JSX.Element
+
+/***************************************************************************
+ * Component that is the "values" portion of a FilterCriteria Row in the
+ * advanced query filter editor.
+ ***************************************************************************/
+function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueChangeHandler, initiallyOpenMultiValuePvs, queryScreenUsage, allowVariables}: Props): JSX.Element
 {
    const [, forceUpdate] = useReducer((x) => x + 1, 0);
 
@@ -146,6 +269,10 @@ function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueC
       return null;
    }
 
+
+   /***************************************************************************
+    * Callback for the Save button from the paste-values modal
+    ***************************************************************************/
    function saveNewPasterValues(newValues: any[])
    {
       if (criteria.values)
@@ -169,33 +296,38 @@ function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueC
       forceUpdate();
    }
 
+   const isExpression = criteria.values && criteria.values[0] && criteria.values[0].type;
+
+   //////////////////////////////////////////////////////////////////////////////
+   // render different form element9s) based on operator option's "value mode" //
+   //////////////////////////////////////////////////////////////////////////////
    switch (operatorOption.valueMode)
    {
       case ValueMode.NONE:
          return null;
       case ValueMode.SINGLE:
-         return makeTextField(field, criteria, valueChangeHandler);
+         return makeTextField(field, criteria, valueChangeHandler, 0, undefined, undefined, allowVariables);
       case ValueMode.SINGLE_DATE:
-         return <CriteriaDateField field={field} valueChangeHandler={valueChangeHandler} criteria={criteria} />;
+         return <CriteriaDateField field={field} valueChangeHandler={valueChangeHandler} criteria={criteria} allowVariables={allowVariables} />;
       case ValueMode.DOUBLE_DATE:
          return <Box>
-            <CriteriaDateField field={field} valueChangeHandler={valueChangeHandler} criteria={criteria} valueIndex={0} label="From" idPrefix="from-" />
+            <CriteriaDateField field={field} valueChangeHandler={valueChangeHandler} criteria={criteria} valueIndex={0} label="From" idPrefix="from-" allowVariables={allowVariables} />
-            <CriteriaDateField field={field} valueChangeHandler={valueChangeHandler} criteria={criteria} valueIndex={1} label="To" idPrefix="to-" />
+            <CriteriaDateField field={field} valueChangeHandler={valueChangeHandler} criteria={criteria} valueIndex={1} label="To" idPrefix="to-" allowVariables={allowVariables} />
          </Box>;
       case ValueMode.SINGLE_DATE_TIME:
-         return <CriteriaDateField field={field} valueChangeHandler={valueChangeHandler} criteria={criteria} />;
+         return <CriteriaDateField field={field} valueChangeHandler={valueChangeHandler} criteria={criteria} allowVariables={allowVariables} />;
       case ValueMode.DOUBLE_DATE_TIME:
          return <Box>
-            <CriteriaDateField field={field} valueChangeHandler={valueChangeHandler} criteria={criteria} valueIndex={0} label="From" idPrefix="from-" />
+            <CriteriaDateField field={field} valueChangeHandler={valueChangeHandler} criteria={criteria} valueIndex={0} label="From" idPrefix="from-" allowVariables={allowVariables} />
-            <CriteriaDateField field={field} valueChangeHandler={valueChangeHandler} criteria={criteria} valueIndex={1} label="To" idPrefix="to-" />
+            <CriteriaDateField field={field} valueChangeHandler={valueChangeHandler} criteria={criteria} valueIndex={1} label="To" idPrefix="to-" allowVariables={allowVariables} />
          </Box>;
       case ValueMode.DOUBLE:
          return <Box>
             <Box width="50%" display="inline-block">
-               {makeTextField(field, criteria, valueChangeHandler, 0, "From", "from-")}
+               {makeTextField(field, criteria, valueChangeHandler, 0, "From", "from-", allowVariables)}
             </Box>
             <Box width="50%" display="inline-block">
-               {makeTextField(field, criteria, valueChangeHandler, 1, "To", "to-")}
+               {makeTextField(field, criteria, valueChangeHandler, 1, "To", "to-", allowVariables)}
             </Box>
          </Box>;
       case ValueMode.MULTI:
@@ -228,19 +360,29 @@ function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueC
          {
             selectedPossibleValue = criteria.values[0];
          }
-         return <Box mb={-1.5}>
+         return <Box display="flex">
-            <DynamicSelect
+            {
-               tableName={table.name}
+               isExpression ? (
-               fieldName={field.name}
+                  makeTextField(field, criteria, valueChangeHandler, 0, undefined, undefined, allowVariables)
-               overrideId={field.name + "-single-" + criteria.id}
+               ) : (
-               key={field.name + "-single-" + criteria.id}
+                  <Box width={"100%"}>
-               fieldLabel="Value"
+                     <DynamicSelect
-               initialValue={selectedPossibleValue?.id}
+                        fieldPossibleValueProps={{tableName: table.name, fieldName: field.name, initialDisplayValue: selectedPossibleValue?.label}}
-               initialDisplayValue={selectedPossibleValue?.label}
+                        overrideId={field.name + "-single-" + criteria.id}
-               inForm={false}
+                        key={field.name + "-single-" + criteria.id}
-               onChange={(value: any) => valueChangeHandler(null, 0, value)}
+                        fieldLabel="Value"
-               variant="standard"
+                        initialValue={selectedPossibleValue?.id}
-            />
+                        inForm={false}
+                        onChange={(value: any) => valueChangeHandler(null, 0, value)}
+                        variant="standard"
+                        useCase="filter"
+                     />
+                  </Box>
+               )
+            }
+            {
+               allowVariables && !isExpression && <Box mt={2.0}><AssignFilterVariable field={field} valueChangeHandler={valueChangeHandler} valueIndex={0} /></Box>
+            }
          </Box>;
       case ValueMode.PVS_MULTI:
          console.log("Doing pvs multi: " + criteria.values);
@@ -256,10 +398,9 @@ function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueC
                initialValues = criteria.values;
             }
          }
-         return <Box mb={-1.5}>
+         return <Box>
             <DynamicSelect
-               tableName={table.name}
+               fieldPossibleValueProps={{tableName: table.name, fieldName: field.name, initialDisplayValue: null}}
-               fieldName={field.name}
                overrideId={field.name + "-multi-" + criteria.id}
                key={field.name + "-multi-" + criteria.id}
                isMultiple
@@ -269,6 +410,7 @@ function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueC
                inForm={false}
                onChange={(value: any) => valueChangeHandler(null, "all", value)}
                variant="standard"
+               useCase="filter"
             />
          </Box>;
    }
@@ -276,4 +418,4 @@ function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueC
    return (<br />);
 }
 
-export default FilterCriteriaRowValues;
+export default FilterCriteriaRowValues;

src/qqq/components/query/QuickFilter.tsx

@@ -30,14 +30,15 @@ import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import Menu from "@mui/material/Menu";
 import TextField from "@mui/material/TextField";
-import React, {SyntheticEvent, useContext, useReducer, useState} from "react";
 import QContext from "QContext";
 import {QFilterCriteriaWithId} from "qqq/components/query/CustomFilterPanel";
 import {getDefaultCriteriaValue, getOperatorOptions, getValueModeRequiredCount, OperatorOption, validateCriteria} from "qqq/components/query/FilterCriteriaRow";
 import FilterCriteriaRowValues from "qqq/components/query/FilterCriteriaRowValues";
 import XIcon from "qqq/components/query/XIcon";
+import {QueryScreenUsage} from "qqq/pages/records/query/RecordQuery";
 import FilterUtils from "qqq/utils/qqq/FilterUtils";
 import TableUtils from "qqq/utils/qqq/TableUtils";
+import React, {SyntheticEvent, useContext, useReducer, useState} from "react";
 
 export type CriteriaParamType = QFilterCriteriaWithId | null | "tooComplex";
 
@@ -50,6 +51,8 @@ interface QuickFilterProps
    updateCriteria: (newCriteria: QFilterCriteria, needDebounce: boolean, doRemoveCriteria: boolean) => void;
    defaultOperator?: QCriteriaOperator;
    handleRemoveQuickFilterField?: (fieldName: string) => void;
+   queryScreenUsage?: QueryScreenUsage;
+   allowVariables?: boolean;
 }
 
 QuickFilter.defaultProps =
@@ -71,7 +74,7 @@ export const quickFilterButtonStyles = {
    minHeight: "auto",
    padding: "0.375rem 0.625rem", whiteSpace: "nowrap",
    marginBottom: "0.5rem"
-}
+};
 
 /*******************************************************************************
  ** Test if a CriteriaParamType represents an actual query criteria - or, if it's
@@ -89,11 +92,11 @@ const criteriaParamIsCriteria = (param: CriteriaParamType): boolean =>
  *******************************************************************************/
 const doesOperatorOptionEqualCriteria = (operatorOption: OperatorOption, criteria: QFilterCriteriaWithId): boolean =>
 {
-   if(operatorOption.value == criteria.operator)
+   if (operatorOption.value == criteria.operator)
    {
-      if(operatorOption.implicitValues)
+      if (operatorOption.implicitValues)
       {
-         if(JSON.stringify(operatorOption.implicitValues) == JSON.stringify(criteria.values))
+         if (JSON.stringify(operatorOption.implicitValues) == JSON.stringify(criteria.values))
          {
             return (true);
          }
@@ -107,7 +110,7 @@ const doesOperatorOptionEqualCriteria = (operatorOption: OperatorOption, criteri
    }
 
    return (false);
-}
+};
 
 
 /*******************************************************************************
@@ -117,29 +120,29 @@ const doesOperatorOptionEqualCriteria = (operatorOption: OperatorOption, criteri
  *******************************************************************************/
 const getOperatorSelectedValue = (operatorOptions: OperatorOption[], criteria: QFilterCriteriaWithId, defaultOperator: QCriteriaOperator): OperatorOption =>
 {
-   if(criteria)
+   if (criteria)
    {
       const filteredOptions = operatorOptions.filter(o => doesOperatorOptionEqualCriteria(o, criteria));
-      if(filteredOptions.length > 0)
+      if (filteredOptions.length > 0)
       {
          return (filteredOptions[0]);
       }
    }
 
    const filteredOptions = operatorOptions.filter(o => o.value == defaultOperator);
-   if(filteredOptions.length > 0)
+   if (filteredOptions.length > 0)
    {
       return (filteredOptions[0]);
    }
 
    return (null);
-}
+};
 
 /*******************************************************************************
  ** Component to render a QuickFilter - that is - a button, with a Menu under it,
  ** with Operator and Value controls.
  *******************************************************************************/
-export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData, criteriaParam, updateCriteria, defaultOperator, handleRemoveQuickFilterField}: QuickFilterProps): JSX.Element
+export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData, criteriaParam, updateCriteria, defaultOperator, handleRemoveQuickFilterField, queryScreenUsage, allowVariables}: QuickFilterProps): JSX.Element
 {
    const operatorOptions = fieldMetaData ? getOperatorOptions(tableMetaData, fullFieldName) : [];
    const [_, tableForField] = TableUtils.getFieldAndTable(tableMetaData, fullFieldName);
@@ -190,7 +193,7 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
    //////////////////////////////////////////////////////////////////////////////////////////////////////////////
    if (criteriaParamIsCriteria(criteriaParam) && JSON.stringify(criteriaParam) !== JSON.stringify(criteria))
    {
-      if(isOpen)
+      if (isOpen)
       {
          ////////////////////////////////////////////////////////////////////////////////
          // this was firing too-often for case where:  there was a criteria originally //
@@ -217,12 +220,12 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
     *******************************************************************************/
    const criteriaNeedsReset = (): boolean =>
    {
-      if(criteria != null && criteriaParam == null)
+      if (criteria != null && criteriaParam == null)
       {
          const defaultOperatorOption = operatorOptions.filter(o => o.value == defaultOperator)[0];
-         if(criteria.operator !== defaultOperatorOption?.value || JSON.stringify(criteria.values) !== JSON.stringify(getDefaultCriteriaValue()))
+         if (criteria.operator !== defaultOperatorOption?.value || JSON.stringify(criteria.values) !== JSON.stringify(getDefaultCriteriaValue()))
          {
-            if(isOpen)
+            if (isOpen)
             {
                //////////////////////////////////////////////////////////////////////////////////
                // this was firing too-often for case where:  there was no criteria originally, //
@@ -237,7 +240,7 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
       }
 
       return (false);
-   }
+   };
 
    /*******************************************************************************
     ** Construct a new criteria object - resetting the values tied to the operator
@@ -251,8 +254,8 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
       setOperatorSelectedValue(operatorOption);
       setOperatorInputValue(operatorOption?.label);
       setCriteria(criteria);
-      return(criteria);
+      return (criteria);
-   }
+   };
 
    /*******************************************************************************
     ** event handler to open the menu in response to the button being clicked.
@@ -266,7 +269,7 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
       {
          const element = document.getElementById("value-" + criteria.id);
          element?.focus();
-      })
+      });
    };
 
    /*******************************************************************************
@@ -304,15 +307,15 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
          // we've seen cases where switching operators can sometimes put a null in as the first value... //
          // that just causes a bad time (e.g., null pointers in Autocomplete), so, get rid of that.      //
          //////////////////////////////////////////////////////////////////////////////////////////////////
-         if(criteria.values && criteria.values.length == 1 && criteria.values[0] == null)
+         if (criteria.values && criteria.values.length == 1 && criteria.values[0] == null)
          {
             criteria.values = [];
          }
 
-         if(newValue.valueMode && !newValue.implicitValues)
+         if (newValue.valueMode && !newValue.implicitValues)
          {
             const requiredValueCount = getValueModeRequiredCount(newValue.valueMode);
-            if(requiredValueCount != null && criteria.values.length > requiredValueCount)
+            if (requiredValueCount != null && criteria.values.length > requiredValueCount)
             {
                criteria.values.splice(requiredValueCount);
             }
@@ -345,6 +348,7 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
       // @ts-ignore
       const value = newValue !== undefined ? newValue : event ? event.target.value : null;
 
+      console.log("IN HERE");
       if (!criteria.values)
       {
          criteria.values = [];
@@ -376,13 +380,13 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
     *******************************************************************************/
    const resetCriteria = (e: React.MouseEvent<HTMLSpanElement>) =>
    {
-      if(criteriaIsValid)
+      if (criteriaIsValid)
       {
          e.stopPropagation();
          const newCriteria = makeNewCriteria();
          updateCriteria(newCriteria, false, true);
       }
-   }
+   };
 
    /*******************************************************************************
     ** event handler for clicking the (x) icon that turns off this quick filter field.
@@ -390,17 +394,17 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
     *******************************************************************************/
    const handleTurningOffQuickFilterField = () =>
    {
-      closeMenu()
+      closeMenu();
-      if(handleRemoveQuickFilterField)
+      if (handleRemoveQuickFilterField)
       {
          handleRemoveQuickFilterField(criteria?.fieldName);
       }
-   }
+   };
 
    ////////////////////////////////////////////////////////////////////////////////////
    // if no field was input (e.g., record-query is still loading), return null early //
    ////////////////////////////////////////////////////////////////////////////////////
-   if(!fieldMetaData)
+   if (!fieldMetaData)
    {
       return (null);
    }
@@ -410,10 +414,10 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
    // from the last selected one, then set the state vars that control that autocomplete   //
    //////////////////////////////////////////////////////////////////////////////////////////
    const maybeNewOperatorSelectedValue = getOperatorSelectedValue(operatorOptions, criteria, defaultOperator);
-   if(JSON.stringify(maybeNewOperatorSelectedValue) !== JSON.stringify(operatorSelectedValue))
+   if (JSON.stringify(maybeNewOperatorSelectedValue) !== JSON.stringify(operatorSelectedValue))
    {
-      setOperatorSelectedValue(maybeNewOperatorSelectedValue)
+      setOperatorSelectedValue(maybeNewOperatorSelectedValue);
-      setOperatorInputValue(maybeNewOperatorSelectedValue?.label)
+      setOperatorInputValue(maybeNewOperatorSelectedValue?.label);
    }
 
    /////////////////////////////////////////////////////////////////////////////////////
@@ -431,7 +435,7 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
    const tooltipEnterDelay = 500;
 
    let buttonAdditionalStyles: any = {};
-   let buttonContent = <span>{tableForField?.name != tableMetaData.name ? `${tableForField.label}: ` : ""}{fieldMetaData.label}</span>
+   let buttonContent = <span>{tableForField?.name != tableMetaData.name ? `${tableForField.label}: ` : ""}{fieldMetaData.label}</span>;
    let buttonClassName = "filterNotActive";
    if (criteriaIsValid)
    {
@@ -446,9 +450,9 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
       // don't show the Equals or In operators //
       ///////////////////////////////////////////
       let operatorString = (<>{operatorSelectedValue.label}&nbsp;</>);
-      if(operatorSelectedValue.value == QCriteriaOperator.EQUALS || operatorSelectedValue.value == QCriteriaOperator.IN)
+      if (operatorSelectedValue.value == QCriteriaOperator.EQUALS || operatorSelectedValue.value == QCriteriaOperator.IN)
       {
-         operatorString = (<></>)
+         operatorString = (<></>);
       }
 
       buttonContent = (<><span style={{fontWeight: 700}}>{buttonContent}:</span>&nbsp;<span style={{fontWeight: 400}}>{operatorString}{valuesString}</span></>);
@@ -491,7 +495,7 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
    const xClicked = (e: React.MouseEvent<HTMLSpanElement>) =>
    {
       e.stopPropagation();
-      if(criteriaIsValid)
+      if (criteriaIsValid)
       {
          resetCriteria(e);
       }
@@ -499,12 +503,12 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
       {
          handleTurningOffQuickFilterField();
       }
-   }
+   };
 
    //////////////////////////////
    // return the button & menu //
    //////////////////////////////
-   const widthAndMaxWidth = fieldMetaData?.type == QFieldType.DATE_TIME ? 275 : 250
+   const widthAndMaxWidth = (fieldMetaData?.type == QFieldType.DATE_TIME) ? 315 : 250;
    return (
       <>
          {button}
@@ -541,10 +545,12 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
                </Box>
                <Box width={widthAndMaxWidth} maxWidth={widthAndMaxWidth} className="quickFilter filterValuesColumn">
                   <FilterCriteriaRowValues
+                     queryScreenUsage={queryScreenUsage}
                      operatorOption={operatorSelectedValue}
                      criteria={criteria}
                      field={fieldMetaData}
                      table={tableForField}
+                     allowVariables={allowVariables}
                      valueChangeHandler={(event, valueIndex, newValue) => handleValueChange(event, valueIndex, newValue)}
                      initiallyOpenMultiValuePvs={true} // todo - maybe not?
                   />

src/qqq/components/scripts/ScriptEditor.tsx

@@ -440,10 +440,10 @@ function ScriptEditor({title, scriptId, scriptRevisionRecord, closeCallback, tab
             <Box sx={{height: openTool ? "45%" : "100%"}}>
                <Grid container alignItems="flex-end">
                   <Box maxWidth={"50%"} minWidth={300}>
-                     <DynamicSelect fieldName={"apiName"} initialValue={apiName} initialDisplayValue={apiNameLabel} fieldLabel={"API Name *"} tableName={"scriptRevision"} inForm={false} onChange={changeApiName} />
+                     <DynamicSelect fieldPossibleValueProps={{tableName: "scriptRevision", fieldName: "apiName", initialDisplayValue: apiNameLabel}} initialValue={apiName} fieldLabel={"API Name *"} inForm={false} onChange={changeApiName} useCase="form" />
                   </Box>
                   <Box maxWidth={"50%"} minWidth={300} pl={2}>
-                     <DynamicSelect fieldName={"apiVersion"} initialValue={apiVersion} initialDisplayValue={apiVersionLabel} fieldLabel={"API Version *"} tableName={"scriptRevision"} inForm={false} onChange={changeApiVersion} />
+                     <DynamicSelect fieldPossibleValueProps={{tableName: "scriptRevision", fieldName: "apiVersion", initialDisplayValue: apiVersionLabel}} initialValue={apiVersion} fieldLabel={"API Version *"} inForm={false} onChange={changeApiVersion} useCase="form" />
                   </Box>
                </Grid>
                <Box display="flex" sx={{height: "100%"}}>

src/qqq/components/sharing/ShareModal.tsx

@@ -24,9 +24,8 @@ import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QT
 import {QJobComplete} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobComplete";
 import {QJobError} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobError";
 import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
-import {Alert} from "@mui/material";
+import {Alert, Box} from "@mui/material";
 import Autocomplete from "@mui/material/Autocomplete";
-import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import Card from "@mui/material/Card";
 import Icon from "@mui/material/Icon";
@@ -37,6 +36,7 @@ import Typography from "@mui/material/Typography";
 import FormData from "form-data";
 import colors from "qqq/assets/theme/base/colors";
 import {QCancelButton} from "qqq/components/buttons/DefaultButtons";
+import DynamicSelect, {getAutocompleteOutlinedStyle} from "qqq/components/forms/DynamicSelect";
 import Client from "qqq/utils/qqq/Client";
 import React, {useEffect, useReducer, useState} from "react";
 
@@ -75,6 +75,17 @@ const defaultScope = scopeOptions[0];
 
 const qController = Client.getInstance();
 
+interface ShareableTableMetaData
+{
+   sharedRecordTableName: string;
+   assetIdFieldName: string;
+   scopeFieldName: string;
+   audienceTypesPossibleValueSourceName: string;
+   audiencePossibleValueSourceName: string;
+   thisTableOwnerIdFieldName: string;
+   audienceTypes: {[name: string]: any}; // values here are: ShareableAudienceType
+}
+
 /*******************************************************************************
  ** component containing a Modal dialog for sharing records
  *******************************************************************************/
@@ -83,6 +94,7 @@ export default function ShareModal({open, onClose, tableMetaData, record}: Share
    const [statusString, setStatusString] = useState("Loading...");
    const [alert, setAlert] = useState(null as string);
 
+   const [selectedAudienceOption, setSelectedAudienceOption] = useState(null as {id: string, label: string});
    const [selectedAudienceType, setSelectedAudienceType] = useState(null);
    const [selectedAudienceId, setSelectedAudienceId] = useState(null);
    const [selectedScopeId, setSelectedScopeId] = useState(defaultScope.id);
@@ -92,8 +104,14 @@ export default function ShareModal({open, onClose, tableMetaData, record}: Share
    const [needToLoadCurrentShares, setNeedToLoadCurrentShares] = useState(true);
    const [everLoadedCurrentShares, setEverLoadedCurrentShares] = useState(false);
 
+   const shareableTableMetaData = tableMetaData.shareableTableMetaData as ShareableTableMetaData;
+
    const [, forceUpdate] = useReducer((x) => x + 1, 0);
 
+   if(!shareableTableMetaData)
+   {
+      console.error(`Did not find a shareableTableMetaData on table ${tableMetaData.name}`);
+   }
 
    /////////////////////////////////////////////////////////
    // trigger initial load, and post any changes, re-load //
@@ -124,7 +142,7 @@ export default function ShareModal({open, onClose, tableMetaData, record}: Share
    /*******************************************************************************
     **
     *******************************************************************************/
-   function handleAudienceChange(event: React.SyntheticEvent, value: any | any[], reason: string)
+   function handleAudienceChange(value: any | any[], reason: string)
    {
       if(value)
       {
@@ -260,6 +278,7 @@ export default function ShareModal({open, onClose, tableMetaData, record}: Share
          const result = processResult as QJobComplete;
          setStatusString(null);
          setAlert(null);
+         setSelectedAudienceOption(null);
          setNeedToLoadCurrentShares(true);
          setSubmitting(false)
       }
@@ -297,16 +316,6 @@ export default function ShareModal({open, onClose, tableMetaData, record}: Share
    }
 
 
-   // todo - need this to be real
-   const audienceOptions = [
-      {id: "user:1", label: "Darin Kelkhoff"},
-      {id: "user:2", label: "Tom Chutterloin"},
-      {id: "user:3", label: "Tylers Ample"},
-      {id: "user:4", label: "Mames Mames"},
-      {id: "group:2", label: "Cold Track Engineering"}
-   ];
-
-
    /*******************************************************************************
     **
     *******************************************************************************/
@@ -329,10 +338,11 @@ export default function ShareModal({open, onClose, tableMetaData, record}: Share
     *******************************************************************************/
    function renderScopeDropdown(id: string, defaultValue: Scope, onChange: (event: React.SyntheticEvent, value: any | any[], reason: string) => void)
    {
+      const isDisabled = (id == "new-share-scope" && submitting);
       return (
          <Autocomplete
             id={id}
-            disabled={id == "new-share-scope" && submitting}
+            disabled={isDisabled}
             renderInput={(params) => (<TextField {...params} label="Scope" variant="outlined" autoComplete="off" type="search" InputProps={{...params.InputProps}} />)}
             options={scopeOptions}
             // @ts-ignore
@@ -345,7 +355,7 @@ export default function ShareModal({open, onClose, tableMetaData, record}: Share
             autoHighlight={true}
             disableClearable
             fullWidth
-            sx={autocompleteSX}
+            sx={getAutocompleteOutlinedStyle(isDisabled)}
          />
       );
    }
@@ -359,17 +369,18 @@ export default function ShareModal({open, onClose, tableMetaData, record}: Share
             <Card sx={{my: 5, mx: "auto", p: 3}}>
 
                {/* header */}
-               <Box display="flex" flexDirection="row" justifyContent="space-between" alignItems="flex-start">
+               <Box display="flex" flexDirection="row" justifyContent="space-between" alignItems="flex-start" maxWidth="590px">
                   <Typography variant="h4" pb={1} fontWeight="600">
                      Share {tableMetaData.label}: {record?.recordLabel ?? record?.values?.get(tableMetaData.primaryKeyField) ?? "Unknown"}
-                     <Box color={colors.gray.main} pb={"0.5rem"} fontSize={"0.875rem"} fontWeight="400" maxWidth="590px">
+                     <Box color={colors.gray.main} pb={"0.5rem"} fontSize={"0.875rem"} fontWeight="400">
                         {/* todo move to helpContent (what do we attach the meta-data too??) */}
                         Select a user or a group to share this record with.
-                        You can choose if they should only be able to Read the record, or also make Edits to it.
+                        {/*You can choose if they should only be able to Read the record, or also make Edits to it.*/}
                      </Box>
-                     <Box fontSize={14} maxWidth="590px" pb={1} fontWeight="300">
+                     <Box fontSize={14} pb={1} fontWeight="300">
                         {alert && <Alert color="error" onClose={() => setAlert(null)}>{alert}</Alert>}
-                        {statusString}&nbsp;
+                        {statusString}
+                        {!alert && !statusString && (<>&nbsp;</>)}
                      </Box>
                   </Typography>
                </Box>
@@ -378,26 +389,22 @@ export default function ShareModal({open, onClose, tableMetaData, record}: Share
                <Box pb={3} display="flex" flexDirection="column">
                   {/* row for adding a new share */}
                   <Box display="flex" flexDirection="row" alignItems="center">
-                     <Box width="350px" pr={2}>
+                     <Box width="550px" pr={2} mb={-1.5}>
-                        <Autocomplete
+                        <DynamicSelect
-                           id="new-share-audience"
+                           fieldPossibleValueProps={{possibleValueSourceName: shareableTableMetaData.audiencePossibleValueSourceName, initialDisplayValue: selectedAudienceOption?.label}}
-                           disabled={submitting}
+                           fieldLabel="User or Group" // todo should come from shareableTableMetaData
-                           renderInput={(params) => (<TextField {...params} label="User or Group" variant="outlined" autoComplete="off" type="search" InputProps={{...params.InputProps}} />)}
+                           initialValue={selectedAudienceOption?.id}
-                           options={audienceOptions}
+                           inForm={false}
                            onChange={handleAudienceChange}
-                           isOptionEqualToValue={(option, value) => option.id === value.id}
+                           useCase="form"
-                           // @ts-ignore Property label does not exist on string | {thing with label}
-                           getOptionLabel={(option) => option.label}
-                           autoSelect={true}
-                           autoHighlight={true}
-                           disableClearable
-                           fullWidth
-                           sx={autocompleteSX}
                         />
                      </Box>
-                     <Box width="180px" pr={2}>
+                     {/*
-                        {renderScopeDropdown("new-share-scope", defaultScope, handleScopeChange)}
+                        when turning scope back on, change width of audience box to 350px
-                     </Box>
+                        <Box width="180px" pr={2}>
+                           {renderScopeDropdown("new-share-scope", defaultScope, handleScopeChange)}
+                        </Box>
+                     */}
                      <Box>
                         <Tooltip title={selectedAudienceId == null ? "Select a user or group to share with." : null}>
                            <span>
@@ -418,20 +425,25 @@ export default function ShareModal({open, onClose, tableMetaData, record}: Share
                            }
                         </h5>
                      </Box>
-                     <Box sx={{border: `1px solid ${colors.grayLines.main}`, borderRadius: "1rem", overflow: "auto"}} height="180px" pt="0.5rem">
+                     <Box sx={{border: `1px solid ${colors.grayLines.main}`, borderRadius: "1rem", overflow: "hidden"}}>
-                        {
+                        <Box sx={{overflow: "auto"}} height="210px" pt="0.75rem">
-                           currentShares.map((share) => (
+                           {
-                              <Box key={share.shareId} display="flex" justifyContent="space-between" alignItems="center" p="0.25rem" fontSize="1rem">
+                              currentShares.map((share) => (
-                                 <Box display="flex" alignItems="center">
+                                 <Box key={share.shareId} display="flex" justifyContent="space-between" alignItems="center" p="0.25rem" pb="0.75rem" fontSize="1rem">
-                                    <Box width="310px" pl="1rem">{share.audienceLabel}</Box>
+                                    <Box display="flex" alignItems="center">
-                                    <Box width="160px">{renderScopeDropdown(`scope-${share.shareId}`, getScopeOption(share.scopeId), (event: React.SyntheticEvent, value: any | any[], reason: string) => editingExistingShareScope(share.shareId, value))}</Box>
+                                       <Box width="490px" pl="1rem">{share.audienceLabel}</Box>
+                                       {/*
+                                          when turning scope back on, change width of audience box to 310px
+                                          <Box width="160px">{renderScopeDropdown(`scope-${share.shareId}`, getScopeOption(share.scopeId), (event: React.SyntheticEvent, value: any | any[], reason: string) => editingExistingShareScope(share.shareId, value))}</Box>
+                                       */}
+                                    </Box>
+                                    <Box pr="1rem">
+                                       <Button sx={{...iconButtonSX, ...redIconButton}} onClick={() => removeShare(share.shareId)}><Icon>clear</Icon></Button>
+                                    </Box>
                                  </Box>
-                                 <Box pr="1rem">
+                              ))
-                                    <Button sx={{...iconButtonSX, ...redIconButton}} onClick={() => removeShare(share.shareId)}><Icon>clear</Icon></Button>
+                           }
-                                 </Box>
+                        </Box>
-                              </Box>
-                           ))
-                        }
                      </Box>
                   </Box>
 
@@ -448,12 +460,6 @@ export default function ShareModal({open, onClose, tableMetaData, record}: Share
 
 }
 
-const autocompleteSX =
-   {
-      "& .MuiAutocomplete-input": {padding: "0.125rem 0.5rem !important"},
-      "& .MuiOutlinedInput-root": {borderRadius: "0.75rem !important"}
-   };
-
 const iconButtonSX =
    {
       border: `1px solid ${colors.grayLines.main} !important`,

src/qqq/components/widgets/CompositeWidget.tsx

@@ -22,16 +22,19 @@
 
 import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
 import {Box, Skeleton} from "@mui/material";
-import React from "react";
+import parse from "html-react-parser";
 import {BlockData} from "qqq/components/widgets/blocks/BlockModels";
 import WidgetBlock from "qqq/components/widgets/WidgetBlock";
+import React from "react";
 
 
-interface CompositeData
+export interface CompositeData
 {
    blocks: BlockData[];
    styleOverrides?: any;
-   layout?: string
+   layout?: string;
+   overlayHtml?: string;
+   overlayStyleOverrides?: any;
 }
 
 
@@ -39,13 +42,14 @@ interface CompositeWidgetProps
 {
    widgetMetaData: QWidgetMetaData;
    data: CompositeData;
+   actionCallback?: (blockData: BlockData) => boolean;
 }
 
 
 /*******************************************************************************
  ** Widget which is a list of Blocks.
  *******************************************************************************/
-export default function CompositeWidget({widgetMetaData, data}: CompositeWidgetProps): JSX.Element
+export default function CompositeWidget({widgetMetaData, data, actionCallback}: CompositeWidgetProps): JSX.Element
 {
    if (!data || !data.blocks)
    {
@@ -57,7 +61,14 @@ export default function CompositeWidget({widgetMetaData, data}: CompositeWidgetP
    ////////////////////////////////////////////////////////////////////////////////////
    let layout = data?.layout;
    let boxStyle: any = {};
-   if (layout == "FLEX_ROW_WRAPPED")
+   if (layout == "FLEX_COLUMN")
+   {
+      boxStyle.display = "flex";
+      boxStyle.flexDirection = "column";
+      boxStyle.flexWrap = "wrap";
+      boxStyle.gap = "0.5rem";
+   }
+   else if (layout == "FLEX_ROW_WRAPPED")
    {
       boxStyle.display = "flex";
       boxStyle.flexDirection = "row";
@@ -68,9 +79,17 @@ export default function CompositeWidget({widgetMetaData, data}: CompositeWidgetP
    {
       boxStyle.display = "flex";
       boxStyle.flexDirection = "row";
-      boxStyle.justifyContent = "space-between"
+      boxStyle.justifyContent = "space-between";
       boxStyle.gap = "0.25rem";
    }
+   else if (layout == "FLEX_ROW_CENTER")
+   {
+      boxStyle.display = "flex";
+      boxStyle.flexDirection = "row";
+      boxStyle.justifyContent = "center";
+      boxStyle.gap = "0.25rem";
+      boxStyle.flexWrap = "wrap";
+   }
    else if (layout == "TABLE_SUB_ROW_DETAILS")
    {
       boxStyle.display = "flex";
@@ -90,20 +109,34 @@ export default function CompositeWidget({widgetMetaData, data}: CompositeWidgetP
       boxStyle.borderRadius = "0.5rem";
       boxStyle.background = "#FFFFFF";
    }
-
    if (data?.styleOverrides)
    {
       boxStyle = {...boxStyle, ...data.styleOverrides};
    }
 
-   return (<Box sx={boxStyle} className="compositeWidget">
+   let overlayStyle: any = {};
-      {
+
-         data.blocks.map((block: BlockData, index) => (
+   if (data?.overlayStyleOverrides)
-            <React.Fragment key={index}>
+   {
-               <WidgetBlock widgetMetaData={widgetMetaData} block={block} />
+      overlayStyle = {...overlayStyle, ...data.overlayStyleOverrides};
-            </React.Fragment>
+   }
-         ))
+
-      }
+   return (
-   </Box>);
+      <>
+         {
+            data?.overlayHtml &&
+            <Box sx={overlayStyle} className="blockWidgetOverlay">{parse(data.overlayHtml)}</Box>
+         }
+         <Box sx={boxStyle} className="compositeWidget">
+            {
+               data.blocks.map((block: BlockData, index) => (
+                  <React.Fragment key={index}>
+                     <WidgetBlock widgetMetaData={widgetMetaData} block={block} actionCallback={actionCallback} />
+                  </React.Fragment>
+               ))
+            }
+         </Box>
+      </>
+   );
 
 }

src/qqq/components/widgets/DashboardWidgets.tsx

@@ -38,18 +38,19 @@ import StackedBarChart from "qqq/components/widgets/charts/StackedBarChart";
 import CompositeWidget from "qqq/components/widgets/CompositeWidget";
 import DataBagViewer from "qqq/components/widgets/misc/DataBagViewer";
 import DividerWidget from "qqq/components/widgets/misc/Divider";
+import DynamicFormWidget from "qqq/components/widgets/misc/DynamicFormWidget";
 import FieldValueListWidget from "qqq/components/widgets/misc/FieldValueListWidget";
+import FilterAndColumnsSetupWidget from "qqq/components/widgets/misc/FilterAndColumnsSetupWidget";
 import PivotTableSetupWidget from "qqq/components/widgets/misc/PivotTableSetupWidget";
 import QuickSightChart from "qqq/components/widgets/misc/QuickSightChart";
 import RecordGridWidget from "qqq/components/widgets/misc/RecordGridWidget";
-import ReportSetupWidget from "qqq/components/widgets/misc/ReportSetupWidget";
 import ScriptViewer from "qqq/components/widgets/misc/ScriptViewer";
 import StepperCard from "qqq/components/widgets/misc/StepperCard";
 import USMapWidget from "qqq/components/widgets/misc/USMapWidget";
 import ParentWidget from "qqq/components/widgets/ParentWidget";
 import MultiStatisticsCard from "qqq/components/widgets/statistics/MultiStatisticsCard";
 import StatisticsCard from "qqq/components/widgets/statistics/StatisticsCard";
-import Widget, {HeaderIcon, LabelComponent, WIDGET_DROPDOWN_SELECTION_LOCAL_STORAGE_KEY_ROOT} from "qqq/components/widgets/Widget";
+import Widget, {HeaderIcon, LabelComponent, WIDGET_DROPDOWN_SELECTION_LOCAL_STORAGE_KEY_ROOT, WidgetData} from "qqq/components/widgets/Widget";
 import WidgetBlock from "qqq/components/widgets/WidgetBlock";
 import ProcessRun from "qqq/pages/processes/ProcessRun";
 import Client from "qqq/utils/qqq/Client";
@@ -257,11 +258,11 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
     ** helper function, to convert values from a QRecord values map to a regular old
     ** js object
     *******************************************************************************/
-   function convertQRecordValuesFromMapToObject(record: QRecord): {[name: string]: any}
+   function convertQRecordValuesFromMapToObject(record: QRecord): { [name: string]: any }
    {
-      const rs: {[name: string]: any} = {};
+      const rs: { [name: string]: any } = {};
 
-      if(record.values)
+      if (record && record.values)
       {
          record.values.forEach((value, key) => rs[key] = value);
       }
@@ -292,7 +293,7 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
       }
 
       return (
-         <Box key={`${widgetMetaData.name}-${i}`} sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px", width: "100%", height: "100%"}}>
+         <Box key={`${widgetMetaData.name}-${i}`} sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px", width: "100%", height: "100%", flexDirection: widgetMetaData.type == "multiTable" ? "column" : "row"}}>
             {
                haveLoadedParams && widgetMetaData.type === "parentWidget" && (
                   <ParentWidget
@@ -342,6 +343,20 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
                   />
                )
             }
+            {
+               widgetMetaData.type === "multiTable" && (
+                  widgetData[i]?.tableDataList?.map((tableData: WidgetData, index: number) =>
+                     <Box pb={3} key={`${widgetMetaData.type}-${index}`}>
+                        <TableWidget
+                           widgetMetaData={widgetMetaData}
+                           widgetData={tableData}
+                           reloadWidgetCallback={(data) => reloadWidget(i, data)}
+                           isChild={areChildren}
+                        />
+                     </Box>
+                  )
+               )
+            }
             {
                widgetMetaData.type === "stackedBarChart" && (
                   <Widget
@@ -583,17 +598,25 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
                )
             }
             {
-               widgetMetaData.type === "reportSetup" && (
+               widgetMetaData.type === "filterAndColumnsSetup" && (
-                  widgetData && widgetData[i] && widgetData[i].queryParams &&
+                  widgetData && widgetData[i] &&
-                  <ReportSetupWidget isEditable={false} widgetMetaData={widgetMetaData} recordValues={convertQRecordValuesFromMapToObject(record)} onSaveCallback={() =>
+                  <FilterAndColumnsSetupWidget isEditable={false} widgetMetaData={widgetMetaData} widgetData={widgetData[i]} recordValues={convertQRecordValuesFromMapToObject(record)} onSaveCallback={() =>
-                  {}} />
+                  {
+                  }} />
                )
             }
             {
                widgetMetaData.type === "pivotTableSetup" && (
                   widgetData && widgetData[i] && widgetData[i].queryParams &&
                   <PivotTableSetupWidget isEditable={false} widgetMetaData={widgetMetaData} recordValues={convertQRecordValuesFromMapToObject(record)} onSaveCallback={() =>
-                  {}} />
+                  {
+                  }} />
+               )
+            }
+            {
+               widgetMetaData.type === "dynamicForm" && (
+                  widgetData && widgetData[i] &&
+                  <DynamicFormWidget isEditable={false} widgetMetaData={widgetMetaData} widgetData={widgetData[i]} record={record} recordValues={convertQRecordValuesFromMapToObject(record)} />
                )
             }
          </Box>
@@ -615,8 +638,28 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
 
                   if (!omitWrappingGridContainer)
                   {
-                     // @ts-ignore
+                     const gridProps: {[key: string]: any} = {};
-                     renderedWidget = (<Grid id={widgetMetaData.name} item xxl={widgetMetaData.gridColumns ? widgetMetaData.gridColumns : 12} xs={12} sx={{display: "flex", alignItems: "stretch", scrollMarginTop: "100px"}}>
+
+                     for(let size of ["xs", "sm", "md", "lg", "xl", "xxl"])
+                     {
+                        const key = `gridCols:sizeClass:${size}`
+                        if(widgetMetaData?.defaultValues?.has(key))
+                        {
+                           gridProps[size] = widgetMetaData?.defaultValues.get(key);
+                        }
+                     }
+
+                     if(!gridProps["xxl"])
+                     {
+                        gridProps["xxl"] = widgetMetaData.gridColumns ? widgetMetaData.gridColumns : 12;
+                     }
+
+                     if(!gridProps["xs"])
+                     {
+                        gridProps["xs"] = 12;
+                     }
+
+                     renderedWidget = (<Grid id={widgetMetaData.name} item {...gridProps} sx={{display: "flex", alignItems: "stretch", scrollMarginTop: "100px"}}>
                         {renderedWidget}
                      </Grid>);
                   }

src/qqq/components/widgets/Widget.tsx

@@ -21,8 +21,7 @@
 
 import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
 import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
-import {InputLabel} from "@mui/material";
+import {Box, InputLabel} from "@mui/material";
-import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import Card from "@mui/material/Card";
 import Icon from "@mui/material/Icon";
@@ -196,8 +195,6 @@ export function HeaderLinkButtonComponent({label, onClickCallback, disabled, dis
 }
 
 
-
-
 /*******************************************************************************
  **
  *******************************************************************************/
@@ -220,7 +217,7 @@ export function HeaderToggleComponent({label, getValue, onClickCallback, disable
    const onClick = () =>
    {
       onClickCallback();
-   }
+   };
 
    return (
       <Box alignItems="baseline" mr="-0.75rem">
@@ -236,7 +233,6 @@ export function HeaderToggleComponent({label, getValue, onClickCallback, disable
 }
 
 
-
 /*******************************************************************************
  **
  *******************************************************************************/
@@ -698,7 +694,7 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
    );
 
    let sublabelElement = (
-      <Box height="20px">
+      <Box key="sublabel" height="20px">
          <Typography sx={{position: "relative", top: "-18px"}} variant="caption">
             {props.widgetData?.sublabel}
          </Typography>
@@ -785,7 +781,7 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
                      }
                      {localLabelAdditionalElementsLeft}
                   </Box>
-                  <Box display="flex">
+                  <Box key="sublabelContainer" display="flex">
                      {
                         hasPermission && props.widgetData?.sublabel && (sublabelElement)
                      }

src/qqq/components/widgets/WidgetBlock.tsx

@@ -22,6 +22,9 @@
 
 import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
 import {Alert, Skeleton} from "@mui/material";
+import ActionButtonBlock from "qqq/components/widgets/blocks/ActionButtonBlock";
+import AudioBlock from "qqq/components/widgets/blocks/AudioBlock";
+import InputFieldBlock from "qqq/components/widgets/blocks/InputFieldBlock";
 import React from "react";
 import BigNumberBlock from "qqq/components/widgets/blocks/BigNumberBlock";
 import {BlockData} from "qqq/components/widgets/blocks/BlockModels";
@@ -32,19 +35,21 @@ import TableSubRowDetailRowBlock from "qqq/components/widgets/blocks/TableSubRow
 import TextBlock from "qqq/components/widgets/blocks/TextBlock";
 import UpOrDownNumberBlock from "qqq/components/widgets/blocks/UpOrDownNumberBlock";
 import CompositeWidget from "qqq/components/widgets/CompositeWidget";
+import ImageBlock from "./blocks/ImageBlock";
 
 
 interface WidgetBlockProps
 {
    widgetMetaData: QWidgetMetaData;
    block: BlockData;
+   actionCallback?: (blockData: BlockData) => boolean;
 }
 
 
 /*******************************************************************************
  ** Component to render a single Block in the widget framework!
  *******************************************************************************/
-export default function WidgetBlock({widgetMetaData, block}: WidgetBlockProps): JSX.Element
+export default function WidgetBlock({widgetMetaData, block, actionCallback}: WidgetBlockProps): JSX.Element
 {
    if(!block)
    {
@@ -64,7 +69,7 @@ export default function WidgetBlock({widgetMetaData, block}: WidgetBlockProps):
    if(block.blockTypeName == "COMPOSITE")
    {
       // @ts-ignore - special case for composite type block...
-      return (<CompositeWidget widgetMetaData={widgetMetaData} data={block} />);
+      return (<CompositeWidget widgetMetaData={widgetMetaData} data={block} actionCallback={actionCallback} />);
    }
 
    switch(block.blockTypeName)
@@ -83,6 +88,14 @@ export default function WidgetBlock({widgetMetaData, block}: WidgetBlockProps):
          return (<DividerBlock widgetMetaData={widgetMetaData} data={block} />);
       case "BIG_NUMBER":
          return (<BigNumberBlock widgetMetaData={widgetMetaData} data={block} />);
+      case "INPUT_FIELD":
+         return (<InputFieldBlock widgetMetaData={widgetMetaData} data={block} actionCallback={actionCallback} />);
+      case "ACTION_BUTTON":
+         return (<ActionButtonBlock widgetMetaData={widgetMetaData} data={block} actionCallback={actionCallback} />);
+      case "AUDIO":
+         return (<AudioBlock widgetMetaData={widgetMetaData} data={block} />);
+      case "IMAGE":
+         return (<ImageBlock widgetMetaData={widgetMetaData} data={block} actionCallback={actionCallback} />);
       default:
          return (<Alert sx={{m: "0.5rem"}} color="warning">Unsupported block type: {block.blockTypeName}</Alert>)
    }

src/qqq/components/widgets/WidgetUtils.tsx

@@ -21,14 +21,16 @@
 
 
 import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
+import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import Icon from "@mui/material/Icon";
 import Tooltip from "@mui/material/Tooltip/Tooltip";
 import Typography from "@mui/material/Typography";
-import React from "react";
 import colors from "qqq/assets/theme/base/colors";
 import {WidgetData} from "qqq/components/widgets/Widget";
 import ValueUtils from "qqq/utils/qqq/ValueUtils";
+import React from "react";
+import {Link} from "react-router-dom";
 
 /*******************************************************************************
  ** Utility class used by Widgets
@@ -51,6 +53,17 @@ export class WidgetUtils
    };
 
 
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public static generateLabelLink = (linkText: string, linkURL: string): JSX.Element =>
+   {
+      return (<Box key={1} fontSize="1rem" pl={1} display="inline" position="relative">
+         (<Link to={linkURL}>{linkText}</Link>)
+      </Box>);
+   };
+
+
    /*******************************************************************************
     **
     *******************************************************************************/
@@ -97,4 +110,4 @@ export class WidgetUtils
       return (fileName);
    };
 
-}
+}

src/qqq/components/widgets/blocks/ActionButtonBlock.tsx

@@ -0,0 +1,60 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import Box from "@mui/material/Box";
+import Icon from "@mui/material/Icon";
+import {standardWidth} from "qqq/components/buttons/DefaultButtons";
+import MDButton from "qqq/components/legacy/MDButton";
+import BlockElementWrapper from "qqq/components/widgets/blocks/BlockElementWrapper";
+import {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockModels";
+import React from "react";
+
+
+/*******************************************************************************
+ ** Block that renders ... an action button...
+ **
+ *******************************************************************************/
+export default function ActionButtonBlock({widgetMetaData, data, actionCallback}: StandardBlockComponentProps): JSX.Element
+{
+   const icon = data.values.iconName ? <Icon>{data.values.iconName}</Icon> : null;
+
+   function onClick()
+   {
+      if(actionCallback)
+      {
+         actionCallback(data, {actionCode: data.values?.actionCode})
+      }
+      else
+      {
+         console.log("ActionButtonBlock onClick with no actionCallback present, so, noop");
+      }
+   }
+
+   return (
+      <BlockElementWrapper metaData={widgetMetaData} data={data} slot="">
+         <Box mx={1} my={1} minWidth={standardWidth}>
+            <MDButton type="button" variant="gradient" color="dark" size="small" fullWidth startIcon={icon} onClick={onClick}>
+               {data.values.label ?? "Action"}
+            </MDButton>
+         </Box>
+      </BlockElementWrapper>
+   );
+}

src/qqq/components/widgets/blocks/AudioBlock.tsx

@@ -0,0 +1,40 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import Box from "@mui/material/Box";
+import BlockElementWrapper from "qqq/components/widgets/blocks/BlockElementWrapper";
+import {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockModels";
+import DumpJsonBox from "qqq/utils/DumpJsonBox";
+import React from "react";
+
+/*******************************************************************************
+ ** Block that renders ... an audio tag
+ **
+ ** <audio src=${path} ${autoPlay} ${showControls} />
+ *******************************************************************************/
+export default function AudioBlock({widgetMetaData, data}: StandardBlockComponentProps): JSX.Element
+{
+   return (
+      <BlockElementWrapper metaData={widgetMetaData} data={data} slot="">
+         <audio src={data.values?.path} autoPlay={data.values?.autoPlay} controls={data.values?.showControls} />
+      </BlockElementWrapper>
+   );
+}

src/qqq/components/widgets/blocks/BlockElementWrapper.tsx

@@ -21,18 +21,19 @@
 
 
 import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
-import {Tooltip} from "@mui/material";
+import {Box, Tooltip} from "@mui/material";
-import React, {ReactElement, useContext} from "react";
-import {Link} from "react-router-dom";
 import QContext from "QContext";
 import HelpContent, {hasHelpContent} from "qqq/components/misc/HelpContent";
 import {BlockData, BlockLink, BlockTooltip} from "qqq/components/widgets/blocks/BlockModels";
+import CompositeWidget from "qqq/components/widgets/CompositeWidget";
+import React, {ReactElement, useContext} from "react";
+import {Link} from "react-router-dom";
 
 interface BlockElementWrapperProps
 {
    data: BlockData;
    metaData: QWidgetMetaData;
-   slot: string
+   slot: string;
    linkProps?: any;
    children: ReactElement;
 }
@@ -47,16 +48,16 @@ export default function BlockElementWrapper({data, metaData, slot, linkProps, ch
    let link: BlockLink;
    let tooltip: BlockTooltip;
 
-   if(slot)
+   if (slot)
    {
       link = data.linkMap && data.linkMap[slot.toUpperCase()];
-      if(!link)
+      if (!link)
       {
          link = data.link;
       }
 
       tooltip = data.tooltipMap && data.tooltipMap[slot.toUpperCase()];
-      if(!tooltip)
+      if (!tooltip)
       {
          tooltip = data.tooltip;
       }
@@ -67,9 +68,9 @@ export default function BlockElementWrapper({data, metaData, slot, linkProps, ch
       tooltip = data.tooltip;
    }
 
-   if(!tooltip)
+   if (!tooltip)
    {
-      const helpRoles = ["ALL_SCREENS"]
+      const helpRoles = ["ALL_SCREENS"];
 
       ///////////////////////////////////////////////////////////////////////////////////////////////
       // the full keys in the helpContent table will look like:                                    //
@@ -80,26 +81,39 @@ export default function BlockElementWrapper({data, metaData, slot, linkProps, ch
       const key = data.blockId ? `${data.blockId},${slot}` : slot;
       const showHelp = helpHelpActive || hasHelpContent(metaData?.helpContent?.get(key), helpRoles);
 
-      if(showHelp)
+      if (showHelp)
       {
          const formattedHelpContent = <HelpContent helpContents={metaData?.helpContent?.get(key)} roles={helpRoles} helpContentKey={`widget:${metaData?.name};slot:${key}`} />;
-         tooltip = {title: formattedHelpContent, placement: "bottom"}
+         tooltip = {title: formattedHelpContent, placement: "bottom"};
       }
    }
 
    let rs = children;
 
-   if(link)
+   if (link && link.href)
    {
-      rs = <Link to={link.href} target={link.target} style={{color: "#546E7A"}} {...linkProps}>{rs}</Link>
+      rs = <Link to={link.href} target={link.target} style={{color: "#546E7A"}} {...linkProps}>{rs}</Link>;
    }
 
-   if(tooltip)
+   if (tooltip)
    {
-      let placement = tooltip.placement ? tooltip.placement.toLowerCase() : "bottom"
+      let placement = tooltip.placement ? tooltip.placement.toLowerCase() : "bottom";
 
       // @ts-ignore - placement possible values
-      rs = <Tooltip title={tooltip.title} placement={placement}>{rs}</Tooltip>
+      if (tooltip.blockData)
+      {
+         // @ts-ignore - special case for composite type block...
+         rs = <Tooltip title={
+            <Box sx={{width: "200px"}}>
+               <CompositeWidget widgetMetaData={metaData} data={tooltip?.blockData} />
+            </Box>
+         }>{rs}</Tooltip>;
+      }
+      else
+      {
+         // @ts-ignore - placement possible values
+         rs = <Tooltip title={tooltip.title} placement={placement}>{rs}</Tooltip>;
+      }
    }
 
    return (rs);

src/qqq/components/widgets/blocks/BlockModels.ts

@@ -20,6 +20,7 @@
  */
 
 import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
+import {CompositeData} from "qqq/components/widgets/CompositeWidget";
 
 
 export interface BlockData
@@ -29,16 +30,19 @@ export interface BlockData
 
    tooltip?: BlockTooltip;
    link?: BlockLink;
-   tooltipMap?: {[slot: string]: BlockTooltip};
+   tooltipMap?: { [slot: string]: BlockTooltip };
-   linkMap?: {[slot: string]: BlockLink};
+   linkMap?: { [slot: string]: BlockLink };
 
    values: any;
    styles?: any;
+
+   conditional?: string;
 }
 
 
 export interface BlockTooltip
 {
+   blockData?: CompositeData;
    title: string | JSX.Element;
    placement: string;
 }
@@ -55,5 +59,6 @@ export interface StandardBlockComponentProps
 {
    widgetMetaData: QWidgetMetaData;
    data: BlockData;
+   actionCallback?: (blockData: BlockData, eventValues?: {[name: string]: any}) => boolean;
 }
 

src/qqq/components/widgets/blocks/ImageBlock.tsx

@@ -0,0 +1,59 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import Box from "@mui/material/Box";
+import BlockElementWrapper from "qqq/components/widgets/blocks/BlockElementWrapper";
+import {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockModels";
+import DumpJsonBox from "qqq/utils/DumpJsonBox";
+import React from "react";
+
+/*******************************************************************************
+ ** Block that renders ... an image tag
+ **
+ ** <audio src=${path} ${autoPlay} ${showControls} />
+ *******************************************************************************/
+export default function AudioBlock({widgetMetaData, data}: StandardBlockComponentProps): JSX.Element
+{
+   let imageStyle: any = {};
+
+   if(data.styles?.width)
+   {
+      imageStyle.width = data.styles?.width;
+   }
+
+   if(data.styles?.height)
+   {
+      imageStyle.height = data.styles?.height;
+   }
+
+   if(data.styles?.bordered)
+   {
+      imageStyle.border = "1px solid #C0C0C0";
+      imageStyle.borderRadius = "0.5rem";
+   }
+
+
+   return (
+      <BlockElementWrapper metaData={widgetMetaData} data={data} slot="">
+         <img src={data.values?.path} alt={data.values?.alt} style={imageStyle} />
+      </BlockElementWrapper>
+   );
+}

src/qqq/components/widgets/blocks/InputFieldBlock.tsx

@@ -0,0 +1,128 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
+import Box from "@mui/material/Box";
+import QDynamicFormField from "qqq/components/forms/DynamicFormField";
+import DynamicFormUtils from "qqq/components/forms/DynamicFormUtils";
+import BlockElementWrapper from "qqq/components/widgets/blocks/BlockElementWrapper";
+import {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockModels";
+import React, {SyntheticEvent, useState} from "react";
+
+/*******************************************************************************
+ ** Block that renders ... a text input
+ **
+ *******************************************************************************/
+export default function InputFieldBlock({widgetMetaData, data, actionCallback}: StandardBlockComponentProps): JSX.Element
+{
+   const [blurCount, setBlurCount] = useState(0)
+
+   const fieldMetaData = new QFieldMetaData(data.values.fieldMetaData);
+   const dynamicField = DynamicFormUtils.getDynamicField(fieldMetaData);
+
+   let autoFocus = data.values.autoFocus as boolean
+   let value = data.values.value;
+   if(value == null || value == undefined)
+   {
+      value = "";
+   }
+
+   ////////////////////////////////////////////////////////////////////////////////
+   // for an autoFocus field...                                                  //
+   // we're finding that if we blur it when clicking an action button, that      //
+   // an un-desirable "now it's been touched, so show an error" happens.         //
+   // so let us remove the default blur handler, for the first (auto) focus/blur //
+   // cycle, and we seem to have a better time.                                  //
+   ////////////////////////////////////////////////////////////////////////////////
+   let onBlurRest: {onBlur?: any} = {}
+   if(autoFocus && blurCount == 0)
+   {
+      onBlurRest.onBlur = (event: React.SyntheticEvent) =>
+      {
+         event.stopPropagation();
+         event.preventDefault();
+         setBlurCount(blurCount + 1);
+      }
+   }
+
+
+   /***************************************************************************
+    **
+    ***************************************************************************/
+   function eventHandler(event: KeyboardEvent)
+   {
+      if(data.values.submitOnEnter && event.key == "Enter")
+      {
+         // @ts-ignore target.value...
+         const inputValue = event.target.value?.trim()
+
+         // todo - make this behavior opt-in for inputBlocks?
+         if(inputValue && `${inputValue}`.startsWith("->"))
+         {
+            const actionCode = inputValue.substring(2);
+            if(actionCallback)
+            {
+               actionCallback(data, {actionCode: actionCode, _fieldToClearIfError: fieldMetaData.name});
+
+               ///////////////////////////////////////////////////////
+               // return, so we don't submit the actionCode as text //
+               ///////////////////////////////////////////////////////
+               return;
+            }
+         }
+
+         if(fieldMetaData.isRequired && inputValue == "")
+         {
+            console.log("input field is required, but missing value, so not submitting");
+            return;
+         }
+
+         if(actionCallback)
+         {
+            console.log("InputFieldBlock calling actionCallback for submitOnEnter");
+
+            let values: {[name: string]: any} = {};
+            values[fieldMetaData.name] = inputValue;
+
+            actionCallback(data, values);
+         }
+         else
+         {
+            console.log("InputFieldBlock was set as submitOnEnter, but no actionCallback was present, so, noop");
+         }
+      }
+   }
+
+   const labelElement = <Box fontSize="1rem" fontWeight="500" marginBottom="0.25rem">
+      <label htmlFor={fieldMetaData.name}>{fieldMetaData.label}</label>
+   </Box>
+
+   return (
+      <Box mt="0.5rem">
+         <BlockElementWrapper metaData={widgetMetaData} data={data} slot="">
+            <>
+               {labelElement}
+               <QDynamicFormField name={fieldMetaData.name} displayFormat={null} label="" formFieldObject={dynamicField} type={fieldMetaData.type} value={value} autoFocus={autoFocus} onKeyUp={eventHandler} {...onBlurRest} />
+            </>
+         </BlockElementWrapper>
+      </Box>
+   );
+}

src/qqq/components/widgets/blocks/NumberIconBadgeBlock.tsx

@@ -41,7 +41,7 @@ export default function NumberIconBadgeBlock({widgetMetaData, data}: StandardBlo
          {
             data.values.iconName &&
             <BlockElementWrapper metaData={widgetMetaData} data={data} slot="icon">
-               <Icon style={{color: data.styles.color, fontSize: "1rem", position: "relative", top: "3px"}}>{data.values.iconName}</Icon>
+               <Icon style={{color: data.styles.color, fontSize: "1rem", marginLeft: "2px", position: "relative", top: "4px"}}>{data.values.iconName}</Icon>
             </BlockElementWrapper>
          }
       </div>);

src/qqq/components/widgets/blocks/TextBlock.tsx

@@ -19,8 +19,10 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
+import Box from "@mui/material/Box";
 import BlockElementWrapper from "qqq/components/widgets/blocks/BlockElementWrapper";
 import {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockModels";
+import DumpJsonBox from "qqq/utils/DumpJsonBox";
 
 /*******************************************************************************
  ** Block that renders ... just some text.
@@ -29,9 +31,54 @@ import {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockMo
  *******************************************************************************/
 export default function TextBlock({widgetMetaData, data}: StandardBlockComponentProps): JSX.Element
 {
+   let color = "rgba(0, 0, 0, 0.87)";
+   if (data.styles?.standardColor)
+   {
+      switch (data.styles?.standardColor)
+      {
+         case "SUCCESS":
+            color = "#2BA83F";
+            break;
+         case "WARNING":
+            color = "#FBA132";
+            break;
+         case "ERROR":
+            color = "#FB4141";
+            break;
+         case "INFO":
+            color = "#458CFF";
+            break;
+         case "MUTED":
+            color = "#7b809a";
+            break;
+      }
+   }
+
+   let boxStyle = {};
+   if (data.styles?.isAlert)
+   {
+      boxStyle =
+         {
+            border: `1px solid ${color}`,
+            background: `${color}40`,
+            padding: "0.5rem",
+            borderRadius: "0.5rem",
+         };
+   }
+
+   const text = data.values.interpolatedText ?? data.values.text;
+   const lines = text.split("\n");
+
    return (
       <BlockElementWrapper metaData={widgetMetaData} data={data} slot="">
-         <span style={{fontSize: "1.000rem"}}>{data.values.text}</span>
+         <Box display="inline-block" lineHeight="1.2" sx={boxStyle}>
+            <span style={{fontSize: "1rem", color: color}}>
+               {lines.map((line: string, index: number) =>
+                  (
+                     <div key={index}>{line}</div>
+                  ))
+               }</span>
+         </Box>
       </BlockElementWrapper>
    );
 }

src/qqq/components/widgets/blocks/UpOrDownNumberBlock.tsx

@@ -58,7 +58,7 @@ export default function UpOrDownNumberBlock({widgetMetaData, data}: StandardBloc
 
    return (
       <>
-         <div style={{display: "flex", flexDirection: data.styles.isStacked ? "column" : "row", alignItems: data.styles.isStacked ? "flex-end" : "baseline"}}>
+         <div style={{display: "flex", flexDirection: data.styles.isStacked ? "column" : "row", alignItems: data.styles.isStacked ? "flex-end" : "baseline", marginLeft: "auto"}}>
 
             <div style={{display: "flex", alignItems: "baseline", fontWeight: 700, fontSize: ".875rem"}}>
                <BlockElementWrapper metaData={widgetMetaData} data={data} slot="number">

src/qqq/components/widgets/misc/DynamicFormWidget.tsx

@@ -0,0 +1,265 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+
+import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
+import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
+import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
+import Box from "@mui/material/Box";
+import {FormikContextType, useFormikContext} from "formik";
+import QDynamicForm from "qqq/components/forms/DynamicForm";
+import DynamicFormUtils from "qqq/components/forms/DynamicFormUtils";
+import Widget from "qqq/components/widgets/Widget";
+import {renderSectionOfFields} from "qqq/pages/records/view/RecordView";
+import Client from "qqq/utils/qqq/Client";
+import React, {useEffect, useState} from "react";
+
+
+/*******************************************************************************
+ ** component props
+ *******************************************************************************/
+interface DynamicFormWidgetProps
+{
+   isEditable: boolean;
+   widgetMetaData: QWidgetMetaData;
+   widgetData: any;
+   record: QRecord;
+   recordValues: { [name: string]: any };
+   onSaveCallback?: (values: { [name: string]: any }) => void;
+}
+
+
+/*******************************************************************************
+ ** default values for props
+ *******************************************************************************/
+DynamicFormWidget.defaultProps = {
+   onSaveCallback: null
+};
+
+
+/*******************************************************************************
+ ** Component to display a dynamic form - e.g., on a record edit or view screen,
+ ** or even within a process.
+ *******************************************************************************/
+export default function DynamicFormWidget({isEditable, widgetMetaData, widgetData, record, recordValues, onSaveCallback}: DynamicFormWidgetProps): JSX.Element
+{
+   const [fields, setFields] = useState([] as QFieldMetaData[]);
+
+   const [effectiveIsEditable, setEffectiveIsEditable] = useState(isEditable);
+   if(widgetMetaData.defaultValues.has("isEditable"))
+   {
+      const defaultIsEditableValue = widgetMetaData.defaultValues.get("isEditable")
+      if(defaultIsEditableValue != effectiveIsEditable)
+      {
+         setEffectiveIsEditable(defaultIsEditableValue);
+      }
+   }
+
+   const [dynamicFormFields, setDynamicFormFields] = useState(null as any);
+   const [formValidations, setFormValidations] = useState(null as any);
+
+   const [lastKnowFormValues, setLastKnowFormValues] = useState({} as {[name: string]: any});
+
+
+   //////////////////////////////////////////////////////////////////////////////////////////
+   // on initial load, and any time widgetData changes (e.g., if widget gets re-rendered), //
+   // figure out what our form fields are                                                  //
+   //////////////////////////////////////////////////////////////////////////////////////////
+   useEffect(() =>
+   {
+      setDynamicFormFields({})
+      setFormValidations({})
+
+      if(widgetData && widgetData.fieldList)
+      {
+         const newFields: QFieldMetaData[] = [];
+         for (let i = 0; i < widgetData.fieldList.length; i++)
+         {
+            newFields.push(new QFieldMetaData(widgetData.fieldList[i]));
+         }
+         setFields(newFields);
+
+         if(newFields.length > 0)
+         {
+            const recordOfFieldValues = widgetData.recordOfFieldValues ? new QRecord(widgetData.recordOfFieldValues) : null;
+            const {dynamicFormFields: newDynamicFormFields, formValidations: newFormValidations} = DynamicFormUtils.getFormData(newFields);
+            const defaultDisplayValues = new Map<string,string>(); // todo - seems not right?
+            DynamicFormUtils.addPossibleValueProps(newDynamicFormFields, newFields, recordValues.tableName, null, recordOfFieldValues ? recordOfFieldValues.displayValues : defaultDisplayValues);
+            setDynamicFormFields(newDynamicFormFields)
+            setFormValidations(newFormValidations)
+         }
+
+         setLastKnowFormValues({});
+      }
+      else
+      {
+         setFields([])
+      }
+   }, [widgetData]);
+
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function checkForFormValueChanges(formikProps: FormikContextType<any>)
+   {
+      if(!fields || !fields.length)
+      {
+         return;
+      }
+
+      let anyChanged = false;
+      for (let i = 0; i < fields.length; i++)
+      {
+         const name = fields[i].name;
+         if(formikProps.values[name] != lastKnowFormValues[name])
+         {
+            anyChanged = true;
+            lastKnowFormValues[name] = formikProps.values[name];
+         }
+      }
+
+      if(anyChanged)
+      {
+         const mergedDynamicFormValuesIntoFieldName = widgetData.mergedDynamicFormValuesIntoFieldName;
+         if(mergedDynamicFormValuesIntoFieldName && onSaveCallback)
+         {
+            const onSaveCallbackParam: {[name: string]: any} = {};
+            onSaveCallbackParam[mergedDynamicFormValuesIntoFieldName] = JSON.stringify(lastKnowFormValues);
+            onSaveCallback(onSaveCallbackParam);
+         }
+      }
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function getInitialValue(fieldName: string)
+   {
+      for (let i = 0; i < fields?.length; i++)
+      {
+         if(fields[i].name == fieldName && fields[i].defaultValue)
+         {
+            return (fields[i].defaultValue)
+         }
+      }
+
+      return (null);
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function renderEditForm()
+   {
+      const formikProps = useFormikContext();
+      if(!fields || !fields.length)
+      {
+         return (
+            <Box>
+               <Box fontSize="1rem">{widgetData && widgetData.noFieldsMessage}</Box>
+            </Box>
+         );
+      }
+
+      const formData: any = {};
+      formData.values = formikProps.values;
+      formData.touched = formikProps.touched;
+      formData.errors = formikProps.errors;
+      formData.formFields = {};
+
+      // todo - merge the formValidations object with formik's - maybe in the useEffect where we build it
+      // setValidations(Yup.object().shape(formValidations));
+      // formikProps.validationSchema.
+
+      for (let key of Object.keys(dynamicFormFields))
+      {
+         const dynamicFormField = dynamicFormFields[key];
+         formData.formFields[dynamicFormField.name] = dynamicFormField;
+
+         const initialValue = getInitialValue(dynamicFormField.name);
+         if(initialValue != null)
+         {
+            console.log(`@dk trying to set an initial value [${dynamicFormField.name}] to [${initialValue}]`);
+            // @ts-ignore some any
+            formikProps.initialValues[dynamicFormField.name] = initialValue;
+         }
+      }
+
+      if(formData.values)
+      {
+         checkForFormValueChanges(formikProps);
+      }
+
+      return (
+         <Box>
+            <QDynamicForm formData={formData} record={record} />
+         </Box>
+      );
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function renderViewForm()
+   {
+      const fieldNames: string[] = [];
+      const fieldMap: {[name: string]: QFieldMetaData} = {};
+      const fakeRecord = new QRecord(widgetData.recordOfFieldValues ?? {});
+
+      const mergedDynamicFormValuesIntoFieldName = widgetData.mergedDynamicFormValuesIntoFieldName;
+
+      for (let i = 0; i < fields?.length; i++)
+      {
+         const fieldName = fields[i].name;
+         fieldNames.push(fieldName);
+         fieldMap[fieldName] = fields[i];
+
+         if(mergedDynamicFormValuesIntoFieldName && recordValues[mergedDynamicFormValuesIntoFieldName])
+         {
+            fakeRecord.values.set(fieldName, recordValues[mergedDynamicFormValuesIntoFieldName][fieldName]);
+         }
+      }
+
+      const section = renderSectionOfFields(`dynamicFormWidget:${widgetMetaData.name}`, fieldNames, null, false, fakeRecord, fieldMap);
+
+      return (<Box>
+         {section}
+      </Box>);
+   }
+
+
+   ////////////
+   // render //
+   ////////////
+   return (<Widget widgetMetaData={widgetMetaData}>
+      {
+         <React.Fragment>
+            {effectiveIsEditable ? renderEditForm() : renderViewForm()}
+         </React.Fragment>
+      }
+   </Widget>);
+}
+

src/qqq/components/widgets/misc/FilterAndColumnsSetupWidget.tsx

@@ -22,6 +22,8 @@
 
 import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
 import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
+import {QCriteriaOperator} from "@kingsrook/qqq-frontend-core/lib/model/query/QCriteriaOperator";
+import {QFilterCriteria} from "@kingsrook/qqq-frontend-core/lib/model/query/QFilterCriteria";
 import {QQueryFilter} from "@kingsrook/qqq-frontend-core/lib/model/query/QQueryFilter";
 import {Alert, Collapse} from "@mui/material";
 import Box from "@mui/material/Box";
@@ -42,15 +44,16 @@ import Client from "qqq/utils/qqq/Client";
 import FilterUtils from "qqq/utils/qqq/FilterUtils";
 import React, {useContext, useEffect, useRef, useState} from "react";
 
-interface ReportSetupWidgetProps
+interface FilterAndColumnsSetupWidgetProps
 {
    isEditable: boolean;
    widgetMetaData: QWidgetMetaData;
-   recordValues: {[name: string]: any};
+   widgetData: any;
-   onSaveCallback?: (values: {[name: string]: any}) => void;
+   recordValues: { [name: string]: any };
+   onSaveCallback?: (values: { [name: string]: any }) => void;
 }
 
-ReportSetupWidget.defaultProps = {
+FilterAndColumnsSetupWidget.defaultProps = {
    onSaveCallback: null
 };
 
@@ -80,9 +83,11 @@ const qController = Client.getInstance();
 /*******************************************************************************
  ** Component for editing the main setup of a report - that is: filter & columns
  *******************************************************************************/
-export default function ReportSetupWidget({isEditable, widgetMetaData, recordValues, onSaveCallback}: ReportSetupWidgetProps): JSX.Element
+export default function FilterAndColumnsSetupWidget({isEditable, widgetMetaData, widgetData, recordValues, onSaveCallback}: FilterAndColumnsSetupWidgetProps): JSX.Element
 {
    const [modalOpen, setModalOpen] = useState(false);
+   const [hideColumns, setHideColumns] = useState(widgetData?.hideColumns);
+   const [hidePreview, setHidePreview] = useState(widgetData?.hidePreview);
    const [tableMetaData, setTableMetaData] = useState(null as QTableMetaData);
 
    const [alertContent, setAlertContent] = useState(null as string);
@@ -101,16 +106,43 @@ export default function ReportSetupWidget({isEditable, widgetMetaData, recordVal
    /////////////////////////////
    // load values from record //
    /////////////////////////////
-   let queryFilter = recordValues["queryFilterJson"] && JSON.parse(recordValues["queryFilterJson"]) as QQueryFilter;
+   let columns: QQueryColumns = null;
    let usingDefaultEmptyFilter = false;
-   if(!queryFilter)
+   let queryFilter = recordValues["queryFilterJson"] && JSON.parse(recordValues["queryFilterJson"]) as QQueryFilter;
+   const defaultFilterFields = widgetData?.filterDefaultFieldNames;
+   if (!queryFilter)
    {
       queryFilter = new QQueryFilter();
-      usingDefaultEmptyFilter = true;
+      if (defaultFilterFields?.length == 0)
+      {
+         usingDefaultEmptyFilter = true;
+      }
+   }
+   else
+   {
+      queryFilter = Object.assign(new QQueryFilter(), queryFilter);
    }
 
-   let columns: QQueryColumns = null;
+   //////////////////////////////////////////////////////////////////////////////////////////////////////
-   if(recordValues["columnsJson"])
+   // if there are default fields from which a query should be seeded, add/update the filter with them //
+   //////////////////////////////////////////////////////////////////////////////////////////////////////
+   if (defaultFilterFields?.length > 0)
+   {
+      defaultFilterFields.forEach((fieldName: string) =>
+      {
+         ////////////////////////////////////////////////////////////////////////////////////////////
+         // if a value for the default field exists, remove the criteria for it in our query first //
+         ////////////////////////////////////////////////////////////////////////////////////////////
+         queryFilter.criteria = queryFilter.criteria?.filter(c => c.fieldName != fieldName);
+
+         if (recordValues[fieldName])
+         {
+            queryFilter.addCriteria(new QFilterCriteria(fieldName, QCriteriaOperator.EQUALS, [recordValues[fieldName]]));
+         }
+      });
+   }
+
+   if (recordValues["columnsJson"])
    {
       columns = QQueryColumns.buildFromJSON(recordValues["columnsJson"]);
    }
@@ -120,19 +152,28 @@ export default function ReportSetupWidget({isEditable, widgetMetaData, recordVal
    //////////////////////////////////////////////////////////////////////
    useEffect(() =>
    {
-      if (recordValues["tableName"] && (tableMetaData == null || tableMetaData.name != recordValues["tableName"]))
+      ////////////////////////////////////////////////////////////////////////////////////////
+      // if a default table name specified, use it, otherwise use it from the record values //
+      ////////////////////////////////////////////////////////////////////////////////////////
+      let tableName = widgetData?.tableName;
+      if (!tableName && recordValues["tableName"] && (tableMetaData == null || tableMetaData.name != recordValues["tableName"]))
+      {
+         tableName = recordValues["tableName"];
+      }
+
+      if (tableName)
       {
          (async () =>
          {
-            const tableMetaData = await qController.loadTableMetaData(recordValues["tableName"])
+            const tableMetaData = await qController.loadTableMetaData(tableName);
             setTableMetaData(tableMetaData);
 
             const queryFilterForFrontend = Object.assign({}, queryFilter);
-            await FilterUtils.cleanupValuesInFilerFromQueryString(qController, tableMetaData, queryFilterForFrontend)
+            await FilterUtils.cleanupValuesInFilerFromQueryString(qController, tableMetaData, queryFilterForFrontend);
-            setFrontendQueryFilter(queryFilterForFrontend)
+            setFrontendQueryFilter(queryFilterForFrontend);
          })();
       }
-   }, [recordValues]);
+   }, [JSON.stringify(recordValues)]);
 
 
    /*******************************************************************************
@@ -140,8 +181,27 @@ export default function ReportSetupWidget({isEditable, widgetMetaData, recordVal
     *******************************************************************************/
    function openEditor()
    {
-      if(recordValues["tableName"])
+      let missingRequiredFields = [] as string[];
+      widgetData?.filterDefaultFieldNames?.forEach((fieldName: string) =>
       {
+         if (!recordValues[fieldName])
+         {
+            missingRequiredFields.push(tableMetaData.fields.get(fieldName).label);
+         }
+      });
+
+      ////////////////////////////////////////////////////////////////////
+      // display an alert and return if any required fields are missing //
+      ////////////////////////////////////////////////////////////////////
+      if (missingRequiredFields.length > 0)
+      {
+         setAlertContent("The following fields must first be selected to edit the filter: '" + missingRequiredFields.join(", ") + "'");
+         return;
+      }
+
+      if (recordValues["tableName"])
+      {
+         setAlertContent(null);
          setModalOpen(true);
       }
    }
@@ -152,7 +212,7 @@ export default function ReportSetupWidget({isEditable, widgetMetaData, recordVal
     *******************************************************************************/
    function saveClicked()
    {
-      if(!onSaveCallback)
+      if (!onSaveCallback)
       {
          console.log("onSaveCallback was not defined");
          return;
@@ -181,7 +241,7 @@ export default function ReportSetupWidget({isEditable, widgetMetaData, recordVal
     *******************************************************************************/
    function closeEditor(event?: {}, reason?: "backdropClick" | "escapeKeyDown")
    {
-      if(reason == "backdropClick" || reason == "escapeKeyDown")
+      if (reason == "backdropClick" || reason == "escapeKeyDown")
       {
          return;
       }
@@ -195,9 +255,9 @@ export default function ReportSetupWidget({isEditable, widgetMetaData, recordVal
     *******************************************************************************/
    function renderColumn(column: Column): JSX.Element
    {
-      const [field, table] = FilterUtils.getField(tableMetaData, column.name)
+      const [field, table] = FilterUtils.getField(tableMetaData, column.name);
 
-      if(!column || !column.isVisible || column.name == "__check__" || !field)
+      if (!column || !column.isVisible || column.name == "__check__" || !field)
       {
          return (<React.Fragment />);
       }
@@ -213,11 +273,11 @@ export default function ReportSetupWidget({isEditable, widgetMetaData, recordVal
    /*******************************************************************************
     **
     *******************************************************************************/
-   function mayShowQueryPreview(): boolean
+   function mayShowQuery(): boolean
    {
-      if(tableMetaData)
+      if (tableMetaData)
       {
-         if(frontendQueryFilter?.criteria?.length > 0 || frontendQueryFilter?.subFilters?.length > 0)
+         if (frontendQueryFilter?.criteria?.length > 0 || frontendQueryFilter?.subFilters?.length > 0)
          {
             return (true);
          }
@@ -229,13 +289,13 @@ export default function ReportSetupWidget({isEditable, widgetMetaData, recordVal
    /*******************************************************************************
     **
     *******************************************************************************/
-   function mayShowColumnsPreview(): boolean
+   function mayShowColumns(): boolean
    {
-      if(tableMetaData)
+      if (tableMetaData)
       {
-         for(let i = 0; i<columns?.columns?.length; i++)
+         for (let i = 0; i < columns?.columns?.length; i++)
          {
-            if(columns.columns[i].isVisible && columns.columns[i].name != "__check__")
+            if (columns.columns[i].isVisible && columns.columns[i].name != "__check__")
             {
                return (true);
             }
@@ -269,10 +329,17 @@ export default function ReportSetupWidget({isEditable, widgetMetaData, recordVal
    // add link to widget header for opening modal //
    /////////////////////////////////////////////////
    const selectTableFirstTooltipTitle = tableMetaData ? null : "You must select a table before you can set up your report filters and columns";
-   const labelAdditionalElementsRight: JSX.Element[] = []
+   const labelAdditionalElementsRight: JSX.Element[] = [];
-   if(isEditable)
+   if (isEditable)
    {
-      labelAdditionalElementsRight.push(<HeaderLinkButtonComponent label="Edit Filters and Columns" onClickCallback={openEditor} disabled={tableMetaData == null} disabledTooltip={selectTableFirstTooltipTitle} />)
+      if (!hideColumns)
+      {
+         labelAdditionalElementsRight.push(<HeaderLinkButtonComponent key="filterAndColumnsHeader" label="Edit Filters and Columns" onClickCallback={openEditor} disabled={tableMetaData == null} disabledTooltip={selectTableFirstTooltipTitle} />);
+      }
+      else
+      {
+         labelAdditionalElementsRight.push(<HeaderLinkButtonComponent key="filterAndColumnsHeader" label="Edit Filters" onClickCallback={openEditor} disabled={tableMetaData == null} disabledTooltip={selectTableFirstTooltipTitle} />);
+      }
    }
 
 
@@ -290,14 +357,14 @@ export default function ReportSetupWidget({isEditable, widgetMetaData, recordVal
          <Box pt="0.5rem">
             <Box display="flex" justifyContent="space-between" alignItems="center">
                <h5>Query Filter</h5>
-               <Box fontSize="0.75rem" fontWeight="700">{mayShowQueryPreview() && getCurrentSortIndicator(frontendQueryFilter, tableMetaData, null)}</Box>
+               <Box fontSize="0.75rem" fontWeight="700">{mayShowQuery() && getCurrentSortIndicator(frontendQueryFilter, tableMetaData, null)}</Box>
             </Box>
             {
-               mayShowQueryPreview() &&
+               mayShowQuery() &&
                <AdvancedQueryPreview tableMetaData={tableMetaData} queryFilter={frontendQueryFilter} isEditable={false} isQueryTooComplex={frontendQueryFilter.subFilters?.length > 0} removeCriteriaByIndexCallback={null} />
             }
             {
-               !mayShowQueryPreview() &&
+               !mayShowQuery() &&
                <Box width="100%" sx={{fontSize: "1rem", background: "#FFFFFF"}} minHeight={"2.5rem"} p={"0.5rem"} pb={"0.125rem"} borderRadius="0.75rem" border={`1px solid ${colors.grayLines.main}`}>
                   {
                      isEditable &&
@@ -306,34 +373,51 @@ export default function ReportSetupWidget({isEditable, widgetMetaData, recordVal
                      </Tooltip>
                   }
                   {
-                     !isEditable && <Box color={colors.gray.main}>Your report has no filters.</Box>
+                     !isEditable && <Box color={colors.gray.main}>No filters are configured.</Box>
                   }
                </Box>
             }
          </Box>
-         <Box pt="1rem">
+         {!hideColumns && (
-            <h5>Columns</h5>
+            <Box pt="1rem">
-            <Box display="flex" flexWrap="wrap" fontSize="1rem">
+               <h5>Columns</h5>
-               {
+               <Box display="flex" flexWrap="wrap" fontSize="1rem">
-                  mayShowColumnsPreview() &&
+                  {
-                  columns.columns.map((column, i) => <React.Fragment key={i}>{renderColumn(column)}</React.Fragment>)
+                     mayShowColumns() && columns &&
-               }
+                     columns.columns.map((column, i) => <React.Fragment key={`column-${i}`}>{renderColumn(column)}</React.Fragment>)
-               {
+                  }
-                  !mayShowColumnsPreview() &&
+                  {
-                  <Box width="100%" sx={{fontSize: "1rem", background: "#FFFFFF"}} minHeight={"2.375rem"} p={"0.5rem"} pb={"0.125rem"}>
+                     !mayShowColumns() &&
-                     {
+                     <Box width="100%" sx={{fontSize: "1rem", background: "#FFFFFF"}} minHeight={"2.375rem"} p={"0.5rem"} pb={"0.125rem"}>
-                        isEditable &&
+                        {
-                        <Tooltip title={selectTableFirstTooltipTitle}>
+                           isEditable &&
-                           <span><Button disabled={!recordValues["tableName"]} sx={unborderedButtonSX} onClick={openEditor}>+ Add Columns</Button></span>
+                           <Tooltip title={selectTableFirstTooltipTitle}>
-                        </Tooltip>
+                              <span><Button disabled={!recordValues["tableName"]} sx={unborderedButtonSX} onClick={openEditor}>+ Add Columns</Button></span>
-                     }
+                           </Tooltip>
-                     {
+                        }
-                        !isEditable && <Box color={colors.gray.main}>Your report has no columns.</Box>
+                        {
-                     }
+                           !isEditable && <Box color={colors.gray.main}>No columns are selected.</Box>
-                  </Box>
+                        }
-               }
+                     </Box>
+                  }
+               </Box>
             </Box>
-         </Box>
+         )}
+         {!hidePreview && !isEditable && frontendQueryFilter && tableMetaData && (
+            <Box pt="1rem">
+               <h5>Preview</h5>
+               <RecordQuery
+                  allowVariables={widgetData?.allowVariables}
+                  ref={recordQueryRef}
+                  table={tableMetaData}
+                  isPreview={true}
+                  usage="reportSetup"
+                  isModal={true}
+                  initialQueryFilter={frontendQueryFilter}
+                  initialColumns={columns}
+               />
+            </Box>
+         )}
          {
             modalOpen &&
             <Modal open={modalOpen} onClose={(event, reason) => closeEditor(event, reason)}>
@@ -349,6 +433,7 @@ export default function ReportSetupWidget({isEditable, widgetMetaData, recordVal
                         }
                         {
                            tableMetaData && <RecordQuery
+                              allowVariables={widgetData?.allowVariables}
                               ref={recordQueryRef}
                               table={tableMetaData}
                               usage="reportSetup"

src/qqq/components/widgets/misc/PivotTableSetupWidget.tsx

@@ -39,9 +39,9 @@ import colors from "qqq/assets/theme/base/colors";
 import {QCancelButton, QSaveButton} from "qqq/components/buttons/DefaultButtons";
 import FieldAutoComplete from "qqq/components/misc/FieldAutoComplete";
 import HelpContent, {hasHelpContent} from "qqq/components/misc/HelpContent";
+import {buttonSX, unborderedButtonSX} from "qqq/components/widgets/misc/FilterAndColumnsSetupWidget";
 import {PivotTableGroupByElement} from "qqq/components/widgets/misc/PivotTableGroupByElement";
 import {PivotTableValueElement} from "qqq/components/widgets/misc/PivotTableValueElement";
-import {buttonSX, unborderedButtonSX} from "qqq/components/widgets/misc/ReportSetupWidget";
 import Widget, {HeaderToggleComponent} from "qqq/components/widgets/Widget";
 import {PivotObjectKey, PivotTableDefinition, PivotTableFunction, pivotTableFunctionLabels, PivotTableGroupBy, PivotTableValue} from "qqq/models/misc/PivotTableDefinitionModels";
 import QQueryColumns from "qqq/models/query/QQueryColumns";
@@ -280,7 +280,7 @@ export default function PivotTableSetupWidget({isEditable, widgetMetaData, recor
       }
 
       modalPivotTableDefinition[rowsOrColumns].push(new PivotTableGroupBy());
-      validateForm()
+      validateForm();
       forceUpdate();
    }
 
@@ -292,7 +292,7 @@ export default function PivotTableSetupWidget({isEditable, widgetMetaData, recor
    {
       updateUsedGroupByFieldNames(modalPivotTableDefinition);
       updateUsedValueFieldNames(modalPivotTableDefinition);
-      validateForm()
+      validateForm();
       forceUpdate();
    }
 
@@ -308,7 +308,7 @@ export default function PivotTableSetupWidget({isEditable, widgetMetaData, recor
       }
 
       modalPivotTableDefinition.values.push(new PivotTableValue());
-      validateForm()
+      validateForm();
       forceUpdate();
    }
 
@@ -319,7 +319,7 @@ export default function PivotTableSetupWidget({isEditable, widgetMetaData, recor
    function removeValue(index: number)
    {
       modalPivotTableDefinition.values.splice(index, 1);
-      validateForm()
+      validateForm();
       forceUpdate();
    }
 
@@ -503,7 +503,7 @@ export default function PivotTableSetupWidget({isEditable, widgetMetaData, recor
    const labelAdditionalElementsRight: JSX.Element[] = [];
    if (isEditable)
    {
-      labelAdditionalElementsRight.push(<HeaderToggleComponent disabled={editPopupDisabled} disabledTooltip={selectTableFirstTooltipTitle ?? selectColumnsFirstTooltipTitle} label="Use Pivot Table?" getValue={() => enabled} onClickCallback={toggleEnabled} />);
+      labelAdditionalElementsRight.push(<HeaderToggleComponent key="pivotTableHeader" disabled={editPopupDisabled} disabledTooltip={selectTableFirstTooltipTitle ?? selectColumnsFirstTooltipTitle} label="Use Pivot Table?" getValue={() => enabled} onClickCallback={toggleEnabled} />);
    }
 
 
@@ -659,7 +659,7 @@ export default function PivotTableSetupWidget({isEditable, widgetMetaData, recor
       // if this isn't a call from the on-submit handler, and we haven't previously attempted a submit, then return w/o setting any alerts //
       // this is like a version of considering "touched"...                                                                                //
       ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-      if(!submitting && !attemptedSubmit)
+      if (!submitting && !attemptedSubmit)
       {
          return;
       }
@@ -703,7 +703,7 @@ export default function PivotTableSetupWidget({isEditable, widgetMetaData, recor
          // now they've fixed 'em - so go back to a 'clean' state - so if they add more    //
          // boxes, they won't immediately show errors, until a re-submit                   //
          ////////////////////////////////////////////////////////////////////////////////////
-         if(attemptedSubmit)
+         if (attemptedSubmit)
          {
             setAttemptedSubmit(false);
          }

src/qqq/components/widgets/misc/RecordGridWidget.tsx

@@ -40,14 +40,14 @@ import {Link, useNavigate} from "react-router-dom";
 export interface ChildRecordListData extends WidgetData
 {
    title: string;
-   queryOutput: {records: {values: any}[]}
+   queryOutput: { records: { values: any }[] };
    childTableMetaData: QTableMetaData;
    tablePath: string;
    viewAllLink: string;
    totalRows: number;
    canAddChildRecord: boolean;
-   defaultValuesForNewChildRecords: {[fieldName: string]: any};
+   defaultValuesForNewChildRecords: { [fieldName: string]: any };
-   disabledFieldsForNewChildRecords: {[fieldName: string]: any};
+   disabledFieldsForNewChildRecords: { [fieldName: string]: any };
 }
 
 interface Props
@@ -75,9 +75,9 @@ function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRo
 {
    const instance = useRef({timer: null});
    const [rows, setRows] = useState([]);
-   const [records, setRecords] = useState([] as QRecord[])
+   const [records, setRecords] = useState([] as QRecord[]);
    const [columns, setColumns] = useState([]);
-   const [allColumns, setAllColumns] = useState([])
+   const [allColumns, setAllColumns] = useState([]);
    const [csv, setCsv] = useState(null as string);
    const [fileName, setFileName] = useState(null as string);
    const [gridMouseDownX, setGridMouseDownX] = useState(0);
@@ -110,20 +110,20 @@ function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRo
          /////////////////////////////////////////////////////////////////////////////////////////////////////////////
          // capture all-columns to use for the export (before we might splice some away from the on-screen display) //
          /////////////////////////////////////////////////////////////////////////////////////////////////////////////
-         const allColumns = [... columns];
+         const allColumns = [...columns];
          setAllColumns(JSON.parse(JSON.stringify(columns)));
 
          ////////////////////////////////////////////////////////////////
          // do not not show the foreign-key column of the parent table //
          ////////////////////////////////////////////////////////////////
-         if(data.defaultValuesForNewChildRecords)
+         if (data.defaultValuesForNewChildRecords)
          {
             for (let i = 0; i < columns.length; i++)
             {
-               if(data.defaultValuesForNewChildRecords[columns[i].field])
+               if (data.defaultValuesForNewChildRecords[columns[i].field])
                {
                   columns.splice(i, 1);
-                  i--
+                  i--;
                }
             }
          }
@@ -131,7 +131,7 @@ function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRo
          ////////////////////////////////////
          // add actions cell, if available //
          ////////////////////////////////////
-         if(allowRecordEdit || allowRecordDelete)
+         if (allowRecordEdit || allowRecordDelete)
          {
             columns.unshift({
                field: "_actions",
@@ -145,19 +145,19 @@ function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRo
                   return <Box>
                      {allowRecordEdit && <IconButton onClick={() => editRecordCallback(params.row.__rowIndex)}><Icon>edit</Icon></IconButton>}
                      {allowRecordDelete && <IconButton onClick={() => deleteRecordCallback(params.row.__rowIndex)}><Icon>delete</Icon></IconButton>}
-                  </Box>
+                  </Box>;
                })
-            })
+            });
          }
 
          setRows(rows);
-         setRecords(records)
+         setRecords(records);
          setColumns(columns);
 
          let csv = "";
          for (let i = 0; i < allColumns.length; i++)
          {
-            csv += `${i > 0 ? "," : ""}"${ValueUtils.cleanForCsv(allColumns[i].headerName)}"`
+            csv += `${i > 0 ? "," : ""}"${ValueUtils.cleanForCsv(allColumns[i].headerName)}"`;
          }
          csv += "\n";
 
@@ -165,8 +165,8 @@ function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRo
          {
             for (let j = 0; j < allColumns.length; j++)
             {
-               const value = records[i].displayValues.get(allColumns[j].field) ?? records[i].values.get(allColumns[j].field)
+               const value = records[i].displayValues.get(allColumns[j].field) ?? records[i].values.get(allColumns[j].field);
-               csv += `${j > 0 ? "," : ""}"${ValueUtils.cleanForCsv(value)}"`
+               csv += `${j > 0 ? "," : ""}"${ValueUtils.cleanForCsv(value)}"`;
             }
             csv += "\n";
          }
@@ -182,13 +182,13 @@ function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRo
    // view all link //
    ///////////////////
    const labelAdditionalElementsLeft: JSX.Element[] = [];
-   if(data && data.viewAllLink)
+   if (data && data.viewAllLink)
    {
       labelAdditionalElementsLeft.push(
-         <Typography variant="body2" p={2} display="inline" fontSize=".875rem" pt="0" position="relative">
+         <Typography key={"viewAllLink"} variant="body2" p={2} display="inline" fontSize=".875rem" pt="0" position="relative">
             <Link to={data.viewAllLink}>View All</Link>
          </Typography>
-      )
+      );
    }
 
    ///////////////////
@@ -200,10 +200,10 @@ function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRo
    {
       isExportDisabled = false;
 
-      if(data.totalRows && data.queryOutput.records.length < data.totalRows)
+      if (data.totalRows && data.queryOutput.records.length < data.totalRows)
       {
-         tooltipTitle = "Export these " + data.queryOutput.records.length + " records."
+         tooltipTitle = "Export these " + data.queryOutput.records.length + " records.";
-         if(data.viewAllLink)
+         if (data.viewAllLink)
          {
             tooltipTitle += "\nClick View All to export all records.";
          }
@@ -212,21 +212,21 @@ function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRo
 
    const onExportClick = () =>
    {
-      if(csv)
+      if (csv)
       {
          HtmlUtils.download(fileName, csv);
       }
       else
       {
-         alert("There is no data available to export.")
+         alert("There is no data available to export.");
       }
-   }
+   };
 
-   if(widgetMetaData?.showExportButton)
+   if (widgetMetaData?.showExportButton)
    {
       labelAdditionalElementsLeft.push(
-         <Typography key={1} variant="body2" px={0} display="inline" position="relative">
+         <Typography key={"exportButton"} variant="body2" px={0} display="inline" position="relative">
-            <Tooltip title={tooltipTitle}><Button sx={{px: 1, py: 0, minWidth: "initial"}} onClick={onExportClick} disabled={isExportDisabled}><Icon sx={{color: "#757575", fontSize: 1.25}}>save_alt</Icon></Button></Tooltip>
+            <Tooltip title={tooltipTitle}><span><Button sx={{px: 1, py: 0, minWidth: "initial"}} onClick={onExportClick} disabled={isExportDisabled}><Icon sx={{color: "#757575", fontSize: 1.25}}>save_alt</Icon></Button></span></Tooltip>
          </Typography>
       );
    }
@@ -234,15 +234,15 @@ function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRo
    ////////////////////
    // add new button //
    ////////////////////
-   const labelAdditionalComponentsRight: LabelComponent[] = []
+   const labelAdditionalComponentsRight: LabelComponent[] = [];
-   if(data && data.canAddChildRecord)
+   if (data && data.canAddChildRecord)
    {
       let disabledFields = data.disabledFieldsForNewChildRecords;
-      if(!disabledFields)
+      if (!disabledFields)
       {
          disabledFields = data.defaultValuesForNewChildRecords;
       }
-      labelAdditionalComponentsRight.push(new AddNewRecordButton(data.childTableMetaData, data.defaultValuesForNewChildRecords, "Add new", disabledFields, addNewRecordCallback))
+      labelAdditionalComponentsRight.push(new AddNewRecordButton(data.childTableMetaData, data.defaultValuesForNewChildRecords, "Add new", disabledFields, addNewRecordCallback));
    }
 
 
@@ -251,16 +251,16 @@ function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRo
    /////////////////////////////////////////////////////////////////
    const handleRowClick = (params: GridRowParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) =>
    {
-      if(disableRowClick)
+      if (disableRowClick)
       {
          return;
       }
 
       (async () =>
       {
-         const qInstance = await qController.loadMetaData()
+         const qInstance = await qController.loadMetaData();
-         let tablePath = qInstance.getTablePathByName(data.childTableMetaData.name)
+         let tablePath = qInstance.getTablePathByName(data.childTableMetaData.name);
-         if(tablePath)
+         if (tablePath)
          {
             tablePath = `${tablePath}/${params.row[data.childTableMetaData.primaryKeyField]}`;
             DataGridUtils.handleRowClick(tablePath, event, gridMouseDownX, gridMouseDownY, navigate, instance);
@@ -276,7 +276,7 @@ function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRo
     *******************************************************************************/
    function CustomToolbar()
    {
-      const handleMouseDown: GridEventListener<"cellMouseDown"> = ( params, event, details ) =>
+      const handleMouseDown: GridEventListener<"cellMouseDown"> = (params, event, details) =>
       {
          setGridMouseDownX(event.clientX);
          setGridMouseDownY(event.clientY);
@@ -304,49 +304,51 @@ function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRo
          labelAdditionalComponentsRight={labelAdditionalComponentsRight}
          labelBoxAdditionalSx={{position: "relative", top: "-0.375rem"}}
       >
-         <Box mx={-2} mb={-3}>
+         <Box mx={-3} mb={-3}>
-            <DataGridPro
+            <Box>
-               autoHeight
+               <DataGridPro
-               sx={{
+                  autoHeight
-                  borderBottom: "none",
+                  sx={{
-                  borderLeft: "none",
+                     borderBottom: "none",
-                  borderRight: "none"
+                     borderLeft: "none",
-               }}
+                     borderRight: "none"
-               rows={rows}
+                  }}
-               disableSelectionOnClick
+                  rows={rows}
-               columns={columns}
+                  disableSelectionOnClick
-               rowBuffer={10}
+                  columns={columns}
-               getRowClassName={(params) => (params.indexRelativeToCurrentPage % 2 === 0 ? "even" : "odd")}
+                  rowBuffer={10}
-               onRowClick={handleRowClick}
+                  getRowClassName={(params) => (params.indexRelativeToCurrentPage % 2 === 0 ? "even" : "odd")}
-               getRowId={(row) => row.__rowIndex}
+                  onRowClick={handleRowClick}
-               // getRowHeight={() => "auto"} // maybe nice?  wraps values in cells...
+                  getRowId={(row) => row.__rowIndex}
-               components={{
+                  // getRowHeight={() => "auto"} // maybe nice?  wraps values in cells...
-                  Toolbar: CustomToolbar
+                  components={{
-               }}
+                     Toolbar: CustomToolbar
-               // pinnedColumns={pinnedColumns}
+                  }}
-               // onPinnedColumnsChange={handlePinnedColumnsChange}
+                  // pinnedColumns={pinnedColumns}
-               // pagination
+                  // onPinnedColumnsChange={handlePinnedColumnsChange}
-               // paginationMode="server"
+                  // pagination
-               // rowsPerPageOptions={[20]}
+                  // paginationMode="server"
-               // sortingMode="server"
+                  // rowsPerPageOptions={[20]}
-               // filterMode="server"
+                  // sortingMode="server"
-               // page={pageNumber}
+                  // filterMode="server"
-               // checkboxSelection
+                  // page={pageNumber}
-               rowCount={data && data.totalRows}
+                  // checkboxSelection
-               // onPageSizeChange={handleRowsPerPageChange}
+                  rowCount={data && data.totalRows}
-               // onStateChange={handleStateChange}
+                  // onPageSizeChange={handleRowsPerPageChange}
-               // density={density}
+                  // onStateChange={handleStateChange}
-               // loading={loading}
+                  // density={density}
-               // filterModel={filterModel}
+                  // loading={loading}
-               // onFilterModelChange={handleFilterChange}
+                  // filterModel={filterModel}
-               // columnVisibilityModel={columnVisibilityModel}
+                  // onFilterModelChange={handleFilterChange}
-               // onColumnVisibilityModelChange={handleColumnVisibilityChange}
+                  // columnVisibilityModel={columnVisibilityModel}
-               // onColumnOrderChange={handleColumnOrderChange}
+                  // onColumnVisibilityModelChange={handleColumnVisibilityChange}
-               // onSelectionModelChange={selectionChanged}
+                  // onColumnOrderChange={handleColumnOrderChange}
-               // onSortModelChange={handleSortChange}
+                  // onSelectionModelChange={selectionChanged}
-               // sortingOrder={[ "asc", "desc" ]}
+                  // onSortModelChange={handleSortChange}
-               // sortModel={columnSortModel}
+                  // sortingOrder={[ "asc", "desc" ]}
-            />
+                  // sortModel={columnSortModel}
+               />
+            </Box>
          </Box>
       </Widget>
    );

src/qqq/components/widgets/tables/DataTable.tsx

@@ -19,19 +19,14 @@
  */
 
 import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
-import {tooltipClasses, TooltipProps} from "@mui/material";
+import {Box, tooltipClasses, TooltipProps} from "@mui/material";
 import Autocomplete from "@mui/material/Autocomplete";
-import Box from "@mui/material/Box";
 import Icon from "@mui/material/Icon";
 import {styled} from "@mui/material/styles";
 import Table from "@mui/material/Table";
-import TableBody from "@mui/material/TableBody";
 import TableContainer from "@mui/material/TableContainer";
-import TableRow from "@mui/material/TableRow";
 import Tooltip from "@mui/material/Tooltip";
 import parse from "html-react-parser";
-import React, {useEffect, useMemo, useState} from "react";
-import {useAsyncDebounce, useExpanded, useGlobalFilter, usePagination, useSortBy, useTable} from "react-table";
 import colors from "qqq/assets/theme/base/colors";
 import MDInput from "qqq/components/legacy/MDInput";
 import MDPagination from "qqq/components/legacy/MDPagination";
@@ -43,6 +38,8 @@ import DefaultCell from "qqq/components/widgets/tables/cells/DefaultCell";
 import ImageCell from "qqq/components/widgets/tables/cells/ImageCell";
 import {TableDataInput} from "qqq/components/widgets/tables/TableCard";
 import WidgetBlock from "qqq/components/widgets/WidgetBlock";
+import React, {useEffect, useMemo, useState} from "react";
+import {useAsyncDebounce, useExpanded, useGlobalFilter, usePagination, useSortBy, useTable} from "react-table";
 
 interface Props
 {
@@ -106,17 +103,17 @@ function DataTable({
    entries = entriesPerPageOptions ? entriesPerPageOptions : ["10", "25", "50", "100"];
 
    let widths = [];
-   for(let i = 0; i<table.columns.length; i++)
+   for (let i = 0; i < table.columns.length; i++)
    {
       const column = table.columns[i];
-      if(column.type !== "hidden")
+      if (column.type !== "hidden")
       {
          widths.push(table.columns[i].width ?? "1fr");
       }
    }
 
    let showExpandColumn = false;
-   if(table.rows)
+   if (table.rows)
    {
       for (let i = 0; i < table.rows.length; i++)
       {
@@ -129,7 +126,7 @@ function DataTable({
    }
 
    const columnsToMemo = [...table.columns];
-   if(showExpandColumn)
+   if (showExpandColumn)
    {
       widths.push("60px");
       columnsToMemo.push(
@@ -166,18 +163,18 @@ function DataTable({
                      })}
                   >
                      {/* float this icon to keep it "out of the flow" - in other words, to keep it from making the row taller than it otherwise would be... */}
-                     <Icon fontSize="medium" sx={{float: "left"}}>{row.isExpanded ? "expand_less" : "chevron_right"}</Icon>
+                     <Icon fontSize="medium" sx={{float: "left"}}>{row.isExpanded ? "expand_less" : "chevron_left"}</Icon>
                   </span>
                ) : null,
          },
       );
    }
 
-   if(table.columnHeaderTooltips)
+   if (table.columnHeaderTooltips)
    {
       for (let column of columnsToMemo)
       {
-         if(table.columnHeaderTooltips[column.accessor])
+         if (table.columnHeaderTooltips[column.accessor])
          {
             column.tooltip = table.columnHeaderTooltips[column.accessor];
          }
@@ -297,7 +294,7 @@ function DataTable({
    }
 
    let visibleFooterRows = 1;
-   if(expanded && expanded[`${table.rows.length-1}`])
+   if (expanded && expanded[`${table.rows.length - 1}`])
    {
       //////////////////////////////////////////////////
       // todo - should count how many are expanded... //
@@ -308,156 +305,152 @@ function DataTable({
    function getTable(includeHead: boolean, rows: any, isFooter: boolean)
    {
       let boxStyle = {};
-      if(fixedStickyLastRow)
+      if (fixedStickyLastRow)
       {
          boxStyle = isFooter
             ? {borderTop: `0.0625rem solid ${colors.grayLines.main};`, backgroundColor: "#EEEEEE"}
-            : {flexGrow: 1, overflowY: "scroll", scrollbarGutter: "stable", marginBottom: "-1px"};
+            : {height: fixedHeight ? `${fixedHeight}px` : "auto", flexGrow: 1, overflowY: "scroll", scrollbarGutter: "stable", marginBottom: "-1px"};
       }
 
       let innerBoxStyle = {};
-      if(fixedStickyLastRow && isFooter)
+      if (fixedStickyLastRow && isFooter)
       {
          innerBoxStyle = {overflowY: "auto", scrollbarGutter: "stable"};
       }
 
+      ///////////////////////////////////////////////////////////////////////////////////
+      // note - at one point, we had the table's sx including: whiteSpace: "nowrap"... //
+      ///////////////////////////////////////////////////////////////////////////////////
       return <Box sx={boxStyle}><Box sx={innerBoxStyle}>
-         <Table {...getTableProps()}>
+         <Table {...getTableProps()} component="div" sx={{display: "grid", gridTemplateRows: "auto", gridTemplateColumns: gridTemplateColumns}}>
             {
                includeHead && (
-                  <Box component="thead" sx={{position: "sticky", top: 0, background: "white", zIndex: 10}}>
+                  headerGroups.map((headerGroup: any, i: number) => (
-                     {headerGroups.map((headerGroup: any, i: number) => (
+                     headerGroup.headers.map((column: any) => (
-                        <TableRow key={i} {...headerGroup.getHeaderGroupProps()} sx={{display: "grid", gridTemplateColumns: gridTemplateColumns}}>
+                        column.type !== "hidden" && (
-                           {headerGroup.headers.map((column: any) => (
+                           <DataTableHeadCell
-                              column.type !== "hidden" && (
+                              sx={{position: "sticky", top: 0, background: "white", zIndex: 10, alignItems: "flex-end"}}
-                                 <DataTableHeadCell
+                              key={i++}
-                                    key={i++}
+                              {...column.getHeaderProps(isSorted && column.getSortByToggleProps())}
-                                    {...column.getHeaderProps(isSorted && column.getSortByToggleProps())}
+                              align={column.align ? column.align : "left"}
-                                    align={column.align ? column.align : "left"}
+                              sorted={setSortedValue(column)}
-                                    sorted={setSortedValue(column)}
+                              tooltip={column.tooltip}
-                                    tooltip={column.tooltip}
+                           >
-                                 >
+                              {column.render("header")}
-                                    {column.render("header")}
+                           </DataTableHeadCell>
-                                 </DataTableHeadCell>
+                        )
-                              )
+                     ))
-                           ))}
+                  ))
-                        </TableRow>
-                     ))}
-                  </Box>
                )
             }
-            <TableBody {...getTableBodyProps()}>
+            {rows.map((row: any, key: any) =>
-               {rows.map((row: any, key: any) =>
+            {
+               prepareRow(row);
+
+               let overrideNoEndBorder = false;
+
+               //////////////////////////////////////////////////////////////////////////////////
+               // don't do an end-border on nested rows - unless they're the last one in a set //
+               //////////////////////////////////////////////////////////////////////////////////
+               if (row.depth > 0)
                {
-                  prepareRow(row);
+                  overrideNoEndBorder = true;
-
+                  if (key + 1 < rows.length && rows[key + 1].depth == 0)
-                  let overrideNoEndBorder = false;
-
-                  //////////////////////////////////////////////////////////////////////////////////
-                  // don't do an end-border on nested rows - unless they're the last one in a set //
-                  //////////////////////////////////////////////////////////////////////////////////
-                  if(row.depth > 0)
                   {
-                     overrideNoEndBorder = true;
+                     overrideNoEndBorder = false;
-                     if(key + 1 < rows.length && rows[key + 1].depth == 0)
-                     {
-                        overrideNoEndBorder = false;
-                     }
                   }
+               }
 
-                  ///////////////////////////////////////
+               ///////////////////////////////////////
-                  // don't do end-border on the footer //
+               // don't do end-border on the footer //
-                  ///////////////////////////////////////
+               ///////////////////////////////////////
-                  if(isFooter)
+               if (isFooter)
-                  {
+               {
-                     overrideNoEndBorder = true;
+                  overrideNoEndBorder = true;
-                  }
+               }
 
-                  let background = "initial";
+               let background = "initial";
-                  if(isFooter)
+               if (isFooter)
-                  {
+               {
-                     background = "#EEEEEE";
+                  background = "#EEEEEE";
-                  }
+               }
-                  else if(row.depth > 0 || row.isExpanded)
+               else if (row.depth > 0 || row.isExpanded)
-                  {
+               {
-                     background = "#FAFAFA";
+                  background = "#FAFAFA";
-                  }
+               }
 
-                  return (
+               return (
-                     <TableRow sx={{verticalAlign: "top", display: "grid", gridTemplateColumns: gridTemplateColumns, background: background}} key={key} {...row.getRowProps()}>
+                  row.cells.map((cell: any) => (
-                        {row.cells.map((cell: any) => (
+                     cell.column.type !== "hidden" && (
-                           cell.column.type !== "hidden" && (
+                        <DataTableBodyCell
-                              <DataTableBodyCell
+                           key={key}
-                                 key={key}
+                           sx={{verticalAlign: "top", background: background}}
-                                 noBorder={noEndBorder || overrideNoEndBorder || row.isExpanded}
+                           noBorder={noEndBorder || overrideNoEndBorder || row.isExpanded}
-                                 depth={row.depth}
+                           depth={row.depth}
-                                 align={cell.column.align ? cell.column.align : "left"}
+                           align={cell.column.align ? cell.column.align : "left"}
-                                 {...cell.getCellProps()}
+                           {...cell.getCellProps()}
-                              >
+                        >
-                                 {
+                           {
-                                    cell.column.type === "default" && (
+                              cell.column.type === "default" && (
-                                       cell.value && "number" === typeof cell.value ? (
+                                 cell.value && "number" === typeof cell.value ? (
-                                          <DefaultCell isFooter={isFooter}>{cell.value.toLocaleString()}</DefaultCell>
+                                    <DefaultCell isFooter={isFooter}>{cell.value.toLocaleString()}</DefaultCell>
-                                       ) : (<DefaultCell isFooter={isFooter}>{cell.render("Cell")}</DefaultCell>)
+                                 ) : (<DefaultCell isFooter={isFooter}>{cell.render("Cell")}</DefaultCell>)
-                                    )
+                              )
-                                 }
+                           }
-                                 {
+                           {
-                                    cell.column.type === "htmlAndTooltip" && (
+                              cell.column.type === "htmlAndTooltip" && (
-                                       <DefaultCell isFooter={isFooter}>
+                                 <DefaultCell isFooter={isFooter}>
-                                          <NoMaxWidthTooltip title={parse(row.values["tooltip"])}>
+                                    <NoMaxWidthTooltip title={parse(row.values["tooltip"])}>
-                                             <Box>
+                                       <Box>
-                                                {parse(cell.value)}
+                                          {parse(cell.value)}
-                                             </Box>
+                                       </Box>
-                                          </NoMaxWidthTooltip>
+                                    </NoMaxWidthTooltip>
-                                       </DefaultCell>
+                                 </DefaultCell>
-                                    )
+                              )
-                                 }
+                           }
-                                 {
+                           {
-                                    cell.column.type === "html" && (
+                              cell.column.type === "html" && (
-                                       <DefaultCell isFooter={isFooter}>{parse(cell.value ?? "")}</DefaultCell>
+                                 <DefaultCell isFooter={isFooter}>{parse(cell.value ?? "")}</DefaultCell>
-                                    )
+                              )
-                                 }
+                           }
-                                 {
+                           {
-                                    cell.column.type === "composite" && (
+                              cell.column.type === "composite" && (
-                                       <DefaultCell isFooter={isFooter}>
+                                 <DefaultCell isFooter={isFooter}>
-                                          <CompositeWidget widgetMetaData={widgetMetaData} data={cell.value} />
+                                    <CompositeWidget widgetMetaData={widgetMetaData} data={cell.value} />
-                                       </DefaultCell>
+                                 </DefaultCell>
-                                    )
+                              )
-                                 }
+                           }
-                                 {
+                           {
-                                    cell.column.type === "block" && (
+                              cell.column.type === "block" && (
-                                       <DefaultCell isFooter={isFooter}>
+                                 <DefaultCell isFooter={isFooter}>
-                                          <WidgetBlock widgetMetaData={widgetMetaData} block={cell.value} />
+                                    <WidgetBlock widgetMetaData={widgetMetaData} block={cell.value} />
-                                       </DefaultCell>
+                                 </DefaultCell>
-                                    )
+                              )
-                                 }
+                           }
-                                 {
+                           {
-                                    cell.column.type === "image" && row.values["imageTotal"] && (
+                              cell.column.type === "image" && row.values["imageTotal"] && (
-                                       <ImageCell imageUrl={row.values["imageUrl"]} label={row.values["imageLabel"]} total={row.values["imageTotal"].toLocaleString()} totalType={row.values["imageTotalType"]} />
+                                 <ImageCell imageUrl={row.values["imageUrl"]} label={row.values["imageLabel"]} total={row.values["imageTotal"].toLocaleString()} totalType={row.values["imageTotalType"]} />
-                                    )
+                              )
-                                 }
+                           }
-                                 {
+                           {
-                                    cell.column.type === "image" && !row.values["imageTotal"] && (
+                              cell.column.type === "image" && !row.values["imageTotal"] && (
-                                       <ImageCell imageUrl={row.values["imageUrl"]} label={row.values["imageLabel"]} />
+                                 <ImageCell imageUrl={row.values["imageUrl"]} label={row.values["imageLabel"]} />
-                                    )
+                              )
-                                 }
+                           }
-                                 {
+                           {
-                                    (cell.column.id === "__expander") && cell.render("cell")
+                              (cell.column.id === "__expander") && cell.render("cell")
-                                 }
+                           }
-                              </DataTableBodyCell>
+                        </DataTableBodyCell>
-                           )
+                     )
-                        ))}
+                  ))
-                     </TableRow>
+               );
-                  );
+            })}
-               })}
-
-            </TableBody>
          </Table>
-      </Box></Box>
+      </Box></Box>;
    }
 
    return (
-      <TableContainer sx={{boxShadow: "none", height: fixedHeight ? `${fixedHeight}px` : "auto"}}>
+      <TableContainer sx={{boxShadow: "none", height: (fixedHeight && !fixedStickyLastRow) ? `${fixedHeight}px` : "auto"}}>
          {entriesPerPage && ((hidePaginationDropdown !== undefined && !hidePaginationDropdown) || canSearch) ? (
             <Box display="flex" justifyContent="space-between" alignItems="center" p={3}>
                {entriesPerPage && (hidePaginationDropdown === undefined || !hidePaginationDropdown) && (

src/qqq/components/widgets/tables/TableCard.tsx

@@ -28,13 +28,13 @@ import TableBody from "@mui/material/TableBody";
 import TableContainer from "@mui/material/TableContainer";
 import TableRow from "@mui/material/TableRow";
 import parse from "html-react-parser";
-import React, {useEffect, useState} from "react";
 import MDTypography from "qqq/components/legacy/MDTypography";
 import DataTableBodyCell from "qqq/components/widgets/tables/cells/DataTableBodyCell";
 import DataTableHeadCell from "qqq/components/widgets/tables/cells/DataTableHeadCell";
 import DefaultCell from "qqq/components/widgets/tables/cells/DefaultCell";
 import DataTable from "qqq/components/widgets/tables/DataTable";
 import Client from "qqq/utils/qqq/Client";
+import React, {useEffect, useState} from "react";
 
 
 //////////////////////////////////////
@@ -43,7 +43,7 @@ import Client from "qqq/utils/qqq/Client";
 export interface TableDataInput
 {
    columns: { [key: string]: any }[];
-   columnHeaderTooltips?: { [columnName: string]: string | JSX.Element }
+   columnHeaderTooltips?: { [columnName: string]: string | JSX.Element };
    rows: { [key: string]: any }[];
 }
 
@@ -63,6 +63,7 @@ interface Props
 }
 
 const qController = Client.getInstance();
+
 function TableCard({noRowsFoundHTML, data, rowsPerPage, hidePaginationDropdown, fixedStickyLastRow, fixedHeight, widgetMetaData}: Props): JSX.Element
 {
    const [qInstance, setQInstance] = useState(null as QInstance);
@@ -92,41 +93,25 @@ function TableCard({noRowsFoundHTML, data, rowsPerPage, hidePaginationDropdown,
                />
                : noRowsFoundHTML ?
                   <Box p={3} pt={0} pb={3} sx={{textAlign: "center"}}>
-                     <MDTypography
+                     <MDTypography variant="subtitle2" color="secondary" fontWeight="regular">
-                        variant="subtitle2"
+                        {noRowsFoundHTML ? (parse(noRowsFoundHTML)) : "No rows found"}
-                        color="secondary"
-                        fontWeight="regular"
-                     >
-                        {
-                           noRowsFoundHTML ? (
-                              parse(noRowsFoundHTML)
-                           ) : "No rows found"
-                        }
                      </MDTypography>
                   </Box>
                   :
                   <TableContainer sx={{boxShadow: "none"}}>
-                     <Table>
+                     <Table component="div" sx={{display: "grid", gridTemplateRows: "auto", gridTemplateColumns: "1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr"}}>
-                        <Box component="thead">
+                        {Array(8).fill(0).map((_, i) =>
-                           <TableRow key="header">
+                           <DataTableHeadCell key={`head-${i}`} sorted={false} width="auto" align="center">
-                              {Array(8).fill(0).map((_, i) =>
+                              <Skeleton width="100%" />
-                                 <DataTableHeadCell key={`head-${i}`} sorted={false} width="auto" align="center">
+                           </DataTableHeadCell>
-                                    <Skeleton width="100%" />
+                        )}
-                                 </DataTableHeadCell>
+                        {Array(5).fill(0).map((_, i) =>
-                              )}
+                           Array(8).fill(0).map((_, j) =>
-                           </TableRow>
+                              <DataTableBodyCell key={`cell-${i}-${j}`} align="center">
-                        </Box>
+                                 <DefaultCell isFooter={false}><Skeleton /></DefaultCell>
-                        <TableBody>
+                              </DataTableBodyCell>
-                           {Array(5).fill(0).map((_, i) =>
+                           )
-                              <TableRow sx={{verticalAlign: "top"}} key={`row-${i}`}>
+                        )}
-                                 {Array(8).fill(0).map((_, j) =>
-                                    <DataTableBodyCell key={`cell-${i}-${j}`} align="center">
-                                       <DefaultCell isFooter={false}><Skeleton /></DefaultCell>
-                                    </DataTableBodyCell>
-                                 )}
-                              </TableRow>
-                           )}
-                        </TableBody>
                      </Table>
                   </TableContainer>
          }

src/qqq/components/widgets/tables/TableWidget.tsx

@@ -23,7 +23,6 @@
 import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
 // @ts-ignore
 import {htmlToText} from "html-to-text";
-import React, {useContext, useEffect, useState} from "react";
 import QContext from "QContext";
 import HelpContent, {hasHelpContent} from "qqq/components/misc/HelpContent";
 import TableCard from "qqq/components/widgets/tables/TableCard";
@@ -31,6 +30,7 @@ import Widget, {WidgetData} from "qqq/components/widgets/Widget";
 import {WidgetUtils} from "qqq/components/widgets/WidgetUtils";
 import HtmlUtils from "qqq/utils/HtmlUtils";
 import ValueUtils from "qqq/utils/qqq/ValueUtils";
+import React, {useContext, useEffect, useState} from "react";
 
 interface Props
 {
@@ -40,8 +40,7 @@ interface Props
    isChild?: boolean;
 }
 
-TableWidget.defaultProps = {
+TableWidget.defaultProps = {};
-};
 
 function TableWidget(props: Props): JSX.Element
 {
@@ -86,7 +85,7 @@ function TableWidget(props: Props): JSX.Element
 
                const cell = rows[i][columns[j].accessor];
                let text = cell;
-               if(columns[j].type != "default")
+               if (columns[j].type != "default")
                {
                   text = htmlToText(cell,
                      {
@@ -105,7 +104,7 @@ function TableWidget(props: Props): JSX.Element
          setCsv(csv);
 
          const fileName = WidgetUtils.makeExportFileName(props.widgetData, props.widgetMetaData);
-         setFileName(fileName)
+         setFileName(fileName);
 
          console.log(`useEffect, setting fileName ${fileName}`);
       }
@@ -114,24 +113,28 @@ function TableWidget(props: Props): JSX.Element
 
    const onExportClick = () =>
    {
-      if(props.widgetData?.csvData)
+      if (props.widgetData?.csvData)
       {
          const csv = WidgetUtils.widgetCsvDataToString(props.widgetData);
          const fileName = WidgetUtils.makeExportFileName(props.widgetData, props.widgetMetaData);
          HtmlUtils.download(fileName, csv);
       }
-      else if(csv)
+      else if (csv)
       {
          HtmlUtils.download(fileName, csv);
       }
       else
       {
-         alert("There is no data available to export.")
+         alert("There is no data available to export.");
       }
-   }
+   };
 
    const labelAdditionalElementsLeft: JSX.Element[] = [];
-   if(props.widgetMetaData?.showExportButton)
+   if (props.widgetData?.linkText && props.widgetData?.linkURL)
+   {
+      labelAdditionalElementsLeft.push(WidgetUtils.generateLabelLink(props.widgetData?.linkText, props.widgetData?.linkURL));
+   }
+   if (props.widgetMetaData?.showExportButton)
    {
       labelAdditionalElementsLeft.push(WidgetUtils.generateExportButton(onExportClick));
    }
@@ -139,14 +142,14 @@ function TableWidget(props: Props): JSX.Element
    //////////////////////////////////////////////////////
    // look for column-header tooltips from helpContent //
    //////////////////////////////////////////////////////
-   const columnHeaderTooltips: {[columnName: string]: JSX.Element} = {}
+   const columnHeaderTooltips: { [columnName: string]: JSX.Element } = {};
    for (let column of props.widgetData?.columns ?? [])
    {
-      const helpRoles = ["ALL_SCREENS"]
+      const helpRoles = ["ALL_SCREENS"];
       const slotName = `columnHeader=${column.accessor}`;
       const showHelp = helpHelpActive || hasHelpContent(props.widgetMetaData?.helpContent?.get(slotName), helpRoles);
 
-      if(showHelp)
+      if (showHelp)
       {
          const formattedHelpContent = <HelpContent helpContents={props.widgetMetaData?.helpContent?.get(slotName)} roles={helpRoles} helpContentKey={`widget:${props.widgetMetaData?.name};slot:${slotName}`} />;
          columnHeaderTooltips[column.accessor] = formattedHelpContent;

src/qqq/components/widgets/tables/cells/DataTableBodyCell.tsx

@@ -19,7 +19,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import Box from "@mui/material/Box";
+import {Box} from "@mui/material";
 import {Theme} from "@mui/material/styles";
 import colors from "qqq/assets/theme/base/colors";
 import {ReactNode} from "react";
@@ -30,13 +30,14 @@ interface Props
    children: ReactNode;
    noBorder?: boolean;
    align?: "left" | "right" | "center";
+   sx?: any;
 }
 
-function DataTableBodyCell({noBorder, align, children}: Props): JSX.Element
+function DataTableBodyCell({noBorder, align, sx, children}: Props): JSX.Element
 {
    return (
       <Box
-         component="td"
+         component="div"
          textAlign={align}
          py={1.5}
          px={1.5}
@@ -54,7 +55,7 @@ function DataTableBodyCell({noBorder, align, children}: Props): JSX.Element
             },
             "&:last-child": {
                paddingRight: "1rem"
-            }
+            }, ...sx
          })}
       >
          <Box
@@ -72,6 +73,7 @@ function DataTableBodyCell({noBorder, align, children}: Props): JSX.Element
 DataTableBodyCell.defaultProps = {
    noBorder: false,
    align: "left",
+   sx: {}
 };
 
 export default DataTableBodyCell;

src/qqq/components/widgets/tables/cells/DataTableHeadCell.tsx

@@ -44,18 +44,14 @@ function DataTableHeadCell({width, children, sorted, align, tooltip, ...rest}: P
 
    return (
       <Box
-         component="th"
+         component="div"
          width={width}
          py={1.5}
          px={1.5}
          sx={({palette: {light}, borders: {borderWidth}}: Theme) => ({
             borderBottom: `${borderWidth[1]} solid ${colors.grayLines.main}`,
-            "&:nth-of-type(1)": {
+            position: "sticky", top: 0, background: "white",
-               paddingLeft: "1rem"
+            zIndex: 1 // so if body rows scroll behind it, they don't show through
-            },
-            "&:last-child": {
-               paddingRight: "1rem"
-            },
          })}
       >
          <Box

src/qqq/models/fields/FieldPossibleValueProps.ts

@@ -0,0 +1,38 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import {QPossibleValue} from "@kingsrook/qqq-frontend-core/lib/model/QPossibleValue";
+
+/*******************************************************************************
+ ** Properties attached to a (formik?) form field, to denote how it behaves as
+ ** as related to a possible value source.
+ *******************************************************************************/
+export interface FieldPossibleValueProps
+{
+   isPossibleValue?: boolean;
+   possibleValues?: QPossibleValue[];
+   initialDisplayValue: string | null;
+   fieldName?: string;
+   tableName?: string;
+   processName?: string;
+   possibleValueSourceName?: string;
+}
+

src/qqq/models/fields/FieldRules.ts

@@ -29,6 +29,7 @@ export interface FieldRule
    sourceField: string;
    action: FieldRuleAction;
    targetField: string;
+   targetWidget: string;
 }
 
 
@@ -46,5 +47,6 @@ export enum FieldRuleTrigger
  *******************************************************************************/
 export enum FieldRuleAction
 {
-   CLEAR_TARGET_FIELD = "CLEAR_TARGET_FIELD"
+   CLEAR_TARGET_FIELD = "CLEAR_TARGET_FIELD",
+   RELOAD_WIDGET = "RELOAD_WIDGET"
 }

src/qqq/pages/processes/ProcessRun.tsx

@@ -29,10 +29,12 @@ import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstan
 import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData";
 import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
 import {QTableSection} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableSection";
+import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
 import {QJobComplete} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobComplete";
 import {QJobError} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobError";
 import {QJobRunning} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobRunning";
 import {QJobStarted} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobStarted";
+import {QPossibleValue} from "@kingsrook/qqq-frontend-core/lib/model/QPossibleValue";
 import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
 import {QQueryFilter} from "@kingsrook/qqq-frontend-core/lib/model/query/QQueryFilter";
 import {Alert, Button, CircularProgress, Icon, TablePagination} from "@mui/material";
@@ -42,23 +44,30 @@ import Grid from "@mui/material/Grid";
 import Step from "@mui/material/Step";
 import StepLabel from "@mui/material/StepLabel";
 import Stepper from "@mui/material/Stepper";
+import {Theme} from "@mui/material/styles";
 import Typography from "@mui/material/Typography";
 import {DataGridPro, GridColDef} from "@mui/x-data-grid-pro";
 import FormData from "form-data";
 import {Form, Formik} from "formik";
 import parse from "html-react-parser";
 import QContext from "QContext";
+import colors from "qqq/assets/theme/base/colors";
 import {QCancelButton, QSubmitButton} from "qqq/components/buttons/DefaultButtons";
 import QDynamicForm from "qqq/components/forms/DynamicForm";
 import DynamicFormUtils from "qqq/components/forms/DynamicFormUtils";
 import MDButton from "qqq/components/legacy/MDButton";
 import MDProgress from "qqq/components/legacy/MDProgress";
 import MDTypography from "qqq/components/legacy/MDTypography";
+import HelpContent, {hasHelpContent} from "qqq/components/misc/HelpContent";
 import QRecordSidebar from "qqq/components/misc/RecordSidebar";
 import {GoogleDriveFolderPickerWrapper} from "qqq/components/processes/GoogleDriveFolderPickerWrapper";
 import ProcessSummaryResults from "qqq/components/processes/ProcessSummaryResults";
 import ValidationReview from "qqq/components/processes/ValidationReview";
+import {BlockData} from "qqq/components/widgets/blocks/BlockModels";
+import CompositeWidget, {CompositeData} from "qqq/components/widgets/CompositeWidget";
+import DashboardWidgets from "qqq/components/widgets/DashboardWidgets";
 import BaseLayout from "qqq/layouts/BaseLayout";
+import ProcessWidgetBlockUtils from "qqq/pages/processes/ProcessWidgetBlockUtils";
 import {TABLE_VARIANT_LOCAL_STORAGE_KEY_ROOT} from "qqq/pages/records/query/RecordQuery";
 import Client from "qqq/utils/qqq/Client";
 import TableUtils from "qqq/utils/qqq/TableUtils";
@@ -86,6 +95,20 @@ const INITIAL_RETRY_MILLIS = 1_500;
 const RETRY_MAX_MILLIS = 12_000;
 const BACKOFF_AMOUNT = 1.5;
 
+///////////////////////////////////////////////////////////////////////////////
+// define some functions that we can make referene to, which we'll overwrite //
+// with functions from formik, once we're inside formik.                     //
+///////////////////////////////////////////////////////////////////////////////
+let formikSetFieldValueFunction = (field: string, value: any, shouldValidate?: boolean): void =>
+{
+};
+
+let formikSetTouched = ({}: any, touched: boolean): void =>
+{
+};
+
+const cachedPossibleValueLabels: { [fieldName: string]: { [id: string | number]: string } } = {};
+
 function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, isReport, recordIds, closeModalHandler, forceReInit, overrideLabel}: Props): JSX.Element
 {
    const processNameParam = useParams().processName;
@@ -107,6 +130,7 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
    const [activeStepIndex, setActiveStepIndex] = useState(0);
    const [activeStep, setActiveStep] = useState(null as QFrontendStepMetaData);
    const [newStep, setNewStep] = useState(null);
+   const [stepInstanceCounter, setStepInstanceCounter] = useState(0);
    const [steps, setSteps] = useState([] as QFrontendStepMetaData[]);
    const [needInitialLoad, setNeedInitialLoad] = useState(true);
    const [lastForcedReInit, setLastForcedReInit] = useState(null as number);
@@ -123,8 +147,11 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
    );
    const [showErrorDetail, setShowErrorDetail] = useState(false);
    const [showFullHelpText, setShowFullHelpText] = useState(false);
+   const [previouslySeenUpdatedFieldMetaDataMap, setPreviouslySeenUpdatedFieldMetaDataMap] = useState(new Map<string, QFieldMetaData>);
 
-   const {pageHeader, recordAnalytics, setPageHeader} = useContext(QContext);
+   const [renderedWidgets, setRenderedWidgets] = useState({} as { [step: string]: { [widgetName: string]: any } });
+
+   const {pageHeader, recordAnalytics, setPageHeader, helpHelpActive} = useContext(QContext);
 
    //////////////////////////////////////////////////////////////////////////////////////////////////////////////
    // for setting the processError state - call this function, which will also set the isUserFacingError state //
@@ -140,8 +167,30 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
    /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    const [overrideOnLastStep, setOverrideOnLastStep] = useState(null as boolean);
 
-   const onLastStep = activeStepIndex === steps.length - 2;
+   /////////////////////////////////////////////////////////////////////////////////////
-   const noMoreSteps = activeStepIndex === steps.length - 1;
+   // determine if we're on the last-step or not (e.g., to decide "Submit" vs "Next") //
+   /////////////////////////////////////////////////////////////////////////////////////
+   let onLastStep = false;
+   if (processMetaData?.stepFlow == "LINEAR" && activeStepIndex === steps.length - 2)
+   {
+      onLastStep = true;
+   }
+
+   ////////////////////////////////////////////
+   // determine if any 'next' button appears //
+   ////////////////////////////////////////////
+   let noMoreSteps = false;
+   if (processMetaData?.stepFlow == "LINEAR" && activeStepIndex === steps.length - 1)
+   {
+      noMoreSteps = true;
+   }
+   if(processValues["noMoreSteps"])
+   {
+      //////////////////////////////////////////////////////////////////
+      // this, to allow a non-linear process to request this behavior //
+      //////////////////////////////////////////////////////////////////
+      noMoreSteps = true;
+   }
 
    ////////////////
    // form state //
@@ -226,15 +275,15 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
       setShowFullHelpText(!showFullHelpText);
    };
 
-   const download = (processValues: {[key: string]: string}) =>
+   const download = (processValues: { [key: string]: string }) =>
    {
       let url;
       let fileName = processValues.downloadFileName;
-      if(processValues.serverFilePath)
+      if (processValues.serverFilePath)
       {
          url = `/download/${encodeURIComponent(processValues.downloadFileName)}?filePath=${encodeURIComponent(processValues.serverFilePath)}`;
       }
-      else if(processValues.storageTableName && processValues.storageReference)
+      else if (processValues.storageTableName && processValues.storageReference)
       {
          url = `/download/${encodeURIComponent(processValues.downloadFileName)}?storageTableName=${encodeURIComponent(processValues.storageTableName)}&storageReference=${encodeURIComponent(processValues.storageReference)}`;
       }
@@ -273,6 +322,105 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
       };
    };
 
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function renderWidget(widgetName: string)
+   {
+      if (!renderedWidgets[activeStep.name])
+      {
+         renderedWidgets[activeStep.name] = {};
+         setRenderedWidgets(renderedWidgets);
+      }
+
+      if (renderedWidgets[activeStep.name][widgetName])
+      {
+         return renderedWidgets[activeStep.name][widgetName];
+      }
+
+      const widgetMetaData = qInstance.widgets.get(widgetName);
+      if (!widgetMetaData)
+      {
+         return (<Alert color="error">Unrecognized widget name: {widgetName}</Alert>);
+      }
+
+      const queryStringParts: string[] = [];
+      for (let name in processValues)
+      {
+         queryStringParts.push(`${name}=${encodeURIComponent(processValues[name])}`);
+      }
+
+      const renderedWidget = (<Box m={-2}>
+         <DashboardWidgets widgetMetaDataList={[widgetMetaData]} omitWrappingGridContainer={true} childUrlParams={queryStringParts.join("&")} />
+      </Box>);
+      renderedWidgets[activeStep.name][widgetName] = renderedWidget;
+      return renderedWidget;
+   }
+
+
+   /***************************************************************************
+    ** callback used by widget blocks, e.g., for input-text-enter-on-submit,
+    ** and action buttons.
+    ***************************************************************************/
+   function blockWidgetActionCallback(blockData: BlockData, eventValues?: { [name: string]: any }): boolean
+   {
+      console.log(`in blockWidgetActionCallback, called by block: ${JSON.stringify(blockData)}`);
+
+      ///////////////////////////////////////////////////////////////////////////////
+      // if the eventValues included an actionCode - validate it before proceeding //
+      ///////////////////////////////////////////////////////////////////////////////
+      if (eventValues && eventValues.actionCode && !ProcessWidgetBlockUtils.isActionCodeValid(eventValues.actionCode, activeStep, processValues))
+      {
+         setFormError("Unrecognized action code: " + eventValues.actionCode);
+
+         if (eventValues["_fieldToClearIfError"])
+         {
+            /////////////////////////////////////////////////////////////////////////////
+            // if the eventValues included a _fieldToClearIfError, well, then do that. //
+            /////////////////////////////////////////////////////////////////////////////
+            formikSetFieldValueFunction(eventValues["_fieldToClearIfError"], "", false);
+         }
+
+         return (false);
+      }
+
+      //////////////////
+      // ok - submit! //
+      //////////////////
+      handleSubmit(eventValues);
+      return (true);
+   }
+
+
+   /***************************************************************************
+    ** in a memoized-fashion (YUNO useMemo?), render a component that is an
+    ** adHoc widget (e.g., composite)
+    ***************************************************************************/
+   function renderAdHocWidget(componentValues: any, componentIndex: number)
+   {
+      const key = activeStep.name + "-" + stepInstanceCounter + "-" + componentIndex;
+      if (renderedWidgets[key])
+      {
+         return renderedWidgets[key];
+      }
+
+      const widgetMetaData = new QWidgetMetaData({name: "adHoc"});
+      const compositeWidgetData = JSON.parse(JSON.stringify(componentValues)) as CompositeData;
+      compositeWidgetData.styleOverrides = {py: "0.5rem", display: "flex", flexDirection: "column", gap: "0.5rem"};
+
+      ProcessWidgetBlockUtils.dynamicEvaluationOfCompositeWidgetData(compositeWidgetData, processValues);
+
+      renderedWidgets[key] = <Box key={key} pt={2}>
+         <CompositeWidget widgetMetaData={widgetMetaData} data={compositeWidgetData} actionCallback={blockWidgetActionCallback} />
+      </Box>;
+
+      setRenderedWidgets(renderedWidgets);
+
+      return (renderedWidgets[key]);
+   }
+
+
    ////////////////////////////////////////////////////
    // generate the main form body content for a step //
    ////////////////////////////////////////////////////
@@ -319,8 +467,8 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
                </MDTypography>
                <Box component="div" py={3}>
                   <Grid container justifyContent="flex-end" spacing={3}>
-                     {isModal ? <QCancelButton onClickHandler={handleCancelClicked} disabled={false} label="Close" />
+                     {isModal ? <QCancelButton onClickHandler={() => handleCancelClicked(true)} disabled={false} label="Close" />
-                        : !isWidget && <QCancelButton onClickHandler={handleCancelClicked} disabled={false} />
+                        : !isWidget && <QCancelButton onClickHandler={() => handleCancelClicked(true)} disabled={false} />
                      }
                   </Grid>
                </Box>
@@ -331,7 +479,7 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
       if (qJobRunning || step === null)
       {
          return (
-            <Grid m={3} mt={9} container>
+            <Grid m={3} mt={9} container maxWidth="calc(100% - 3rem)">
                <Grid item xs={0} lg={3} />
                <Grid item xs={12} lg={6}>
                   <Card>
@@ -395,7 +543,20 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
             {
                if (processValues[key])
                {
-                  formFields[key].possibleValueProps.initialDisplayValue = processValues[key];
+                  /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+                  // if we have a cached possible-value label for this field name (key), then set it as the PV's initialDisplayValue //
+                  /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+                  if (cachedPossibleValueLabels[key] && cachedPossibleValueLabels[key][processValues[key]])
+                  {
+                     formFields[key].possibleValueProps.initialDisplayValue = cachedPossibleValueLabels[key][processValues[key]];
+                  }
+                  else
+                  {
+                     ////////////////////////////////////////////////////////////////////////////
+                     // else (and i don't think this should happen?) at least set something... //
+                     ////////////////////////////////////////////////////////////////////////////
+                     formFields[key].possibleValueProps.initialDisplayValue = processValues[key];
+                  }
                }
 
                formFields[key].possibleValueProps.otherValues = formFields[key].possibleValueProps.otherValues ?? new Map<string, any>();
@@ -407,6 +568,13 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
          });
       }
 
+      /////////////////////////////////////
+      // screen(step)-level help content //
+      /////////////////////////////////////
+      let helpRoles = ["PROCESS_SCREEN", "ALL_SCREENS"];
+      const showHelp = helpHelpActive || hasHelpContent(step.helpContents, helpRoles);
+      const formattedHelpContent = <HelpContent helpContents={step.helpContents} roles={helpRoles} helpContentKey={`process:${processName};step:${step?.name}`} />;
+
       return (
          <>
             {
@@ -421,6 +589,13 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
                </MDTypography>
             }
 
+            {
+               showHelp &&
+               <Box fontSize={"0.875rem"} color={colors.blueGray.main} pb={2}>
+                  {formattedHelpContent}
+               </Box>
+            }
+
             {
                //////////////////////////////////////////////////
                // render all of the components for this screen //
@@ -433,6 +608,23 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
                      helpRoles = ["EDIT_SCREEN", "WRITE_SCREENS", "ALL_SCREENS"];
                   }
 
+                  //////////////////////////////////////////////////////////////////////////
+                  // if the component specifies a sub-set of field names to include, then //
+                  // edit the formData object to just include those.                      //
+                  //////////////////////////////////////////////////////////////////////////
+                  let formDataToUse = formData;
+                  if (component.values && component.values.includeFieldNames)
+                  {
+                     formDataToUse = Object.assign({}, formData);
+
+                     formDataToUse.formFields = {};
+                     for (let i = 0; i < component.values.includeFieldNames.length; i++)
+                     {
+                        const fieldName = component.values.includeFieldNames[i];
+                        formDataToUse.formFields[fieldName] = formData.formFields[fieldName];
+                     }
+                  }
+
                   return (
                      <div key={index}>
                         {
@@ -528,9 +720,22 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
                            )
                         }
                         {
-                           component.type === QComponentType.EDIT_FORM && (
+                           component.type === QComponentType.EDIT_FORM &&
-                              <QDynamicForm formData={formData} helpRoles={helpRoles} helpContentKeyPrefix={`process:${processName};`} />
+                           <>
-                           )
+                              {
+                                 component.values?.sectionLabel ?
+                                    <Box py={1.5}>
+                                       <Card sx={{scrollMarginTop: "20px"}}>
+                                          <MDTypography variant="h5" p={3} pl={2} pb={1}>
+                                             {component.values?.sectionLabel}
+                                          </MDTypography>
+                                          <Box pt={0} p={2}>
+                                             <QDynamicForm formData={formDataToUse} helpRoles={helpRoles} helpContentKeyPrefix={`process:${processName};`} />
+                                          </Box>
+                                       </Card>
+                                    </Box> : <QDynamicForm formData={formDataToUse} helpRoles={helpRoles} helpContentKeyPrefix={`process:${processName};`} />
+                              }
+                           </>
                         }
                         {
                            component.type === QComponentType.VIEW_FORM && step.viewFields && (
@@ -653,6 +858,33 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
                               </Box>
                            )
                         }
+                        {
+                           component.type === QComponentType.WIDGET && (
+                              <>
+                                 {
+                                    ///////////////////////////////////////////////////
+                                    // if a widget name is given, render that widget //
+                                    ///////////////////////////////////////////////////
+                                    component.values?.widgetName &&
+                                    renderWidget(component.values?.widgetName)
+                                 }
+                                 {
+                                    /////////////////////////////////////////////////////////
+                                    // if the widget is marked as adHoc, render it as such //
+                                    /////////////////////////////////////////////////////////
+                                    component.values?.isAdHocWidget &&
+                                    renderAdHocWidget(component.values, index)
+                                 }
+                                 {
+                                    ////////////////////////////////////////////////
+                                    // if neither of those, then programmer error //
+                                    ////////////////////////////////////////////////
+                                    !(component.values?.widgetName || component.values?.isAdHocWidget) &&
+                                    <Alert severity="error">Error:  Component is marked as WIDGET type, but does not specify a <u>widgetName</u>, nor the <u>isAdHocWidget</u> flag.</Alert>
+                                 }
+                              </>
+                           )
+                        }
                      </div>
                   );
                }))
@@ -750,6 +982,11 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
       setActiveStepIndex(newIndex);
       setOverrideOnLastStep(null);
 
+      ////////////////////////////////////////////////////////////////////////////////////////////////////
+      // reset formik touched data, so a field that's repeated doesn't immediately show a 'dirty' state //
+      ////////////////////////////////////////////////////////////////////////////////////////////////////
+      formikSetTouched({}, false);
+
       if (steps)
       {
          const activeStep = steps[newIndex];
@@ -767,6 +1004,12 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
          {
             dynamicFormFields[fieldName] = dynamicFormValue;
             initialValues[fieldName] = initialValue;
+
+            if (formikSetFieldValueFunction)
+            {
+               formikSetFieldValueFunction(fieldName, initialValue);
+            }
+
             formValidations[fieldName] = validation;
          };
 
@@ -779,7 +1022,17 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
          if (doesStepHaveComponent(activeStep, QComponentType.VALIDATION_REVIEW_SCREEN))
          {
             addField("doFullValidation", {type: "radio"}, "true", null);
-            setOverrideOnLastStep(false);
+
+            //////////////////////////////////////////////////////////////////////////////////////////////
+            // so - if we're on the validation screen, and we don't have a validationSummary right now, //
+            // and the process supports doing full validation - then the user will choose, via radio,   //
+            // if this is the last step or not - and by default that radio will be true, to make this   //
+            // NOT the last step - so set this value.                                                   //
+            //////////////////////////////////////////////////////////////////////////////////////////////
+            if(!processValues["validationSummary"] && processValues["supportsFullValidation"])
+            {
+               setOverrideOnLastStep(false);
+            }
          }
 
          if (doesStepHaveComponent(activeStep, QComponentType.GOOGLE_DRIVE_SELECT_FOLDER))
@@ -789,6 +1042,16 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
             addField("googleDriveFolderName", {type: "hidden", omitFromQDynamicForm: true}, "", null);
          }
 
+         if (doesStepHaveComponent(activeStep, QComponentType.WIDGET))
+         {
+            ProcessWidgetBlockUtils.addFieldsForCompositeWidget(activeStep, (fieldMetaData) =>
+            {
+               const dynamicField = DynamicFormUtils.getDynamicField(fieldMetaData);
+               const validation = DynamicFormUtils.getValidationForField(fieldMetaData);
+               addField(fieldMetaData.name, dynamicField, processValues[fieldMetaData.name], validation)
+            });
+         }
+
          ///////////////////////////////////////////////////
          // if this step has form fields, set up the form //
          ///////////////////////////////////////////////////
@@ -816,6 +1079,11 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
             fullFieldList.forEach((field) =>
             {
                initialValues[field.name] = processValues[field.name];
+
+               if (formikSetFieldValueFunction)
+               {
+                  formikSetFieldValueFunction(field.name, processValues[field.name]);
+               }
             });
 
             ////////////////////////////////////////////////////////////////////////////////////
@@ -869,7 +1137,7 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
             setValidationFunction(() => true);
          }
       }
-   }, [newStep]);
+   }, [newStep, stepInstanceCounter]); // maybe we could just use stepInstanceCounter...
 
    /////////////////////////////////////////////////////////////////////////////////////////////
    // if there are records to load: build a record config, and set the needRecords state flag //
@@ -915,7 +1183,7 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
             }
          });
 
-         DynamicFormUtils.addPossibleValueProps(newDynamicFormFields, fullFieldList, tableMetaData.name, null, null);
+         DynamicFormUtils.addPossibleValueProps(newDynamicFormFields, fullFieldList, tableMetaData?.name, null, null);
 
          setFormFields(newDynamicFormFields);
          setValidationScheme(Yup.object().shape(newFormValidations));
@@ -963,6 +1231,47 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
       }
    }, [needRecords]);
 
+
+   /***************************************************************************
+    **
+    ***************************************************************************/
+   function updateFieldsInProcess(steps: QFrontendStepMetaData[], updatedFields: Map<string, QFieldMetaData>)
+   {
+      if (updatedFields)
+      {
+         updatedFields.forEach((field) => previouslySeenUpdatedFieldMetaDataMap.set(field.name, field));
+         setPreviouslySeenUpdatedFieldMetaDataMap(previouslySeenUpdatedFieldMetaDataMap);
+      }
+
+      for (let step of steps)
+      {
+         if (step && step.formFields)
+         {
+            for (let i = 0; i < step.formFields.length; i++)
+            {
+               let field = step.formFields[i];
+               if (previouslySeenUpdatedFieldMetaDataMap.has(field.name))
+               {
+                  step.formFields[i] = previouslySeenUpdatedFieldMetaDataMap.get(field.name);
+               }
+            }
+         }
+      }
+
+      if (processValues.inputFieldList)
+      {
+         for (let i = 0; i < processValues.inputFieldList.length; i++)
+         {
+            let field = new QFieldMetaData(processValues.inputFieldList[i]);
+            if (previouslySeenUpdatedFieldMetaDataMap.has(field.name))
+            {
+               processValues.inputFieldList[i] = previouslySeenUpdatedFieldMetaDataMap.get(field.name); // todo - uh, not an object?
+            }
+         }
+      }
+   }
+
+
    //////////////////////////////////////////////////////////////////////////////////////////////////////////
    // handle a response from the server - e.g., after starting a backend job, or getting its status/result //
    //////////////////////////////////////////////////////////////////////////////////////////////////////////
@@ -975,16 +1284,96 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
 
          if (lastProcessResponse instanceof QJobComplete)
          {
-            const qJobComplete = lastProcessResponse as QJobComplete;
+            ///////////////////////////////////////////////////////////////////////////////////////////////
-            setJobUUID(null);
+            // run an async function here, in case we need to await looking up any possible-value labels //
-            setNewStep(qJobComplete.nextStep);
+            ///////////////////////////////////////////////////////////////////////////////////////////////
-            setProcessValues(qJobComplete.values);
+            (async () =>
-            setQJobRunning(null);
-
-            if (activeStep && activeStep.recordListFields)
             {
-               setNeedRecords(true);
+               const qJobComplete = lastProcessResponse as QJobComplete;
-            }
+               const newValues = qJobComplete.values;
+
+               /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+               // if the process step sent a new frontend-step-list, then refresh what we have in state (constructing new full model objects) //
+               /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+               let frontendSteps = steps;
+               const updatedFrontendStepList = qJobComplete.processMetaDataAdjustment?.updatedFrontendStepList;
+               if (updatedFrontendStepList)
+               {
+                  frontendSteps = updatedFrontendStepList;
+                  setSteps(frontendSteps);
+               }
+
+               ////////////////////////////////////////////////////////////////////////////////////////////////////////
+               // always merge the new updatedFields map (if there is one) with existing updates and existing fields //
+               ////////////////////////////////////////////////////////////////////////////////////////////////////////
+               updateFieldsInProcess(frontendSteps, qJobComplete.processMetaDataAdjustment?.updatedFields);
+               setSteps(frontendSteps);
+
+               ///////////////////////////////////////////////////////////////////////////////////
+               // if the next screen has any PVS fields - look up their labels (display values) //
+               ///////////////////////////////////////////////////////////////////////////////////
+               const nextStepName = qJobComplete.nextStep;
+               let nextStep: QFrontendStepMetaData | null = null;
+               if (frontendSteps && nextStepName)
+               {
+                  for (let i = 0; i < frontendSteps.length; i++)
+                  {
+                     if (frontendSteps[i].name === nextStepName)
+                     {
+                        nextStep = frontendSteps[i];
+                        break;
+                     }
+                  }
+
+                  if (nextStep && nextStep.formFields)
+                  {
+                     for (let i = 0; i < nextStep.formFields.length; i++)
+                     {
+                        const field = nextStep.formFields[i];
+                        const fieldName = field.name;
+                        if (field.possibleValueSourceName && newValues && newValues[fieldName])
+                        {
+                           const results: QPossibleValue[] = await Client.getInstance().possibleValues(null, processName, fieldName, null, [newValues[fieldName]]);
+                           if (results && results.length > 0)
+                           {
+                              if (!cachedPossibleValueLabels[fieldName])
+                              {
+                                 cachedPossibleValueLabels[fieldName] = {};
+                              }
+                              cachedPossibleValueLabels[fieldName][newValues[fieldName]] = results[0].label;
+                           }
+                        }
+                     }
+                  }
+               }
+
+               setJobUUID(null);
+               setNewStep(nextStepName);
+               setStepInstanceCounter(1 + stepInstanceCounter);
+               setProcessValues(newValues);
+               setRenderedWidgets({});
+               setQJobRunning(null);
+
+               if (formikSetFieldValueFunction)
+               {
+                  //////////////////////////////////
+                  // reset field values in formik //
+                  //////////////////////////////////
+                  for (let key in qJobComplete.values)
+                  {
+                     if (Object.hasOwn(formFields, key))
+                     {
+                        console.log(`(re)setting form field [${key}] to [${qJobComplete.values[key]}]`);
+                        formikSetFieldValueFunction(key, qJobComplete.values[key]);
+                     }
+                  }
+               }
+
+               if (activeStep && activeStep.recordListFields)
+               {
+                  setNeedRecords(true);
+               }
+            })();
          }
          else if (lastProcessResponse instanceof QJobStarted)
          {
@@ -1218,15 +1607,19 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
 
    //////////////////////////////////////////////////////////////////////////////////////////
    // handle user submitting the form - which in qqq means moving forward from any screen. //
+   // caller can pass in a map of values to be added to the form data too                  //
    //////////////////////////////////////////////////////////////////////////////////////////
-   const handleSubmit = async (values: any, actions: any) =>
+   const handleSubmit = async (values: any) =>
    {
       setFormError(null);
 
       const formData = new FormData();
       Object.keys(values).forEach((key) =>
       {
-         formData.append(key, values[key]);
+         if (values[key] !== undefined)
+         {
+            formData.append(key, values[key]);
+         }
       });
 
       if (tableVariantLocalStorageKey && localStorage.getItem(tableVariantLocalStorageKey))
@@ -1279,8 +1672,20 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
       });
    };
 
-   const handleCancelClicked = () =>
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   const handleCancelClicked = (isClose: boolean) =>
    {
+      //////////////////////////////////////////////////////////////////
+      // unless this is a 'close', then tell backend we're cancelling //
+      //////////////////////////////////////////////////////////////////
+      if (!isClose)
+      {
+         Client.getInstance().processCancel(processName, processUUID);
+      }
+
       if (isModal && closeModalHandler)
       {
          closeModalHandler(null, "cancelClicked");
@@ -1293,27 +1698,55 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
       navigate(path, {replace: true});
    };
 
-   const mainCardStyles: any = {};
+
    const formStyles: any = {};
-   mainCardStyles.minHeight = `calc(100vh - ${isModal ? 150 : 400}px)`;
+   if(isWidget)
-   if (!processError && (qJobRunning || activeStep === null) && !isModal && !isWidget)
    {
-      mainCardStyles.background = "#FFFFFF";
-      mainCardStyles.boxShadow = "none";
-   }
-   if (isWidget)
-   {
-      mainCardStyles.background = "none";
-      mainCardStyles.boxShadow = "none";
-      mainCardStyles.border = "none";
-      mainCardStyles.minHeight = "";
-      mainCardStyles.alignItems = "stretch";
-      mainCardStyles.flexGrow = 1;
-      mainCardStyles.display = "flex";
       formStyles.display = "flex";
       formStyles.flexGrow = 1;
    }
 
+
+   /***************************************************************************
+    **
+    ***************************************************************************/
+   function makeMainCardStyles(theme: Theme)
+   {
+      const mainCardStyles: any = {};
+
+      if(!isWidget && !isModal)
+      {
+         ////////////////////////////////////////////////////////////////
+         // remove margin around card for non-widget, non-modal, small //
+         ////////////////////////////////////////////////////////////////
+         mainCardStyles[theme.breakpoints.down("sm")] = {
+            marginLeft: "-1.5rem",
+            marginRight: "-1.5rem",
+            borderRadius: "0"
+         };
+      }
+
+      mainCardStyles.minHeight = `calc(100vh - ${isModal ? 150 : 400}px)`;
+      if (!processError && (qJobRunning || activeStep === null) && !isModal && !isWidget)
+      {
+         mainCardStyles.background = "#FFFFFF";
+         mainCardStyles.boxShadow = "none";
+      }
+
+      if (isWidget)
+      {
+         mainCardStyles.background = "none";
+         mainCardStyles.boxShadow = "none";
+         mainCardStyles.border = "none";
+         mainCardStyles.minHeight = "";
+         mainCardStyles.alignItems = "stretch";
+         mainCardStyles.flexGrow = 1;
+         mainCardStyles.display = "flex";
+      }
+
+      return mainCardStyles
+   }
+
    let nextButtonLabel = "Next";
    let nextButtonIcon = "arrow_forward";
    if (overrideOnLastStep !== null)
@@ -1339,98 +1772,104 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
          onSubmit={handleSubmit}
       >
          {({
-            values, errors, touched, isSubmitting, setFieldValue,
+            values, errors, touched, isSubmitting, setFieldValue, setTouched
-         }) => (
+         }) =>
-            <Form style={formStyles} id={formId} autoComplete="off">
+         {
-               <Card sx={mainCardStyles}>
+            //////////////////////////////////////////////////////////////////
-                  {
+            // once we're in the formik form, capture some of its functions //
-                     !isWidget && (
+            // over top of the default ones we created globally             //
-                        <Box mx={2} mt={-3}>
+            //////////////////////////////////////////////////////////////////
-                           <Stepper activeStep={activeStepIndex} alternativeLabel>
+            formikSetFieldValueFunction = setFieldValue;
-                              {steps.map((step) => (
+            formikSetTouched = setTouched;
-                                 <Step key={step.name}>
-                                    <StepLabel>{step.label}</StepLabel>
-                                 </Step>
-                              ))}
-                           </Stepper>
-                        </Box>
-                     )
-                  }
 
-                  <Box p={3}>
+            return (
-                     <Box pb={isWidget ? 6 : "initial"}>
+               <Form style={formStyles} id={formId} autoComplete="off">
-                        {/***************************************************************************
+                  <Card sx={makeMainCardStyles}>
-                         ** step content - e.g., the appropriate form or other screen for the step **
+                     {
-                         ***************************************************************************/}
+                        !isWidget && processMetaData?.stepFlow == "LINEAR" && (
-                        {getDynamicStepContent(
+                           <Box mx={2} mt={-3} sx={{"& .MuiStepper-horizontal": {minHeight: "5rem"}}}>
-                           activeStepIndex,
+                              <Stepper activeStep={activeStepIndex} alternativeLabel>
-                           activeStep,
+                                 {steps.map((step) => (
-                           {
+                                    <Step key={step.name}>
-                              values,
+                                       <StepLabel>{step.label}</StepLabel>
-                              touched,
+                                    </Step>
-                              formFields,
+                                 ))}
-                              errors,
+                              </Stepper>
-                           },
+                           </Box>
-                           processError,
+                        )
-                           processValues,
+                     }
-                           recordConfig,
+
-                           setFieldValue,
+                     <Box p={3}>
-                        )}
+                        <Box pb={isWidget ? 6 : "initial"}>
-                        {/********************************
+                           {/***************************************************************************
-                         ** back &| next/submit buttons **
+                            ** step content - e.g., the appropriate form or other screen for the step **
-                         ********************************/}
+                            ***************************************************************************/}
-                        <Box mt={6} width="100%" display="flex" justifyContent="space-between" position={isWidget ? "absolute" : "initial"} bottom={isWidget ? "3rem" : "initial"} right={isWidget ? "1.5rem" : "initial"}>
+                           {getDynamicStepContent(
-                           {true || activeStepIndex === 0 ? (
+                              activeStepIndex,
-                              <Box />
+                              activeStep,
-                           ) : (
+                              {
-                              <MDButton variant="gradient" color="light" onClick={handleBack}>back</MDButton>
+                                 values,
-                           )}
+                                 touched,
-                           {processError || qJobRunning || !activeStep ? (
+                                 formFields,
-                              <Box />
+                                 errors,
-                           ) : (
+                              },
-                              <>
+                              processError,
-                                 {formError && (
+                              processValues,
-                                    <MDTypography component="div" variant="caption" color="error" fontWeight="regular" align="right" fullWidth>
+                              recordConfig,
-                                       {formError}
+                              setFieldValue,
-                                    </MDTypography>
-                                 )}
-                                 {
-                                    noMoreSteps && <QCancelButton
-                                       onClickHandler={handleCancelClicked}
-                                       label={isModal ? "Close" : "Return"}
-                                       iconName={isModal ? "cancel" : "arrow_back"}
-                                       disabled={isSubmitting} />
-                                 }
-                                 {
-                                    !noMoreSteps && (
-                                       <Box component="div" py={3}>
-                                          <Grid container justifyContent="flex-end" spacing={3}>
-                                             {
-                                                !isWidget && (
-                                                   <QCancelButton onClickHandler={handleCancelClicked} disabled={isSubmitting} />
-                                                )
-                                             }
-                                             <QSubmitButton label={nextButtonLabel} iconName={nextButtonIcon} disabled={isSubmitting} />
-                                          </Grid>
-                                       </Box>
-                                    )
-                                 }
-                              </>
                            )}
+                           {/********************************
+                            ** back &| next/submit buttons **
+                            ********************************/}
+                           <Box mt={3} width="100%" display="flex" justifyContent="space-between" position={isWidget ? "absolute" : "initial"} bottom={isWidget ? "3rem" : "initial"} right={isWidget ? "1.5rem" : "initial"}>
+                              {true || activeStepIndex === 0 ? (
+                                 <Box />
+                              ) : (
+                                 <MDButton variant="gradient" color="light" onClick={handleBack}>back</MDButton>
+                              )}
+                              {processError || qJobRunning || !activeStep ? (
+                                 <Box />
+                              ) : (
+                                 <>
+                                    {
+                                       noMoreSteps && <QCancelButton
+                                          onClickHandler={() => handleCancelClicked(true)}
+                                          label={isModal ? "Close" : "Return"}
+                                          iconName={isModal ? "cancel" : "arrow_back"}
+                                          disabled={isSubmitting} />
+                                    }
+                                    {
+                                       !noMoreSteps && (
+                                          <Box component="div" py={3}>
+                                             <Grid container justifyContent="flex-end" spacing={3}>
+                                                {
+                                                   !isWidget && (
+                                                      <QCancelButton onClickHandler={() => handleCancelClicked(false)} disabled={isSubmitting} />
+                                                   )
+                                                }
+                                                <QSubmitButton label={nextButtonLabel} iconName={nextButtonIcon} disabled={isSubmitting} />
+                                             </Grid>
+                                          </Box>
+                                       )
+                                    }
+                                 </>
+                              )}
+                           </Box>
                         </Box>
                      </Box>
-                  </Box>
+                  </Card>
-               </Card>
+               </Form>
-            </Form>
+            );
-         )}
+         }}
       </Formik>
    );
 
    const body = (
-      <Box py={3} mb={20}>
+      <Box py={3} mb={20} className="processRun">
-         <Grid container justifyContent="center" alignItems="center" sx={{height: "100%", mt: 8}}>
+         <Grid container justifyContent="center" alignItems="center" mt={{xs: 0, md: 6}} sx={{height: "100%"}}>
             <Grid item xs={12} lg={10} xl={8}>
                {form}
+               {formError && <Alert severity="error" onClose={() => setFormError(null)} sx={{position: "fixed", top: "40px", left: "10vw", width: "calc(80vw)", zIndex: "99999"}}>{formError}</Alert>}
             </Grid>
          </Grid>
       </Box>

src/qqq/pages/processes/ProcessWidgetBlockUtils.tsx

@@ -0,0 +1,225 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import {QComponentType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QComponentType";
+import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
+import {QFrontendStepMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFrontendStepMetaData";
+import {CompositeData} from "qqq/components/widgets/CompositeWidget";
+
+/*******************************************************************************
+ ** Utility functions used by ProcessRun for working with ad-hoc, block &
+ ** composite type widgets.
+ **
+ *******************************************************************************/
+export default class ProcessWidgetBlockUtils
+{
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public static isActionCodeValid(actionCode: string, step: QFrontendStepMetaData, processValues: any): boolean
+   {
+      ///////////////////////////////////////////////////////////
+      // private recursive function to walk the composite tree //
+      ///////////////////////////////////////////////////////////
+      function recursiveIsActionCodeValidForCompositeData(compositeWidgetData: CompositeData): boolean
+      {
+         for (let i = 0; i < compositeWidgetData.blocks.length; i++)
+         {
+            const block = compositeWidgetData.blocks[i];
+
+            ////////////////////////////////////////////////////////////////
+            // skip the block if it has a 'conditional', which isn't true //
+            ////////////////////////////////////////////////////////////////
+            const conditionalFieldName = block.conditional;
+            if (conditionalFieldName)
+            {
+               const value = processValues[conditionalFieldName];
+               if (!value)
+               {
+                  continue;
+               }
+            }
+
+            if (block.blockTypeName == "COMPOSITE")
+            {
+               ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
+               // recursive call for composites, but only return if a true is found (in case a subsequent block has a true) //
+               ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
+               const isValidForThisBlock = recursiveIsActionCodeValidForCompositeData(block as unknown as CompositeData);
+               if (isValidForThisBlock)
+               {
+                  return (true);
+               }
+               // else, continue...
+            }
+            else if (block.blockTypeName == "ACTION_BUTTON")
+            {
+               //////////////////////////////////////////////////////////
+               // actually look at actionCodes on action button blocks //
+               //////////////////////////////////////////////////////////
+               if (block.values?.actionCode == actionCode)
+               {
+                  return (true);
+               }
+            }
+         }
+
+         /////////////////////////////////////////
+         // if code wasn't found, it is invalid //
+         /////////////////////////////////////////
+         return false;
+      }
+
+      /////////////////////////////////////////////////////
+      // iterate over all components in the current step //
+      /////////////////////////////////////////////////////
+      for (let i = 0; i < step.components.length; i++)
+      {
+         const component = step.components[i];
+         if (component.type == "WIDGET" && component.values?.isAdHocWidget)
+         {
+            ///////////////////////////////////////////////////////////////////////////////////////////////
+            // for ad-hoc widget components, check if this actionCode exists on any action-button blocks //
+            ///////////////////////////////////////////////////////////////////////////////////////////////
+            const isValidForThisWidget = recursiveIsActionCodeValidForCompositeData(component.values);
+            if (isValidForThisWidget)
+            {
+               return (true);
+            }
+         }
+      }
+
+      ////////////////////////////////////
+      // upon fallthrough, it's a false //
+      ////////////////////////////////////
+      return false;
+   }
+
+
+   /***************************************************************************
+    ** perform evaluations on a compositeWidget's data, given current process
+    ** values, to do dynamic stuff, like:
+    ** - removing fields with un-true conditions
+    ***************************************************************************/
+   public static dynamicEvaluationOfCompositeWidgetData(compositeWidgetData: CompositeData, processValues: any)
+   {
+      for (let i = 0; i < compositeWidgetData.blocks.length; i++)
+      {
+         const block = compositeWidgetData.blocks[i];
+
+         ////////////////////////////////////////////////////////////////////
+         // if the block has a conditional, evaluate, and remove if untrue //
+         ////////////////////////////////////////////////////////////////////
+         const conditionalFieldName = block.conditional;
+         if (conditionalFieldName)
+         {
+            const value = processValues[conditionalFieldName];
+            if (!value)
+            {
+               console.debug(`Splicing away block based on [${conditionalFieldName}]...`);
+               compositeWidgetData.blocks.splice(i, 1);
+               i--;
+               continue;
+            }
+         }
+
+         if (block.blockTypeName == "COMPOSITE")
+         {
+            /////////////////////////////////////////
+            // make recursive calls for composites //
+            /////////////////////////////////////////
+            ProcessWidgetBlockUtils.dynamicEvaluationOfCompositeWidgetData(block as unknown as CompositeData, processValues);
+         }
+         else if (block.blockTypeName == "INPUT_FIELD")
+         {
+            /////////////////////////////////////////////////////////////////////////////////////////////////////////////
+            // for input fields, put the process's value for the field-name into the block's values object as '.value' //
+            /////////////////////////////////////////////////////////////////////////////////////////////////////////////
+            const fieldName = block.values?.fieldMetaData?.name;
+            if (processValues.hasOwnProperty(fieldName))
+            {
+               block.values.value = processValues[fieldName];
+            }
+         }
+         else if (block.blockTypeName == "TEXT")
+         {
+            //////////////////////////////////////////////////////////////////////////////////////
+            // for text-blocks - interpolate ${fieldName} expressions into their process-values //
+            //////////////////////////////////////////////////////////////////////////////////////
+            let text = block.values?.text;
+            if (text)
+            {
+               for (let key of Object.keys(processValues))
+               {
+                  text = text.replaceAll("${" + key + "}", processValues[key]);
+               }
+               block.values.interpolatedText = text;
+            }
+         }
+      }
+   }
+
+
+   /***************************************************************************
+    **
+    ***************************************************************************/
+   public static addFieldsForCompositeWidget(step: QFrontendStepMetaData, addFieldCallback: (fieldMetaData: QFieldMetaData) => void)
+   {
+      ///////////////////////////////////////////////////////////
+      // private recursive function to walk the composite tree //
+      ///////////////////////////////////////////////////////////
+      function recursiveHelper(widgetData: CompositeData)
+      {
+         try
+         {
+            for (let block of widgetData.blocks)
+            {
+               if (block.blockTypeName == "COMPOSITE")
+               {
+                  recursiveHelper(block as unknown as CompositeData);
+               }
+               else if (block.blockTypeName == "INPUT_FIELD")
+               {
+                  const fieldMetaData = new QFieldMetaData(block.values?.fieldMetaData);
+                  addFieldCallback(fieldMetaData)
+               }
+            }
+         }
+         catch (e)
+         {
+            console.log("Error adding fields for compositeWidget: " + e);
+         }
+      }
+
+      /////////////////////////////////////////////////////////////////////////////
+      // foreach component, if it's an adhoc widget, call recursive helper on it //
+      /////////////////////////////////////////////////////////////////////////////
+      for (let component of step.components)
+      {
+         if (component.type == QComponentType.WIDGET && component.values?.isAdHocWidget)
+         {
+            recursiveHelper(component.values as unknown as CompositeData)
+         }
+      }
+   }
+
+}

src/qqq/pages/records/query/ColumnStats.tsx

@@ -121,7 +121,7 @@ function ColumnStats({tableMetaData, fieldMetaData, fieldTableName, filter}: Pro
             }
 
             const valueCounts = [] as QRecord[];
-            for(let i = 0; i < result.values.valueCounts.length; i++)
+            for(let i = 0; i < result.values.valueCounts?.length; i++)
             {
                let valueRecord = new QRecord(result.values.valueCounts[i]);
 

src/qqq/pages/records/query/GridFilterOperators.tsx

@@ -779,13 +779,12 @@ function InputPossibleValueSourceSingle(tableName: string, field: QFieldMetaData
          }}
       >
          <DynamicSelect
-            tableName={tableName}
+            fieldPossibleValueProps={{tableName: tableName, fieldName: field.name, initialDisplayValue: selectedPossibleValue?.label}}
-            fieldName={field.name}
             fieldLabel="Value"
             initialValue={selectedPossibleValue?.id}
-            initialDisplayValue={selectedPossibleValue?.label}
             inForm={false}
             onChange={handleChange}
+            useCase="filter"
             // InputProps={applying ? {endAdornment: <Icon>sync</Icon>} : {}}
          />
       </Box>
@@ -847,13 +846,12 @@ function InputPossibleValueSourceMultiple(tableName: string, field: QFieldMetaDa
          }}
       >
          <DynamicSelect
-            tableName={tableName}
+            fieldPossibleValueProps={{tableName: tableName, fieldName: field.name, initialDisplayValue: null}}
-            fieldName={field.name}
             isMultiple={true}
             fieldLabel="Value"
-            initialValues={selectedPossibleValues}
             inForm={false}
             onChange={handleChange}
+            useCase="filter"
          />
       </Box>
    );

src/qqq/pages/records/query/RecordQuery.tsx

@@ -33,8 +33,7 @@ import {QCriteriaOperator} from "@kingsrook/qqq-frontend-core/lib/model/query/QC
 import {QFilterCriteria} from "@kingsrook/qqq-frontend-core/lib/model/query/QFilterCriteria";
 import {QFilterOrderBy} from "@kingsrook/qqq-frontend-core/lib/model/query/QFilterOrderBy";
 import {QQueryFilter} from "@kingsrook/qqq-frontend-core/lib/model/query/QQueryFilter";
-import {Alert, Collapse, Menu, Typography} from "@mui/material";
+import {Alert, Box, Collapse, Menu, Typography} from "@mui/material";
-import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import Card from "@mui/material/Card";
 import Divider from "@mui/material/Divider";
@@ -92,8 +91,10 @@ interface Props
    launchProcess?: QProcessMetaData;
    usage?: QueryScreenUsage;
    isModal?: boolean;
+   isPreview?: boolean;
    initialQueryFilter?: QQueryFilter;
    initialColumns?: QQueryColumns;
+   allowVariables?: boolean;
 }
 
 ///////////////////////////////////////////////////////
@@ -109,7 +110,7 @@ const qController = Client.getInstance();
  *******************************************************************************/
 const getLoadingScreen = (isModal: boolean) =>
 {
-   if(isModal)
+   if (isModal)
    {
       return (<Box>&nbsp;</Box>);
    }
@@ -125,7 +126,7 @@ const getLoadingScreen = (isModal: boolean) =>
  **
  ** Yuge component.  The best.  Lots of very smart people are saying so.
  *******************************************************************************/
-const RecordQuery = forwardRef(({table, usage, isModal, initialQueryFilter, initialColumns}: Props, ref) =>
+const RecordQuery = forwardRef(({table, usage, isModal, isPreview, allowVariables, initialQueryFilter, initialColumns}: Props, ref) =>
 {
    const tableName = table.name;
    const [searchParams] = useSearchParams();
@@ -151,7 +152,7 @@ const RecordQuery = forwardRef(({table, usage, isModal, initialQueryFilter, init
     *******************************************************************************/
    function localStorageSet(key: string, value: string)
    {
-      if(mayWriteLocalStorage)
+      if (mayWriteLocalStorage)
       {
          localStorage.setItem(key, value);
       }
@@ -163,7 +164,7 @@ const RecordQuery = forwardRef(({table, usage, isModal, initialQueryFilter, init
     *******************************************************************************/
    function localStorageRemove(key: string)
    {
-      if(mayWriteLocalStorage)
+      if (mayWriteLocalStorage)
       {
          localStorage.removeItem(key);
       }
@@ -176,7 +177,7 @@ const RecordQuery = forwardRef(({table, usage, isModal, initialQueryFilter, init
          {
             return view;
          }
-      }
+      };
    });
 
    ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
@@ -256,7 +257,7 @@ const RecordQuery = forwardRef(({table, usage, isModal, initialQueryFilter, init
       defaultView.mode = defaultMode;
    }
 
-   if(firstRender)
+   if (firstRender)
    {
       /////////////////////////////////////////////////////////////////////////
       // allow a caller to send in an initial filter & set of columns.       //
@@ -408,7 +409,7 @@ const RecordQuery = forwardRef(({table, usage, isModal, initialQueryFilter, init
    //////////////////////////////////////////////////////////////////
    // we use our own header - so clear out the context page header //
    //////////////////////////////////////////////////////////////////
-   if(!isModal)
+   if (!isModal)
    {
       setPageHeader(null);
    }
@@ -486,7 +487,6 @@ const RecordQuery = forwardRef(({table, usage, isModal, initialQueryFilter, init
    };
 
 
-
    /*******************************************************************************
     **
     *******************************************************************************/
@@ -631,7 +631,7 @@ const RecordQuery = forwardRef(({table, usage, isModal, initialQueryFilter, init
          const type = (e.target as any).type;
          const validType = (type !== "text" && type !== "textarea" && type !== "input" && type !== "search");
 
-         if (validType && !dotMenuOpen && !keyboardHelpOpen && !activeModalProcess)
+         if (validType && !isModal && !dotMenuOpen && !keyboardHelpOpen && !activeModalProcess)
          {
             if (!e.metaKey && !e.ctrlKey && e.key === "n" && table.capabilities.has(Capability.TABLE_INSERT) && table.insertPermission)
             {
@@ -669,7 +669,7 @@ const RecordQuery = forwardRef(({table, usage, isModal, initialQueryFilter, init
       {
          document.removeEventListener("keydown", down);
       };
-   }, [dotMenuOpen, keyboardHelpOpen, metaData, activeModalProcess]);
+   }, [isModal, dotMenuOpen, keyboardHelpOpen, metaData, activeModalProcess]);
 
 
    /*******************************************************************************
@@ -711,7 +711,7 @@ const RecordQuery = forwardRef(({table, usage, isModal, initialQueryFilter, init
          {
             if (localStorage.getItem(currentSavedViewLocalStorageKey))
             {
-               if(usage == "queryScreen")
+               if (usage == "queryScreen")
                {
                   currentSavedViewId = Number.parseInt(localStorage.getItem(currentSavedViewLocalStorageKey));
                   navigate(`${metaData.getTablePathByName(tableName)}/savedView/${currentSavedViewId}`);
@@ -750,13 +750,13 @@ const RecordQuery = forwardRef(({table, usage, isModal, initialQueryFilter, init
          const viewForLocalStorage: RecordQueryView = JSON.parse(viewAsJSON);
          if (viewForLocalStorage?.queryFilter?.criteria?.length > 0)
          {
-            FilterUtils.stripAwayIncompleteCriteria(viewForLocalStorage.queryFilter)
+            FilterUtils.stripAwayIncompleteCriteria(viewForLocalStorage.queryFilter);
          }
          localStorageSet(viewLocalStorageKey, JSON.stringify(viewForLocalStorage));
       }
-      catch(e)
+      catch (e)
       {
-         console.log("Error storing view in local storage: " + e)
+         console.log("Error storing view in local storage: " + e);
       }
    };
 
@@ -868,7 +868,7 @@ const RecordQuery = forwardRef(({table, usage, isModal, initialQueryFilter, init
       for (let i = 0; i < queryFilter?.orderBys?.length; i++)
       {
          const fieldName = queryFilter.orderBys[i].fieldName;
-         if (fieldName.indexOf(".") > -1)
+         if (fieldName != null && fieldName.indexOf(".") > -1)
          {
             const joinTableName = fieldName.replaceAll(/\..*/g, "");
             if (!vjtToUse.has(joinTableName))
@@ -884,6 +884,18 @@ const RecordQuery = forwardRef(({table, usage, isModal, initialQueryFilter, init
    };
 
 
+   /*******************************************************************************
+    ** Opens a new query screen in a new window with the current filter
+    *******************************************************************************/
+   const openFilterInNewWindow = () =>
+   {
+      let filterForBackend = JSON.parse(JSON.stringify(view.queryFilter));
+      filterForBackend = FilterUtils.prepQueryFilterForBackend(tableMetaData, filterForBackend);
+      const url = `${metaData?.getTablePathByName(tableName)}?filter=${encodeURIComponent(JSON.stringify(filterForBackend))}`;
+      window.open(url);
+   };
+
+
    /*******************************************************************************
     ** This is the method that actually executes a query to update the data in the table.
     *******************************************************************************/
@@ -901,6 +913,26 @@ const RecordQuery = forwardRef(({table, usage, isModal, initialQueryFilter, init
          return;
       }
 
+      /////////////////////////////////////////////////////////////////////////////////////////////////
+      // if any values in the query are of type "FilterVariableExpression", display an error showing //
+      // that a backend query cannot be made because of missing values for that expression           //
+      /////////////////////////////////////////////////////////////////////////////////////////////////
+      setWarningAlert(null);
+      for (var i = 0; i < queryFilter?.criteria?.length; i++)
+      {
+         for (var j = 0; j < queryFilter?.criteria[i]?.values?.length; j++)
+         {
+            const value = queryFilter.criteria[i].values[j];
+            if (value?.type == "FilterVariableExpression")
+            {
+               setWarningAlert("Cannot perform query because of a missing value for a variable.");
+               setLoading(false);
+               setRows([]);
+               return;
+            }
+         }
+      }
+
       recordAnalytics({category: "tableEvents", action: "query", label: tableMetaData.label});
 
       console.log(`In updateTable for ${reason} ${JSON.stringify(queryFilter)}`);
@@ -939,7 +971,7 @@ const RecordQuery = forwardRef(({table, usage, isModal, initialQueryFilter, init
          console.log(`Issuing query: ${thisQueryId}`);
          if (tableMetaData.capabilities.has(Capability.TABLE_COUNT))
          {
-            if(clearOutCount)
+            if (clearOutCount)
             {
                setTotalRecords(null);
                setDistinctRecords(null);
@@ -1437,7 +1469,6 @@ const RecordQuery = forwardRef(({table, usage, isModal, initialQueryFilter, init
       return (selectedIds.length);
    };
 
-
    /*******************************************************************************
     ** get a query-string to put on the url to indicate what records are going into
     ** a process.
@@ -2213,12 +2244,25 @@ const RecordQuery = forwardRef(({table, usage, isModal, initialQueryFilter, init
       return (
          <GridToolbarContainer>
             <div>
-               <Button id="refresh-button" onClick={() => updateTable("refresh button")} startIcon={<Icon>refresh</Icon>} sx={{pl: "1rem", pr: "0.5rem", minWidth: "unset"}}></Button>
+               <Tooltip title="Refresh Query">
-            </div>
+                  <Button id="refresh-button" onClick={() => updateTable("refresh button")} startIcon={<Icon>refresh</Icon>} sx={{pl: "1rem", pr: "0.5rem", minWidth: "unset"}}></Button>
-            <div style={{position: "relative"}}>
+               </Tooltip>
-               {/* @ts-ignore */}
-               <GridToolbarDensitySelector nonce={undefined} />
             </div>
+            {
+               !isPreview && (
+                  <div style={{position: "relative"}}>
+                     {/* @ts-ignore */}
+                     <GridToolbarDensitySelector nonce={undefined} />
+                  </div>
+               )
+            }
+            {
+               isPreview && (
+                  <Tooltip title="Open In New Window">
+                     <Button id="open-filter-in-new-window-button" onClick={() => openFilterInNewWindow()} startIcon={<Icon>launch</Icon>} sx={{pl: "1rem", pr: "0.5rem", minWidth: "unset"}}></Button>
+                  </Tooltip>
+               )
+            }
 
             {
                usage == "queryScreen" &&
@@ -2527,7 +2571,7 @@ const RecordQuery = forwardRef(({table, usage, isModal, initialQueryFilter, init
             {
                const currentSavedViewId = Number.parseInt(localStorage.getItem(currentSavedViewLocalStorageKey));
                console.log(`returning to previously active saved view ${currentSavedViewId}`);
-               if(usage == "queryScreen")
+               if (usage == "queryScreen")
                {
                   navigate(`${metaData.getTablePathByName(tableName)}/savedView/${currentSavedViewId}`);
                }
@@ -2770,7 +2814,7 @@ const RecordQuery = forwardRef(({table, usage, isModal, initialQueryFilter, init
       spaceAboveGrid += 60;
    }
 
-   if(isModal)
+   if (isModal)
    {
       spaceAboveGrid += 130;
    }
@@ -2853,7 +2897,7 @@ const RecordQuery = forwardRef(({table, usage, isModal, initialQueryFilter, init
                }
 
                {
-                  metaData && tableMetaData &&
+                  !isPreview && metaData && tableMetaData &&
                   <BasicAndAdvancedQueryControls
                      ref={basicAndAdvancedQueryControlsRef}
                      metaData={metaData}
@@ -2866,6 +2910,7 @@ const RecordQuery = forwardRef(({table, usage, isModal, initialQueryFilter, init
                      gridApiRef={gridApiRef}
                      mode={mode}
                      queryScreenUsage={usage}
+                     allowVariables={allowVariables}
                      setMode={doSetMode}
                      savedViewsComponent={savedViewsComponent}
                      columnMenuComponent={buildColumnMenu()}
@@ -2890,9 +2935,11 @@ const RecordQuery = forwardRef(({table, usage, isModal, initialQueryFilter, init
                            filterPanel:
                               {
                                  tableMetaData: tableMetaData,
+                                 queryScreenUsage: usage,
                                  metaData: metaData,
                                  queryFilter: queryFilter,
                                  updateFilter: doSetQueryFilter,
+                                 allowVariables: allowVariables
                               }
                         }}
                         localeText={{
@@ -2976,15 +3023,15 @@ const RecordQuery = forwardRef(({table, usage, isModal, initialQueryFilter, init
       </React.Fragment>
    );
 
-   if(isModal)
+   if (isModal)
    {
       return body;
    }
 
    return (
       <BaseLayout>{body}</BaseLayout>
-   )
+   );
-})
+});
 
 
 RecordQuery.defaultProps = {

src/qqq/pages/records/view/RecordView.tsx

@@ -21,6 +21,7 @@
 
 import {QException} from "@kingsrook/qqq-frontend-core/lib/exceptions/QException";
 import {Capability} from "@kingsrook/qqq-frontend-core/lib/model/metaData/Capability";
+import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
 import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
 import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData";
 import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
@@ -73,22 +74,94 @@ const qController = Client.getInstance();
 interface Props
 {
    table?: QTableMetaData;
+   record?: QRecord;
    launchProcess?: QProcessMetaData;
 }
 
 RecordView.defaultProps =
    {
       table: null,
+      record: null,
       launchProcess: null,
    };
 
 const TABLE_VARIANT_LOCAL_STORAGE_KEY_ROOT = "qqq.tableVariant";
 
 
+/*******************************************************************************
+ **
+ *******************************************************************************/
+export function renderSectionOfFields(key: string, fieldNames: string[], tableMetaData: QTableMetaData, helpHelpActive: boolean, record: QRecord, fieldMap?: {[name: string]: QFieldMetaData} )
+{
+   return <Box key={key} display="flex" flexDirection="column" py={1} pr={2}>
+      {
+         fieldNames.map((fieldName: string) =>
+         {
+            let [field, tableForField] = tableMetaData ? TableUtils.getFieldAndTable(tableMetaData, fieldName) : fieldMap ? [fieldMap[fieldName], null] : [null, null];
+
+            if (field != null)
+            {
+               let label = field.label;
+
+               const helpRoles = ["VIEW_SCREEN", "READ_SCREENS", "ALL_SCREENS"];
+               const showHelp = helpHelpActive || hasHelpContent(field.helpContents, helpRoles);
+               const formattedHelpContent = <HelpContent helpContents={field.helpContents} roles={helpRoles} heading={label} helpContentKey={`table:${tableMetaData?.name};field:${fieldName}`} />;
+
+               const labelElement = <Typography variant="button" textTransform="none" fontWeight="bold" pr={1} color="rgb(52, 71, 103)" sx={{cursor: "default"}}>{label}:</Typography>;
+
+               return (
+                  <Box key={fieldName} flexDirection="row" pr={2}>
+                     <>
+                        {
+                           showHelp && formattedHelpContent ? <Tooltip title={formattedHelpContent}>{labelElement}</Tooltip> : labelElement
+                        }
+                        <div style={{display: "inline-block", width: 0}}>&nbsp;</div>
+                        <Typography variant="button" textTransform="none" fontWeight="regular" color="rgb(123, 128, 154)">
+                           {ValueUtils.getDisplayValue(field, record, "view", fieldName)}
+                        </Typography>
+                     </>
+                  </Box>
+               );
+            }
+         })
+      }
+   </Box>;
+}
+
+
+/***************************************************************************
+**
+***************************************************************************/
+export function getVisibleJoinTables(tableMetaData: QTableMetaData): Set<string>
+{
+   const visibleJoinTables = new Set<string>();
+
+   for (let i = 0; i < tableMetaData?.sections.length; i++)
+   {
+      const section = tableMetaData?.sections[i];
+      if (section.isHidden || !section.fieldNames || !section.fieldNames.length)
+      {
+         continue;
+      }
+
+      section.fieldNames.forEach((fieldName) =>
+      {
+         const [field, tableForField] = TableUtils.getFieldAndTable(tableMetaData, fieldName);
+         if (tableForField && tableForField.name != tableMetaData.name)
+         {
+            visibleJoinTables.add(tableForField.name);
+         }
+      });
+   }
+
+   return (visibleJoinTables);
+}
+
+
 /*******************************************************************************
  ** Record View Screen component.
  *******************************************************************************/
-function RecordView({table, launchProcess}: Props): JSX.Element
+function RecordView({table, record: overrideRecord, launchProcess}: Props): JSX.Element
 {
    const {id} = useParams();
 
@@ -105,7 +178,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
    const [adornmentFieldsMap, setAdornmentFieldsMap] = useState(new Map<string, boolean>);
    const [deleteConfirmationOpen, setDeleteConfirmationOpen] = useState(false);
    const [metaData, setMetaData] = useState(null as QInstance);
-   const [record, setRecord] = useState(null as QRecord);
+   const [record, setRecord] = useState(overrideRecord ?? null as QRecord);
    const [tableSections, setTableSections] = useState([] as QTableSection[]);
    const [t1Section, setT1Section] = useState(null as QTableSection);
    const [t1SectionName, setT1SectionName] = useState(null as string);
@@ -130,7 +203,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
    const openActionsMenu = (event: any) => setActionsMenu(event.currentTarget);
    const closeActionsMenu = () => setActionsMenu(null);
 
-   const {accentColor, setPageHeader, tableMetaData, setTableMetaData, tableProcesses, setTableProcesses, dotMenuOpen, keyboardHelpOpen, helpHelpActive, recordAnalytics} = useContext(QContext);
+   const {accentColor, setPageHeader, tableMetaData, setTableMetaData, tableProcesses, setTableProcesses, dotMenuOpen, keyboardHelpOpen, helpHelpActive, recordAnalytics, userId: currentUserId} = useContext(QContext);
 
    if (localStorage.getItem(tableVariantLocalStorageKey))
    {
@@ -339,31 +412,6 @@ function RecordView({table, launchProcess}: Props): JSX.Element
       reload();
    }, [location.pathname, location.hash]);
 
-   const getVisibleJoinTables = (tableMetaData: QTableMetaData): Set<string> =>
-   {
-      const visibleJoinTables = new Set<string>();
-
-      for (let i = 0; i < tableMetaData?.sections.length; i++)
-      {
-         const section = tableMetaData?.sections[i];
-         if (section.isHidden || !section.fieldNames || !section.fieldNames.length)
-         {
-            continue;
-         }
-
-         section.fieldNames.forEach((fieldName) =>
-         {
-            const [field, tableForField] = TableUtils.getFieldAndTable(tableMetaData, fieldName);
-            if (tableForField && tableForField.name != tableMetaData.name)
-            {
-               visibleJoinTables.add(tableForField.name);
-            }
-         });
-      }
-
-      return (visibleJoinTables);
-   };
-
 
    /*******************************************************************************
     ** get an element (or empty) to use as help content for a section
@@ -439,7 +487,18 @@ function RecordView({table, launchProcess}: Props): JSX.Element
          let record: QRecord;
          try
          {
-            record = await qController.get(tableName, id, tableVariant, null, queryJoins);
+            ////////////////////////////////////////////////////////////////////////////
+            // if the component took in a record object, then we don't need to GET it //
+            ////////////////////////////////////////////////////////////////////////////
+            if(overrideRecord)
+            {
+               record = overrideRecord;
+            }
+            else
+            {
+               record = await qController.get(tableName, id, tableVariant, null, queryJoins);
+            }
+
             setRecord(record);
             recordAnalytics({category: "tableEvents", action: "view", label: tableMetaData?.label + " / " + record?.recordLabel});
          }
@@ -476,7 +535,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
 
          setPageHeader(record.recordLabel);
 
-         if (!launchingProcess)
+         if (!launchingProcess && !activeModalProcess)
          {
             try
             {
@@ -528,40 +587,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
                // for a section with field names, render the field values.                                               //
                // for the T1 section, the "wrapper" will come out below - but for other sections, produce a wrapper too. //
                ////////////////////////////////////////////////////////////////////////////////////////////////////////////
-               const fields = (
+               const fields = renderSectionOfFields(section.name, section.fieldNames, tableMetaData, helpHelpActive, record);
-                  <Box key={section.name} display="flex" flexDirection="column" py={1} pr={2}>
-                     {
-                        section.fieldNames.map((fieldName: string) =>
-                        {
-                           let [field, tableForField] = TableUtils.getFieldAndTable(tableMetaData, fieldName);
-                           if (field != null)
-                           {
-                              let label = field.label;
-
-                              const helpRoles = ["VIEW_SCREEN", "READ_SCREENS", "ALL_SCREENS"];
-                              const showHelp = helpHelpActive || hasHelpContent(field.helpContents, helpRoles);
-                              const formattedHelpContent = <HelpContent helpContents={field.helpContents} roles={helpRoles} heading={label} helpContentKey={`table:${tableName};field:${fieldName}`} />;
-
-                              const labelElement = <Typography variant="button" textTransform="none" fontWeight="bold" pr={1} color="rgb(52, 71, 103)" sx={{cursor: "default"}}>{label}:</Typography>;
-
-                              return (
-                                 <Box key={fieldName} flexDirection="row" pr={2}>
-                                    <>
-                                       {
-                                          showHelp && formattedHelpContent ? <Tooltip title={formattedHelpContent}>{labelElement}</Tooltip> : labelElement
-                                       }
-                                       <div style={{display: "inline-block", width: 0}}>&nbsp;</div>
-                                       <Typography variant="button" textTransform="none" fontWeight="regular" color="rgb(123, 128, 154)">
-                                          {ValueUtils.getDisplayValue(field, record, "view", fieldName)}
-                                       </Typography>
-                                    </>
-                                 </Box>
-                              );
-                           }
-                        })
-                     }
-                  </Box>
-               );
 
                if (section.tier === "T1")
                {
@@ -796,13 +822,37 @@ function RecordView({table, launchProcess}: Props): JSX.Element
     *******************************************************************************/
    const renderShareButton = () =>
    {
-      if (tableMetaData && (tableMetaData.name == "savedReport" || tableMetaData.name == "savedView")) // todo - not just based on name
+      if (tableMetaData && tableMetaData.shareableTableMetaData)
       {
-         const shareDisabled = false; // todo - only share if you're the owner?  or do that in the modal?
+         let shareDisabled = true;
-         return (<Box width={standardWidth} mr={3}>
+         let disabledTooltipText = "";
-            <MDButton id="shareButton" type="button" color="info" size="small" onClick={() => openShareModal()} fullWidth startIcon={<Icon>share</Icon>} disabled={shareDisabled}>
+         if(tableMetaData.shareableTableMetaData.thisTableOwnerIdFieldName && record)
-               Share
+         {
-            </MDButton>
+            const ownerId = record.values.get(tableMetaData.shareableTableMetaData.thisTableOwnerIdFieldName);
+            if(ownerId != currentUserId)
+            {
+               disabledTooltipText = `Only the owner of a ${tableMetaData.label} may share it.`
+               shareDisabled = true;
+            }
+            else
+            {
+               disabledTooltipText = "";
+               shareDisabled = false;
+            }
+         }
+         else
+         {
+            shareDisabled = false;
+         }
+
+         return (<Box width={standardWidth} mr={2}>
+            <Tooltip title={disabledTooltipText}>
+               <span>
+                  <MDButton id="shareButton" type="button" color="info" size="small" onClick={() => openShareModal()} fullWidth startIcon={<Icon>group_add</Icon>} disabled={shareDisabled}>
+                     Share
+                  </MDButton>
+               </span>
+            </Tooltip>
          </Box>);
       }
 
@@ -1031,7 +1081,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
 
                               {
                                  showEditChildForm &&
-                                 <Modal open={showEditChildForm as boolean} onClose={(event, reason) => closeEditChildForm(event, reason)}>
+                                 <Modal open={showEditChildForm !== null} onClose={(event, reason) => closeEditChildForm(event, reason)}>
                                     <div className="modalEditForm">
                                        <EntityForm
                                           isModal={true}

src/qqq/pages/records/view/RecordViewByUniqueKey.tsx

@@ -0,0 +1,163 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+
+import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
+import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
+import {QCriteriaOperator} from "@kingsrook/qqq-frontend-core/lib/model/query/QCriteriaOperator";
+import {QFilterCriteria} from "@kingsrook/qqq-frontend-core/lib/model/query/QFilterCriteria";
+import {QQueryFilter} from "@kingsrook/qqq-frontend-core/lib/model/query/QQueryFilter";
+import {QueryJoin} from "@kingsrook/qqq-frontend-core/lib/model/query/QueryJoin";
+import {Alert, Box} from "@mui/material";
+import Grid from "@mui/material/Grid";
+import BaseLayout from "qqq/layouts/BaseLayout";
+import RecordView, {getVisibleJoinTables} from "qqq/pages/records/view/RecordView";
+import Client from "qqq/utils/qqq/Client";
+import TableUtils from "qqq/utils/qqq/TableUtils";
+import React, {useEffect, useState} from "react";
+import {useSearchParams} from "react-router-dom";
+
+interface RecordViewByUniqueKeyProps
+{
+   table: QTableMetaData;
+}
+
+RecordViewByUniqueKey.defaultProps = {};
+
+const qController = Client.getInstance();
+
+/***************************************************************************
+ ** Wrapper around RecordView, that reads a unique key from the query string,
+ ** looks for a record matching that key, and shows that record.
+ ***************************************************************************/
+export default function RecordViewByUniqueKey({table}: RecordViewByUniqueKeyProps): JSX.Element
+{
+   const tableName = table.name;
+
+   const [asyncLoadInited, setAsyncLoadInited] = useState(false);
+   const [tableMetaData, setTableMetaData] = useState(null as QTableMetaData);
+   const [doneLoading, setDoneLoading] = useState(false);
+   const [record, setRecord] = useState(null as QRecord);
+   const [errorMessage, setErrorMessage] = useState(null as string);
+
+   const [queryParams] = useSearchParams();
+
+   if (!asyncLoadInited)
+   {
+      setAsyncLoadInited(true);
+
+      (async () =>
+      {
+         const tableMetaData = await qController.loadTableMetaData(tableName);
+         setTableMetaData(tableMetaData);
+
+         const criteria: QFilterCriteria[] = [];
+         for (let [name, value] of queryParams.entries())
+         {
+            criteria.push(new QFilterCriteria(name, QCriteriaOperator.EQUALS, [value]));
+            if(!tableMetaData.fields.has(name))
+            {
+               setErrorMessage(`Query-string parameter [${name}] is not a defined field on the ${tableMetaData.label} table.`);
+               setDoneLoading(true);
+               return;
+            }
+         }
+
+         let queryJoins: QueryJoin[] = null;
+         const visibleJoinTables = getVisibleJoinTables(tableMetaData);
+         if (visibleJoinTables.size > 0)
+         {
+            queryJoins = TableUtils.getQueryJoins(tableMetaData, visibleJoinTables);
+         }
+
+         const filter = new QQueryFilter(criteria, null, null, "AND", 0, 2);
+         qController.query(tableName, filter, queryJoins)
+            .then((queryResult) =>
+            {
+               setDoneLoading(true);
+               if (queryResult.length == 1)
+               {
+                  setRecord(queryResult[0]);
+               }
+               else if (queryResult.length == 0)
+               {
+                  setErrorMessage(`No ${tableMetaData.label} record was found matching the given values.`);
+               }
+               else if (queryResult.length > 1)
+               {
+                  setErrorMessage(`More than one ${tableMetaData.label} record was found matching the given values.`);
+               }
+            })
+            .catch((error) =>
+            {
+               setDoneLoading(true);
+               console.log(error);
+               if (error && error.message)
+               {
+                  setErrorMessage(error.message);
+               }
+               else if (error && error.response && error.response.data && error.response.data.error)
+               {
+                  setErrorMessage(error.response.data.error);
+               }
+               else
+               {
+                  setErrorMessage("Unexpected error running query");
+               }
+            });
+      })();
+   }
+
+   useEffect(() =>
+   {
+      if (asyncLoadInited)
+      {
+         setAsyncLoadInited(false);
+         setDoneLoading(false);
+         setRecord(null);
+      }
+   }, [queryParams]);
+
+   if (!doneLoading)
+   {
+      return (<div>Loading...</div>);
+   }
+   else if (record)
+   {
+      return (<RecordView table={table} record={record} />);
+   }
+   else if (errorMessage)
+   {
+      return (<BaseLayout>
+         <Box className="recordView">
+            <Grid container>
+               <Grid item xs={12}>
+                  <Box mb={3}>
+                     {
+                        <Alert color="error" sx={{mb: 3}}>{errorMessage}</Alert>
+                     }
+                  </Box>
+               </Grid>
+            </Grid>
+         </Box>
+      </BaseLayout>);
+   }
+}

src/qqq/styles/qqq-override-styles.css

@@ -421,6 +421,14 @@ input[type="search"]::-webkit-search-results-decoration
    font-size: 2rem !important;
 }
 
+.dashboard-table-actions-icon
+{
+   font-size: 1.5rem !important;
+   position: relative;
+   top: -5px;
+   margin-right: 8px;
+}
+
 .dashboard-schedule-icon
 {
    font-size: 1.1rem !important;
@@ -653,6 +661,11 @@ input[type="search"]::-webkit-search-results-decoration
    min-height: unset !important;
 }
 
+.MuiDataGrid-columnHeaders
+{
+   scrollbar-gutter: stable;
+}
+
 /* new style for toggle buttons */
 .MuiToggleButtonGroup-root
 {
@@ -688,8 +701,106 @@ input[type="search"]::-webkit-search-results-decoration
    font-weight: 500;
 }
 
+.recordView .widget
+{
+   padding: 24px;
+}
+
+.entityForm .widget
+{
+   padding: 24px;
+}
+
 .MuiPickersDay-root.Mui-selected, .MuiPickersDay-root.MuiPickersDay-dayWithMargin:hover
 {
    color: white;
    background-color: #0062FF !important;
 }
+
+/* several styles below here for user-defined alert inside helpContent */
+.helpContentAlert
+{
+   padding: 6px 16px;
+   font-size: 1rem;
+   font-weight: 300;
+   line-height: 1.6;
+   display: flex;
+}
+
+.helpContentAlert .MuiAlert-icon
+{
+   display: flex;
+   margin-right: 12px;
+   padding: 7px 0;
+   font-size: 22px;
+   opacity: 0.9;
+}
+
+.helpContentAlert .MuiAlert-icon .material-icons-round
+{
+   display: inline-block;
+   width: 1em;
+   height: 1em;
+}
+
+.helpContentAlert .MuiAlert-message
+{
+   padding: 8px 0;
+}
+
+.helpContentAlert.success
+{
+   background-color: rgb(240, 248, 241);
+   color: rgb(44, 76, 46);
+}
+
+.helpContentAlert.success .MuiAlert-icon .material-icons-round
+{
+   color: #4CAF50;
+}
+
+.helpContentAlert.warning
+{
+   background-color: rgb(254, 245, 234);
+   color: rgb(100, 65, 20);
+}
+
+.helpContentAlert.warning .MuiAlert-icon .material-icons-round
+{
+   color: #fb8c00;
+}
+
+.helpContentAlert.error
+{
+   background-color: rgb(254, 239, 238);
+   color: rgb(98, 41, 37);
+}
+
+.helpContentAlert.error .MuiAlert-icon .material-icons-round
+{
+   color: #F44335;
+}
+
+/* the alert widget, was built with minimal (no?) margins, for embedding in
+ a parent widget; but for using it on a process, give it some breathing room */
+.processRun .widget .MuiAlert-root
+{
+   margin: 2rem 1rem;
+}
+
+/* default styles for a block widget overlay */
+.blockWidgetOverlay
+{
+   font-weight: 400;
+   position: relative;
+   top: 15px;
+   height: 0;
+   display: flex;
+   font-size: 14px;
+   flex-direction: column;
+   align-items: center;
+}
+.blockWidgetOverlay a
+{
+   color: #0062FF !important;
+}

src/qqq/utils/DumpJsonBox.tsx

@@ -0,0 +1,50 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+
+import Box from "@mui/material/Box";
+import React from "react";
+
+interface DumpJsonBoxProps
+{
+   data: any;
+   title?: string;
+}
+
+/***************************************************************************
+ ** Utillity for debugging an object as JSON
+ ***************************************************************************/
+export default function DumpJsonBox({data, title}: DumpJsonBoxProps): JSX.Element
+{
+   return (
+      <Box border="1px solid gray" my="1rem" borderRadius="0.5rem">
+         {
+            title &&
+            <Box borderBottom="1px solid gray" mb="0.5rem" px="0.25rem" borderRadius="0.5rem 0.5rem 0 0" fontSize="1rem" fontWeight="600kkk" sx={{backgroundColor: "#D0D0D0"}}>
+               {title}
+            </Box>
+         }
+         <Box maxHeight="200px" p="0.25rem" overflow="auto" sx={{whiteSpace: "pre-wrap", fontFamily: "monospace", fontSize: "0.75rem", lineHeight: "1.2"}}>
+            {JSON.stringify(data, null, 3)}
+         </Box>
+      </Box>
+   );
+}

src/qqq/utils/qqq/FilterUtils.tsx

@@ -23,6 +23,7 @@ import {QController} from "@kingsrook/qqq-frontend-core/lib/controllers/QControl
 import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
 import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
 import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
+import {FilterVariableExpression} from "@kingsrook/qqq-frontend-core/lib/model/query/FilterVariableExpression";
 import {NowExpression} from "@kingsrook/qqq-frontend-core/lib/model/query/NowExpression";
 import {NowWithOffsetExpression} from "@kingsrook/qqq-frontend-core/lib/model/query/NowWithOffsetExpression";
 import {QCriteriaOperator} from "@kingsrook/qqq-frontend-core/lib/model/query/QCriteriaOperator";
@@ -108,6 +109,8 @@ class FilterUtils
          let [field, fieldTable] = TableUtils.getFieldAndTable(tableMetaData, criteria.fieldName);
 
          let values = criteria.values;
+         let hasFilterVariable = false;
+
          if (field.possibleValueSourceName)
          {
             //////////////////////////////////////////////////////////////////////////////////
@@ -121,7 +124,17 @@ class FilterUtils
             //////////////////////////////////////////////////////////////////////////////////
             if (values && values.length > 0 && values[0] !== null && values[0] !== undefined && values[0] !== "")
             {
-               values = await qController.possibleValues(fieldTable.name, null, field.name, "", values);
+               ////////////////////////////////////////////////////////////////////////
+               // do not do this lookup if the field is a filter variable expression //
+               ////////////////////////////////////////////////////////////////////////
+               if (values[0].type && values[0].type == "FilterVariableExpression")
+               {
+                  hasFilterVariable = true;
+               }
+               else
+               {
+                  values = await qController.possibleValues(fieldTable.name, null, field.name, "", values);
+               }
             }
 
             ////////////////////////////////////////////
@@ -232,6 +245,10 @@ class FilterUtils
          {
             return (new ThisOrLastPeriodExpression(value));
          }
+         else if (value.type == "FilterVariableExpression")
+         {
+            return (new FilterVariableExpression(value));
+         }
       }
 
       return (null);
@@ -365,7 +382,12 @@ class FilterUtils
          for (let i = 0; i < maxLoops; i++)
          {
             const value = criteria.values[i];
-            if (value.type == "NowWithOffset")
+            if (value.type == "FilterVariableExpression")
+            {
+               const expression = new FilterVariableExpression(value);
+               labels.push(expression.toString());
+            }
+            else if (value.type == "NowWithOffset")
             {
                const expression = new NowWithOffsetExpression(value);
                labels.push(expression.toString());
@@ -657,7 +679,7 @@ class FilterUtils
 
       filterForBackend.subFilters = subFilters;
 
-      if(pageNumber !== undefined && rowsPerPage !== undefined)
+      if (pageNumber !== undefined && rowsPerPage !== undefined)
       {
          filterForBackend.skip = pageNumber * rowsPerPage;
          filterForBackend.limit = rowsPerPage;

src/qqq/utils/qqq/TableUtils.ts

@@ -133,6 +133,11 @@ class TableUtils
     *******************************************************************************/
    public static getFieldAndTable(tableMetaData: QTableMetaData, fieldName: string): [QFieldMetaData, QTableMetaData]
    {
+      if(!fieldName)
+      {
+         return [null, null];
+      }
+
       if (fieldName.indexOf(".") > -1)
       {
          const nameParts = fieldName.split(".", 2);

src/qqq/utils/qqq/ValueUtils.tsx

@@ -268,7 +268,15 @@ class ValueUtils
    {
       if (!(date instanceof Date))
       {
+         ////////////////////////////////////////////////////////////////////////////////////
+         // so, a new Date here will interpret the string as being at midnight UTC, but    //
+         // the data object will be in the user/browser timezone.                          //
+         // so "2024-08-22", for a user in US/Central, will be "2024-08-21T19:00:00-0500". //
+         // correct for that by adding the date's timezone offset (converted from minutes  //
+         // to millis) back to it                                                          //
+         ////////////////////////////////////////////////////////////////////////////////////
          date = new Date(date);
+         date.setTime(date.getTime() + date.getTimezoneOffset() * 60 * 1000)
       }
       // @ts-ignore
       return (`${date.toString("yyyy-MM-dd")}`);

src/setupProxy.js

@@ -47,6 +47,8 @@ module.exports = function (app)
    app.use("/download/*", getRequestHandler());
    app.use("/metaData/*", getRequestHandler());
    app.use("/data/*", getRequestHandler());
+   app.use("/possibleValues/*", getRequestHandler());
+   app.use("/possibleValues", getRequestHandler());
    app.use("/widget/*", getRequestHandler());
    app.use("/serverInfo", getRequestHandler());
    app.use("/manageSession", getRequestHandler());

src/test/java/com/kingsrook/qqq/frontend/materialdashboard/model/metadata/MaterialDashboardTableMetaDataTest.java

@@ -29,6 +29,9 @@ import com.kingsrook.qqq.backend.core.instances.QInstanceValidator;
 import com.kingsrook.qqq.backend.core.model.metadata.QInstance;
 import com.kingsrook.qqq.frontend.materialdashboard.junit.BaseTest;
 import com.kingsrook.qqq.frontend.materialdashboard.junit.TestUtils;
+import com.kingsrook.qqq.frontend.materialdashboard.model.metadata.fieldrules.FieldRule;
+import com.kingsrook.qqq.frontend.materialdashboard.model.metadata.fieldrules.FieldRuleAction;
+import com.kingsrook.qqq.frontend.materialdashboard.model.metadata.fieldrules.FieldRuleTrigger;
 import org.junit.jupiter.api.Test;
 import static org.assertj.core.api.Assertions.assertThat;
 import static org.junit.jupiter.api.Assertions.assertEquals;
@@ -76,6 +79,37 @@ class MaterialDashboardTableMetaDataTest extends BaseTest
 
       assertValidationFailureReasons(qInstance -> qInstance.getTable(TestUtils.TABLE_NAME_PERSON).withSupplementalMetaData(new MaterialDashboardTableMetaData().withDefaultQuickFilterFieldNames(List.of("firstName", "lastName", "firstName"))),
          "duplicated field name: firstName");
+   }
+
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   @Test
+   void testValidateFieldRules()
+   {
+      assertValidationFailureReasons(qInstance -> qInstance.getTable(TestUtils.TABLE_NAME_PERSON).withSupplementalMetaData(new MaterialDashboardTableMetaData().withFieldRule(new FieldRule())),
+         "without an action",
+         "without a trigger",
+         "without a sourceField");
+
+      assertValidationFailureReasons(qInstance -> qInstance.getTable(TestUtils.TABLE_NAME_PERSON).withSupplementalMetaData(new MaterialDashboardTableMetaData().withFieldRule(new FieldRule()
+            .withTrigger(FieldRuleTrigger.ON_CHANGE)
+            .withAction(FieldRuleAction.CLEAR_TARGET_FIELD)
+            .withSourceField("notAField")
+            .withTargetField("alsoNotAField")
+         )),
+         "unrecognized sourceField: notAField",
+         "unrecognized targetField: alsoNotAField");
+
+      assertValidationFailureReasons(qInstance -> qInstance.getTable(TestUtils.TABLE_NAME_PERSON).withSupplementalMetaData(new MaterialDashboardTableMetaData().withFieldRule(new FieldRule()
+            .withTrigger(FieldRuleTrigger.ON_CHANGE)
+            .withAction(FieldRuleAction.RELOAD_WIDGET)
+            .withSourceField("id")
+            .withTargetWidget("notAWidget")
+         )),
+         "unrecognized targetWidget: notAWidget");
 
    }
 

src/test/java/com/kingsrook/qqq/frontend/materialdashboard/selenium/lib/QBaseSeleniumTest.java

@@ -33,6 +33,7 @@ import org.junit.jupiter.api.AfterEach;
 import org.junit.jupiter.api.BeforeAll;
 import org.junit.jupiter.api.BeforeEach;
 import org.junit.jupiter.api.TestInfo;
+import org.junit.jupiter.api.extension.ExtendWith;
 import org.openqa.selenium.Dimension;
 import org.openqa.selenium.WebDriver;
 import org.openqa.selenium.chrome.ChromeDriver;
@@ -43,6 +44,7 @@ import static org.junit.jupiter.api.Assertions.fail;
 /*******************************************************************************
  ** Base class for Selenium tests
  *******************************************************************************/
+@ExtendWith(SeleniumTestWatcher.class)
 public class QBaseSeleniumTest
 {
    protected static ChromeOptions chromeOptions;
@@ -93,6 +95,8 @@ public class QBaseSeleniumTest
       driver.manage().window().setSize(new Dimension(1700, 1300));
       qSeleniumLib = new QSeleniumLib(driver);
 
+      SeleniumTestWatcher.setCurrentSeleniumLib(qSeleniumLib);
+
       if(useInternalJavalin())
       {
          qSeleniumJavalin = new QSeleniumJavalin();
@@ -197,10 +201,10 @@ public class QBaseSeleniumTest
          qSeleniumLib.takeScreenshotToFile(getClass().getSimpleName() + "/" + testInfo.getDisplayName());
       }
 
-      if(driver != null)
+      ////////////////////////////////////////////////////////////////////////////////////////
-      {
+      // note - at one time we did a driver.quit here - but we're moving that into          //
-         driver.quit();
+      // SeleniumTestWatcher, so it can dump logs if it wants to (it runs after the @After) //
-      }
+      ////////////////////////////////////////////////////////////////////////////////////////
 
       if(qSeleniumJavalin != null)
       {

src/test/java/com/kingsrook/qqq/frontend/materialdashboard/selenium/lib/QSeleniumLib.java

@@ -42,6 +42,8 @@ import org.openqa.selenium.StaleElementReferenceException;
 import org.openqa.selenium.WebDriver;
 import org.openqa.selenium.WebElement;
 import org.openqa.selenium.interactions.Actions;
+import org.openqa.selenium.logging.LogEntries;
+import org.openqa.selenium.logging.LogEntry;
 import org.openqa.selenium.support.ui.ExpectedConditions;
 import org.openqa.selenium.support.ui.WebDriverWait;
 import static org.assertj.core.api.Assertions.assertThat;
@@ -333,7 +335,7 @@ public class QSeleniumLib
             return;
          }
 
-         if(elements.stream().noneMatch(e -> e.getText().toLowerCase().contains(textContains)))
+         if(elements.stream().noneMatch(e -> e.getText().toLowerCase().contains(textContains.toLowerCase())))
          {
             LOG.debug("Found non-existence of element(s) matching selector [" + cssSelector + "] containing text [" + textContains + "]");
             return;
@@ -343,7 +345,7 @@ public class QSeleniumLib
       }
       while(start + (1000 * WAIT_SECONDS) > System.currentTimeMillis());
 
-      fail("Failed for non-existence of element matching selector [" + cssSelector + "] after [" + WAIT_SECONDS + "] seconds.");
+      fail("Failed for non-existence of element matching selector [" + cssSelector + "] containing text [" + textContains + "] after [" + WAIT_SECONDS + "] seconds.");
    }
 
 
@@ -735,4 +737,22 @@ public class QSeleniumLib
       return (this);
    }
 
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public void dumpConsole()
+   {
+      Set<String> availableLogTypes = driver.manage().logs().getAvailableLogTypes();
+      for(String logType : availableLogTypes)
+      {
+         LogEntries logEntries = driver.manage().logs().get(logType);
+         for(LogEntry logEntry : logEntries)
+         {
+            System.out.println(logEntry.toJson());
+         }
+      }
+   }
+
 }

src/test/java/com/kingsrook/qqq/frontend/materialdashboard/selenium/lib/QueryScreenLib.java

@@ -261,9 +261,7 @@ public class QueryScreenLib
       if(StringUtils.hasContent(value))
       {
          qSeleniumLib.waitForSelector(".filterValuesColumn INPUT").click();
-         // todo - no, not in a listbox/LI here...
+         qSeleniumLib.waitForSelector(".filterValuesColumn INPUT").sendKeys(value);
-         qSeleniumLib.waitForSelectorContaining(".MuiAutocomplete-listbox LI", value).click();
-         System.out.println(value);
       }
 
       qSeleniumLib.clickBackdrop();
@@ -271,6 +269,21 @@ public class QueryScreenLib
 
 
 
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public void setBasicBooleanFilter(String fieldLabel, String operatorLabel)
+   {
+      qSeleniumLib.waitForSelectorContaining("BUTTON", fieldLabel).click();
+      qSeleniumLib.waitForMillis(250);
+      qSeleniumLib.waitForSelector("#criteriaOperator").click();
+      qSeleniumLib.waitForSelectorContaining("LI", operatorLabel).click();
+
+      qSeleniumLib.clickBackdrop();
+   }
+
+
+
    /*******************************************************************************
     **
     *******************************************************************************/

src/test/java/com/kingsrook/qqq/frontend/materialdashboard/selenium/lib/SeleniumTestWatcher.java

@@ -0,0 +1,126 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+package com.kingsrook.qqq.frontend.materialdashboard.selenium.lib;
+
+
+import java.util.Optional;
+import org.junit.jupiter.api.extension.ExtensionContext;
+import org.junit.jupiter.api.extension.TestWatcher;
+
+
+/*******************************************************************************
+ **
+ *******************************************************************************/
+public class SeleniumTestWatcher implements TestWatcher
+{
+   private static QSeleniumLib qSeleniumLib;
+
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public static void setCurrentSeleniumLib(QSeleniumLib qSeleniumLib)
+   {
+      SeleniumTestWatcher.qSeleniumLib = qSeleniumLib;
+   }
+
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   @Override
+   public void testFailed(ExtensionContext context, Throwable cause)
+   {
+      if(qSeleniumLib != null)
+      {
+         System.out.println("Dumping browser console after failed test: " + context.getDisplayName());
+         System.out.println("----------------------------------------------------------------------------");
+         try
+         {
+            qSeleniumLib.dumpConsole();
+         }
+         catch(Exception e)
+         {
+            System.out.println("Error dumping console:");
+            e.printStackTrace();
+         }
+         System.out.println("----------------------------------------------------------------------------");
+      }
+
+      tryToQuitSelenium();
+   }
+
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   private void tryToQuitSelenium()
+   {
+      if(qSeleniumLib != null)
+      {
+         try
+         {
+            qSeleniumLib.driver.quit();
+         }
+         catch(Exception e)
+         {
+            System.err.println("Error quiting selenium driver: " + e.getMessage());
+         }
+      }
+   }
+
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   @Override
+   public void testSuccessful(ExtensionContext context)
+   {
+      tryToQuitSelenium();
+   }
+
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   @Override
+   public void testAborted(ExtensionContext context, Throwable cause)
+   {
+      tryToQuitSelenium();
+   }
+
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   @Override
+   public void testDisabled(ExtensionContext context, Optional<String> reason)
+   {
+      tryToQuitSelenium();
+   }
+}

src/test/java/com/kingsrook/qqq/frontend/materialdashboard/selenium/tests/DashboardTableWidgetExportTest.java

@@ -56,8 +56,8 @@ public class DashboardTableWidgetExportTest extends QBaseSeleniumTest
             "label": "Sample Table Widget",
             "footerHTML": "<span class='material-icons-round notranslate MuiIcon-root MuiIcon-fontSizeInherit' aria-hidden='true'><span class='dashboard-schedule-icon'>schedule</span></span>Updated at 2023-10-17 09:11:38 AM CDT",
             "columns": [
-                { "type": "html", "header": "Id", "accessor": "id", "width": "1%" },
+                { "type": "html", "header": "Id", "accessor": "id", "width": "30px" },
-                { "type": "html", "header": "Name", "accessor": "name", "width": "99%" }
+                { "type": "html", "header": "Name", "accessor": "name", "width": "1fr" }
             ],
             "rows": [
                 { "id": "1", "name": "<a href='/setup/person/1'>Homer S.</a>" },
@@ -83,7 +83,7 @@ public class DashboardTableWidgetExportTest extends QBaseSeleniumTest
       // assert that the table widget rendered its header and some contents //
       ////////////////////////////////////////////////////////////////////////
       qSeleniumLib.waitForSelectorContaining("#SampleTableWidget h6", "Sample Table Widget");
-      qSeleniumLib.waitForSelectorContaining("#SampleTableWidget table a", "Homer S.");
+      qSeleniumLib.waitForSelectorContaining("#SampleTableWidget a", "Homer S.");
       qSeleniumLib.waitForSelectorContaining("#SampleTableWidget div", "Updated at 2023-10-17 09:11:38 AM CDT");
 
       /////////////////////////////

src/test/java/com/kingsrook/qqq/frontend/materialdashboard/selenium/tests/SavedReportTest.java

@@ -0,0 +1,172 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+package com.kingsrook.qqq.frontend.materialdashboard.selenium.tests;
+
+
+import java.util.List;
+import com.kingsrook.qqq.frontend.materialdashboard.selenium.lib.QBaseSeleniumTest;
+import com.kingsrook.qqq.frontend.materialdashboard.selenium.lib.QSeleniumLib;
+import com.kingsrook.qqq.frontend.materialdashboard.selenium.lib.QueryScreenLib;
+import com.kingsrook.qqq.frontend.materialdashboard.selenium.lib.javalin.QSeleniumJavalin;
+import org.junit.jupiter.api.Test;
+import org.openqa.selenium.By;
+import org.openqa.selenium.Keys;
+import org.openqa.selenium.WebElement;
+import static org.assertj.core.api.Assertions.assertThat;
+import static org.junit.jupiter.api.Assertions.assertEquals;
+import static org.junit.jupiter.api.Assertions.assertNull;
+
+
+/*******************************************************************************
+ ** Test for Saved Report screen (table has some special behaviors)
+ *******************************************************************************/
+public class SavedReportTest extends QBaseSeleniumTest
+{
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   @Override
+   protected void addJavalinRoutes(QSeleniumJavalin qSeleniumJavalin)
+   {
+      super.addJavalinRoutes(qSeleniumJavalin);
+      qSeleniumJavalin
+         .withRouteToFile("/metaData/table/savedReport", "metaData/table/savedReport.json")
+         .withRouteToFile("/widget/reportSetupWidget", "widget/reportSetupWidget.json")
+         .withRouteToFile("/widget/pivotTableSetupWidget", "widget/pivotTableSetupWidget.json")
+         .withRouteToFile("/data/savedReport/possibleValues/tableName", "data/savedReport/possibleValues/tableName.json")
+
+         .withRouteToFile("/data/person/count", "data/person/count.json")
+         .withRouteToFile("/data/person/query", "data/person/index.json")
+      ;
+   }
+
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   @Test
+   void testCreate()
+   {
+      qSeleniumLib.gotoAndWaitForBreadcrumbHeaderToContain("/userCustomizations/savedReport/create", "Creating New Saved Report");
+
+      //////////////////////////////////////////////////////////////
+      // make sure things are disabled before a table is selected //
+      //////////////////////////////////////////////////////////////
+      WebElement webElement = qSeleniumLib.waitForSelectorContaining("button", "Edit Filters and Columns");
+      assertEquals("true", webElement.getAttribute("disabled"));
+
+      qSeleniumLib.waitForSelector("#label").click();
+      qSeleniumLib.waitForSelector("#label").sendKeys("My Report");
+
+      qSeleniumLib.waitForSelector("#tableName").click();
+      qSeleniumLib.waitForSelector("#tableName").sendKeys("Person" + Keys.DOWN + Keys.ENTER);
+
+      //////////////////////////////////
+      // make sure things enabled now //
+      //////////////////////////////////
+      webElement = qSeleniumLib.waitForSelectorContaining("button", "Edit Filters and Columns");
+      assertNull(webElement.getAttribute("disabled"));
+
+      ////////////////////////////////////////////////////
+      // open query-screen popup, wait for query to run //
+      ////////////////////////////////////////////////////
+      qSeleniumJavalin.beginCapture();
+      qSeleniumLib.waitForSelectorContaining("button", "Edit Filters and Columns").click();
+      qSeleniumJavalin.waitForCapturedPath("/data/person/count");
+      qSeleniumJavalin.waitForCapturedPath("/data/person/query");
+      qSeleniumJavalin.endCapture();
+
+      QueryScreenLib queryScreenLib = new QueryScreenLib(qSeleniumLib);
+      queryScreenLib.setBasicFilter("First Name", "contains", "Darin");
+
+      ////////////////////////
+      // close query screen //
+      ////////////////////////
+      qSeleniumLib.waitForSelectorContaining("button", "OK").click();
+
+      //////////////////////////////////////////////////////
+      // make sure query things appear on edit screen now //
+      //////////////////////////////////////////////////////
+      qSeleniumLib.waitForSelectorContaining(".advancedQueryString", "First Name");
+      qSeleniumLib.waitForSelectorContaining(".advancedQueryString", "contains");
+      qSeleniumLib.waitForSelectorContaining(".advancedQueryString", "Darin");
+      List<WebElement> columns = qSeleniumLib.waitForSelectorContaining("h5", "Columns")
+         .findElement(QSeleniumLib.PARENT)
+         .findElements(By.cssSelector("DIV"));
+
+      assertThat(columns)
+         .hasSizeGreaterThanOrEqualTo(5) // at least this many
+         .anyMatch(we -> we.getText().equals("Home City")); // a few fields are found
+
+      ///////////////////
+      // turn on pivot //
+      ///////////////////
+      qSeleniumLib.waitForSelectorContaining("label", "Use Pivot Table").click();
+      qSeleniumLib.waitForSelectorContaining("button", "Edit Pivot Table").click();
+      qSeleniumLib.waitForSelectorContaining("h3", "Edit Pivot Table");
+
+      ///////////////
+      // add a row //
+      ///////////////
+      qSeleniumLib.waitForSelectorContaining(".MuiModal-root button", "Add new row").click();
+      WebElement row0Input = qSeleniumLib.waitForSelector("#rows-0");
+      row0Input.click();
+      row0Input.sendKeys("Last Name" + Keys.ENTER);
+
+      //////////////////
+      // add a column //
+      //////////////////
+      qSeleniumLib.waitForSelectorContaining(".MuiModal-root button", "Add new column").click();
+      WebElement column0Input = qSeleniumLib.waitForSelector("#columns-0");
+      column0Input.click();
+      column0Input.sendKeys("Home City" + Keys.ENTER);
+
+      /////////////////
+      // add a value //
+      /////////////////
+      qSeleniumLib.waitForSelectorContaining(".MuiModal-root button", "Add new value").click();
+      WebElement value0Input = qSeleniumLib.waitForSelector("#values-field-0");
+      value0Input.click();
+      value0Input.sendKeys("Id" + Keys.ENTER);
+
+      /////////////////////////////////////////
+      // try to submit - but expect an error //
+      /////////////////////////////////////////
+      qSeleniumLib.waitForSelectorContaining("button", "OK").click();
+      qSeleniumLib.waitForSelectorContaining(".MuiAlert-standard", "Missing value in 1 field.").click();
+
+      ///////////////////////////
+      // now select a function //
+      ///////////////////////////
+      WebElement function0Input = qSeleniumLib.waitForSelector("#values-function-0");
+      function0Input.click();
+      function0Input.sendKeys("Count" + Keys.ENTER);
+
+      qSeleniumLib.waitForSelectorContaining("button", "OK").click();
+      qSeleniumLib.waitForSelectorContainingToNotExist("h3", "Edit Pivot Table");
+
+      // qSeleniumLib.waitForever();
+   }
+
+}

src/test/java/com/kingsrook/qqq/frontend/materialdashboard/selenium/tests/query/QueryScreenTest.java

@@ -153,16 +153,16 @@ public class QueryScreenTest extends QBaseSeleniumTest
 
       queryScreenLib.addBasicFilter("Is Employed");
 
-      testBasicCriteria(queryScreenLib, "Is Employed", "equals yes", null, "(?s).*Is Employed:.*yes.*", """
+      testBasicBooleanCriteria(queryScreenLib, "Is Employed", "equals yes", "(?s).*Is Employed:.*yes.*", """
          {"fieldName":"isEmployed","operator":"EQUALS","values":[true]}""");
 
-      testBasicCriteria(queryScreenLib, "Is Employed", "equals no", null, "(?s).*Is Employed:.*no.*", """
+      testBasicBooleanCriteria(queryScreenLib, "Is Employed", "equals no", "(?s).*Is Employed:.*no.*", """
          {"fieldName":"isEmployed","operator":"EQUALS","values":[false]}""");
 
-      testBasicCriteria(queryScreenLib, "Is Employed", "is empty", null, "(?s).*Is Employed:.*is empty.*", """
+      testBasicBooleanCriteria(queryScreenLib, "Is Employed", "is empty", "(?s).*Is Employed:.*is empty.*", """
          {"fieldName":"isEmployed","operator":"IS_BLANK","values":[]}""");
 
-      testBasicCriteria(queryScreenLib, "Is Employed", "is not empty", null, "(?s).*Is Employed:.*is not empty.*", """
+      testBasicBooleanCriteria(queryScreenLib, "Is Employed", "is not empty", "(?s).*Is Employed:.*is not empty.*", """
          {"fieldName":"isEmployed","operator":"IS_NOT_BLANK","values":[]}""");
    }
 
@@ -203,10 +203,10 @@ public class QueryScreenTest extends QBaseSeleniumTest
    /*******************************************************************************
     **
     *******************************************************************************/
-   private void testBasicCriteria(QueryScreenLib queryScreenLib, String fieldLabel, String operatorLabel, String value, String expectButtonStringRegex, String expectFilterJsonContains)
+   private void testBasicBooleanCriteria(QueryScreenLib queryScreenLib, String fieldLabel, String operatorLabel, String expectButtonStringRegex, String expectFilterJsonContains)
    {
       qSeleniumJavalin.beginCapture();
-      queryScreenLib.setBasicFilter(fieldLabel, operatorLabel, value);
+      queryScreenLib.setBasicBooleanFilter(fieldLabel, operatorLabel);
       queryScreenLib.waitForBasicFilterButtonMatchingRegex(expectButtonStringRegex);
       qSeleniumJavalin.waitForCapturedPathWithBodyContaining("/data/person/query", expectFilterJsonContains);
       qSeleniumJavalin.endCapture();

src/test/resources/fixtures/data/savedReport/possibleValues/tableName.json

@@ -0,0 +1,16 @@
+{
+   "options": [
+      {
+         "id": "person",
+         "label": "Person"
+      },
+      {
+         "id": "city",
+         "label": "City"
+      },
+      {
+         "id": "savedReport",
+         "label": "Saved Report"
+      }
+   ]
+}

src/test/resources/fixtures/metaData/index.json

@@ -189,6 +189,26 @@
          "insertPermission": true,
          "editPermission": true,
          "deletePermission": true
+      },
+      "savedReport": {
+         "name": "savedReport",
+         "label": "Saved Report",
+         "isHidden": false,
+         "iconName": "article",
+         "capabilities": [
+            "TABLE_COUNT",
+            "TABLE_GET",
+            "TABLE_QUERY",
+            "QUERY_STATS",
+            "TABLE_UPDATE",
+            "TABLE_INSERT",
+            "TABLE_DELETE"
+         ],
+         "readPermission": true,
+         "insertPermission": true,
+         "editPermission": true,
+         "deletePermission": true,
+         "usesVariants": false
       }
    },
    "processes": {
@@ -420,6 +440,40 @@
             }
          ]
       },
+      "userCustomizations": {
+         "name": "userCustomizations",
+         "label": "User Customizations",
+         "iconName": "article",
+         "widgets": [],
+         "children": [
+            {
+               "type": "TABLE",
+               "name": "savedReport",
+               "label": "Saved Report",
+               "iconName": "article"
+            }
+         ],
+         "childMap": {
+            "savedReport": {
+               "type": "TABLE",
+               "name": "savedReport",
+               "label": "Saved Report",
+               "iconName": "article"
+            }
+         },
+         "sections": [
+            {
+               "name": "userCustomizations",
+               "label": "User Customizations",
+               "icon": {
+                  "name": "badge"
+               },
+               "tables": [
+                  "savedReport"
+               ]
+            }
+         ]
+      },
       "miscellaneous": {
          "name": "miscellaneous",
          "label": "Miscellaneous",
@@ -730,6 +784,20 @@
             }
          ],
          "iconName": "data_object"
+      },
+      {
+         "type": "APP",
+         "name": "userCustomizations",
+         "label": "User Customizations",
+         "children": [
+            {
+               "type": "TABLE",
+               "name": "savedReport",
+               "label": "Saved Report",
+               "iconName": "article"
+            }
+         ],
+         "iconName": "data_object"
       }
    ],
    "branding": {
@@ -750,6 +818,28 @@
          "isCard": true,
          "storeDropdownSelections": false,
          "hasPermission": true
+      },
+      "reportSetupWidget": {
+         "name": "reportSetupWidget",
+         "label": "Filters and Columns",
+         "type": "filterAndColumnsSetup",
+         "isCard": true,
+         "storeDropdownSelections": false,
+         "showReloadButton": true,
+         "showExportButton": false,
+         "defaultValues": {},
+         "hasPermission": true
+      },
+      "pivotTableSetupWidget": {
+         "name": "pivotTableSetupWidget",
+         "label": "Pivot Table",
+         "type": "pivotTableSetup",
+         "isCard": true,
+         "storeDropdownSelections": false,
+         "showReloadButton": true,
+         "showExportButton": false,
+         "defaultValues": {},
+         "hasPermission": true
       }
    },
    "environmentValues": {

src/test/resources/fixtures/metaData/table/savedReport.json

@@ -0,0 +1,218 @@
+{
+   "table": {
+      "name": "savedReport",
+      "label": "Saved Report",
+      "isHidden": false,
+      "primaryKeyField": "id",
+      "iconName": "article",
+      "fields": {
+         "queryFilterJson": {
+            "name": "queryFilterJson",
+            "label": "Query Filter",
+            "type": "STRING",
+            "isRequired": false,
+            "isEditable": true,
+            "isHeavy": false,
+            "displayFormat": "%s"
+         },
+         "columnsJson": {
+            "name": "columnsJson",
+            "label": "Columns",
+            "type": "STRING",
+            "isRequired": false,
+            "isEditable": true,
+            "isHeavy": false,
+            "displayFormat": "%s"
+         },
+         "inputFieldsJson": {
+            "name": "inputFieldsJson",
+            "label": "Input Fields",
+            "type": "STRING",
+            "isRequired": false,
+            "isEditable": true,
+            "isHeavy": false,
+            "displayFormat": "%s"
+         },
+         "pivotTableJson": {
+            "name": "pivotTableJson",
+            "label": "Pivot Table",
+            "type": "STRING",
+            "isRequired": false,
+            "isEditable": true,
+            "isHeavy": false,
+            "displayFormat": "%s"
+         },
+         "modifyDate": {
+            "name": "modifyDate",
+            "label": "Modify Date",
+            "type": "DATE_TIME",
+            "isRequired": false,
+            "isEditable": false,
+            "isHeavy": false,
+            "displayFormat": "%s"
+         },
+         "label": {
+            "name": "label",
+            "label": "Report Name",
+            "type": "STRING",
+            "isRequired": true,
+            "isEditable": true,
+            "isHeavy": false,
+            "displayFormat": "%s"
+         },
+         "id": {
+            "name": "id",
+            "label": "Id",
+            "type": "INTEGER",
+            "isRequired": false,
+            "isEditable": false,
+            "isHeavy": false,
+            "displayFormat": "%s"
+         },
+         "userId": {
+            "name": "userId",
+            "label": "User Id",
+            "type": "STRING",
+            "isRequired": false,
+            "isEditable": true,
+            "isHeavy": false,
+            "displayFormat": "%s"
+         },
+         "tableName": {
+            "name": "tableName",
+            "label": "Table",
+            "type": "STRING",
+            "isRequired": true,
+            "isEditable": true,
+            "isHeavy": false,
+            "possibleValueSourceName": "tables",
+            "displayFormat": "%s"
+         },
+         "createDate": {
+            "name": "createDate",
+            "label": "Create Date",
+            "type": "DATE_TIME",
+            "isRequired": false,
+            "isEditable": false,
+            "isHeavy": false,
+            "displayFormat": "%s"
+         }
+      },
+      "sections": [
+         {
+            "name": "identity",
+            "label": "Identity",
+            "tier": "T1",
+            "fieldNames": [
+               "id",
+               "label",
+               "tableName"
+            ],
+            "icon": {
+               "name": "badge"
+            },
+            "isHidden": false
+         },
+         {
+            "name": "filtersAndColumns",
+            "label": "Filters and Columns",
+            "tier": "T2",
+            "widgetName": "reportSetupWidget",
+            "icon": {
+               "name": "table_chart"
+            },
+            "isHidden": false
+         },
+         {
+            "name": "pivotTable",
+            "label": "Pivot Table",
+            "tier": "T2",
+            "widgetName": "pivotTableSetupWidget",
+            "icon": {
+               "name": "pivot_table_chart"
+            },
+            "isHidden": false
+         },
+         {
+            "name": "data",
+            "label": "Data",
+            "tier": "T2",
+            "fieldNames": [
+               "queryFilterJson",
+               "columnsJson",
+               "pivotTableJson"
+            ],
+            "icon": {
+               "name": "text_snippet"
+            },
+            "isHidden": true
+         },
+         {
+            "name": "hidden",
+            "label": "Hidden",
+            "tier": "T2",
+            "fieldNames": [
+               "inputFieldsJson",
+               "userId"
+            ],
+            "icon": {
+               "name": "text_snippet"
+            },
+            "isHidden": true
+         },
+         {
+            "name": "dates",
+            "label": "Dates",
+            "tier": "T3",
+            "fieldNames": [
+               "createDate",
+               "modifyDate"
+            ],
+            "icon": {
+               "name": "calendar_month"
+            },
+            "isHidden": false
+         }
+      ],
+      "exposedJoins": [],
+      "supplementalTableMetaData": {
+         "materialDashboard": {
+            "fieldRules": [
+               {
+                  "trigger": "ON_CHANGE",
+                  "sourceField": "tableName",
+                  "action": "CLEAR_TARGET_FIELD",
+                  "targetField": "queryFilterJson"
+               },
+               {
+                  "trigger": "ON_CHANGE",
+                  "sourceField": "tableName",
+                  "action": "CLEAR_TARGET_FIELD",
+                  "targetField": "columnsJson"
+               },
+               {
+                  "trigger": "ON_CHANGE",
+                  "sourceField": "tableName",
+                  "action": "CLEAR_TARGET_FIELD",
+                  "targetField": "pivotTableJson"
+               }
+            ],
+            "type": "materialDashboard"
+         }
+      },
+      "capabilities": [
+         "TABLE_COUNT",
+         "TABLE_GET",
+         "TABLE_QUERY",
+         "QUERY_STATS",
+         "TABLE_UPDATE",
+         "TABLE_INSERT",
+         "TABLE_DELETE"
+      ],
+      "readPermission": true,
+      "insertPermission": true,
+      "editPermission": true,
+      "deletePermission": true,
+      "usesVariants": false
+   }
+}

src/test/resources/fixtures/widget/pivotTableSetupWidget.json

@@ -0,0 +1 @@
+{"type":"pivotTableSetup"}

src/test/resources/fixtures/widget/reportSetupWidget.json

@@ -0,0 +1 @@
+{"type":"reportSetup"}