CE-881 - Fix parsing hash (e.g., for defaultValues) in case it has a # in it

CE-1120: updated to handle errors on join tables (specifically was ha…

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

src/qqq/components/forms/DynamicFormUtils.ts

@@ -24,27 +24,38 @@ import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QF
 import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
 import * as Yup from "yup";
 
+
+type DisabledFields = { [fieldName: string]: boolean } | string[];
+
 /*******************************************************************************
  ** Meta-data to represent a single field in a table.
  **
  *******************************************************************************/
 class DynamicFormUtils
 {
-   public static getFormData(qqqFormFields: QFieldMetaData[])
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public static getFormData(qqqFormFields: QFieldMetaData[], disabledFields?: DisabledFields)
    {
       const dynamicFormFields: any = {};
       const formValidations: any = {};
 
       qqqFormFields.forEach((field) =>
       {
-         dynamicFormFields[field.name] = this.getDynamicField(field);
-         formValidations[field.name] = this.getValidationForField(field);
+         dynamicFormFields[field.name] = this.getDynamicField(field, disabledFields);
+         formValidations[field.name] = this.getValidationForField(field, disabledFields);
       });
 
       return {dynamicFormFields, formValidations};
    }
 
-   public static getDynamicField(field: QFieldMetaData)
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public static getDynamicField(field: QFieldMetaData, disabledFields?: DisabledFields)
    {
       let fieldType: string;
       switch (field.type.toString())
@@ -85,15 +96,21 @@ class DynamicFormUtils
          }
       }
 
+      ////////////////////////////////////////////////////////////
+      // this feels right, but... might be cases where it isn't //
+      ////////////////////////////////////////////////////////////
+      const effectiveIsEditable = field.isEditable && !this.isFieldDynamicallyDisabled(field.name, disabledFields);
+      const effectivelyIsRequired = field.isRequired && effectiveIsEditable;
+
       let label = field.label ? field.label : field.name;
-      label += field.isRequired ? " *" : "";
+      label += effectivelyIsRequired ? " *" : "";
 
       return ({
          fieldMetaData: field,
          name: field.name,
          label: label,
-         isRequired: field.isRequired,
-         isEditable: field.isEditable,
+         isRequired: effectivelyIsRequired,
+         isEditable: effectiveIsEditable,
          type: fieldType,
          displayFormat: field.displayFormat,
          // todo invalidMsg: "Zipcode is not valid (e.g. 70000).",
@@ -101,11 +118,18 @@ class DynamicFormUtils
       });
    }
 
-   public static getValidationForField(field: QFieldMetaData)
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public static getValidationForField(field: QFieldMetaData, disabledFields?: DisabledFields)
    {
-      if (field.isRequired)
+      const effectiveIsEditable = field.isEditable && !this.isFieldDynamicallyDisabled(field.name, disabledFields);
+      const effectivelyIsRequired = field.isRequired && effectiveIsEditable;
+
+      if (effectivelyIsRequired)
       {
-         if(field.possibleValueSourceName)
+         if (field.possibleValueSourceName)
          {
             ////////////////////////////////////////////////////////////////////////////////////////////
             // the "nullable(true)" here doesn't mean that you're allowed to set the field to null... //
@@ -121,6 +145,10 @@ class DynamicFormUtils
       return (null);
    }
 
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
    public static addPossibleValueProps(dynamicFormFields: any, qFields: QFieldMetaData[], tableName: string, processName: string, displayValues: Map<string, string>)
    {
       for (let i = 0; i < qFields.length; i++)
@@ -159,6 +187,29 @@ class DynamicFormUtils
          }
       }
    }
+
+
+   /*******************************************************************************
+    ** private helper - check the disabled fields object (array or map), and return
+    ** true iff fieldName is in it.
+    *******************************************************************************/
+   private static isFieldDynamicallyDisabled(fieldName: string, disabledFields?: DisabledFields): boolean
+   {
+      if (!disabledFields)
+      {
+         return (false);
+      }
+
+      if (Array.isArray(disabledFields))
+      {
+         return (disabledFields.indexOf(fieldName) > -1)
+      }
+      else
+      {
+         return (disabledFields[fieldName]);
+      }
+   }
+
 }
 
 export default DynamicFormUtils;

src/qqq/components/forms/EntityForm.tsx

@@ -22,8 +22,10 @@
 import {Capability} from "@kingsrook/qqq-frontend-core/lib/model/metaData/Capability";
 import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
 import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
+import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
 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 {QPossibleValue} from "@kingsrook/qqq-frontend-core/lib/model/QPossibleValue";
 import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
 import {Alert} from "@mui/material";
@@ -32,22 +34,24 @@ import Box from "@mui/material/Box";
 import Card from "@mui/material/Card";
 import Grid from "@mui/material/Grid";
 import Icon from "@mui/material/Icon";
-import {Form, Formik, useFormikContext} from "formik";
-import React, {useContext, useEffect, useReducer, useState} from "react";
-import {useLocation, useNavigate, useParams} from "react-router-dom";
-import * as Yup from "yup";
+import Modal from "@mui/material/Modal";
+import {Form, Formik, FormikErrors, FormikTouched, FormikValues, useFormikContext} from "formik";
 import QContext from "QContext";
-import colors from "qqq/assets/theme/base/colors";
 import {QCancelButton, QSaveButton} from "qqq/components/buttons/DefaultButtons";
 import QDynamicForm from "qqq/components/forms/DynamicForm";
 import DynamicFormUtils from "qqq/components/forms/DynamicFormUtils";
 import MDTypography from "qqq/components/legacy/MDTypography";
 import HelpContent from "qqq/components/misc/HelpContent";
 import QRecordSidebar from "qqq/components/misc/RecordSidebar";
+import RecordGridWidget, {ChildRecordListData} from "qqq/components/widgets/misc/RecordGridWidget";
 import HtmlUtils from "qqq/utils/HtmlUtils";
 import Client from "qqq/utils/qqq/Client";
 import TableUtils from "qqq/utils/qqq/TableUtils";
 import ValueUtils from "qqq/utils/qqq/ValueUtils";
