CE-1946: added child record widget data, minor divider styles

Feature/ce 1727 mobile first uiux

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.104",
+      "@kingsrook/qqq-frontend-core": "1.0.110",
       "@mui/icons-material": "5.4.1",
       "@mui/material": "5.11.1",
       "@mui/styles": "5.11.1",

pom.xml

@@ -29,7 +29,7 @@
    <packaging>jar</packaging>
 
    <properties>
-      <revision>0.21.0</revision>
+      <revision>0.23.0-SNAPSHOT</revision>
 
       <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
       <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>

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
-   disabled?: boolean
+   onClickHandler: any;
+   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
-   iconName?: string
-   disabled: boolean
+   label?: string;
+   iconName?: string;
+   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,17 +172,14 @@ function QDynamicForm({formData, formLabel, bulkEditMode, bulkEditSwitchChangeHa
                            <Grid item xs={12} sm={6} key={fieldName}>
                               {labelElement}
                               <DynamicSelect
-                                 tableName={field.possibleValueProps.tableName}
-                                 processName={field.possibleValueProps.processName}
-                                 possibleValueSourceName={field.possibleValueProps.possibleValueSourceName}
-                                 fieldName={field.possibleValueProps.fieldName}
+                                 fieldPossibleValueProps={field.possibleValueProps}
                                  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

@@ -40,6 +40,8 @@ interface Props
    value: any;
    type: string;
    isEditable?: boolean;
+   placeholder?: string;
+   backgroundColor?: string;
 
    [key: string]: any;
 
@@ -49,7 +51,7 @@ interface Props
 }
 
 function QDynamicFormField({
-   label, name, displayFormat, value, bulkEditMode, bulkEditSwitchChangeHandler, type, isEditable, formFieldObject, ...rest
+   label, name, displayFormat, value, bulkEditMode, bulkEditSwitchChangeHandler, type, isEditable, placeholder, backgroundColor, formFieldObject, ...rest
 }: Props): JSX.Element
 {
    const [switchChecked, setSwitchChecked] = useState(false);
@@ -65,18 +67,30 @@ function QDynamicFormField({
       inputLabelProps.shrink = true;
    }
 
-   const inputProps = {};
+   const inputProps: any = {};
    if (displayFormat && displayFormat.startsWith("$"))
    {
-      // @ts-ignore
       inputProps.startAdornment = <InputAdornment position="start">$</InputAdornment>;
    }
    if (displayFormat && displayFormat.endsWith("%%"))
    {
-      // @ts-ignore
       inputProps.endAdornment = <InputAdornment position="end">%</InputAdornment>;
    }
 
+   if (placeholder)
+   {
+      inputProps.placeholder = placeholder
+   }
+
+   if(backgroundColor)
+   {
+      inputProps.sx = {
+         "&.MuiInputBase-root": {
+            backgroundColor: backgroundColor
+         }
+      };
+   }
+
    // @ts-ignore
    const handleOnWheel = (e) =>
    {

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";
 
 
@@ -129,18 +130,11 @@ class DynamicFormUtils
 
       if (effectivelyIsRequired)
       {
-         if (field.possibleValueSourceName)
-         {
-            ////////////////////////////////////////////////////////////////////////////////////////////
-            // 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));
-         }
-         else
-         {
-            return (Yup.string().required(`${field.label} is required.`));
-         }
+         ////////////////////////////////////////////////////////////////////////////////////////////
+         // 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 ?? "This field"} is required.`).nullable(true));
       }
       return (null);
    }
@@ -155,47 +149,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 =
-                  {
-                     isPossibleValue: true,
-                     tableName: tableName,
-                     fieldName: field.name,
-                     initialDisplayValue: initialDisplayValue,
-                  };
+               //////////////////////////////////////////////////////////////////////
+               // handle an inline PVS - which is a list of possible value objects //
+               //////////////////////////////////////////////////////////////////////
+               props.possibleValues = field.inlinePossibleValueSource;
+            }
+            else if (tableName)
+            {
+               props.tableName = tableName;
             }
             else if (processName)
             {
-               dynamicFormFields[field.name].possibleValueProps =
-                  {
-                     isPossibleValue: true,
-                     processName: processName,
-                     fieldName: field.name,
-                     initialDisplayValue: initialDisplayValue,
-                  };
+               props.processName = processName;
             }
             else
             {
-               dynamicFormFields[field.name].possibleValueProps =
-                  {
-                     isPossibleValue: true,
-                     initialDisplayValue: initialDisplayValue,
-                     fieldName: field.name,
-                     possibleValueSourceName: field.possibleValueSourceName
-                  };
+               props.possibleValueSourceName = field.possibleValueSourceName;
             }
+
+            dynamicFormFields[field.name].possibleValueProps = props;
          }
       }
    }

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;
-   processName?: string;
-   fieldName?: string;
-   possibleValueSourceName?: string;
+   fieldPossibleValueProps: FieldPossibleValueProps;
    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,
@@ -102,8 +95,10 @@ export const getAutocompleteOutlinedStyle = (isDisabled: boolean) =>
 
 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);
@@ -171,6 +166,35 @@ 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)
@@ -194,7 +218,7 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
       (async () =>
       {
          // console.log(`doing a search with ${searchTerm}`);
-         const results: QPossibleValue[] = await qController.possibleValues(tableName, processName, possibleValueSourceName ?? fieldName, searchTerm ?? "", null, otherValues);
+         const results: QPossibleValue[] = await loadResults();
 
          if (tableMetaData == null && tableName)
          {
@@ -217,7 +241,10 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
       };
    }, [searchTerm]);
 
-   // todo - finish... call it in onOpen?
+
+   /***************************************************************************
+    ** todo - finish... call it in onOpen?
+    ***************************************************************************/
    const reloadIfOtherValuesAreChanged = () =>
    {
       if (JSON.stringify(Object.fromEntries(otherValues)) != otherValuesWhenResultsWereLoaded)
@@ -226,8 +253,10 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
          {
             setLoading(true);
             setOptions([]);
+
             console.log("Refreshing possible values...");
-            const results: QPossibleValue[] = await qController.possibleValues(tableName, processName, possibleValueSourceName ?? fieldName, searchTerm ?? "", null, otherValues);
+            const results: QPossibleValue[] = await loadResults();
+
             setLoading(false);
             setOptions([...results]);
             setOtherValuesWhenResultsWereLoaded(JSON.stringify(Object.fromEntries(otherValues)));
@@ -235,6 +264,10 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
       }
    };
 
+
+   /***************************************************************************
+    **
+    ***************************************************************************/
    const inputChanged = (event: React.SyntheticEvent, value: string, reason: string) =>
    {
       // console.log(`input changed.  Reason: ${reason}, setting search term to ${value}`);
@@ -245,11 +278,19 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
       }
    };
 
+
+   /***************************************************************************
+    **
+    ***************************************************************************/
    const handleBlur = (x: any) =>
    {
       setSearchTerm(null);
    };
 
+
+   /***************************************************************************
+    **
+    ***************************************************************************/
    const handleChanged = (event: React.SyntheticEvent, value: any | any[], reason: string, details?: string) =>
    {
       // console.log("handleChanged.  value is:");
@@ -273,6 +314,10 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
       }
    };
 
+
+   /***************************************************************************
+    **
+    ***************************************************************************/
    const filterOptions = (options: { id: any; label: string; }[], state: FilterOptionsState<{ id: any; label: string; }>): { id: any; label: string; }[] =>
    {
       /////////////////////////////////////////////////////////////////////////////////
@@ -282,6 +327,10 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
       return (options);
    };
 
+
+   /***************************************************************************
+    **
+    ***************************************************************************/
    // @ts-ignore
    const renderOption = (props: Object, option: any, {selected}) =>
    {
@@ -330,6 +379,10 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
       );
    };
 
