SPRINT-16: finished parcel dashboard widgets

package.json

@@ -13,11 +13,12 @@
       "@fullcalendar/interaction": "5.10.0",
       "@fullcalendar/react": "5.10.0",
       "@fullcalendar/timegrid": "5.10.0",
-      "@kingsrook/qqq-frontend-core": "1.0.36",
+      "@kingsrook/qqq-frontend-core": "1.0.37",
       "@mui/icons-material": "5.4.1",
       "@mui/material": "5.4.1",
       "@mui/styled-engine": "5.4.1",
       "@mui/styles": "5.10.7",
+      "@mui/system": "5.10.14",
       "@mui/x-data-grid": "5.17.6",
       "@mui/x-data-grid-pro": "5.17.6",
       "@mui/x-license-pro": "5.12.3",

src/assets/theme/components/card/index.ts

@@ -1,17 +1,17 @@
 /**
-=========================================================
+ =========================================================
-* Material Dashboard 2 PRO React TS - v1.0.0
+ * Material Dashboard 2 PRO React TS - v1.0.0
-=========================================================
+ =========================================================
 
-* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+ * Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
-* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+ * Copyright 2022 Creative Tim (https://www.creative-tim.com)
 
-Coded by www.creative-tim.com
+ Coded by www.creative-tim.com
 
  =========================================================
 
-* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-*/
+ */
 
 // Material Dashboard 2 PRO React TS Base Styles
 import colors from "assets/theme/base/colors";
@@ -21,15 +21,18 @@ import boxShadows from "assets/theme/base/boxShadows";
 // Material Dashboard 2 PRO React Helper Function
 import rgba from "assets/theme/functions/rgba";
 