+import React, {useContext, useEffect, useReducer, useState} from "react";
+import {useLocation, useNavigate, useParams} from "react-router-dom";
+import {Value} from "sass";
+import * as Yup from "yup";
 
 interface Props
 {
@@ -58,6 +62,8 @@ interface Props
    defaultValues: { [key: string]: string };
    disabledFields: { [key: string]: boolean } | string[];
    isCopy?: boolean;
+   onSubmitCallback?: (values: any) => void;
+   overrideHeading?: string;
 }
 
 EntityForm.defaultProps = {
@@ -67,7 +73,8 @@ EntityForm.defaultProps = {
    closeModalHandler: null,
    defaultValues: {},
    disabledFields: {},
-   isCopy: false
+   isCopy: false,
+   onSubmitCallback: null,
 };
 
 function EntityForm(props: Props): JSX.Element
@@ -90,10 +97,15 @@ function EntityForm(props: Props): JSX.Element
 
    const [asyncLoadInited, setAsyncLoadInited] = useState(false);
    const [tableMetaData, setTableMetaData] = useState(null as QTableMetaData);
+   const [metaData, setMetaData] = useState(null as QInstance);
    const [record, setRecord] = useState(null as QRecord);
    const [tableSections, setTableSections] = useState(null as QTableSection[]);
+   const [renderedWidgetSections, setRenderedWidgetSections] = useState({} as { [name: string]: JSX.Element });
+   const [childListWidgetData, setChildListWidgetData] = useState({} as { [name: string]: ChildRecordListData });
    const [, forceUpdate] = useReducer((x) => x + 1, 0);
 
+   const [showEditChildForm, setShowEditChildForm] = useState(null as any);
+
    const [notAllowedError, setNotAllowedError] = useState(null as string);
 
    const {pageHeader, setPageHeader} = useContext(QContext);
@@ -101,6 +113,8 @@ function EntityForm(props: Props): JSX.Element
    const navigate = useNavigate();
    const location = useLocation();
 
+   const cardElevation = props.isModal ? 3 : 0;
+
    ////////////////////////////////////////////////////////////////////
    // first take defaultValues and disabledFields from props         //
    // but, also allow them to be sent in the hash, in the format of: //
@@ -114,22 +128,151 @@ function EntityForm(props: Props): JSX.Element
    {
       try
       {
-         const parts = hashParts[i].split("=")
-         if (parts.length > 1 && parts[0] == "defaultValues")
+         const parts = hashParts[i].split("=");
+         if (parts.length > 1)
          {
-            defaultValues = JSON.parse(decodeURIComponent(parts[1])) as { [key: string]: any };
-         }
+            const name = parts[0].replace(/^#/, "");
+            const value = parts[1];
+            if (name == "defaultValues")
+            {
+               defaultValues = JSON.parse(decodeURIComponent(value)) as { [key: string]: any };
+            }
 
-         if (parts.length > 1 && parts[0] == "disabledFields")
-         {
-            disabledFields = JSON.parse(decodeURIComponent(parts[1])) as { [key: string]: any };
+            if (name == "disabledFields")
+            {
+               disabledFields = JSON.parse(decodeURIComponent(value)) as { [key: string]: any };
+            }
          }
       }
       catch (e)
-      {}
+      {
+      }
    }
 
-   function getFormSection(values: any, touched: any, formFields: any, errors: any): JSX.Element
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function openAddChildRecord(name: string, widgetData: any)
+   {
+      let defaultValues = widgetData.defaultValuesForNewChildRecords;
+
+      let disabledFields = widgetData.disabledFieldsForNewChildRecords;
+      if (!disabledFields)
+      {
+         disabledFields = widgetData.defaultValuesForNewChildRecords;
+      }
+
+      doOpenEditChildForm(name, widgetData.childTableMetaData, null, defaultValues, disabledFields);
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   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);
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   const deleteChildRecord = (name: string, widgetData: any, rowIndex: number) =>
+   {
+      updateChildRecordList(name, "delete", rowIndex);
+   };
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   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);
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   const closeEditChildForm = (event: object, reason: string) =>
+   {
+      if (reason === "backdropClick" || reason === "escapeKeyDown")
+      {
+         return;
+      }
+
+      setShowEditChildForm(null);
+   };
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function submitEditChildForm(values: any)
+   {
+      updateChildRecordList(showEditChildForm.widgetName, showEditChildForm.rowIndex == null ? "insert" : "edit", showEditChildForm.rowIndex, values);
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   async function updateChildRecordList(widgetName: string, action: "insert" | "edit" | "delete", rowIndex?: number, values?: any)
+   {
+      const metaData = await qController.loadMetaData();
+      const widgetMetaData = metaData.widgets.get(widgetName);
+
+      const newChildListWidgetData: { [name: string]: ChildRecordListData } = Object.assign({}, childListWidgetData);
+      if (!newChildListWidgetData[widgetName].queryOutput.records)
+      {
+         newChildListWidgetData[widgetName].queryOutput.records = [];
+      }
+
+      switch (action)
+      {
+         case "insert":
+            newChildListWidgetData[widgetName].queryOutput.records.push({values: values});
+            break;
+         case "edit":
+            newChildListWidgetData[widgetName].queryOutput.records[rowIndex] = {values: values};
+            break;
+         case "delete":
+            newChildListWidgetData[widgetName].queryOutput.records.splice(rowIndex, 1);
+            break;
+      }
+      newChildListWidgetData[widgetName].totalRows = newChildListWidgetData[widgetName].queryOutput.records.length;
+      setChildListWidgetData(newChildListWidgetData);
+
+      const newRenderedWidgetSections = Object.assign({}, renderedWidgetSections);
+      newRenderedWidgetSections[widgetName] = getWidgetSection(widgetMetaData, newChildListWidgetData[widgetName]);
+      setRenderedWidgetSections(newRenderedWidgetSections);
+      forceUpdate();
+
+      setShowEditChildForm(null);
+   }
+
+
+   /*******************************************************************************
+    ** render a section (full of fields) as a form
+    *******************************************************************************/
+   function getFormSection(section: QTableSection, values: any, touched: any, formFields: any, errors: any, omitWrapper = false): JSX.Element
    {
       const formData: any = {};
       formData.values = values;
@@ -152,13 +295,68 @@ function EntityForm(props: Props): JSX.Element
 
       if (!Object.keys(formFields).length)
       {
-         return <div>Loading...</div>;
+         return <div>Error: No form fields in section {section.name}</div>;
       }
 
-      const helpRoles = [props.id ? "EDIT_SCREEN" : "INSERT_SCREEN", "WRITE_SCREENS", "ALL_SCREENS"]
-      return <QDynamicForm formData={formData} record={record} helpRoles={helpRoles} helpContentKeyPrefix={`table:${tableName};`} />;
+      const helpRoles = [props.id ? "EDIT_SCREEN" : "INSERT_SCREEN", "WRITE_SCREENS", "ALL_SCREENS"];
+
+      if (omitWrapper)
+      {
+         return <QDynamicForm formData={formData} record={record} helpRoles={helpRoles} helpContentKeyPrefix={`table:${tableName};`} />;
+      }
+
+      return <Card id={section.name} sx={{overflow: "visible", scrollMarginTop: "100px"}} elevation={cardElevation}>
+         <MDTypography variant="h6" p={3} pb={1}>
+            {section.label}
+         </MDTypography>
+         {getSectionHelp(section)}
+         <Box pb={1} px={3}>
+            <Box pb={"0.75rem"} width="100%">
+               <QDynamicForm formData={formData} record={record} helpRoles={helpRoles} helpContentKeyPrefix={`table:${tableName};`} />
+            </Box>
+         </Box>
+      </Card>;
    }
 
+
+   /*******************************************************************************
+    ** render a section as a widget
+    *******************************************************************************/
+   function getWidgetSection(widgetMetaData: QWidgetMetaData, widgetData: any): JSX.Element
+   {
+      widgetData.viewAllLink = null;
+      widgetMetaData.showExportButton = false;
+
+      return <RecordGridWidget
+         key={new Date().getTime()} // added so that editing values actually re-renders...
+         widgetMetaData={widgetMetaData}
+         data={widgetData}
+         disableRowClick
+         allowRecordEdit
+         allowRecordDelete
+         addNewRecordCallback={() => openAddChildRecord(widgetMetaData.name, widgetData)}
+         editRecordCallback={(rowIndex) => openEditChildRecord(widgetMetaData.name, widgetData, rowIndex)}
+         deleteRecordCallback={(rowIndex) => deleteChildRecord(widgetMetaData.name, widgetData, rowIndex)}
+      />;
+   }
+
+
+   /*******************************************************************************
+    ** render a form section
+    *******************************************************************************/
+   function renderSection(section: QTableSection, values: FormikValues | Value, touched: FormikTouched<FormikValues> | Value, formFields: Map<string, any>, errors: FormikErrors<FormikValues> | Value)
+   {
+      if (section.fieldNames && section.fieldNames.length > 0)
+      {
+         return getFormSection(section, values, touched, formFields.get(section.name), errors);
+      }
+      else
+      {
+         return renderedWidgetSections[section.widgetName] ?? <Box>Loading {section.label}...</Box>;
+      }
+   }
+
+
    if (!asyncLoadInited)
    {
       setAsyncLoadInited(true);
@@ -167,10 +365,16 @@ function EntityForm(props: Props): JSX.Element
          const tableMetaData = await qController.loadTableMetaData(tableName);
          setTableMetaData(tableMetaData);
 
+         const metaData = await qController.loadMetaData();
+         setMetaData(metaData);
+
          /////////////////////////////////////////////////
          // define the sections, e.g., for the left-bar //
          /////////////////////////////////////////////////
-         const tableSections = TableUtils.getSectionsForRecordSidebar(tableMetaData, [...tableMetaData.fields.keys()]);
+         const tableSections = TableUtils.getSectionsForRecordSidebar(tableMetaData, [...tableMetaData.fields.keys()], (section: QTableSection) =>
+         {
+            return section.widgetName && metaData.widgets.get(section.widgetName)?.type == "childRecordList" && metaData.widgets.get(section.widgetName)?.defaultValues?.has("manageAssociationName");
+         });
          setTableSections(tableSections);
 
          const fieldArray = [] as QFieldMetaData[];
@@ -211,7 +415,7 @@ function EntityForm(props: Props): JSX.Element
             /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
             // these checks are only for updating records, if copying, it is actually an insert, which is checked after this block //
             /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-            if(! props.isCopy)
+            if (!props.isCopy)
             {
                if (!tableMetaData.capabilities.has(Capability.TABLE_UPDATE))
                {
@@ -263,6 +467,18 @@ function EntityForm(props: Props): JSX.Element
             }
          }
 
+         ///////////////////////////////////////////////////
+         // if an override heading was passed in, use it. //
+         ///////////////////////////////////////////////////
+         if (props.overrideHeading)
+         {
+            setFormTitle(props.overrideHeading);
+            if (!props.isModal)
+            {
+               setPageHeader(props.overrideHeading);
+            }
+         }
+
          //////////////////////////////////////
          // check capabilities & permissions //
          //////////////////////////////////////
@@ -309,27 +525,9 @@ function EntityForm(props: Props): JSX.Element
          const {
             dynamicFormFields,
             formValidations,
-         } = DynamicFormUtils.getFormData(fieldArray);
+         } = DynamicFormUtils.getFormData(fieldArray, disabledFields);
          DynamicFormUtils.addPossibleValueProps(dynamicFormFields, fieldArray, tableName, null, record ? record.displayValues : defaultDisplayValues);
 
-         if(disabledFields)
-         {
-            if(Array.isArray(disabledFields))
-            {
-               for (let i = 0; i < disabledFields.length; i++)
-               {
-                  dynamicFormFields[disabledFields[i]].isEditable = false;
-               }
-            }
-            else
-            {
-               for (let fieldName in disabledFields)
-               {
-                  dynamicFormFields[fieldName].isEditable = false;
-               }
-            }
-         }
-
          /////////////////////////////////////
          // group the formFields by section //
          /////////////////////////////////////
@@ -337,51 +535,70 @@ function EntityForm(props: Props): JSX.Element
          let t1sectionName;
          let t1section;
          const nonT1Sections: QTableSection[] = [];
+         const newRenderedWidgetSections: { [name: string]: JSX.Element } = {};
+         const newChildListWidgetData: { [name: string]: ChildRecordListData } = {};
+
          for (let i = 0; i < tableSections.length; i++)
          {
             const section = tableSections[i];
             const sectionDynamicFormFields: any[] = [];
 
-            if (section.isHidden || !section.fieldNames)
+            if (section.isHidden)
             {
                continue;
             }
 
-            for (let j = 0; j < section.fieldNames.length; j++)
+            const hasFields = section.fieldNames && section.fieldNames.length > 0;
+            const hasChildRecordListWidget = section.widgetName && metaData.widgets.get(section.widgetName)?.type == "childRecordList";
+            if (!hasFields && !hasChildRecordListWidget)
             {
-               const fieldName = section.fieldNames[j];
-               const field = tableMetaData.fields.get(fieldName);
+               continue;
+            }
 
-               if(!field)
+            if (hasFields)
+            {
+               for (let j = 0; j < section.fieldNames.length; j++)
                {
-                  console.log(`Omitting un-found field ${fieldName} from form`);
+                  const fieldName = section.fieldNames[j];
+                  const field = tableMetaData.fields.get(fieldName);
+
+                  if (!field)
+                  {
+                     console.log(`Omitting un-found field ${fieldName} from form`);
+                     continue;
+                  }
+
+                  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+                  // if id !== null (and we're not copying) - means we're on the edit screen -- show all fields on the edit screen. //
+                  // || (or) we're on the insert screen in which case, only show editable fields.                                   //
+                  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+                  if ((props.id !== null && !props.isCopy) || field.isEditable)
+                  {
+                     sectionDynamicFormFields.push(dynamicFormFields[fieldName]);
+                  }
+               }
+
+               if (sectionDynamicFormFields.length === 0)
+               {
+                  ////////////////////////////////////////////////////////////////////////////////////////////////
+                  // in case there are no active fields in this section, remove it from the tableSections array //
+                  ////////////////////////////////////////////////////////////////////////////////////////////////
+                  tableSections.splice(i, 1);
+                  i--;
                   continue;
                }
-
-               ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-               // if id !== null (and we're not copying) - means we're on the edit screen -- show all fields on the edit screen. //
-               // || (or) we're on the insert screen in which case, only show editable fields.                                   //
-               ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-               if ((props.id !== null && !props.isCopy) || field.isEditable)
+               else
                {
-                  sectionDynamicFormFields.push(dynamicFormFields[fieldName]);
+                  dynamicFormFieldsBySection.set(section.name, sectionDynamicFormFields);
                }
             }
-
-            if (sectionDynamicFormFields.length === 0)
-            {
-               ////////////////////////////////////////////////////////////////////////////////////////////////
-               // in case there are no active fields in this section, remove it from the tableSections array //
-               ////////////////////////////////////////////////////////////////////////////////////////////////
-               tableSections.splice(i, 1);
-               i--;
-               continue;
-            }
             else
             {
-               dynamicFormFieldsBySection.set(section.name, sectionDynamicFormFields);
+               const widgetMetaData = metaData.widgets.get(section.widgetName);
+               const widgetData = await qController.widget(widgetMetaData.name, props.id ? `${tableMetaData.primaryKeyField}=${props.id}` : "");
+               newRenderedWidgetSections[section.widgetName] = getWidgetSection(widgetMetaData, widgetData);
+               newChildListWidgetData[section.widgetName] = widgetData;
             }
-
             //////////////////////////////////////
             // capture the tier1 section's name //
             //////////////////////////////////////
@@ -395,16 +612,38 @@ function EntityForm(props: Props): JSX.Element
                nonT1Sections.push(section);
             }
          }
+
          setT1SectionName(t1sectionName);
          setT1Section(t1section);
          setNonT1Sections(nonT1Sections);
          setFormFields(dynamicFormFieldsBySection);
          setValidations(Yup.object().shape(formValidations));
+         setRenderedWidgetSections(newRenderedWidgetSections);
+         setChildListWidgetData(newChildListWidgetData);
 
          forceUpdate();
       })();
    }
 
