Merge branch 'release/0.23.0'

pom.xml

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

src/qqq/components/forms/EntityForm.tsx

@@ -818,9 +818,9 @@ function EntityForm(props: Props): JSX.Element
    {
       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 there's a callback (e.g., for a modal nested on another create/edit screen), then just pass our data back there and return. //
-      /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+      ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
       if (props.onSubmitCallback)
       {
          props.onSubmitCallback(values);
@@ -1290,7 +1290,7 @@ function EntityForm(props: Props): JSX.Element
                               table={showEditChildForm.table}
                               defaultValues={showEditChildForm.defaultValues}
                               disabledFields={showEditChildForm.disabledFields}
-                              onSubmitCallback={submitEditChildForm}
+                              onSubmitCallback={props.onSubmitCallback ? props.onSubmitCallback : submitEditChildForm}
                               overrideHeading={`${showEditChildForm.rowIndex != null ? "Editing" : "Creating New"} ${showEditChildForm.table.label}`}
                            />
                         </div>

src/qqq/components/scripts/ScriptEditor.tsx

@@ -40,16 +40,17 @@ import Snackbar from "@mui/material/Snackbar";
 import TextField from "@mui/material/TextField";
 import Tooltip from "@mui/material/Tooltip";
 import FormData from "form-data";
-import React, {useEffect, useReducer, useRef, useState} from "react";
-import AceEditor from "react-ace";
 import {QCancelButton, QSaveButton} from "qqq/components/buttons/DefaultButtons";
 import DynamicSelect from "qqq/components/forms/DynamicSelect";
 import ScriptDocsForm from "qqq/components/scripts/ScriptDocsForm";
 import ScriptTestForm from "qqq/components/scripts/ScriptTestForm";
 import Client from "qqq/utils/qqq/Client";
 
+import "ace-builds/src-noconflict/ace";
 import "ace-builds/src-noconflict/mode-javascript";
 import "ace-builds/src-noconflict/theme-github";
+import React, {useEffect, useReducer, useRef, useState} from "react";
+import AceEditor from "react-ace";
 import "ace-builds/src-noconflict/ext-language_tools";
 
 export interface ScriptEditorProps
@@ -77,7 +78,7 @@ function buildInitialFileContentsMap(scriptRevisionRecord: QRecord, scriptTypeFi
    }
    else
    {
-      let files = scriptRevisionRecord?.associatedRecords?.get("files")
+      let files = scriptRevisionRecord?.associatedRecords?.get("files");
 
       for (let i = 0; i < scriptTypeFileSchemaList.length; i++)
       {
@@ -125,21 +126,21 @@ function ScriptEditor({title, scriptId, scriptRevisionRecord, closeCallback, tab
 {
    const [closing, setClosing] = useState(false);
 
-   const [apiName, setApiName] = useState(scriptRevisionRecord ? scriptRevisionRecord.values.get("apiName") : null)
+   const [apiName, setApiName] = useState(scriptRevisionRecord ? scriptRevisionRecord.values.get("apiName") : null);
-   const [apiNameLabel, setApiNameLabel] = useState(scriptRevisionRecord ? scriptRevisionRecord.displayValues.get("apiName") : null)
+   const [apiNameLabel, setApiNameLabel] = useState(scriptRevisionRecord ? scriptRevisionRecord.displayValues.get("apiName") : null);
-   const [apiVersion, setApiVersion] = useState(scriptRevisionRecord ? scriptRevisionRecord.values.get("apiVersion") : null)
+   const [apiVersion, setApiVersion] = useState(scriptRevisionRecord ? scriptRevisionRecord.values.get("apiVersion") : null);
-   const [apiVersionLabel, setApiVersionLabel] = useState(scriptRevisionRecord ? scriptRevisionRecord.displayValues.get("apiVersion") : null)
+   const [apiVersionLabel, setApiVersionLabel] = useState(scriptRevisionRecord ? scriptRevisionRecord.displayValues.get("apiVersion") : null);
 
-   const fileNamesFromSchema = scriptTypeFileSchemaList.map((schemaRecord) => schemaRecord.values.get("name"))
+   const fileNamesFromSchema = scriptTypeFileSchemaList.map((schemaRecord) => schemaRecord.values.get("name"));
    const [availableFileNames, setAvailableFileNames] = useState(fileNamesFromSchema);
-   const [openEditorFileNames, setOpenEditorFileNames] = useState([fileNamesFromSchema[0]])
+   const [openEditorFileNames, setOpenEditorFileNames] = useState([fileNamesFromSchema[0]]);
-   const [fileContents, setFileContents] = useState(buildInitialFileContentsMap(scriptRevisionRecord, scriptTypeFileSchemaList))
+   const [fileContents, setFileContents] = useState(buildInitialFileContentsMap(scriptRevisionRecord, scriptTypeFileSchemaList));
-   const [fileTypes, setFileTypes] = useState(buildFileTypeMap(scriptTypeFileSchemaList))
+   const [fileTypes, setFileTypes] = useState(buildFileTypeMap(scriptTypeFileSchemaList));
    console.log(`file types: ${JSON.stringify(fileTypes)}`);
 
-   const [commitMessage, setCommitMessage] = useState("")
+   const [commitMessage, setCommitMessage] = useState("");
    const [openTool, setOpenTool] = useState(null);
-   const [errorAlert, setErrorAlert] = useState("")
+   const [errorAlert, setErrorAlert] = useState("");
    const [promptForCommitMessageOpen, setPromptForCommitMessageOpen] = useState(false);
    const [, forceUpdate] = useReducer((x) => x + 1, 0);
    const ref = useRef();
@@ -241,7 +242,7 @@ function ScriptEditor({title, scriptId, scriptRevisionRecord, closeCallback, tab
       // need this to make Ace recognize new height.
       setTimeout(() =>
       {
-         window.dispatchEvent(new Event("resize"))
+         window.dispatchEvent(new Event("resize"));
       }, 100);
    };
 
@@ -249,7 +250,7 @@ function ScriptEditor({title, scriptId, scriptRevisionRecord, closeCallback, tab
    {
       if (!apiName || !apiVersion)
       {
-         setErrorAlert("You must select a value for both API Name and API Version.")
+         setErrorAlert("You must select a value for both API Name and API Version.");
          return;
       }
 
@@ -278,7 +279,7 @@ function ScriptEditor({title, scriptId, scriptRevisionRecord, closeCallback, tab
          }
 
 
-         const fileNamesFromSchema = scriptTypeFileSchemaList.map((schemaRecord) => schemaRecord.values.get("name"))
+         const fileNamesFromSchema = scriptTypeFileSchemaList.map((schemaRecord) => schemaRecord.values.get("name"));
          formData.append("fileNames", fileNamesFromSchema.join(","));
 
          for (let fileName in fileContents)
@@ -299,8 +300,8 @@ function ScriptEditor({title, scriptId, scriptRevisionRecord, closeCallback, tab
 
             if (processResult instanceof QJobError)
             {
-               const jobError = processResult as QJobError
+               const jobError = processResult as QJobError;
-               setErrorAlert(jobError.userFacingError ?? jobError.error)
+               setErrorAlert(jobError.userFacingError ?? jobError.error);
                setClosing(false);
                return;
             }
@@ -310,28 +311,28 @@ function ScriptEditor({title, scriptId, scriptRevisionRecord, closeCallback, tab
          catch (e)
          {
             // @ts-ignore
-            setErrorAlert(e.message ?? "Unexpected error saving script")
+            setErrorAlert(e.message ?? "Unexpected error saving script");
             setClosing(false);
          }
       })();
-   }
+   };
 
    const cancelClicked = () =>
    {
       setClosing(true);
       closeCallback(null, "cancelled");
-   }
+   };
 
    const updateCode = (value: string, event: any, index: number) =>
    {
       fileContents[openEditorFileNames[index]] = value;
       forceUpdate();
-   }
+   };
 
    const updateCommitMessage = (event: React.ChangeEvent<HTMLInputElement>) =>
    {
       setCommitMessage(event.target.value);
-   }
+   };
 
    const closePromptForCommitMessage = (wasSaveClicked: boolean, message?: string) =>
    {
@@ -339,14 +340,14 @@ function ScriptEditor({title, scriptId, scriptRevisionRecord, closeCallback, tab
 
       if (wasSaveClicked)
       {
-         setCommitMessage(message)
+         setCommitMessage(message);
          saveClicked(message);
       }
       else
       {
          setClosing(false);
       }
-   }
+   };
 
    const changeApiName = (apiNamePossibleValue?: QPossibleValue) =>
    {
@@ -358,7 +359,7 @@ function ScriptEditor({title, scriptId, scriptRevisionRecord, closeCallback, tab
       {
          setApiName(null);
       }
-   }
+   };
 
    const changeApiVersion = (apiVersionPossibleValue?: QPossibleValue) =>
    {
@@ -370,33 +371,33 @@ function ScriptEditor({title, scriptId, scriptRevisionRecord, closeCallback, tab
       {
          setApiVersion(null);
       }
-   }
+   };
 
    const handleSelectingFile = (event: SelectChangeEvent, index: number) =>
    {
-      openEditorFileNames[index] = event.target.value
+      openEditorFileNames[index] = event.target.value;
       setOpenEditorFileNames(openEditorFileNames);
       forceUpdate();
-   }
+   };
 
    const splitEditorClicked = () =>
    {
-      openEditorFileNames.push(availableFileNames[0])
+      openEditorFileNames.push(availableFileNames[0]);
       setOpenEditorFileNames(openEditorFileNames);
       forceUpdate();
-   }
+   };
 
    const closeEditorClicked = (index: number) =>
    {
-      openEditorFileNames.splice(index, 1)
+      openEditorFileNames.splice(index, 1);
       setOpenEditorFileNames(openEditorFileNames);
       forceUpdate();
-   }
+   };
 
    const computeEditorWidth = (): string =>
    {
-      return (100 / openEditorFileNames.length) + "%"
+      return (100 / openEditorFileNames.length) + "%";
-   }
+   };
 
    return (
       <Box className="scriptEditor" sx={{position: "absolute", overflowY: "auto", height: "100%", width: "100%"}} p={6}>
@@ -408,7 +409,7 @@ function ScriptEditor({title, scriptId, scriptRevisionRecord, closeCallback, tab
                {
                   return;
                }
-               setErrorAlert("")
+               setErrorAlert("");
             }} anchorOrigin={{vertical: "top", horizontal: "center"}}>
                <Alert color="error" onClose={() => setErrorAlert("")}>
                   {errorAlert}
@@ -535,12 +536,12 @@ function ScriptEditor({title, scriptId, scriptRevisionRecord, closeCallback, tab
 
 function CommitMessagePrompt(props: { isOpen: boolean, closeHandler: (wasSaveClicked: boolean, message?: string) => void })
 {
-   const [commitMessage, setCommitMessage] = useState("No commit message given")
+   const [commitMessage, setCommitMessage] = useState("No commit message given");
 
    const updateCommitMessage = (event: React.ChangeEvent<HTMLInputElement>) =>
    {
       setCommitMessage(event.target.value);
-   }
+   };
 
    const keyPressHandler = (e: React.KeyboardEvent<HTMLDivElement>) =>
    {
@@ -548,7 +549,7 @@ function CommitMessagePrompt(props: {isOpen: boolean, closeHandler: (wasSaveClic
       {
          props.closeHandler(true, commitMessage);
       }
-   }
+   };
 
    return (
       <Dialog
@@ -582,7 +583,7 @@ function CommitMessagePrompt(props: {isOpen: boolean, closeHandler: (wasSaveClic
             <QSaveButton label="Save" onClickHandler={() => props.closeHandler(true, commitMessage)} disabled={false} />
          </DialogActions>
       </Dialog>
-   )
+   );
 }
 
 export default ScriptEditor;

src/qqq/components/widgets/DashboardWidgets.tsx

@@ -107,7 +107,6 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
    // modal form controls //
    /////////////////////////
    const [showEditChildForm, setShowEditChildForm] = useState(null as any);
-   const [modalTable, setModalTable] = useState(null as QTableMetaData);
 
    let initialSelectedTab = 0;
    let selectedTabKey: string = null;
@@ -340,13 +339,15 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
     *******************************************************************************/
    function openAddChildRecord(name: string, widgetData: any)
    {
+      let defaultValues = widgetData.defaultValuesForNewChildRecords;
+
       let disabledFields = widgetData.disabledFieldsForNewChildRecords;
       if (!disabledFields)
       {
          disabledFields = widgetData.defaultValuesForNewChildRecords;
       }
 
-      doOpenEditChildForm(name, widgetData.childTableMetaData, null, null, disabledFields);
+      doOpenEditChildForm(name, widgetData.childTableMetaData, null, defaultValues, disabledFields);
    }
 
 
@@ -714,7 +715,7 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
                      allowRecordDelete={widgetData[i]?.allowRecordDelete}
                      deleteRecordCallback={(rowIndex) => deleteChildRecord(widgetMetaData.name, i, rowIndex)}
                      editRecordCallback={(rowIndex) => openEditChildRecord(widgetMetaData.name, widgetData[i], rowIndex)}
-                     addNewRecordCallback={() => openAddChildRecord(widgetMetaData.name, widgetData[i])}
+                     addNewRecordCallback={widgetData[i]?.isInProcess ? () => openAddChildRecord(widgetMetaData.name, widgetData[i]) : null}
                      widgetMetaData={widgetMetaData}
                      data={widgetData[i]}
                   />

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

@@ -50,6 +50,7 @@ import DeveloperModeUtils from "qqq/utils/DeveloperModeUtils";
 import Client from "qqq/utils/qqq/Client";
 import ValueUtils from "qqq/utils/qqq/ValueUtils";
 
+import "ace-builds/src-noconflict/ace";
 import "ace-builds/src-noconflict/mode-java";
 import "ace-builds/src-noconflict/mode-javascript";
 import "ace-builds/src-noconflict/mode-json";

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

@@ -295,6 +295,12 @@ function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRo
       return (<GridToolbarContainer />);
    }
 
+   let containerPadding = -3;
+   if (data?.isInProcess)
+   {
+      containerPadding = 0;
+   }
+
 
    return (
       <Widget
@@ -304,7 +310,7 @@ function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRo
          labelAdditionalComponentsRight={labelAdditionalComponentsRight}
          labelBoxAdditionalSx={{position: "relative", top: "-0.375rem"}}
       >
-         <Box>
+         <Box mx={containerPadding} mb={containerPadding}>
             <Box>
                <DataGridPro
                   autoHeight

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

@@ -34,6 +34,7 @@ import BaseLayout from "qqq/layouts/BaseLayout";
 import Client from "qqq/utils/qqq/Client";
 import ValueUtils from "qqq/utils/qqq/ValueUtils";
 
+import "ace-builds/src-noconflict/ace";
 import "ace-builds/src-noconflict/mode-java";
 import "ace-builds/src-noconflict/mode-javascript";
 import "ace-builds/src-noconflict/mode-json";

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

@@ -205,6 +205,8 @@ function RecordView({table, record: overrideRecord, launchProcess}: Props): JSX.
 
    const {accentColor, setPageHeader, tableMetaData, setTableMetaData, tableProcesses, setTableProcesses, dotMenuOpen, keyboardHelpOpen, helpHelpActive, recordAnalytics, userId: currentUserId} = useContext(QContext);
 
+   const CREATE_CHILD_KEY = "createChild";
+
    if (localStorage.getItem(tableVariantLocalStorageKey))
    {
       tableVariant = JSON.parse(localStorage.getItem(tableVariantLocalStorageKey));
@@ -307,12 +309,19 @@ function RecordView({table, record: overrideRecord, launchProcess}: Props): JSX.
          ///////////////////////////////////////////////////////////////////////////////////////////////
          // the path for a process looks like: .../table/id/process                                   //
          // the path for creating a child record looks like: .../table/id/createChild/:childTableName //
+         // the path for creating a child record in a process looks like:                             //
+         // .../table/id/processName#/createChild=...                                                 //
          ///////////////////////////////////////////////////////////////////////////////////////////////
+         let hasChildRecordKey = pathParts.some(p => p.includes(CREATE_CHILD_KEY));
+         if (!hasChildRecordKey)
+         {
+            hasChildRecordKey = hashParts.some(h => h.includes(CREATE_CHILD_KEY));
+         }
 
-         //////////////////////////////////////////////////////////////
+         ////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-         // if our tableName is in the -3 index, try to open process //
+         // if our tableName is in the -3 index, and there is no token for updating child records, try to open process //
-         //////////////////////////////////////////////////////////////
+         ////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-         if (pathParts[pathParts.length - 3] === tableName)
+         if (!hasChildRecordKey && pathParts[pathParts.length - 3] === tableName)
          {
             const processName = pathParts[pathParts.length - 1];
             const processList = allTableProcesses.filter(p => p.name.endsWith(processName));
@@ -349,7 +358,7 @@ function RecordView({table, record: overrideRecord, launchProcess}: Props): JSX.
          // if our table is in the -4 index, and there's `createChild` in the -2 index, try to open a createChild form //
          // e.g., person/42/createChild/address (to create an address under person 42)                                 //
          ////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-         if (pathParts[pathParts.length - 4] === tableName && pathParts[pathParts.length - 2] == "createChild")
+         if (pathParts[pathParts.length - 4] === tableName && pathParts[pathParts.length - 2] == CREATE_CHILD_KEY)
          {
             (async () =>
             {
@@ -368,7 +377,7 @@ function RecordView({table, record: overrideRecord, launchProcess}: Props): JSX.
          for (let i = 0; i < hashParts.length; i++)
          {
             const parts = hashParts[i].split("=");
-            if (parts.length > 1 && parts[0] == "createChild")
+            if (parts.length > 1 && parts[0] == CREATE_CHILD_KEY)
             {
                (async () =>
                {
@@ -831,7 +840,7 @@ function RecordView({table, record: overrideRecord, launchProcess}: Props): JSX.
             const ownerId = record.values.get(tableMetaData.shareableTableMetaData.thisTableOwnerIdFieldName);
             if (ownerId != currentUserId)
             {
-               disabledTooltipText = `Only the owner of a ${tableMetaData.label} may share it.`
+               disabledTooltipText = `Only the owner of a ${tableMetaData.label} may share it.`;
                shareDisabled = true;
             }
             else

src/qqq/utils/DataGridUtils.tsx

@@ -113,7 +113,7 @@ export default class DataGridUtils
       {
          console.log(`row-click mouse-up happened ${diff} x or y pixels away from the mouse-down - so not considering it a click.`);
       }
-   }
+   };
 
    /*******************************************************************************
     **
@@ -170,7 +170,7 @@ export default class DataGridUtils
       });
 
       return (rows);
-   }
+   };
 
    /*******************************************************************************
     **
@@ -241,16 +241,20 @@ export default class DataGridUtils
          ///////////////////////////
          // sort by labels... mmm //
          ///////////////////////////
-         sortedKeys.push(...tableMetaData.fields.keys())
+         sortedKeys.push(...tableMetaData.fields.keys());
          sortedKeys.sort((a: string, b: string): number =>
          {
-            return (tableMetaData.fields.get(a).label.localeCompare(tableMetaData.fields.get(b).label))
+            return (tableMetaData.fields.get(a).label.localeCompare(tableMetaData.fields.get(b).label));
-         })
+         });
       }
 
       sortedKeys.forEach((key) =>
       {
          const field = tableMetaData.fields.get(key);
+         if (!field)
+         {
+            return;
+         }
          if (field.isHeavy)
          {
             if (field.type == QFieldType.BLOB)
@@ -346,7 +350,7 @@ export default class DataGridUtils
          (cellValues.value)
       );
 
-      const helpRoles = ["QUERY_SCREEN", "READ_SCREENS", "ALL_SCREENS"]
+      const helpRoles = ["QUERY_SCREEN", "READ_SCREENS", "ALL_SCREENS"];
       const showHelp = hasHelpContent(field.helpContents, helpRoles); // todo - maybe - take helpHelpActive from context all the way down to here?
       if (showHelp)
       {
@@ -361,7 +365,7 @@ export default class DataGridUtils
       }
 
       return (column);
-   }
+   };
 
 
    /*******************************************************************************
@@ -415,6 +419,6 @@ export default class DataGridUtils
       }
 
       return (200);
-   }
+   };
 }
 

src/qqq/utils/HtmlUtils.ts

@@ -19,7 +19,8 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import Client from "qqq/utils/qqq/Client";
+import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
+import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
 
 /*******************************************************************************
  ** Utility functions for basic html/webpage/browser things.
@@ -68,10 +69,16 @@ export default class HtmlUtils
     ** it was originally built like this when we had to submit full access token to backend...
     **
     *******************************************************************************/
-   static downloadUrlViaIFrame = (url: string, filename: string) =>
+   static downloadUrlViaIFrame = (field: QFieldMetaData, url: string, filename: string) =>
    {
-      if(url.startsWith("data:"))
+      if (url.startsWith("data:") || url.startsWith("http"))
       {
+         if (url.startsWith("http"))
+         {
+            const separator = url.includes("?") ? "&" : "?";
+            url += encodeURIComponent(`${separator}response-content-disposition=attachment; ${filename}`);
+         }
+
          const link = document.createElement("a");
          link.download = filename;
          link.href = url;
@@ -93,8 +100,14 @@ export default class HtmlUtils
       // todo - onload event handler to let us know when done?
       document.body.appendChild(iframe);
 
+      var method = "get";
+      if (QFieldType.BLOB == field.type)
+      {
+         method = "post";
+      }
+
       const form = document.createElement("form");
-      form.setAttribute("method", "post");
+      form.setAttribute("method", method);
       form.setAttribute("action", url);
       form.setAttribute("target", "downloadIframe");
       iframe.appendChild(form);

src/qqq/utils/qqq/ValueUtils.tsx

@@ -28,18 +28,17 @@ import "datejs"; // https://github.com/datejs/Datejs
 import {Chip, ClickAwayListener, Icon} from "@mui/material";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
-import IconButton from "@mui/material/IconButton";
 import Tooltip from "@mui/material/Tooltip";
-import {makeStyles} from "@mui/styles";
 import parse from "html-react-parser";
-import React, {Fragment, useReducer, useState} from "react";
-import AceEditor from "react-ace";
-import {Link} from "react-router-dom";
 import HtmlUtils from "qqq/utils/HtmlUtils";
 import Client from "qqq/utils/qqq/Client";
 
+import "ace-builds/src-noconflict/ace";
 import "ace-builds/src-noconflict/mode-sql";
+import React, {Fragment, useReducer, useState} from "react";
+import AceEditor from "react-ace";
 import "ace-builds/src-noconflict/mode-velocity";
+import {Link} from "react-router-dom";
 
 /*******************************************************************************
  ** Utility class for working with QQQ Values
@@ -198,7 +197,7 @@ class ValueUtils
          );
       }
 
-      if (field.type == QFieldType.BLOB)
+      if (field.type == QFieldType.BLOB || field.hasAdornment(AdornmentType.FILE_DOWNLOAD))
       {
          return (<BlobComponent field={field} url={rawValue} filename={displayValue} usage={usage} />);
       }
@@ -276,7 +275,7 @@ class ValueUtils
          // to millis) back to it                                                          //
          ////////////////////////////////////////////////////////////////////////////////////
          date = new Date(date);
-         date.setTime(date.getTime() + date.getTimezoneOffset() * 60 * 1000)
+         date.setTime(date.getTime() + date.getTimezoneOffset() * 60 * 1000);
       }
       // @ts-ignore
       return (`${date.toString("yyyy-MM-dd")}`);
@@ -680,7 +679,7 @@ function BlobComponent({field, url, filename, usage}: BlobComponentProps): JSX.E
    const download = (event: React.MouseEvent<HTMLSpanElement>) =>
    {
       event.stopPropagation();
-      HtmlUtils.downloadUrlViaIFrame(url, filename);
+      HtmlUtils.downloadUrlViaIFrame(field, url, filename);
    };
 
    const open = (event: React.MouseEvent<HTMLSpanElement>) =>
@@ -704,10 +703,22 @@ function BlobComponent({field, url, filename, usage}: BlobComponentProps): JSX.E
             usage == "view" && filename
          }
          <Tooltip placement={tooltipPlacement} title="Open file">
+            {
+               field.type == QFieldType.BLOB ? (
                   <Icon className={"blobIcon"} fontSize="small" onClick={(e) => open(e)}>open_in_new</Icon>
+               ) : (
+                  <a style={{color: "inherit"}} rel="noopener noreferrer" href={url} target="_blank"><Icon className={"blobIcon"} fontSize="small">open_in_new</Icon></a>
+               )
+            }
          </Tooltip>
          <Tooltip placement={tooltipPlacement} title="Download file">
+            {
+               field.type == QFieldType.BLOB ? (
                   <Icon className={"blobIcon"} fontSize="small" onClick={(e) => download(e)}>save_alt</Icon>
+               ) : (
+                  <a style={{color: "inherit"}} href={url} download="test.pdf"><Icon className={"blobIcon"} fontSize="small">save_alt</Icon></a>
+               )
+            }
          </Tooltip>
          {
             usage == "query" && filename
@@ -717,5 +728,4 @@ function BlobComponent({field, url, filename, usage}: BlobComponentProps): JSX.E
 }
 
 
-
 export default ValueUtils;