-const { black, white } = colors;
+const {black, white} = colors;
-const { borderWidth, borderRadius } = borders;
+const {borderWidth, borderRadius} = borders;
-const { md } = boxShadows;
+const {md} = boxShadows;
 
 // types
 // types
 type Types = any;
 
 const card: Types = {
+   defaultProps: {
+      elevation: 3
+   },
    styleOverrides: {
       root: {
          display: "flex",
@@ -41,7 +44,6 @@ const card: Types = {
          backgroundClip: "border-box",
          border: `${borderWidth[0]} solid ${rgba(black.main, 0.125)}`,
          borderRadius: borderRadius.xl,
-      boxShadow: md,
          overflow: "visible",
       },
    },

src/qqq/components/DashboardWidgets.tsx

@@ -32,10 +32,12 @@ import MDTypography from "qqq/components/Temporary/MDTypography";
 import BarChart from "qqq/pages/dashboards/Widgets/BarChart";
 import LineChart from "qqq/pages/dashboards/Widgets/LineChart";
 import MultiStatisticsCard from "qqq/pages/dashboards/Widgets/MultiStatisticsCard";
+import ParentWidget from "qqq/pages/dashboards/Widgets/ParentWidget";
 import QuickSightChart from "qqq/pages/dashboards/Widgets/QuickSightChart";
 import RecordGridWidget from "qqq/pages/dashboards/Widgets/RecordGridWidget";
 import StepperCard from "qqq/pages/dashboards/Widgets/StepperCard";
 import TableCard from "qqq/pages/dashboards/Widgets/TableCard";
+import ProcessRun from "qqq/pages/process-run";
 import QClient from "qqq/utils/QClient";
 
 const qController = QClient.getInstance();
@@ -45,15 +47,19 @@ interface Props
    widgetMetaDataList: QWidgetMetaData[];
    entityPrimaryKey?: string;
    omitWrappingGridContainer: boolean;
+   areChildren?: boolean;
+   childUrlParams?: string
 }
 
 DashboardWidgets.defaultProps = {
    widgetMetaDataList: null,
    entityPrimaryKey: null,
-   omitWrappingGridContainer: false
+   omitWrappingGridContainer: false,
+   areChildren: false,
+   childUrlParams: ""
 };
 
-function DashboardWidgets({widgetMetaDataList, entityPrimaryKey, omitWrappingGridContainer}: Props): JSX.Element
+function DashboardWidgets({widgetMetaDataList, entityPrimaryKey, omitWrappingGridContainer, areChildren, childUrlParams}: Props): JSX.Element
 {
    const location = useLocation();
    const [qInstance, setQInstance] = useState(null as QInstance);
@@ -83,7 +89,7 @@ function DashboardWidgets({widgetMetaDataList, entityPrimaryKey, omitWrappingGri
          widgetData[i] = {};
          (async () =>
          {
-            widgetData[i] = await qController.widget(widgetMetaDataList[i].name, `id=${entityPrimaryKey}`);
+            widgetData[i] = await qController.widget(widgetMetaDataList[i].name, `id=${entityPrimaryKey}&${childUrlParams}`);
             setWidgetCounter(widgetCounter + 1);
             forceUpdate();
          })();
@@ -96,25 +102,33 @@ function DashboardWidgets({widgetMetaDataList, entityPrimaryKey, omitWrappingGri
       setWidgetData([] as any[]);
    }, [location.pathname]);
 
-   const handleDropdownOnChange = (value: string, index: number) =>
+   const reloadWidget = (index: number, data: string) =>
    {
       setTimeout(async () =>
       {
-         widgetData[index] = await qController.widget(widgetMetaDataList[index].name);
+         widgetData[index] = await qController.widget(widgetMetaDataList[index].name, `id=${entityPrimaryKey}&${data}`);
+         setWidgetCounter(widgetCounter + 1);
       }, 1);
    };
 
    const widgetCount = widgetMetaDataList ? widgetMetaDataList.length : 0;
-   // console.log(JSON.stringify(widgetMetaDataList));
-   // console.log(widgetCount);
 
    const renderWidget = (widgetMetaData: QWidgetMetaData, i: number): JSX.Element =>
    {
       return (
-         <>
+         <MDBox sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
+            {
+               widgetMetaData.type === "parentWidget" && (
+                  <ParentWidget
+                     widgetIndex={i}
+                     label={widgetMetaData.label}
+                     data={widgetData[i]}
+                     reloadWidgetCallback={reloadWidget}
+                  />
+               )
+            }
             {
                widgetMetaData.type === "table" && (
-                  <MDBox sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px", width: "100%"}}>
                   <TableCard
                      color="info"
                      title={widgetMetaData.label}
@@ -123,33 +137,34 @@ function DashboardWidgets({widgetMetaDataList, entityPrimaryKey, omitWrappingGri
                      noRowsFoundHTML={widgetData[i]?.noRowsFoundHTML}
                      data={widgetData[i]}
                      dropdownOptions={widgetData[i]?.dropdownOptions}
-                        dropdownOnChange={handleDropdownOnChange}
+                     reloadWidgetCallback={reloadWidget}
                      widgetIndex={i}
                   />
-                  </MDBox>
+               )
+            }
+            {
+               widgetMetaData.type === "process" && widgetData[i]?.processMetaData && (
+                  <ProcessRun process={widgetData[i]?.processMetaData} defaultProcessValues={widgetData[i]?.defaultValues} isWidget={true} />
                )
             }
             {
                widgetMetaData.type === "stepper" && (
-                  <MDBox sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
                   <Card sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
                      <MDBox padding="1rem">
                         {
                            widgetMetaData.label && (
                               <MDTypography variant="h5" textTransform="capitalize">
-                                    {widgetMetaData.label}
+                                 {widgetMetaData.label}srp
                               </MDTypography>
                            )
                         }
                         <StepperCard data={widgetData[i]} />
                      </MDBox>
                   </Card>
-                  </MDBox>
                )
             }
             {
                widgetMetaData.type === "html" && (
-                  <MDBox sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
                   <Card sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
                      <MDBox padding="1rem">
                         <MDTypography variant="h5" textTransform="capitalize">
@@ -164,43 +179,35 @@ function DashboardWidgets({widgetMetaDataList, entityPrimaryKey, omitWrappingGri
                         </MDTypography>
                      </MDBox>
                   </Card>
-                  </MDBox>
                )
             }
             {
                widgetMetaData.type === "multiStatistics" && (
-                  <MDBox sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
                   <MultiStatisticsCard
                      color="info"
                      title={widgetMetaData.label}
                      data={widgetData[i]}
                   />
-                  </MDBox>
                )
             }
             {
                widgetMetaData.type === "quickSightChart" && (
-                  <MDBox sx={{display: "flex"}}>
                   <QuickSightChart url={widgetData[i]?.url} label={widgetMetaData.label} />
-                  </MDBox>
                )
             }
             {
                widgetMetaData.type === "barChart" && (
-                  <MDBox mb={3} sx={{display: "flex"}}>
                   <BarChart
                      color="info"
                      title={widgetMetaData.label}
                      date={`As of ${new Date().toDateString()}`}
                      data={widgetData[i]?.chartData}
                   />
-                  </MDBox>
                )
             }
             {
                widgetMetaData.type === "lineChart" && (
                   widgetData && widgetData[i] ? (
-                     <MDBox mb={3}>
                      <LineChart
                         title={widgetData[i].title}
                         description={(
@@ -217,22 +224,19 @@ function DashboardWidgets({widgetMetaDataList, entityPrimaryKey, omitWrappingGri
                         )}
                         chart={widgetData[i].lineChartData as { labels: string[]; datasets: { label: string; color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; data: number[]; }[]; }}
                      />
-                     </MDBox>
                   ) : null
                )
             }
             {
                widgetMetaData.type === "childRecordList" && (
                   widgetData && widgetData[i] &&
-                  <MDBox sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px", width: "100%"}}>
                      <RecordGridWidget
                         title={widgetMetaData.label}
                         data={widgetData[i]}
                      />
-                  </MDBox>
                )
             }
-         </>
+         </MDBox>
       );
    }
 

src/qqq/components/Temporary/DataTable/DataTableBodyCell.tsx

@@ -45,7 +45,7 @@ function DataTableBodyCell({noBorder, align, children}: Props): JSX.Element
          })}
       >
          <MDBox
-            display="inline-block"
+            display="initial"
             width="max-content"
             color="text"
          >

src/qqq/pages/dashboards/Widgets/Components/DropdownMenu.tsx

@@ -0,0 +1,70 @@
+/*
+ * 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 {Theme} from "@mui/material";
+import Autocomplete from "@mui/material/Autocomplete";
+import TextField from "@mui/material/TextField";
+import {SxProps} from "@mui/system";
+import React from "react";
+
+
+export interface DropdownOption
+{
+   id: string;
+   label: string;
+}
+
+/////////////////////////
+// inputs and defaults //
+/////////////////////////
+interface Props
+{
+   label?: string;
+   dropdownOptions?: DropdownOption[];
+   onChangeCallback?: (dropdownLabel: string, data: any) => void;
+   sx?: SxProps<Theme>;
+}
+
+function DropdownMenu({label, dropdownOptions, onChangeCallback, sx}: Props): JSX.Element
+{
+   const handleOnChange = (event: any, value: any, reason: string) =>
+   {
+      onChangeCallback(label, value);
+   }
+
+   return (
+      dropdownOptions ? (
+         <span style={{whiteSpace: "nowrap"}}>
+            <Autocomplete
+               size="small"
+               disablePortal
+               id={`${label}-combo-box`}
+               options={dropdownOptions}
+               sx={{...sx, cursor: "pointer"}}
+               onChange={handleOnChange}
+               renderInput={(params: any) => <TextField {...params} label={label} />}
+            />
+         </span>
+      ) : null
+   )
+}
+
+export default DropdownMenu;

src/qqq/pages/dashboards/Widgets/ParentWidget.tsx

@@ -0,0 +1,191 @@
+/*
+ * 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 {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
+import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
+import {Box, Typography} from "@mui/material";
+import Card from "@mui/material/Card";
+import Grid from "@mui/material/Grid";
+import React, {useEffect, useState} from "react";
+import DashboardWidgets from "qqq/components/DashboardWidgets";
+import DropdownMenu from "qqq/pages/dashboards/Widgets/Components/DropdownMenu";
+import QClient from "qqq/utils/QClient";
+
+
+//////////////////////////////////////////////
+// structure of expected parent widget data //
+//////////////////////////////////////////////
+export interface ParentWidgetData
+{
+   dropdownLabelList: string[];
+   dropdownNameList: string[];
+   dropdownDataList: {
+      id: string,
+      label: string
+   }[][];
+   childWidgetNameList: string[];
+}
+
+
+////////////////////////////////////
+// define properties and defaults //
+////////////////////////////////////
+interface Props
+{
+   widgetIndex: number;
+   label: string;
+   data: ParentWidgetData;
+   reloadWidgetCallback?: (widgetIndex: number, params: string) => void;
+}
+
+
+const qController = QClient.getInstance();
+function ParentWidget({widgetIndex, label, data, reloadWidgetCallback}: Props, ): JSX.Element
+{
+   const [childUrlParams, setChildUrlParams] = useState("");
+   const [qInstance, setQInstance] = useState(null as QInstance);
+   const [dropdownData, setDropdownData] = useState([]);
+   const [widgets, setWidgets] = useState([] as any[]);
+   const [counter, setCounter] = useState(0);
+
+   useEffect(() =>
+   {
+      (async () =>
+      {
+         const newQInstance = await qController.loadMetaData();
+         setQInstance(newQInstance);
+      })();
+   }, []);
+
+   useEffect(() =>
+   {
+      if(qInstance && data && data.childWidgetNameList)
+      {
+         let widgetMetaDataList = [] as QWidgetMetaData[];
+         data?.childWidgetNameList.forEach((widgetName: string) =>
+         {
+            widgetMetaDataList.push(qInstance.widgets.get(widgetName));
+         })
+         setWidgets(widgetMetaDataList);
+         console.log(`SETTINGWIDGETS...${widgetMetaDataList.length}`)
+      }
+   }, [qInstance, data]);
+
+   function doit()
+   {
+      reloadWidgetCallback(0, "ok");
+   }
+
+   function handleDataChange(dropdownLabel: string, changedData: any)
+   {
+      if(dropdownData)
+      {
+         ///////////////////////////////////////////
+         // find the index base on selected label //
+         ///////////////////////////////////////////
+         const tableName = dropdownLabel.replace("Select ", "");
+         let index = -1;
+         for (let i = 0; i < data.dropdownLabelList.length; i++)
+         {
+            if (tableName === data.dropdownLabelList[i])
+            {
+               index = i;
+               break;
+            }
+         }
+
+         if (index < 0)
+         {
+            throw(`Could not find table name for label ${tableName}`);
+         }
+
+         dropdownData[index] = (changedData) ? changedData.id : null;
+         setDropdownData(dropdownData);
+         setCounter(counter + 1);
+      }
+   }
+
+   useEffect(() =>
+   {
+      if(dropdownData)
+      {
+         console.log(JSON.stringify(data));
+
+         let params = "";
+         for (let i = 0; i < dropdownData.length; i++)
+         {
+            if (i > 0)
+            {
+               params += "&";
+            }
+            params += `${data.dropdownNameList[i]}=`;
+            if(dropdownData[i])
+            {
+               params += `${dropdownData[i]}`;
+
+            }
+         }
+         console.log(params);
+         reloadWidgetCallback(widgetIndex, params);
+         setChildUrlParams(params)
+      }
+   }, [counter]);
+
+
+   return (
+      <Card className="parentWidgetCard" sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
+
+         <Grid container>
+            <Grid item xs={3}>
+               <Box pt={3} px={3}>
+                  {
+                     label && (
+                        <Typography variant="h5" textTransform="capitalize">
+                           {label}
+                        </Typography>
+                     )
+                  }
+               </Box>
+            </Grid>
+            <Grid item xs={9}>
+               <Box mb={3} p={3}>
+                  {
+                     data?.dropdownDataList?.map((dropdownData: any, index: number) =>
+                        <DropdownMenu
+                           key={`dropdown-${data.dropdownLabelList[index]}-${index}`}
+                           label={`Select ${data.dropdownLabelList[index]}`}
+                           sx={{width: 200, marginLeft: "15px", float: "right"}}
+                           dropdownOptions={dropdownData}
+                           onChangeCallback={handleDataChange}
+                        />
+                     )
+                  }
+               </Box>
+            </Grid>
+         </Grid>
+         <Box pr={3} pl={3}>
+            <DashboardWidgets widgetMetaDataList={widgets} areChildren={true} childUrlParams={childUrlParams}/>
+         </Box>
+      </Card>
+   );
+}
+
+export default ParentWidget;

src/qqq/pages/dashboards/Widgets/TableCard.tsx

@@ -53,13 +53,14 @@ interface Props
       id: string,
       name: string
    }[];
-   dropdownOnChange?: (selectedValue: string, widgetIndex: number) => void;
+   reloadWidgetCallback?: (widgetIndex: number, params: string) => void;
    widgetIndex?: number;
+   isChild?: boolean;
 
    [key: string]: any;
 }
 
-function TableCard({title, linkText, linkURL, noRowsFoundHTML, data, dropdownOptions, dropdownOnChange, widgetIndex}: Props): JSX.Element
+function TableCard({title, linkText, linkURL, noRowsFoundHTML, data, dropdownOptions, reloadWidgetCallback, widgetIndex, isChild}: Props): JSX.Element
 {
    const openArrowIcon = "arrow_drop_down";
    const closeArrowIcon = "arrow_drop_up";
@@ -82,7 +83,7 @@ function TableCard({title, linkText, linkURL, noRowsFoundHTML, data, dropdownOpt
       setDropdown(null);
       setDropdownValue(currentTarget.innerText || dropdownValue);
       setDropdownIcon(openArrowIcon);
-      dropdownOnChange(currentTarget.innerText || dropdownValue, widgetIndex);
+      reloadWidgetCallback(widgetIndex, null);
    };
 
    const renderMenu = (state: any, open: any, close: any, icon: string) => (
@@ -113,6 +114,7 @@ function TableCard({title, linkText, linkURL, noRowsFoundHTML, data, dropdownOpt
       {
          setDropdownValue(dropdownOptions[0]["id"]);
          setDropdownLabel(dropdownOptions[0]["name"]);
+
       }
    }, [dropdownOptions]);
 
@@ -121,7 +123,7 @@ function TableCard({title, linkText, linkURL, noRowsFoundHTML, data, dropdownOpt
          <Grid container>
             <Grid item xs={6}>
                <MDBox pt={3} px={3}>
-                  <MDTypography variant="h5" fontWeight="medium">
+                  <MDTypography variant={isChild ? "h5" : "h6"} fontWeight="medium">
                      {title}
                   </MDTypography>
                </MDBox>

src/qqq/pages/process-run/index.tsx

@@ -20,6 +20,7 @@
  */
 
 import {QException} from "@kingsrook/qqq-frontend-core/lib/exceptions/QException";
+import {AdornmentType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/AdornmentType";
 import {QComponentType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QComponentType";
 import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
 import {QFrontendComponent} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFrontendComponent";
@@ -70,6 +71,7 @@ interface Props
    process?: QProcessMetaData;
    defaultProcessValues?: any;
    isModal?: boolean;
+   isWidget?: boolean;
    recordIds?: string | QQueryFilter;
    closeModalHandler?: (event: object, reason: string) => void;
 }
@@ -78,7 +80,7 @@ const INITIAL_RETRY_MILLIS = 1_500;
 const RETRY_MAX_MILLIS = 12_000;
 const BACKOFF_AMOUNT = 1.5;
 
-function ProcessRun({process, defaultProcessValues, isModal, recordIds, closeModalHandler}: Props): JSX.Element
+function ProcessRun({process, defaultProcessValues, isModal, isWidget, recordIds, closeModalHandler}: Props): JSX.Element
 {
    const processNameParam = useParams().processName;
    const processName = process === null ? processNameParam : process.name;
@@ -320,8 +322,8 @@ function ProcessRun({process, defaultProcessValues, isModal, recordIds, closeMod
 
       return (
          <>
-            <MDTypography variation="h5" component="div" fontWeight="bold">
+            <MDTypography variant={isWidget ? "h6" : "h5"} component="div" fontWeight="bold">
-               {isModal ? `${process.label}: ` : ""}
+               {(isModal) ? `${process.label}: ` : ""}
                {step?.label}
             </MDTypography>
             {step.components && (
@@ -421,16 +423,26 @@ function ProcessRun({process, defaultProcessValues, isModal, recordIds, closeMod
                         component.type === QComponentType.VIEW_FORM && step.viewFields && (
                            <div>
                               {step.viewFields.map((field: QFieldMetaData) => (
+                                 field.hasAdornment(AdornmentType.ERROR) ? (
+                                    processValues[field.name] && (
+                                       <MDBox key={field.name} display="flex" py={1} pr={2}>
+                                          <MDTypography variant="button" fontWeight="regular">
+                                             {QValueUtils.getValueForDisplay(field, processValues[field.name], undefined, "view")}
+                                          </MDTypography>
+                                       </MDBox>
+                                    )
+                                 ) : (
                                     <MDBox key={field.name} display="flex" py={1} pr={2}>
                                        <MDTypography variant="button" fontWeight="bold">
                                           {field.label}
                                           : &nbsp;
                                        </MDTypography>
                                        <MDTypography variant="button" fontWeight="regular" color="text">
-                                       {QValueUtils.getValueForDisplay(field, processValues[field.name], "view")}
+                                          {QValueUtils.getValueForDisplay(field, processValues[field.name], undefined, "view")}
                                        </MDTypography>
                                     </MDBox>
-                              ))}
+                                 )))
+                              }
                            </div>
                         )
                      }
@@ -589,7 +601,11 @@ function ProcessRun({process, defaultProcessValues, isModal, recordIds, closeMod
          console.log("No process meta data yet, so returning early");
          return;
       }
+
+      if(! isWidget)
+      {
          setPageHeader(processMetaData.label);
+      }
 
       let newIndex = null;
       if (typeof newStep === "number")
@@ -1083,12 +1099,22 @@ function ProcessRun({process, defaultProcessValues, isModal, recordIds, closeMod
    };
 
    const mainCardStyles: any = {};
+   const formStyles: any = {};
    mainCardStyles.minHeight = `calc(100vh - ${isModal ? 150 : 400}px)`;
-   if (!processError && (qJobRunning || activeStep === null) && !isModal)
+   if (!processError && (qJobRunning || activeStep === null) && !isModal && !isWidget)
    {
       mainCardStyles.background = "none";
       mainCardStyles.boxShadow = "none";
    }
+   if(isWidget)
+   {
+      mainCardStyles.minHeight = "";
+      mainCardStyles.alignItems = "stretch";
+      mainCardStyles.flexGrow = 1;
+      mainCardStyles.display = "flex";
+      formStyles.display = "flex";
+      formStyles.flexGrow = 1;
+   }
 
    let nextButtonLabel = "Next";
    let nextButtonIcon = "arrow_forward";
@@ -1106,10 +1132,7 @@ function ProcessRun({process, defaultProcessValues, isModal, recordIds, closeMod
       nextButtonIcon = "check";
    }
 
-   const body = (
+   const form = (
-      <MDBox py={3} mb={20}>
-         <Grid container justifyContent="center" alignItems="center" sx={{height: "100%", mt: 8}}>
-            <Grid item xs={12} lg={10} xl={8}>
       <Formik
          enableReinitialize
          initialValues={initialValues}
@@ -1120,8 +1143,10 @@ function ProcessRun({process, defaultProcessValues, isModal, recordIds, closeMod
          {({
             values, errors, touched, isSubmitting, setFieldValue,
          }) => (
-                     <Form id={formId} autoComplete="off">
+            <Form style={formStyles} id={formId} autoComplete="off">
                <Card sx={mainCardStyles}>
+                  {
+                     !isWidget && (
                         <MDBox mx={2} mt={-3}>
                            <Stepper activeStep={activeStepIndex} alternativeLabel>
                               {steps.map((step) => (
@@ -1131,6 +1156,8 @@ function ProcessRun({process, defaultProcessValues, isModal, recordIds, closeMod
                               ))}
                            </Stepper>
                         </MDBox>
+                     )
+                  }
 
                   <MDBox p={3}>
                      <MDBox>
@@ -1180,7 +1207,11 @@ function ProcessRun({process, defaultProcessValues, isModal, recordIds, closeMod
                                     !noMoreSteps && (
                                        <MDBox component="div" py={3}>
                                           <Grid container justifyContent="flex-end" spacing={3}>
+                                             {
+                                                ! isWidget && (
                                                    <QCancelButton onClickHandler={handleCancelClicked} disabled={isSubmitting} />
+                                                )
+                                             }
                                              <QSubmitButton label={nextButtonLabel} iconName={nextButtonIcon} disabled={isSubmitting} />
                                           </Grid>
                                        </MDBox>
@@ -1195,6 +1226,13 @@ function ProcessRun({process, defaultProcessValues, isModal, recordIds, closeMod
             </Form>
          )}
       </Formik>
+   );
+
+   const body = (
+      <MDBox py={3} mb={20}>
+         <Grid container justifyContent="center" alignItems="center" sx={{height: "100%", mt: 8}}>
+            <Grid item xs={12} lg={10} xl={8}>
+               {form}
             </Grid>
          </Grid>
       </MDBox>
@@ -1208,7 +1246,14 @@ function ProcessRun({process, defaultProcessValues, isModal, recordIds, closeMod
          </Box>
       );
    }
-   else
+   else if (isWidget)
+   {
+      return (
+         <Box sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
+            {form}
+         </Box>
+      );
+   }
    {
       return (
          <BaseLayout>
@@ -1222,6 +1267,7 @@ ProcessRun.defaultProps = {
    process: null,
    defaultProcessValues: {},
    isModal: false,
+   isWidget: false,
    recordIds: null,
    closeModalHandler: null
 };

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

@@ -259,3 +259,25 @@ input[type="search"]::-webkit-search-results-decoration { display: none; }
 {
    white-space: pre-wrap;
 }
+
+.MuiAutocomplete-input
+{
+   cursor: pointer;
+}
+
+.parcelRulesCard
+{
+   font-size: 16px;
+}
+
+.parcelRulesCard TD
+{
+   font-size: 14px !important;
+   vertical-align: top;
+}
+
+.parcelRulesCard A
+{
+   color: blue;
+   font-size: 14px;
+}

src/qqq/utils/QValueUtils.tsx

@@ -25,7 +25,7 @@ import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QField
 import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
 import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
 import "datejs";
-import {Chip, Icon, Typography} from "@mui/material";
+import {Box, Chip, Icon} from "@mui/material";
 import React, {Fragment} from "react";
 import AceEditor from "react-ace";
 import {Link} from "react-router-dom";
@@ -172,6 +172,20 @@ class QValueUtils
          }
       }
 
+      if (field.hasAdornment(AdornmentType.ERROR))
+      {
+         return (
+            <Box color={"darkred"} alignContent={"baseline"}>
+               <Box mr={2} sx={{float: "left"}}>
+                  <Icon>warning</Icon>
+               </Box>
+               <Box sx={{float: "left"}}>
+                  {rawValue}
+               </Box>
+            </Box>
+         );
+      }
+
       return (QValueUtils.getUnadornedValueForDisplay(field, rawValue, displayValue));
    }
 
@@ -181,6 +195,11 @@ class QValueUtils
     *******************************************************************************/
    private static getUnadornedValueForDisplay(field: QFieldMetaData, rawValue: any, displayValue: any): string | JSX.Element
    {
+      if(! displayValue && field.defaultValue)
+      {
+         displayValue = field.defaultValue;
+      }
+
       if (field.type === QFieldType.DATE_TIME)
       {
          if (!rawValue)