+
+   //////////////////////////////////////////////////////////////////
+   // watch widget data - if they change, re-render those sections //
+   //////////////////////////////////////////////////////////////////
+   useEffect(() =>
+   {
+      if (childListWidgetData)
+      {
+         const newRenderedWidgetSections: { [name: string]: JSX.Element } = {};
+         for (let name in childListWidgetData)
+         {
+            const widgetMetaData = metaData.widgets.get(name);
+            newRenderedWidgetSections[name] = getWidgetSection(widgetMetaData, childListWidgetData[name]);
+         }
+         setRenderedWidgetSections(newRenderedWidgetSections);
+      }
+   }, [childListWidgetData]);
+
+
    const handleCancelClicked = () =>
    {
       ///////////////////////////////////////////////////////////////////////////////////////
@@ -429,9 +668,23 @@ function EntityForm(props: Props): JSX.Element
       }
    };
 
+
+   /*******************************************************************************
+    ** event handler for the (Formik) Form.
+    *******************************************************************************/
    const handleSubmit = async (values: any, actions: any) =>
    {
       actions.setSubmitting(true);
+
+      /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+      // if there's a callback (e.g., for a modal nested on another create/edit screen), then just pass our data back there anre return. //
+      /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+      if (props.onSubmitCallback)
+      {
+         props.onSubmitCallback(values);
+         return;
+      }
+
       await (async () =>
       {
          /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
@@ -439,7 +692,7 @@ function EntityForm(props: Props): JSX.Element
          /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
          const valuesToPost = JSON.parse(JSON.stringify(values));
 
-         for(let fieldName of tableMetaData.fields.keys())
+         for (let fieldName of tableMetaData.fields.keys())
          {
             const fieldMetaData = tableMetaData.fields.get(fieldName);
 
@@ -451,9 +704,9 @@ function EntityForm(props: Props): JSX.Element
             // changing from, say, 12:15:30 to just 12:15:00... this seems to get around that, for cases when the       //
             // user didn't change the value in the field (but if the user did change the value, then we will submit it) //
             //////////////////////////////////////////////////////////////////////////////////////////////////////////////
-            if(fieldMetaData.type === QFieldType.DATE_TIME && valuesToPost[fieldName])
+            if (fieldMetaData.type === QFieldType.DATE_TIME && valuesToPost[fieldName])
             {
-               console.log(`DateTime ${fieldName}: Initial value: [${initialValues[fieldName]}] -> [${valuesToPost[fieldName]}]`)
+               console.log(`DateTime ${fieldName}: Initial value: [${initialValues[fieldName]}] -> [${valuesToPost[fieldName]}]`);
                if (initialValues[fieldName] == valuesToPost[fieldName])
                {
                   console.log(" - Is the same, so, deleting from the post");
@@ -472,12 +725,12 @@ function EntityForm(props: Props): JSX.Element
             // 3) they are a String, which is their URL path to download them... in that case, don't submit them to       //
             // the backend at all, so they'll stay what they were.  do that by deleting them from the values object here. //
             ////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-            if(fieldMetaData.type === QFieldType.BLOB)
+            if (fieldMetaData.type === QFieldType.BLOB)
             {
-               if(typeof valuesToPost[fieldName] === "string")
+               if (typeof valuesToPost[fieldName] === "string")
                {
                   console.log(`${fieldName} value was a string, so, we're deleting it from the values array, to not submit it to the backend, to not change it.`);
-                  delete(valuesToPost[fieldName]);
+                  delete (valuesToPost[fieldName]);
                }
                else
                {
@@ -486,9 +739,32 @@ function EntityForm(props: Props): JSX.Element
             }
          }
 
+         const associationsToPost: any = {};
+         let haveAssociationsToPost = false;
+         for (let name of Object.keys(childListWidgetData))
+         {
+            const manageAssociationName = metaData.widgets.get(name)?.defaultValues?.get("manageAssociationName");
+            if (!manageAssociationName)
+            {
+               console.log(`Cannot send association data to backend - missing a manageAssociationName defaultValue in widget meta data for widget name ${name}`);
+            }
+            associationsToPost[manageAssociationName] = [];
+            haveAssociationsToPost = true;
+            for (let i = 0; i < childListWidgetData[name].queryOutput?.records?.length; i++)
+            {
+               associationsToPost[manageAssociationName].push(childListWidgetData[name].queryOutput.records[i].values);
+            }
+         }
+         if (haveAssociationsToPost)
+         {
+            valuesToPost["associations"] = JSON.stringify(associationsToPost);
+         }
+
          if (props.id !== null && !props.isCopy)
          {
-            // todo - audit that it's a dupe
+            ///////////////////////
+            // perform an update //
+            ///////////////////////
             await qController
                .update(tableName, props.id, valuesToPost)
                .then((record) =>
@@ -499,8 +775,14 @@ function EntityForm(props: Props): JSX.Element
                   }
                   else
                   {
+                     let warningMessage = null;
+                     if (record.warnings && record.warnings.length && record.warnings.length > 0)
+                     {
+                        warningMessage = record.warnings[0];
+                     }
+
                      const path = location.pathname.replace(/\/edit$/, "");
-                     navigate(path, {state: {updateSuccess: true}});
+                     navigate(path, {state: {updateSuccess: true, warning: warningMessage}});
                   }
                })
                .catch((error) =>
@@ -508,7 +790,7 @@ function EntityForm(props: Props): JSX.Element
                   console.log("Caught:");
                   console.log(error);
 
-                  if(error.message.toLowerCase().startsWith("warning"))
+                  if (error.message.toLowerCase().startsWith("warning"))
                   {
                      const path = location.pathname.replace(/\/edit$/, "");
                      navigate(path, {state: {updateSuccess: true, warning: error.message}});
@@ -522,6 +804,10 @@ function EntityForm(props: Props): JSX.Element
          }
          else
          {
+            /////////////////////////////////
+            // perform an insert           //
+            // todo - audit if it's a dupe //
+            /////////////////////////////////
             await qController
                .create(tableName, valuesToPost)
                .then((record) =>
@@ -532,15 +818,21 @@ function EntityForm(props: Props): JSX.Element
                   }
                   else
                   {
+                     let warningMessage = null;
+                     if (record.warnings && record.warnings.length && record.warnings.length > 0)
+                     {
+                        warningMessage = record.warnings[0];
+                     }
+
                      const path = props.isCopy ?
                         location.pathname.replace(new RegExp(`/${props.id}/copy$`), "/" + record.values.get(tableMetaData.primaryKeyField))
                         : location.pathname.replace(/create$/, record.values.get(tableMetaData.primaryKeyField));
-                     navigate(path, {state: {createSuccess: true}});
+                     navigate(path, {state: {createSuccess: true, warning: warningMessage}});
                   }
                })
                .catch((error) =>
                {
-                  if(error.message.toLowerCase().startsWith("warning"))
+                  if (error.message.toLowerCase().startsWith("warning"))
                   {
                      const path = props.isCopy ?
                         location.pathname.replace(new RegExp(`/${props.id}/copy$`), "/" + record.values.get(tableMetaData.primaryKeyField))
@@ -563,15 +855,15 @@ function EntityForm(props: Props): JSX.Element
 
    const getSectionHelp = (section: QTableSection) =>
    {
-      const helpRoles = [props.id ? "EDIT_SCREEN" : "INSERT_SCREEN", "WRITE_SCREENS", "ALL_SCREENS"]
+      const helpRoles = [props.id ? "EDIT_SCREEN" : "INSERT_SCREEN", "WRITE_SCREENS", "ALL_SCREENS"];
       const formattedHelpContent = <HelpContent helpContents={section.helpContents} roles={helpRoles} helpContentKey={`table:${tableMetaData.name};section:${section.name}`} />;
 
       return formattedHelpContent && (
          <Box px={"1.5rem"} fontSize={"0.875rem"}>
             {formattedHelpContent}
          </Box>
-      )
-   }
+      );
+   };
 
    if (notAllowedError)
    {
@@ -594,7 +886,6 @@ function EntityForm(props: Props): JSX.Element
    }
    else
    {
-      const cardElevation = props.isModal ? 3 : 0;
       body = (
          <Box mb={3}>
             {
@@ -656,7 +947,7 @@ function EntityForm(props: Props): JSX.Element
                                     t1sectionName && formFields ? (
                                        <Box px={3}>
                                           <Box pb={"0.25rem"} width="100%">
-                                             {getFormSection(values, touched, formFields.get(t1sectionName), errors)}
+                                             {getFormSection(t1section, values, touched, formFields.get(t1sectionName), errors, true)}
                                           </Box>
                                        </Box>
                                     ) : null
@@ -665,17 +956,7 @@ function EntityForm(props: Props): JSX.Element
                            </Box>
                            {formFields && nonT1Sections.length ? nonT1Sections.map((section: QTableSection) => (
                               <Box key={`edit-card-${section.name}`} pb={3}>
-                                 <Card id={section.name} sx={{overflow: "visible", scrollMarginTop: "100px"}} elevation={cardElevation}>
-                                    <MDTypography variant="h6" p={3} pb={1}>
-                                       {section.label}
-                                    </MDTypography>
-                                    {getSectionHelp(section)}
-                                    <Box pb={1} px={3}>
-                                       <Box pb={"0.75rem"} width="100%">
-                                          {getFormSection(values, touched, formFields.get(section.name), errors)}
-                                       </Box>
-                                    </Box>
-                                 </Card>
+                                 {renderSection(section, values, touched, formFields, errors)}
                               </Box>
                            )) : null}
 
@@ -690,6 +971,23 @@ function EntityForm(props: Props): JSX.Element
                      )}
                   </Formik>
 
+                  {
+                     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>
+                  }
+
                </Grid>
             </Grid>
          </Box>
@@ -714,7 +1012,7 @@ function EntityForm(props: Props): JSX.Element
 
 function ScrollToFirstError(): JSX.Element
 {
-   const {submitCount, isValid} = useFormikContext()
+   const {submitCount, isValid} = useFormikContext();
 
    useEffect(() =>
    {
@@ -744,8 +1042,8 @@ function ScrollToFirstError(): JSX.Element
          }
          firstErrorMessage.scrollIntoView({block: "center"});
 
-      }, 100)
-   }, [submitCount, isValid])
+      }, 100);
+   }, [submitCount, isValid]);
 
    return null;
 }