+
+   /***************************************************************************
+    **
+    ***************************************************************************/
    const bulkEditSwitchChanged = () =>
    {
       const newSwitchValue = !switchChecked;
@@ -350,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
@@ -430,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>
          }

src/qqq/components/forms/EntityForm.tsx

@@ -502,7 +502,7 @@ function EntityForm(props: Props): JSX.Element
             /////////////////////////////////////////////////
             const tableSections = TableUtils.getSectionsForRecordSidebar(tableMetaData, [...tableMetaData.fields.keys()], (section: QTableSection) =>
             {
-               const widget = metaData?.widgets.get(section.widgetName);
+               const widget = metaData?.widgets?.get(section.widgetName);
                if (widget)
                {
                   if (widget.type == "childRecordList" && widget.defaultValues?.has("manageAssociationName"))
@@ -602,7 +602,7 @@ function EntityForm(props: Props): JSX.Element
                      ///////////////////////////////////////////////////////////////////////////////////////////
                      if (fieldMetaData.possibleValueSourceName)
                      {
-                        const results: QPossibleValue[] = await qController.possibleValues(tableName, null, fieldName, null, [initialValues[fieldName]]);
+                        const results: QPossibleValue[] = await qController.possibleValues(tableName, null, fieldName, null, [initialValues[fieldName]], undefined, "form");
                         if (results && results.length > 0)
                         {
                            defaultDisplayValues.set(fieldName, results[0].label);
@@ -1152,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}

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/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/BasicAndAdvancedQueryControls.tsx

@@ -183,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;
       }

src/qqq/components/query/EvaluatedExpression.tsx

@@ -50,7 +50,7 @@ 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;

src/qqq/components/query/FilterCriteriaRowValues.tsx

@@ -367,16 +367,15 @@ function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueC
                ) : (
                   <Box width={"100%"}>
                      <DynamicSelect
-                        tableName={table.name}
-                        fieldName={field.name}
+                        fieldPossibleValueProps={{tableName: table.name, fieldName: field.name, initialDisplayValue: selectedPossibleValue?.label}}
                         overrideId={field.name + "-single-" + criteria.id}
                         key={field.name + "-single-" + criteria.id}
                         fieldLabel="Value"
                         initialValue={selectedPossibleValue?.id}
-                        initialDisplayValue={selectedPossibleValue?.label}
                         inForm={false}
                         onChange={(value: any) => valueChangeHandler(null, 0, value)}
                         variant="standard"
+                        useCase="filter"
                      />
                   </Box>
                )
@@ -401,8 +400,7 @@ function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueC
          }
          return <Box>
             <DynamicSelect
-               tableName={table.name}
-               fieldName={field.name}
+               fieldPossibleValueProps={{tableName: table.name, fieldName: field.name, initialDisplayValue: null}}
                overrideId={field.name + "-multi-" + criteria.id}
                key={field.name + "-multi-" + criteria.id}
                isMultiple
@@ -412,6 +410,7 @@ function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueC
                inForm={false}
                onChange={(value: any) => valueChangeHandler(null, "all", value)}
                variant="standard"
+               useCase="filter"
             />
          </Box>;
    }

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