src/qqq/components/misc/SavedViews.tsx

@@ -87,7 +87,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
    const RENAME_OPTION = "Rename...";
    const DELETE_OPTION = "Delete...";
    const CLEAR_OPTION = "New View";
-   const dropdownOptions = [DUPLICATE_OPTION, RENAME_OPTION, DELETE_OPTION, CLEAR_OPTION];
+   const NEW_REPORT_OPTION = "Create Report from Current View";
 
    const {accentColor, accentColorLight} = useContext(QContext);
 
@@ -187,10 +187,26 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
          case DELETE_OPTION:
             setIsDeleteFilter(true)
             break;
+         case NEW_REPORT_OPTION:
+            createNewReport();
+            break;
       }
    }
 
 
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function createNewReport()
+   {
+      const defaultValues: {[key: string]: any} = {};
+      defaultValues.tableName = tableMetaData.name;
+      defaultValues.queryFilterJson = JSON.stringify(view.queryFilter, null, 3);
+      defaultValues.columnsJson = JSON.stringify(view.queryColumns, null, 3);
+      navigate(`${metaData.getTablePathByName("savedReport")}/create#defaultValues=${encodeURIComponent(JSON.stringify(defaultValues))}`);
+   }
+
+
 
    /*******************************************************************************
     ** fired when save or delete button saved on confirmation dialogs
@@ -376,6 +392,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
    const hasStorePermission = metaData?.processes.has("storeSavedView");
    const hasDeletePermission = metaData?.processes.has("deleteSavedView");
    const hasQueryPermission = metaData?.processes.has("querySavedView");
+   const hasSavedReportsPermission = metaData?.tables.has("savedReport");
 
    const tooltipMaxWidth = (maxWidth: string) =>
    {
@@ -429,7 +446,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
             </Tooltip>
          }
          {
-            hasStorePermission && currentSavedView != null &&
+            hasDeletePermission && currentSavedView != null &&
             <Tooltip {...menuTooltipAttribs} title="Delete this saved view.">
                <MenuItem disabled={currentSavedView === null} onClick={() => handleDropdownOptionClick(DELETE_OPTION)}>
                   <ListItemIcon><Icon>delete</Icon></ListItemIcon>
@@ -445,6 +462,15 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
                </MenuItem>
             </Tooltip>
          }
+         {
+            hasSavedReportsPermission &&
+            <Tooltip {...menuTooltipAttribs} title="Create a new Saved Report using your current view of this table as a starting point.">
+               <MenuItem onClick={() => handleDropdownOptionClick(NEW_REPORT_OPTION)}>
+                  <ListItemIcon><Icon>article</Icon></ListItemIcon>
+                  Create Report from Current View
+               </MenuItem>
+            </Tooltip>
+         }
          <Divider/>
          <MenuItem disabled style={{"opacity": "initial"}}><b>Your Saved Views</b></MenuItem>
          {

src/qqq/components/widgets/Widget.tsx

@@ -169,15 +169,17 @@ export class AddNewRecordButton extends LabelComponent
    label: string;
    defaultValues: any;
    disabledFields: any;
+   addNewRecordCallback?: () => void;
 
 
-   constructor(table: QTableMetaData, defaultValues: any, label: string = "Add new", disabledFields: any = defaultValues)
+   constructor(table: QTableMetaData, defaultValues: any, label: string = "Add new", disabledFields: any = defaultValues, addNewRecordCallback?: () => void)
    {
       super();
       this.table = table;
       this.label = label;
       this.defaultValues = defaultValues;
       this.disabledFields = disabledFields;
+      this.addNewRecordCallback = addNewRecordCallback;
    }
 
    openEditForm = (navigate: any, table: QTableMetaData, id: any = null, defaultValues: any, disabledFields: any) =>
@@ -189,7 +191,7 @@ export class AddNewRecordButton extends LabelComponent
    {
       return (
          <Typography variant="body2" p={2} pr={0} display="inline" position="relative" top="-0.5rem">
-            <Button sx={{mt: 0.75}} onClick={() => this.openEditForm(args.navigate, this.table, null, this.defaultValues, this.disabledFields)}>{this.label}</Button>
+            <Button sx={{mt: 0.75}} onClick={() => this.addNewRecordCallback ? this.addNewRecordCallback() : this.openEditForm(args.navigate, this.table, null, this.defaultValues, this.disabledFields)}>{this.label}</Button>
          </Typography>
       );
    };

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

@@ -25,28 +25,53 @@ import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import Icon from "@mui/material/Icon";
+import IconButton from "@mui/material/IconButton";
 import Tooltip from "@mui/material/Tooltip/Tooltip";
 import Typography from "@mui/material/Typography";
-import {DataGridPro, GridCallbackDetails, GridEventListener, GridFilterModel, gridPreferencePanelStateSelector, GridRowParams, GridSelectionModel, GridToolbarColumnsButton, GridToolbarContainer, GridToolbarDensitySelector, GridToolbarExportContainer, GridToolbarFilterButton, MuiEvent, useGridApiContext, useGridApiEventHandler, useGridSelector} from "@mui/x-data-grid-pro";
-import React, {useEffect, useRef, useState} from "react";
-import {useNavigate, Link} from "react-router-dom";
-import Widget, {AddNewRecordButton, LabelComponent} from "qqq/components/widgets/Widget";
+import {DataGridPro, GridCallbackDetails, GridEventListener, GridRenderCellParams, GridRowParams, GridToolbarContainer, MuiEvent, useGridApiContext, useGridApiEventHandler} from "@mui/x-data-grid-pro";
+import Widget, {AddNewRecordButton, LabelComponent, WidgetData} from "qqq/components/widgets/Widget";
 import DataGridUtils from "qqq/utils/DataGridUtils";
 import HtmlUtils from "qqq/utils/HtmlUtils";
 import Client from "qqq/utils/qqq/Client";
 import ValueUtils from "qqq/utils/qqq/ValueUtils";
+import React, {useEffect, useRef, useState} from "react";
+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};
+}
 
 interface Props
 {
    widgetMetaData: QWidgetMetaData;
-   data: any;
+   data: ChildRecordListData;
+   addNewRecordCallback?: () => void;
+   disableRowClick: boolean;
+   allowRecordEdit: boolean;
+   editRecordCallback?: (rowIndex: number) => void;
+   allowRecordDelete: boolean;
+   deleteRecordCallback?: (rowIndex: number) => void;
 }
 
-RecordGridWidget.defaultProps = {};
+RecordGridWidget.defaultProps =
+   {
+      disableRowClick: false,
+      allowRecordEdit: false,
+      allowRecordDelete: false
+   };
 
 const qController = Client.getInstance();
 
-function RecordGridWidget({widgetMetaData, data}: Props): JSX.Element
+function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRowClick, allowRecordEdit, editRecordCallback, allowRecordDelete, deleteRecordCallback}: Props): JSX.Element
 {
    const instance = useRef({timer: null});
    const [rows, setRows] = useState([]);
@@ -74,7 +99,7 @@ function RecordGridWidget({widgetMetaData, data}: Props): JSX.Element
          }
 
          const tableMetaData = new QTableMetaData(data.childTableMetaData);
-         const rows = DataGridUtils.makeRows(records, tableMetaData);
+         const rows = DataGridUtils.makeRows(records, tableMetaData, true);
 
          /////////////////////////////////////////////////////////////////////////////////
          // note - tablePath may be null, if the user doesn't have access to the table. //
@@ -103,6 +128,28 @@ function RecordGridWidget({widgetMetaData, data}: Props): JSX.Element
             }
          }
 
+         ////////////////////////////////////
+         // add actions cell, if available //
+         ////////////////////////////////////
+         if(allowRecordEdit || allowRecordDelete)
+         {
+            columns.unshift({
+               field: "_actions",
+               type: "string",
+               headerName: "Actions",
+               sortable: false,
+               filterable: false,
+               width: allowRecordEdit && allowRecordDelete ? 80 : 50,
+               renderCell: ((params: GridRenderCellParams) =>
+               {
+                  return <Box>
+                     {allowRecordEdit && <IconButton onClick={() => editRecordCallback(params.row.__rowIndex)}><Icon>edit</Icon></IconButton>}
+                     {allowRecordDelete && <IconButton onClick={() => deleteRecordCallback(params.row.__rowIndex)}><Icon>delete</Icon></IconButton>}
+                  </Box>
+               })
+            })
+         }
+
          setRows(rows);
          setRecords(records)
          setColumns(columns);
@@ -195,7 +242,7 @@ function RecordGridWidget({widgetMetaData, data}: Props): JSX.Element
       {
          disabledFields = data.defaultValuesForNewChildRecords;
       }
-      labelAdditionalComponentsRight.push(new AddNewRecordButton(data.childTableMetaData, data.defaultValuesForNewChildRecords, "Add new", disabledFields))
+      labelAdditionalComponentsRight.push(new AddNewRecordButton(data.childTableMetaData, data.defaultValuesForNewChildRecords, "Add new", disabledFields, addNewRecordCallback))
    }
 
 
@@ -204,13 +251,18 @@ function RecordGridWidget({widgetMetaData, data}: Props): JSX.Element
    /////////////////////////////////////////////////////////////////
    const handleRowClick = (params: GridRowParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) =>
    {
+      if(disableRowClick)
+      {
+         return;
+      }
+
       (async () =>
       {
          const qInstance = await qController.loadMetaData()
          let tablePath = qInstance.getTablePathByName(data.childTableMetaData.name)
          if(tablePath)
          {
-            tablePath = `${tablePath}/${params.id}`;
+            tablePath = `${tablePath}/${params.row[data.childTableMetaData.primaryKeyField]}`;
             DataGridUtils.handleRowClick(tablePath, event, gridMouseDownX, gridMouseDownY, navigate, instance);
          }
       })();
@@ -266,6 +318,7 @@ function RecordGridWidget({widgetMetaData, data}: Props): JSX.Element
                rowBuffer={10}
                getRowClassName={(params) => (params.indexRelativeToCurrentPage % 2 === 0 ? "even" : "odd")}
                onRowClick={handleRowClick}
+               getRowId={(row) => row.__rowIndex}
                // getRowHeight={() => "auto"} // maybe nice?  wraps values in cells...
                components={{
                   Toolbar: CustomToolbar

src/qqq/pages/processes/ProcessRun.tsx

@@ -47,9 +47,6 @@ import {DataGridPro, GridColDef} from "@mui/x-data-grid-pro";
 import FormData from "form-data";
 import {Form, Formik} from "formik";
 import parse from "html-react-parser";
-import React, {useContext, useEffect, useState} from "react";
-import {useLocation, useNavigate, useParams} from "react-router-dom";
-import * as Yup from "yup";
 import QContext from "QContext";
 import {QCancelButton, QSubmitButton} from "qqq/components/buttons/DefaultButtons";
 import QDynamicForm from "qqq/components/forms/DynamicForm";
@@ -66,6 +63,9 @@ import {TABLE_VARIANT_LOCAL_STORAGE_KEY_ROOT} from "qqq/pages/records/query/Reco
 import Client from "qqq/utils/qqq/Client";
 import TableUtils from "qqq/utils/qqq/TableUtils";
 import ValueUtils from "qqq/utils/qqq/ValueUtils";
+import React, {useContext, useEffect, useState} from "react";
+import {useLocation, useNavigate, useParams} from "react-router-dom";
+import * as Yup from "yup";
 
 
 interface Props
@@ -226,8 +226,19 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
       setShowFullHelpText(!showFullHelpText);
    };
 
-   const download = (url: string, fileName: string) =>
+   const download = (processValues: {[key: string]: string}) =>
    {
+      let url;
+      let fileName = processValues.downloadFileName;
+      if(processValues.serverFilePath)
+      {
+         url = `/download/${encodeURIComponent(processValues.downloadFileName)}?filePath=${encodeURIComponent(processValues.serverFilePath)}`;
+      }
+      else if(processValues.storageTableName && processValues.storageReference)
+      {
+         url = `/download/${encodeURIComponent(processValues.downloadFileName)}?storageTableName=${encodeURIComponent(processValues.storageTableName)}&storageReference=${encodeURIComponent(processValues.storageReference)}`;
+      }
+
       /////////////////////////////////////////////////////////////////////////////////////////////
       // todo - this could be simplified, i think?                                               //
       // it was originally built like this when we had to submit full access token to backend... //
@@ -556,7 +567,7 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
                                        Download
                                     </Box>
                                     <Box display="flex" py={1} pr={2}>
-                                       <MDTypography variant="button" fontWeight="bold" onClick={() => download(`/download/${processValues.downloadFileName}?filePath=${processValues.serverFilePath}`, processValues.downloadFileName)} sx={{cursor: "pointer"}}>
+                                       <MDTypography variant="button" fontWeight="bold" onClick={() => download(processValues)} sx={{cursor: "pointer"}}>
                                           <Box display="flex" alignItems="center" gap={1} py={1} pr={2}>
                                              <Icon fontSize="large">download_for_offline</Icon>
                                              {processValues.downloadFileName}

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

@@ -867,7 +867,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
                               }
                               {
                                  warningMessage ?
-                                    <Alert color="warning" sx={{mb: 3}} onClose={() =>
+                                    <Alert color="warning" sx={{mb: 3}} icon={<Icon>warning</Icon>} onClose={() =>
                                     {
                                        setWarningMessage(null);
                                     }}>

src/qqq/utils/DataGridUtils.tsx

@@ -29,11 +29,11 @@ import Tooltip from "@mui/material/Tooltip/Tooltip";
 import {GridColDef, GridFilterItem, GridRowsProp, MuiEvent} from "@mui/x-data-grid-pro";
 import {GridFilterOperator} from "@mui/x-data-grid/models/gridFilterOperator";
 import {GridColumnHeaderParams} from "@mui/x-data-grid/models/params/gridColumnHeaderParams";
-import React from "react";
-import {Link, NavigateFunction} from "react-router-dom";
 import HelpContent, {hasHelpContent} from "qqq/components/misc/HelpContent";
 import {buildQGridPvsOperators, QGridBlobOperators, QGridBooleanOperators, QGridNumericOperators, QGridStringOperators} from "qqq/pages/records/query/GridFilterOperators";
 import ValueUtils from "qqq/utils/qqq/ValueUtils";
+import React from "react";
+import {Link, NavigateFunction} from "react-router-dom";
 
 
 const emptyApplyFilterFn = (filterItem: GridFilterItem, column: GridColDef): null => null;
@@ -118,7 +118,7 @@ export default class DataGridUtils
    /*******************************************************************************
     **
     *******************************************************************************/
-   public static makeRows = (results: QRecord[], tableMetaData: QTableMetaData): GridRowsProp[] =>
+   public static makeRows = (results: QRecord[], tableMetaData: QTableMetaData, allowEmptyId = false): GridRowsProp[] =>
    {
       const fields = [...tableMetaData.fields.values()];
       const rows = [] as any[];
@@ -159,7 +159,10 @@ export default class DataGridUtils
                /////////////////////////////////////////////////////////////////////////////////////////
                // DataGrid gets very upset about a null or undefined here, so, try to make it happier //
                /////////////////////////////////////////////////////////////////////////////////////////
-               row["id"] = "--";
+               if(!allowEmptyId)
+               {
+                  row["id"] = "--";
+               }
             }
          }
 
@@ -279,7 +282,7 @@ export default class DataGridUtils
          if (key === tableMetaData.primaryKeyField && linkBase)
          {
             column.renderCell = (cellValues: any) => (
-               <Link to={`${linkBase}${encodeURIComponent(cellValues.value)}`} onClick={(e) => e.stopPropagation()}>{cellValues.value}</Link>
+               cellValues.value ? <Link to={`${linkBase}${encodeURIComponent(cellValues.value)}`} onClick={(e) => e.stopPropagation()}>{cellValues.value}</Link> : ""
             );
          }
       });