@@ -391,12 +391,12 @@ export default function ShareModal({open, onClose, tableMetaData, record}: Share
                   <Box display="flex" flexDirection="row" alignItems="center">
                      <Box width="550px" pr={2} mb={-1.5}>
                         <DynamicSelect
-                           possibleValueSourceName={shareableTableMetaData.audiencePossibleValueSourceName}
+                           fieldPossibleValueProps={{possibleValueSourceName: shareableTableMetaData.audiencePossibleValueSourceName, initialDisplayValue: selectedAudienceOption?.label}}
                            fieldLabel="User or Group" // todo should come from shareableTableMetaData
                            initialValue={selectedAudienceOption?.id}
-                           initialDisplayValue={selectedAudienceOption?.label}
                            inForm={false}
                            onChange={handleAudienceChange}
+                           useCase="form"
                         />
                      </Box>
                      {/*

src/qqq/components/widgets/CompositeWidget.tsx

@@ -22,19 +22,25 @@
 
 import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
 import {Box, Skeleton} from "@mui/material";
+import Card from "@mui/material/Card";
+import Modal from "@mui/material/Modal";
 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";
+import ProcessWidgetBlockUtils from "qqq/pages/processes/ProcessWidgetBlockUtils";
+import React, {useEffect, useState} from "react";
 
 
 export interface CompositeData
 {
+   blockId: string;
    blocks: BlockData[];
    styleOverrides?: any;
    layout?: string;
    overlayHtml?: string;
    overlayStyleOverrides?: any;
+   modalMode: string;
+   styles?: any;
 }
 
 
@@ -42,13 +48,15 @@ interface CompositeWidgetProps
 {
    widgetMetaData: QWidgetMetaData;
    data: CompositeData;
+   actionCallback?: (blockData: BlockData, eventValues?: { [name: string]: any }) => boolean;
+   values?: { [key: string]: any };
 }
 
 
 /*******************************************************************************
  ** Widget which is a list of Blocks.
  *******************************************************************************/
-export default function CompositeWidget({widgetMetaData, data}: CompositeWidgetProps): JSX.Element
+export default function CompositeWidget({widgetMetaData, data, actionCallback, values}: CompositeWidgetProps): JSX.Element
 {
    if (!data || !data.blocks)
    {
@@ -74,6 +82,12 @@ export default function CompositeWidget({widgetMetaData, data}: CompositeWidgetP
       boxStyle.flexWrap = "wrap";
       boxStyle.gap = "0.5rem";
    }
+   else if (layout == "FLEX_ROW")
+   {
+      boxStyle.display = "flex";
+      boxStyle.flexDirection = "row";
+      boxStyle.gap = "0.5rem";
+   }
    else if (layout == "FLEX_ROW_SPACE_BETWEEN")
    {
       boxStyle.display = "flex";
@@ -81,6 +95,14 @@ export default function CompositeWidget({widgetMetaData, data}: CompositeWidgetP
       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";
@@ -105,6 +127,19 @@ export default function CompositeWidget({widgetMetaData, data}: CompositeWidgetP
       boxStyle = {...boxStyle, ...data.styleOverrides};
    }
 
+   if (data.styles?.backgroundColor)
+   {
+      boxStyle.backgroundColor = ProcessWidgetBlockUtils.processColorFromStyleMap(data.styles.backgroundColor);
+   }
+
+   if (data.styles?.padding)
+   {
+      boxStyle.paddingTop = data.styles?.padding.top + "px"
+      boxStyle.paddingBottom = data.styles?.padding.bottom + "px"
+      boxStyle.paddingLeft = data.styles?.padding.left + "px"
+      boxStyle.paddingRight = data.styles?.padding.right + "px"
+   }
+
    let overlayStyle: any = {};
 
    if (data?.overlayStyleOverrides)
@@ -112,7 +147,7 @@ export default function CompositeWidget({widgetMetaData, data}: CompositeWidgetP
       overlayStyle = {...overlayStyle, ...data.overlayStyleOverrides};
    }
 
-   return (
+   const content = (
       <>
          {
             data?.overlayHtml &&
@@ -122,7 +157,7 @@ export default function CompositeWidget({widgetMetaData, data}: CompositeWidgetP
             {
                data.blocks.map((block: BlockData, index) => (
                   <React.Fragment key={index}>
-                     <WidgetBlock widgetMetaData={widgetMetaData} block={block} />
+                     <WidgetBlock widgetMetaData={widgetMetaData} block={block} actionCallback={actionCallback} values={values} />
                   </React.Fragment>
                ))
             }
@@ -130,4 +165,53 @@ export default function CompositeWidget({widgetMetaData, data}: CompositeWidgetP
       </>
    );
 
+   if (data.modalMode)
+   {
+      const [isModalOpen, setIsModalOpen] = useState(values && (values[data.blockId] == true));
+
+      /***************************************************************************
+       **
+       ***************************************************************************/
+      const controlCallback = (newValue: boolean) =>
+      {
+         setIsModalOpen(newValue);
+      };
+
+      /***************************************************************************
+       **
+       ***************************************************************************/
+      const modalOnClose = (event: object, reason: string) =>
+      {
+         values[data.blockId] = false;
+         setIsModalOpen(false);
+         actionCallback({blockTypeName: "BUTTON", values: {}}, {controlCode: `hideModal:${data.blockId}`});
+      };
+
+      //////////////////////////////////////////////////////////////////////////////////////////
+      // register the control-callback function - so when buttons are clicked, we can be told //
+      //////////////////////////////////////////////////////////////////////////////////////////
+      useEffect(() =>
+      {
+         if (actionCallback)
+         {
+            actionCallback(null, {
+               registerControlCallbackName: data.blockId,
+               registerControlCallbackFunction: controlCallback
+            });
+         }
+      }, []);
+
+      return (<Modal open={isModalOpen} onClose={modalOnClose}>
+         <Box sx={{position: "absolute", overflowY: "auto", maxHeight: "100%", width: "100%"}}>
+            <Card sx={{my: 5, mx: "auto", p: "1rem", maxWidth: "1024px"}}>
+               {content}
+            </Card>
+         </Box>
+      </Modal>);
+   }
+   else
+   {
+      return content;
+   }
+
 }

src/qqq/components/widgets/DashboardWidgets.tsx

@@ -18,15 +18,18 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
+import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
 import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
 import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
 import {Alert, Skeleton} from "@mui/material";
 import Box from "@mui/material/Box";
 import Grid from "@mui/material/Grid";
+import Modal from "@mui/material/Modal";
 import Tab from "@mui/material/Tab";
 import Tabs from "@mui/material/Tabs";
 import parse from "html-react-parser";
 import QContext from "QContext";
+import EntityForm from "qqq/components/forms/EntityForm";
 import MDTypography from "qqq/components/legacy/MDTypography";
 import TabPanel from "qqq/components/misc/TabPanel";
 import BarChart from "qqq/components/widgets/charts/barchart/BarChart";
@@ -43,7 +46,7 @@ import FieldValueListWidget from "qqq/components/widgets/misc/FieldValueListWidg
 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 RecordGridWidget, {ChildRecordListData} from "qqq/components/widgets/misc/RecordGridWidget";
 import ScriptViewer from "qqq/components/widgets/misc/ScriptViewer";
 import StepperCard from "qqq/components/widgets/misc/StepperCard";
 import USMapWidget from "qqq/components/widgets/misc/USMapWidget";
@@ -71,6 +74,9 @@ interface Props
    childUrlParams?: string;
    parentWidgetMetaData?: QWidgetMetaData;
    wrapWidgetsInTabPanels: boolean;
+   actionCallback?: (data: any, eventValues?: { [name: string]: any }) => boolean;
+   initialWidgetDataList: any[];
+   values?: { [key: string]: any };
 }
 
 DashboardWidgets.defaultProps = {
@@ -82,11 +88,14 @@ DashboardWidgets.defaultProps = {
    childUrlParams: "",
    parentWidgetMetaData: null,
    wrapWidgetsInTabPanels: false,
+   actionCallback: null,
+   initialWidgetDataList: null,
+   values: {}
 };
 
-function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, record, omitWrappingGridContainer, areChildren, childUrlParams, parentWidgetMetaData, wrapWidgetsInTabPanels}: Props): JSX.Element
+function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, record, omitWrappingGridContainer, areChildren, childUrlParams, parentWidgetMetaData, wrapWidgetsInTabPanels, actionCallback, initialWidgetDataList, values}: Props): JSX.Element
 {
-   const [widgetData, setWidgetData] = useState([] as any[]);
+   const [widgetData, setWidgetData] = useState(initialWidgetDataList == null ? [] as any[] : initialWidgetDataList);
    const [widgetCounter, setWidgetCounter] = useState(0);
    const [, forceUpdate] = useReducer((x) => x + 1, 0);
 
@@ -94,6 +103,12 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
    const [haveLoadedParams, setHaveLoadedParams] = useState(false);
    const {accentColor} = useContext(QContext);
 
+   /////////////////////////
+   // modal form controls //
+   /////////////////////////
+   const [showEditChildForm, setShowEditChildForm] = useState(null as any);
+   const [modalTable, setModalTable] = useState(null as QTableMetaData);
+
    let initialSelectedTab = 0;
    let selectedTabKey: string = null;
    if (parentWidgetMetaData && wrapWidgetsInTabPanels)
@@ -114,7 +129,15 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
 
    useEffect(() =>
    {
+      if (initialWidgetDataList && initialWidgetDataList.length > 0)
+      {
+         // todo actually, should this check each element of the array, down in the loop?  yeah, when we need to, do it that way.
+         console.log("We already have initial widget data, so not fetching from backend.");
+         return;
+      }
+
       setWidgetData([]);
+
       for (let i = 0; i < widgetMetaDataList.length; i++)
       {
          const widgetMetaData = widgetMetaDataList[i];
@@ -151,7 +174,7 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
 
    const reloadWidget = async (index: number, data: string) =>
    {
-      (async () =>
+      await (async () =>
       {
          const urlParams = getQueryParams(widgetMetaDataList[index], data);
          setCurrentUrlParams(urlParams);
@@ -270,6 +293,148 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
       return (rs);
    }
 
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   const closeEditChildForm = (event: object, reason: string) =>
+   {
+      if (reason === "backdropClick" || reason === "escapeKeyDown")
+      {
+         return;
+      }
+
+      setShowEditChildForm(null);
+   };
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function deleteChildRecord(name: string, widgetIndex: number, rowIndex: number)
+   {
+      updateChildRecordList(name, "delete", rowIndex);
+      actionCallback(widgetData[widgetIndex]);
+   };
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function openEditChildRecord(name: string, widgetData: any, rowIndex: number)
+   {
+      let defaultValues = widgetData.queryOutput.records[rowIndex].values;
+
+      let disabledFields = widgetData.disabledFieldsForNewChildRecords;
+      if (!disabledFields)
+      {
+         disabledFields = widgetData.defaultValuesForNewChildRecords;
+      }
+
+      doOpenEditChildForm(name, widgetData.childTableMetaData, rowIndex, defaultValues, disabledFields);
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function openAddChildRecord(name: string, widgetData: any)
+   {
+      let disabledFields = widgetData.disabledFieldsForNewChildRecords;
+      if (!disabledFields)
+      {
+         disabledFields = widgetData.defaultValuesForNewChildRecords;
+      }
+
+      doOpenEditChildForm(name, widgetData.childTableMetaData, null, null, disabledFields);
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function doOpenEditChildForm(widgetName: string, table: QTableMetaData, rowIndex: number, defaultValues: any, disabledFields: any)
+   {
+      const showEditChildForm: any = {};
+      showEditChildForm.widgetName = widgetName;
+      showEditChildForm.table = table;
+      showEditChildForm.rowIndex = rowIndex;
+      showEditChildForm.defaultValues = defaultValues;
+      showEditChildForm.disabledFields = disabledFields;
+      setShowEditChildForm(showEditChildForm);
+   }
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function submitEditChildForm(values: any)
+   {
+      updateChildRecordList(showEditChildForm.widgetName, showEditChildForm.rowIndex == null ? "insert" : "edit", showEditChildForm.rowIndex, values);
+      let widgetIndex = determineChildRecordListIndex(showEditChildForm.widgetName);
+      actionCallback(widgetData[widgetIndex]);
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function determineChildRecordListIndex(widgetName: string): number
+   {
+      let widgetIndex = -1;
+      for (var i = 0; i < widgetMetaDataList.length; i++)
+      {
+         const widgetMetaData = widgetMetaDataList[i];
+         if (widgetMetaData.name == widgetName)
+         {
+            widgetIndex = i;
+            break;
+         }
+      }
+      return (widgetIndex);
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function updateChildRecordList(widgetName: string, action: "insert" | "edit" | "delete", rowIndex?: number, values?: any)
+   {
+      ////////////////////////////////////////////////
+      // find the correct child record widget index //
+      ////////////////////////////////////////////////
+      let widgetIndex = determineChildRecordListIndex(widgetName);
+
+      if (!widgetData[widgetIndex].queryOutput.records)
+      {
+         widgetData[widgetIndex].queryOutput.records = [];
+      }
+
+      const newChildListWidgetData: ChildRecordListData = widgetData[widgetIndex];
+      if (!newChildListWidgetData.queryOutput.records)
+      {
+         newChildListWidgetData.queryOutput.records = [];
+      }
+
+      switch (action)
+      {
+         case "insert":
+            newChildListWidgetData.queryOutput.records.push({values: values});
+            break;
+         case "edit":
+            newChildListWidgetData.queryOutput.records[rowIndex] = {values: values};
+            break;
+         case "delete":
+            newChildListWidgetData.queryOutput.records.splice(rowIndex, 1);
+            break;
+      }
+      newChildListWidgetData.totalRows = newChildListWidgetData.queryOutput.records.length;
+      widgetData[widgetIndex] = newChildListWidgetData;
+      setWidgetData(widgetData);
+
+      setShowEditChildForm(null);
+   }
+
+
    const renderWidget = (widgetMetaData: QWidgetMetaData, i: number): JSX.Element =>
    {
       const labelAdditionalComponentsRight: LabelComponent[] = [];
@@ -309,7 +474,7 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
                )
             }
             {
-               widgetMetaData.type === "alert" && widgetData[i]?.html && (
+               widgetMetaData.type === "alert" && widgetData[i]?.html && !widgetData[i]?.hideWidget && (
                   <Widget
                      omitPadding={true}
                      widgetMetaData={widgetMetaData}
@@ -319,7 +484,16 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
                      labelAdditionalComponentsRight={labelAdditionalComponentsRight}
                      labelAdditionalComponentsLeft={labelAdditionalComponentsLeft}
                   >
-                     <Alert severity={widgetData[i]?.alertType?.toLowerCase()}>{parse(widgetData[i]?.html)}</Alert>
+                     <Alert severity={widgetData[i]?.alertType?.toLowerCase()}>
+                        {parse(widgetData[i]?.html)}
+                        {widgetData[i]?.bulletList && (
+                           <div style={{fontSize: "14px"}}>
+                              {widgetData[i].bulletList.map((bullet: string, index: number) =>
+                                 <li key={`widget-${i}-${index}`}>{parse(bullet)}</li>
+                              )}
+                           </div>
+                        )}
+                     </Alert>
                   </Widget>
                )
             }
@@ -501,9 +675,7 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
             }
             {
                widgetMetaData.type === "divider" && (
-                  <Box>
-                     <DividerWidget />
-                  </Box>
+                  <DividerWidget />
                )
             }
             {
@@ -537,6 +709,12 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
                widgetMetaData.type === "childRecordList" && (
                   widgetData && widgetData[i] &&
                   <RecordGridWidget
+                     disableRowClick={widgetData[i]?.disableRowClick}
+                     allowRecordEdit={widgetData[i]?.allowRecordEdit}
+                     allowRecordDelete={widgetData[i]?.allowRecordDelete}
+                     deleteRecordCallback={(rowIndex) => deleteChildRecord(widgetMetaData.name, i, rowIndex)}
+                     editRecordCallback={(rowIndex) => openEditChildRecord(widgetMetaData.name, widgetData[i], rowIndex)}
+                     addNewRecordCallback={() => openAddChildRecord(widgetMetaData.name, widgetData[i])}
                      widgetMetaData={widgetMetaData}
                      data={widgetData[i]}
                   />
@@ -563,7 +741,7 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
                      labelAdditionalComponentsRight={labelAdditionalComponentsRight}
                      labelAdditionalComponentsLeft={labelAdditionalComponentsLeft}
                   >
-                     <CompositeWidget widgetMetaData={widgetMetaData} data={widgetData[i]} />
+                     <CompositeWidget widgetMetaData={widgetMetaData} data={widgetData[i]} actionCallback={actionCallback} values={values} />
                   </Widget>
                )
             }
@@ -638,23 +816,23 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
 
                   if (!omitWrappingGridContainer)
                   {
-                     const gridProps: {[key: string]: any} = {};
+                     const gridProps: { [key: string]: any } = {};
 
-                     for(let size of ["xs", "sm", "md", "lg", "xl", "xxl"])
+                     for (let size of ["xs", "sm", "md", "lg", "xl", "xxl"])
                      {
-                        const key = `gridCols:sizeClass:${size}`
-                        if(widgetMetaData?.defaultValues?.has(key))
+                        const key = `gridCols:sizeClass:${size}`;
+                        if (widgetMetaData?.defaultValues?.has(key))
                         {
                            gridProps[size] = widgetMetaData?.defaultValues.get(key);
                         }
                      }
 
-                     if(!gridProps["xxl"])
+                     if (!gridProps["xxl"])
                      {
                         gridProps["xxl"] = widgetMetaData.gridColumns ? widgetMetaData.gridColumns : 12;
                      }
 
-                     if(!gridProps["xs"])
+                     if (!gridProps["xs"])
                      {
                         gridProps["xs"] = 12;
                      }
@@ -710,6 +888,22 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
                   </Grid>
                )
             }
+            {
+               showEditChildForm &&
+               <Modal open={showEditChildForm as boolean} onClose={(event, reason) => closeEditChildForm(event, reason)}>
+                  <div className="modalEditForm">
+                     <EntityForm
+                        isModal={true}
+                        closeModalHandler={closeEditChildForm}
+                        table={showEditChildForm.table}
+                        defaultValues={showEditChildForm.defaultValues}
+                        disabledFields={showEditChildForm.disabledFields}
+                        onSubmitCallback={submitEditChildForm}
+                        overrideHeading={`${showEditChildForm.rowIndex != null ? "Editing" : "Creating New"} ${showEditChildForm.table.label}`}
+                     />
+                  </div>
+               </Modal>
+            }
          </>
       ) : null
    );

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 ButtonBlock from "qqq/components/widgets/blocks/ButtonBlock";
+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,22 @@ 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, eventValues?: {[name: string]: any}) => boolean;
+   values?: { [key: string]: any };
 }
 
 
 /*******************************************************************************
  ** 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, values}: WidgetBlockProps): JSX.Element
 {
    if(!block)
    {
@@ -64,7 +70,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} values={values} />);
    }
 
    switch(block.blockTypeName)
@@ -83,6 +89,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 "BUTTON":
+         return (<ButtonBlock 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/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/BlockModels.ts

@@ -35,6 +35,8 @@ export interface BlockData
 
    values: any;
    styles?: any;
+
+   conditional?: string;
 }
 
 
@@ -57,5 +59,6 @@ export interface StandardBlockComponentProps
 {
    widgetMetaData: QWidgetMetaData;
    data: BlockData;
+   actionCallback?: (blockData: BlockData, eventValues?: {[name: string]: any}) => boolean;
 }
 

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

@@ -0,0 +1,86 @@
+/*
+ * 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 ... a button...
+ **
+ *******************************************************************************/
+export default function ButtonBlock({widgetMetaData, data, actionCallback}: StandardBlockComponentProps): JSX.Element
+{
+   const startIcon = data.values.startIcon?.name ? <Icon>{data.values.startIcon.name}</Icon> : null;
+   const endIcon = data.values.endIcon?.name ? <Icon>{data.values.endIcon.name}</Icon> : null;
+
+   function onClick()
+   {
+      if (actionCallback)
+      {
+         actionCallback(data, data.values);
+      }
+      else
+      {
+         console.log("ButtonBlock onClick with no actionCallback present, so, noop");
+      }
+   }
+
+   let buttonVariant: "gradient" | "outlined" | "text" = "gradient";
+   if (data.styles?.format == "outlined")
+   {
+      buttonVariant = "outlined";
+   }
+   else if (data.styles?.format == "text")
+   {
+      buttonVariant = "text";
+   }
+   else if (data.styles?.format == "filled")
+   {
+      buttonVariant = "gradient";
+   }
+
+   // todo - button colors... but to do RGB's, might need to move away from MDButton?
+
+   return (
+      <BlockElementWrapper metaData={widgetMetaData} data={data} slot="">
+         <Box mx={1} my={1} minWidth={standardWidth}>
+            <MDButton
+               type="button"
+               variant={buttonVariant}
+               color="dark"
+               size="small"
+               fullWidth
+               startIcon={startIcon}
+               endIcon={endIcon}
+               onClick={onClick}
+            >
+               {data.values.label ?? "Button"}
+            </MDButton>
+         </Box>
+      </BlockElementWrapper>
+   );
+}

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,139 @@
+/*
+ * 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 dynamicFormFieldRest: {onBlur?: any, sx?: any} = {}
+   if(autoFocus && blurCount == 0)
+   {
+      dynamicFormFieldRest.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=""
+                  placeholder={data.values?.placeholder}
+                  backgroundColor="#FFFFFF"
+                  formFieldObject={dynamicField}
+                  type={fieldMetaData.type}
+                  value={value}
+                  autoFocus={autoFocus}
+                  onKeyUp={eventHandler}
+                  {...dynamicFormFieldRest} />
+            </>
+         </BlockElementWrapper>
+      </Box>
+   );
+}

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

@@ -19,8 +19,12 @@
  * 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 BlockElementWrapper from "qqq/components/widgets/blocks/BlockElementWrapper";
 import {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockModels";
+import ProcessWidgetBlockUtils from "qqq/pages/processes/ProcessWidgetBlockUtils";
+import React from "react";
 
 /*******************************************************************************
  ** Block that renders ... just some text.
@@ -29,9 +33,132 @@ 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?.color)
+   {
+      color = ProcessWidgetBlockUtils.processColorFromStyleMap(data.styles.color);
+   }
+
+   let boxStyle = {};
+   if (data.styles?.format == "alert")
+   {
+      boxStyle =
+         {
+            border: `1px solid ${color}`,
+            background: `${color}40`,
+            padding: "0.5rem",
+            borderRadius: "0.5rem",
+         };
+   }
+   else if (data.styles?.format == "banner")
+   {
+      boxStyle =
+         {
+            background: `${color}40`,
+            padding: "0.5rem",
+         };
+   }
+
+   let fontSize = "1rem";
+   if (data.styles?.size)
+   {
+      switch (data.styles.size.toLowerCase())
+      {
+         case "largest":
+            fontSize = "3rem";
+            break;
+         case "headline":
+            fontSize = "2rem";
+            break;
+         case "title":
+            fontSize = "1.5rem";
+            break;
+         case "body":
+            fontSize = "1rem";
+            break;
+         case "smallest":
+            fontSize = "0.75rem";
+            break;
+         default:
+         {
+            if (data.styles.size.match(/^\d+$/))
+            {
+               fontSize = `${data.styles.size}px`;
+            }
+            else
+            {
+               fontSize = "1rem";
+            }
+         }
+      }
+   }
+
+   let fontWeight = "400";
+   if (data.styles?.weight)
+   {
+      switch (data.styles.weight.toLowerCase())
+      {
+         case "thin":
+         case "100":
+            fontWeight = "100";
+            break;
+         case "extralight":
+         case "200":
+            fontWeight = "200";
+            break;
+         case "light":
+         case "300":
+            fontWeight = "300";
+            break;
+         case "normal":
+         case "400":
+            fontWeight = "400";
+            break;
+         case "medium":
+         case "500":
+            fontWeight = "500";
+            break;
+         case "semibold":
+         case "600":
+            fontWeight = "600";
+            break;
+         case "bold":
+         case "700":
+            fontWeight = "700";
+            break;
+         case "extrabold":
+         case "800":
+            fontWeight = "800";
+            break;
+         case "black":
+         case "900":
+            fontWeight = "900";
+            break;
+      }
+   }
+
+   const text = data.values.interpolatedText ?? data.values.text;
+   const lines = text.split("\n");
+
+   const startIcon = data.values.startIcon?.name ? <Icon>{data.values.startIcon.name}</Icon> : null;
+   const endIcon = data.values.endIcon?.name ? <Icon>{data.values.endIcon.name}</Icon> : null;
+
    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: fontSize, color: color, fontWeight: fontWeight}}>
+               {lines.map((line: string, index: number) =>
+                  (
+                     <div key={index}>
+                        <>
+                           {index == 0 && startIcon ? {startIcon} : null}
+                           {line}
+                           {index == lines.length - 1 && endIcon ? {endIcon} : null}
+                        </>
+                     </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/Divider.tsx

@@ -19,13 +19,16 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
+import Box from "@mui/material/Box";
 import Divider from "@mui/material/Divider";
 
 
 function DividerWidget(): JSX.Element
 {
    return (
-      <Divider sx={{padding: "1px", background: "red"}}/>
+      <Box pl={3} pt={3} pb={3} width="100%">
+         <Divider sx={{width: "100%", height: "1px", background: "grey"}} />
+      </Box>
    );
 }
 

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

@@ -87,6 +87,7 @@ export default function FilterAndColumnsSetupWidget({isEditable, widgetMetaData,
 {
    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);
@@ -272,7 +273,7 @@ export default function FilterAndColumnsSetupWidget({isEditable, widgetMetaData,
    /*******************************************************************************
     **
     *******************************************************************************/
-   function mayShowQueryPreview(): boolean
+   function mayShowQuery(): boolean
    {
       if (tableMetaData)
       {
@@ -288,7 +289,7 @@ export default function FilterAndColumnsSetupWidget({isEditable, widgetMetaData,
    /*******************************************************************************
     **
     *******************************************************************************/
-   function mayShowColumnsPreview(): boolean
+   function mayShowColumns(): boolean
    {
       if (tableMetaData)
       {
@@ -356,14 +357,14 @@ export default function FilterAndColumnsSetupWidget({isEditable, widgetMetaData,
          <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 &&
@@ -382,11 +383,11 @@ export default function FilterAndColumnsSetupWidget({isEditable, widgetMetaData,
                <h5>Columns</h5>
                <Box display="flex" flexWrap="wrap" fontSize="1rem">
                   {
-                     mayShowColumnsPreview() &&
+                     mayShowColumns() && columns &&
                      columns.columns.map((column, i) => <React.Fragment key={`column-${i}`}>{renderColumn(column)}</React.Fragment>)
                   }
                   {
-                     !mayShowColumnsPreview() &&
+                     !mayShowColumns() &&
                      <Box width="100%" sx={{fontSize: "1rem", background: "#FFFFFF"}} minHeight={"2.375rem"} p={"0.5rem"} pb={"0.125rem"}>
                         {
                            isEditable &&
@@ -402,6 +403,21 @@ export default function FilterAndColumnsSetupWidget({isEditable, widgetMetaData,
                </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)}>

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

@@ -39,15 +39,15 @@ import {Link, useNavigate} from "react-router-dom";
 
 export interface ChildRecordListData extends WidgetData
 {
-   title: string;
-   queryOutput: { records: { values: any }[] };
-   childTableMetaData: QTableMetaData;
-   tablePath: string;
-   viewAllLink: string;
-   totalRows: number;
-   canAddChildRecord: boolean;
-   defaultValuesForNewChildRecords: { [fieldName: string]: any };
-   disabledFieldsForNewChildRecords: { [fieldName: string]: any };
+   title?: string;
+   queryOutput?: { records: { values: any }[] };
+   childTableMetaData?: QTableMetaData;
+   tablePath?: string;
+   viewAllLink?: string;
+   totalRows?: number;
+   canAddChildRecord?: boolean;
+   defaultValuesForNewChildRecords?: { [fieldName: string]: any };
+   disabledFieldsForNewChildRecords?: { [fieldName: string]: any };
 }
 
 interface Props
@@ -176,7 +176,7 @@ function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRo
          setCsv(csv);
          setFileName(fileName);
       }
-   }, [data]);
+   }, [JSON.stringify(data?.queryOutput)]);
 
    ///////////////////
    // view all link //
@@ -304,7 +304,7 @@ function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRo
          labelAdditionalComponentsRight={labelAdditionalComponentsRight}
          labelBoxAdditionalSx={{position: "relative", top: "-0.375rem"}}
       >
-         <Box mx={-3} mb={-3}>
+         <Box>
             <Box>
                <DataGridPro
                   autoHeight

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

@@ -0,0 +1,96 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2022.  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 Modal from "@mui/material/Modal";
+import EntityForm from "qqq/components/forms/EntityForm";
+import Client from "qqq/utils/qqq/Client";
+import React, {useEffect, useReducer, useState} from "react";
+
+
+////////////////////////////////
+// structure of expected data //
+////////////////////////////////
+export interface ModalEditFormData
+{
+   tableName: string;
+   defaultValues?: { [key: string]: string };
+   disabledFields?: { [key: string]: boolean } | string[];
+   overrideHeading?: string;
+   onSubmitCallback?: (values: any) => void;
+   initialShowModalValue?: boolean;
+}
+
+const qController = Client.getInstance();
+
+function ModalEditForm({tableName, defaultValues, disabledFields, overrideHeading, onSubmitCallback, initialShowModalValue}: ModalEditFormData,): JSX.Element
+{
+   const [showModal, setShowModal] = useState(initialShowModalValue);
+   const [table, setTable] = useState(null as QTableMetaData);
+   const [, forceUpdate] = useReducer((x) => x + 1, 0);
+
+   useEffect(() =>
+   {
+      if (!tableName)
+      {
+         return;
+      }
+
+      (async () =>
+      {
+         const tableMetaData = await qController.loadTableMetaData(tableName);
+         setTable(tableMetaData);
+         forceUpdate();
+      })();
+   }, [tableName]);
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   const closeEditChildForm = (event: object, reason: string) =>
+   {
+      if (reason === "backdropClick" || reason === "escapeKeyDown")
+      {
+         return;
+      }
+
+      setShowModal(null);
+   };
+
+   return (
+      table && showModal &&
+      <Modal open={showModal as boolean} onClose={(event, reason) => closeEditChildForm(event, reason)}>
+         <div className="modalEditForm">
+            <EntityForm
+               isModal={true}
+               closeModalHandler={closeEditChildForm}
+               table={table}
+               defaultValues={defaultValues}
+               disabledFields={disabledFields}
+               onSubmitCallback={onSubmitCallback}
+               overrideHeading={overrideHeading}
+            />
+         </div>
+      </Modal>
+   );
+}
+
+export default ModalEditForm;

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/pages/processes/ProcessRun.tsx

@@ -29,6 +29,7 @@ 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";
@@ -36,12 +37,14 @@ import {QJobStarted} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJob
 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, Box, Button, CircularProgress, Icon, TablePagination} from "@mui/material";
+import {Alert, Button, CircularProgress, Icon, TablePagination} from "@mui/material";
+import Box from "@mui/material/Box";
 import Card from "@mui/material/Card";
 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";
@@ -60,8 +63,12 @@ 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 {ChildRecordListData} from "qqq/components/widgets/misc/RecordGridWidget";
 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";
@@ -89,14 +96,18 @@ const INITIAL_RETRY_MILLIS = 1_500;
 const RETRY_MAX_MILLIS = 12_000;
 const BACKOFF_AMOUNT = 1.5;
 
-////////////////////////////////////////////////////////////////////////////
-// define a function that we can make referenes to, which we'll overwrite //
-// with formik's setFieldValue function, once we're inside formik.        //
-////////////////////////////////////////////////////////////////////////////
+////////////////////////////////////////////////////////////////////////////////
+// define some functions that we can make reference 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
@@ -120,6 +131,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);
@@ -136,8 +148,10 @@ 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 [renderedWidgets, setRenderedWidgets] = useState({} as { [step: string]: { [widgetName: string]: any } });
+   const [controlCallbacks, setControlCallbacks] = useState({} as { [name: string]: () => void });
 
    const {pageHeader, recordAnalytics, setPageHeader, helpHelpActive} = useContext(QContext);
 
@@ -155,8 +169,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 //
@@ -175,7 +211,8 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
    const [recordConfig, setRecordConfig] = useState({} as any);
    const [pageNumber, setPageNumber] = useState(0);
    const [rowsPerPage, setRowsPerPage] = useState(10);
-   const [records, setRecords] = useState([] as QRecord[]);
+   const [records, setRecords] = useState([] as any);
+   const [childRecordData, setChildRecordData] = useState(null as ChildRecordListData);
 
    //////////////////////////////
    // state for bulk edit form //
@@ -294,36 +331,205 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
     *******************************************************************************/
    function renderWidget(widgetName: string)
    {
+      const widgetMetaData = qInstance.widgets.get(widgetName);
+      if (!widgetMetaData)
+      {
+         return (<Alert color="error">Unrecognized widget name: {widgetName}</Alert>);
+      }
+
       if (!renderedWidgets[activeStep.name])
       {
          renderedWidgets[activeStep.name] = {};
          setRenderedWidgets(renderedWidgets);
       }
 
-      if (renderedWidgets[activeStep.name][widgetName])
+      let isChildRecordWidget = widgetMetaData.type == "childRecordList";
+      if (!isChildRecordWidget && 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])}`);
       }
 
+      let initialWidgetDataList = null;
+      if (processValues[widgetName])
+      {
+         processValues[widgetName].hasPermission = true;
+         initialWidgetDataList = [processValues[widgetName]];
+      }
+
+      let actionCallback = blockWidgetActionCallback;
+      if (isChildRecordWidget)
+      {
+         actionCallback = childRecordListWidgetActionCallBack;
+
+         if (childRecordData)
+         {
+            initialWidgetDataList = [childRecordData];
+         }
+      }
+
       const renderedWidget = (<Box m={-2}>
-         <DashboardWidgets widgetMetaDataList={[widgetMetaData]} omitWrappingGridContainer={true} childUrlParams={queryStringParts.join("&")} />
+         <DashboardWidgets widgetMetaDataList={[widgetMetaData]} omitWrappingGridContainer={true} childUrlParams={queryStringParts.join("&")} initialWidgetDataList={initialWidgetDataList} values={processValues} actionCallback={actionCallback} />
       </Box>);
       renderedWidgets[activeStep.name][widgetName] = renderedWidget;
       return renderedWidget;
    }
 
+
+   /***************************************************************************
+    **
+    ***************************************************************************/
+   function handleControlCode(controlCode: string)
+   {
+      const split = controlCode.split(":", 2);
+      let controlCallbackName: string;
+      let controlCallbackValue: any;
+      if (split.length == 2)
+      {
+         if (split[0] == "showModal")
+         {
+            processValues[split[1]] = true;
+            controlCallbackName = split[1];
+            controlCallbackValue = true;
+         }
+         else if (split[0] == "hideModal")
+         {
+            processValues[split[1]] = false;
+            controlCallbackName = split[1];
+            controlCallbackValue = false;
+         }
+         else if (split[0] == "toggleModal")
+         {
+            const currentValue = processValues[split[1]];
+            processValues[split[1]] = !!!currentValue;
+            controlCallbackName = split[1];
+            controlCallbackValue = processValues[split[1]];
+         }
+         else
+         {
+            console.log(`Unexpected part[0] (before colon) in controlCode: [${controlCode}]`);
+         }
+      }
+      else
+      {
+         console.log(`Expected controlCode to have 2 colon-delimited parts, but was: [${controlCode}]`);
+      }
+
+      if (controlCallbackName && controlCallbacks[controlCallbackName])
+      {
+         // @ts-ignore ... args are hard
+         controlCallbacks[controlCallbackName](controlCallbackValue);
+      }
+   }
+
+
+   /***************************************************************************
+    ** callback used by child list widget
+    ***************************************************************************/
+   function childRecordListWidgetActionCallBack(data: any): boolean
+   {
+      console.log(`in childRecordListWidgetActionCallBack: ${JSON.stringify(data)}`);
+      setChildRecordData(data as ChildRecordListData);
+      return (true);
+   }
+
+
+   /***************************************************************************
+    ** 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 (eventValues?.registerControlCallbackName && eventValues?.registerControlCallbackFunction)
+      {
+         controlCallbacks[eventValues.registerControlCallbackName] = eventValues.registerControlCallbackFunction;
+         setControlCallbacks(controlCallbacks);
+         return (true);
+      }
+
+      ////////////////////////////////////////////////////////////////////////////////////////////////////////
+      // we don't validate these on the android frontend, and it seems fine - just let the app validate it? //
+      ////////////////////////////////////////////////////////////////////////////////////////////////////////
+      // ///////////////////////////////////////////////////////////////////////////////
+      // // 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);
+      // }
+
+      let doSubmit = false;
+      if (blockData?.blockTypeName == "BUTTON" && eventValues?.actionCode)
+      {
+         doSubmit = true;
+      }
+      else if (blockData?.blockTypeName == "BUTTON" && eventValues?.controlCode)
+      {
+         handleControlCode(eventValues.controlCode);
+         doSubmit = false;
+      }
+      else if (blockData?.blockTypeName == "INPUT_FIELD")
+      {
+         ///////////////////////////////////////////////////////////////////////////////////////////////
+         // if action callback was fired from an input field, assume that means we're good to submit. //
+         ///////////////////////////////////////////////////////////////////////////////////////////////
+         doSubmit = true;
+      }
+
+      //////////////////
+      // ok - submit! //
+      //////////////////
+      if (doSubmit)
+      {
+         handleFormSubmit(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} values={processValues} />
+      </Box>;
+
+      setRenderedWidgets(renderedWidgets);
+
+      return (renderedWidgets[key]);
+   }
+
+
    ////////////////////////////////////////////////////
    // generate the main form body content for a step //
    ////////////////////////////////////////////////////
@@ -382,7 +588,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>
@@ -477,6 +683,7 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
       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}`} />;
+      const isFormatScanner = step?.format?.toLowerCase() == "scanner";
 
       return (
          <>
@@ -485,7 +692,7 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
                // hide label on widgets - the Widget component itself provides the label                                    //
                // for modals, show the process label, but not for full-screen processes (for them, it is in the breadcrumb) //
                ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
-               !isWidget &&
+               !isWidget && !isFormatScanner &&
                <MDTypography variant={isWidget ? "h6" : "h5"} component="div" fontWeight="bold">
                   {(isModal) ? `${overrideLabel ?? process.label}: ` : ""}
                   {step?.label}
@@ -763,8 +970,29 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
                         }
                         {
                            component.type === QComponentType.WIDGET && (
-                              component.values?.widgetName &&
-                              renderWidget(component.values?.widgetName)
+                              <>
+                                 {
+                                    ///////////////////////////////////////////////////
+                                    // 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>
@@ -864,6 +1092,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];
@@ -899,7 +1132,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))
@@ -909,6 +1152,16 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
             addField("googleDriveFolderName", {type: "hidden", omitFromQDynamicForm: true}, "", null);
          }
 
+         if (doesStepHaveComponent(activeStep, QComponentType.WIDGET))
+         {
+            ProcessWidgetBlockUtils.addFieldsForCompositeWidget(activeStep, processValues, (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 //
          ///////////////////////////////////////////////////
@@ -994,7 +1247,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 //
@@ -1067,6 +1320,11 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
             const {records} = response;
             setRecords(records);
 
+            if (!childRecordData || childRecordData.length == 0)
+            {
+               setChildRecordData(convertRecordsToChildRecordData(records));
+            }
+
             /////////////////////////////////////////////////////////////////////////////////////////
             // re-construct the recordConfig object, so the setState call triggers a new rendering //
             /////////////////////////////////////////////////////////////////////////////////////////
@@ -1088,6 +1346,71 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
       }
    }, [needRecords]);
 
+
+   /***************************************************************************
+    **
+    ***************************************************************************/
+   function convertRecordsToChildRecordData(records: QRecord[])
+   {
+      const frontendRecords = [] as any[];
+      records.forEach((record: QRecord) =>
+      {
+         const object = {
+            "tableName": record.tableName,
+            "recordLabel": record.recordLabel,
+            "errors": record.errors,
+            "warnings": record.warnings,
+            "values": Object.fromEntries(record.values),
+            "displayValues": Object.fromEntries(record.displayValues),
+         };
+         frontendRecords.push(object);
+      });
+      const newChildListData = {} as ChildRecordListData;
+      newChildListData.queryOutput = {records: frontendRecords};
+      return (newChildListData);
+   }
+
+
+   /***************************************************************************
+    **
+    ***************************************************************************/
+   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 //
    //////////////////////////////////////////////////////////////////////////////////////////////////////////
@@ -1112,13 +1435,19 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
                // 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.updatedFrontendStepList;
+               const updatedFrontendStepList = qJobComplete.processMetaDataAdjustment?.updatedFrontendStepList;
                if (updatedFrontendStepList)
                {
-                  setSteps(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) //
                ///////////////////////////////////////////////////////////////////////////////////
@@ -1159,7 +1488,9 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
 
                setJobUUID(null);
                setNewStep(nextStepName);
+               setStepInstanceCounter(1 + stepInstanceCounter);
                setProcessValues(newValues);
+               setRenderedWidgets({});
                setQJobRunning(null);
 
                if (formikSetFieldValueFunction)
@@ -1413,10 +1744,35 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
       setNewStep(activeStepIndex - 1);
    };
 
+   ////////////////////////////////////////////
+   // handle user submitting changed records //
+   ////////////////////////////////////////////
+   const doSubmit = async (formData: FormData) =>
+   {
+      const formDataHeaders = {
+         "content-type": "multipart/form-data; boundary=--------------------------320289315924586491558366",
+      };
+
+      setTimeout(async () =>
+      {
+         recordAnalytics({category: "processEvents", action: "processStep", label: activeStep.label});
+
+         const processResponse = await Client.getInstance().processStep(
+            processName,
+            processUUID,
+            activeStep.name,
+            formData,
+            formDataHeaders
+         );
+         setLastProcessResponse(processResponse);
+      });
+   };
+
    //////////////////////////////////////////////////////////////////////////////////////////
    // 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 handleFormSubmit = async (values: any) =>
    {
       setFormError(null);
 
@@ -1455,28 +1811,20 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
          formData.append("bulkEditEnabledFields", bulkEditEnabledFields.join(","));
       }
 
-      const formDataHeaders = {
-         "content-type": "multipart/form-data; boundary=--------------------------320289315924586491558366",
-      };
+      /////////////////////////////////////////////////////////////
+      // convert to regular objects so that they can be jsonized //
+      /////////////////////////////////////////////////////////////
+      if (childRecordData)
+      {
+         formData.append("frontendRecords", JSON.stringify(childRecordData.queryOutput.records));
+      }
 
       setProcessValues({});
       setRecords([]);
       setOverrideOnLastStep(null);
       setLastProcessResponse(new QJobRunning({message: "Working..."}));
 
-      setTimeout(async () =>
-      {
-         recordAnalytics({category: "processEvents", action: "processStep", label: activeStep.label});
-
-         const processResponse = await Client.getInstance().processStep(
-            processName,
-            processUUID,
-            activeStep.name,
-            formData,
-            formDataHeaders,
-         );
-         setLastProcessResponse(processResponse);
-      });
+      doSubmit(formData);
    };
 
 
@@ -1506,27 +1854,54 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
    };
 
 
-   const mainCardStyles: any = {};
    const formStyles: any = {};
-   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";
       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)
@@ -1549,23 +1924,24 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
          initialValues={initialValues}
          validationSchema={validationScheme}
          validation={validationFunction}
-         onSubmit={handleSubmit}
+         onSubmit={handleFormSubmit}
       >
          {({
-            values, errors, touched, isSubmitting, setFieldValue,
+            values, errors, touched, isSubmitting, setFieldValue, setTouched
          }) =>
          {
-            ///////////////////////////////////////////////////////////////////
-            // once we're in the formik form, use its setFieldValue function //
-            // over top of the default one we created globally               //
-            ///////////////////////////////////////////////////////////////////
+            //////////////////////////////////////////////////////////////////
+            // once we're in the formik form, capture some of its functions //
+            // over top of the default ones we created globally             //
+            //////////////////////////////////////////////////////////////////
             formikSetFieldValueFunction = setFieldValue;
+            formikSetTouched = setTouched;
 
             return (
                <Form style={formStyles} id={formId} autoComplete="off">
-                  <Card sx={mainCardStyles}>
+                  <Card sx={makeMainCardStyles}>
                      {
-                        !isWidget && (
+                        !isWidget && processMetaData?.stepFlow == "LINEAR" && (
                            <Box mx={2} mt={-3} sx={{"& .MuiStepper-horizontal": {minHeight: "5rem"}}}>
                               <Stepper activeStep={activeStepIndex} alternativeLabel>
                                  {steps.map((step) => (
@@ -1600,21 +1976,16 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
                            {/********************************
                             ** back &| next/submit buttons **
                             ********************************/}
-                           <Box mt={6} width="100%" display="flex" justifyContent="space-between" position={isWidget ? "absolute" : "initial"} bottom={isWidget ? "3rem" : "initial"} right={isWidget ? "1.5rem" : "initial"}>
+                           <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 ? (
+                              {processError || qJobRunning || !activeStep || activeStep?.format?.toLowerCase() == "scanner" ? (
                                  <Box />
                               ) : (
                                  <>
-                                    {formError && (
-                                       <MDTypography component="div" variant="caption" color="error" fontWeight="regular" align="right" fullWidth>
-                                          {formError}
-                                       </MDTypography>
-                                    )}
                                     {
                                        noMoreSteps && <QCancelButton
                                           onClickHandler={() => handleCancelClicked(true)}
@@ -1650,9 +2021,10 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
 
    const body = (
       <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,268 @@
+/*
+ * 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 == "BUTTON")
+            {
+               //////////////////////////////////////////
+               // look at actionCodes on 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, processValues: any, 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 or a widget w/ its data in the processValues, then, 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);
+         }
+         else if (component.type == QComponentType.WIDGET && processValues[component.values?.widgetName])
+         {
+            recursiveHelper(processValues[component.values?.widgetName] as unknown as CompositeData);
+         }
+      }
+   }
+
+
+   /***************************************************************************
+    **
+    ***************************************************************************/
+   public static processColorFromStyleMap(colorFromStyleMap?: string): string
+   {
+      if (colorFromStyleMap)
+      {
+         switch (colorFromStyleMap.toUpperCase())
+         {
+            case "SUCCESS":
+               return("#2BA83F");
+            case "WARNING":
+               return("#FBA132");
+            case "ERROR":
+               return("#FB4141");
+            case "INFO":
+               return("#458CFF");
+            case "MUTED":
+               return("#7b809a");
+            default:
+            {
+               if (colorFromStyleMap.match(/^[0-9A-F]{6}$/))
+               {
+                  return(`#${colorFromStyleMap}`);
+               }
+               else if (colorFromStyleMap.match(/^[0-9A-F]{8}$/))
+               {
+                  return(`#${colorFromStyleMap}`);
+               }
+               else
+               {
+                  return(colorFromStyleMap);
+               }
+            }
+         }
+      }
+   }
+
+}

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

@@ -779,13 +779,12 @@ function InputPossibleValueSourceSingle(tableName: string, field: QFieldMetaData
          }}
       >
          <DynamicSelect
-            tableName={tableName}
-            fieldName={field.name}
+            fieldPossibleValueProps={{tableName: tableName, fieldName: field.name, initialDisplayValue: selectedPossibleValue?.label}}
             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}
-            fieldName={field.name}
+            fieldPossibleValueProps={{tableName: tableName, fieldName: field.name, initialDisplayValue: null}}
             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 Box from "@mui/material/Box";
+import {Alert, Box, Collapse, Menu, Typography} from "@mui/material";
 import Button from "@mui/material/Button";
 import Card from "@mui/material/Card";
 import Divider from "@mui/material/Divider";
@@ -92,6 +91,7 @@ interface Props
    launchProcess?: QProcessMetaData;
    usage?: QueryScreenUsage;
    isModal?: boolean;
+   isPreview?: boolean;
    initialQueryFilter?: QQueryFilter;
    initialColumns?: QQueryColumns;
    allowVariables?: boolean;
@@ -126,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, allowVariables, initialQueryFilter, initialColumns}: Props, ref) =>
+const RecordQuery = forwardRef(({table, usage, isModal, isPreview, allowVariables, initialQueryFilter, initialColumns}: Props, ref) =>
 {
    const tableName = table.name;
    const [searchParams] = useSearchParams();
@@ -884,6 +884,18 @@ const RecordQuery = forwardRef(({table, usage, isModal, allowVariables, initialQ
    };
 
 
+   /*******************************************************************************
+    ** 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.
     *******************************************************************************/
@@ -2232,12 +2244,25 @@ const RecordQuery = forwardRef(({table, usage, isModal, allowVariables, initialQ
       return (
          <GridToolbarContainer>
             <div>
-               <Button id="refresh-button" onClick={() => updateTable("refresh button")} startIcon={<Icon>refresh</Icon>} sx={{pl: "1rem", pr: "0.5rem", minWidth: "unset"}}></Button>
-            </div>
-            <div style={{position: "relative"}}>
-               {/* @ts-ignore */}
-               <GridToolbarDensitySelector nonce={undefined} />
+               <Tooltip title="Refresh Query">
+                  <Button id="refresh-button" onClick={() => updateTable("refresh button")} startIcon={<Icon>refresh</Icon>} sx={{pl: "1rem", pr: "0.5rem", minWidth: "unset"}}></Button>
+               </Tooltip>
             </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" &&
@@ -2872,7 +2897,7 @@ const RecordQuery = forwardRef(({table, usage, isModal, allowVariables, initialQ
                }
 
                {
-                  metaData && tableMetaData &&
+                  !isPreview && metaData && tableMetaData &&
                   <BasicAndAdvancedQueryControls
                      ref={basicAndAdvancedQueryControlsRef}
                      metaData={metaData}

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

@@ -133,7 +133,7 @@ class FilterUtils
                }
                else
                {
-                  values = await qController.possibleValues(fieldTable.name, null, field.name, "", values);
+                  values = await qController.possibleValues(fieldTable.name, null, field.name, "", values, undefined, "filter");
                }
             }
 

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

@@ -57,4 +57,5 @@ module.exports = function (app)
    app.use("/images", getRequestHandler());
    app.use("/api*", getRequestHandler());
    app.use("/*api", getRequestHandler());
+   app.use("/qqq/*", getRequestHandler());
 };