src/qqq/utils/qqq/TableUtils.ts

@@ -30,61 +30,101 @@ import {QueryJoin} from "@kingsrook/qqq-frontend-core/lib/model/query/QueryJoin"
  *******************************************************************************/
 class TableUtils
 {
+
    /*******************************************************************************
+    ** For a table, return a sub-set of sections (originally meant for display in
+    ** the record-screen sidebars)
     **
+    ** If the table has no sections, one big "all fields" section is created.
+    **
+    ** a list of "allowed field names" may be given, in which case, a section is only
+    ** included if it has a field in that list.  e.g., an edit-screen, where disabled
+    ** fields aren't to be shown - if a section only has disabled fields, don't include it.
+    **
+    ** By default sections w/ widget names are excluded -- but -- to include them,
+    ** provide the metaData plus list of allowedWidgetTypes.
     *******************************************************************************/
-   public static getSectionsForRecordSidebar(tableMetaData: QTableMetaData, allowedKeys: any = null): QTableSection[]
+   public static getSectionsForRecordSidebar(tableMetaData: QTableMetaData, allowedFieldNames: any = null, additionalInclusionPredicate?: (section: QTableSection) => boolean): QTableSection[]
    {
+      /////////////////////////////////////////////////////////////////
+      // if the table has sections, then filter them and return some //
+      /////////////////////////////////////////////////////////////////
       if (tableMetaData.sections)
       {
-         if (allowedKeys)
+         //////////////////////////////////////////////////////////////////////////////////////////////
+         // if there are filters (a list of allowed field names, or an additionalInclusionPredicate, //
+         // then only return a subset of sections matching the filters                               //
+         //////////////////////////////////////////////////////////////////////////////////////////////
+         if (allowedFieldNames || additionalInclusionPredicate)
          {
-            const allowedKeySet = new Set<string>();
-            allowedKeys.forEach((k: string) => allowedKeySet.add(k));
+            ////////////////////////////////////////////////////////////////
+            // put the field names in a set, for better inclusion testing //
+            ////////////////////////////////////////////////////////////////
+            const allowedFieldNameSet = new Set<string>();
+            if(allowedFieldNames)
+            {
+               allowedFieldNames.forEach((k: string) => allowedFieldNameSet.add(k));
+            }
 
+            ///////////////////////////////////////////////////////////////////////////////
+            // loop over the sections, deciding which ones to include in the return list //
+            ///////////////////////////////////////////////////////////////////////////////
             const allowedSections: QTableSection[] = [];
-
             for (let i = 0; i < tableMetaData.sections.length; i++)
             {
                const section = tableMetaData.sections[i];
-               if (section.fieldNames)
+               let includeSection = false;
+
+               for (let j = 0; j < section.fieldNames?.length; j++)
                {
-                  for (let j = 0; j < section.fieldNames.length; j++)
+                  if (allowedFieldNameSet.has(section.fieldNames[j]))
                   {
-                     if (allowedKeySet.has(section.fieldNames[j]))
-                     {
-                        allowedSections.push(section);
-                        break;
-                     }
+                     includeSection = true;
+                     break;
                   }
                }
+
+               if (additionalInclusionPredicate && additionalInclusionPredicate(section))
+               {
+                  includeSection = true;
+               }
+
+               if(includeSection)
+               {
+                  allowedSections.push(section);
+               }
             }
 
+            console.log("allowedSections length: " + allowedSections.length);
             return (allowedSections);
          }
-         else
-         {
-            return (tableMetaData.sections);
-         }
+
+         ////////////////////////////////////////////////////////////////
+         // if there are no filters to apply, then return all sections //
+         ////////////////////////////////////////////////////////////////
+         return (tableMetaData.sections);
       }
-      else
+
+      ///////////////////////////////////////////////////////////////////////////////////////////////
+      // else, if the table had no sections, then make a pseudo-one with either all of the fields, //
+      // or a subset based on the allowedFieldNames                                                //
+      ///////////////////////////////////////////////////////////////////////////////////////////////
+      let fieldNames = [...tableMetaData.fields.keys()];
+      if (allowedFieldNames)
       {
-         let fieldNames = [...tableMetaData.fields.keys()];
-         if (allowedKeys)
+         fieldNames = [];
+         for (const fieldName in tableMetaData.fields.keys())
          {
-            fieldNames = [];
-            for (const fieldName in tableMetaData.fields.keys())
+            if (allowedFieldNames[fieldName])
             {
-               if (allowedKeys[fieldName])
-               {
-                  fieldNames.push(fieldName);
-               }
+               fieldNames.push(fieldName);
             }
          }
-         return ([new QTableSection({
-            iconName: "description", label: "All Fields", name: "allFields", fieldNames: [...fieldNames],
-         })]);
       }
+
+      return ([new QTableSection({
+         iconName: "description", label: "All Fields", name: "allFields", fieldNames: [...fieldNames],
+      })]);
    }