diff --git a/frontend/src/components/ParsedAction.jsx b/frontend/src/components/ParsedAction.jsx
index d4cf0541..0e61c322 100755
--- a/frontend/src/components/ParsedAction.jsx
+++ b/frontend/src/components/ParsedAction.jsx
@@ -132,6 +132,7 @@ const ParsedAction = (props) => {
     setSelectedResult,
     selectedAction,
     setSelectedApp,
+	selectedTrigger,
     setSelectedTrigger,
     setSelectedEdge,
     setCurrentView,
@@ -640,7 +641,7 @@ const ParsedAction = (props) => {
 		setSelectedActionParameters(newParameters);
         setActionlist(newActionList);
     }, [workflow.execution_variables,paramUpdate, workflow.workflow_variables, workflowExecutions, workflow, selectedAction, listCache, getParents,setNewSelectedAction]);
-	console.log("Selected Action:", selectedAction)
+
 	useEffect(() => {
 		selectedNameChange(appActionName)
 
@@ -1895,6 +1896,78 @@ const ParsedAction = (props) => {
 										}
 									}
 
+									if(workflow.triggers !== undefined && workflow.triggers !== null && workflow.triggers.length > 0) {
+										for(let [key,keyval] in Object.entries(workflow.triggers)) {
+											if(workflow.triggers[key].id === selectedTrigger.id) {
+												continue
+											}
+	
+											const params = workflow.triggers[key].parameters
+											if (params === null || params === undefined) {
+												continue
+											}
+	
+											for (let [subkey, subkeyval] in Object.entries(params)) {
+												const param = workflow.triggers[key].parameters[subkey];
+												if(param.name === "argument" || param.name === "alertinfo"){
+													if (!param.value.includes("$")) {
+														continue
+													}
+		
+													// Should have a smarter way of discovering node names
+													// Do regex? 
+													// Finding index(es) and replacing at the location
+													//
+		
+													try {
+														var cnt = -1
+														var previous = 0
+														while (true) {
+															cnt += 1 
+															// Need to make sure e.g. changing the first here doesn't change the 2nd
+															// $change_me
+															// $change_me_2
+															const foundindex = param.value.toLowerCase().indexOf(parsedBaseLabel, previous)
+															if (foundindex === previous && foundindex !== 0) {
+																break
+															}
+			
+															if (foundindex >= 0) {
+																previous = foundindex+newname.length
+																// Need to add diff of length to word
+			
+																// Check location:
+																// If it's a-zA-Z_ then don't replace
+																if (param.value.length > foundindex+parsedBaseLabel.length) {
+																	const regex = /[a-zA-Z0-9_]/g;
+																	const match = param.value[foundindex+parsedBaseLabel.length].match(regex);
+																	if (match !== null) {
+																		continue
+																	}
+																}
+																
+																console.log("Old found: ", workflow.triggers[key].parameters[subkey].value)
+																const extralength = newname.length-parsedBaseLabel.length
+																param.value = param.value.substring(0, foundindex) + newname + param.value.substring(foundindex-extralength+newname.length, param.value.length)
+		
+																console.log("New: ", workflow.triggers[key].parameters[subkey].value)
+															} else { 
+																break
+															}
+			
+															// Break no matter what after 5 replaces. May need to increase
+															if (cnt >= 5) {
+																break
+															}
+			
+														}
+													} catch (e) {
+														console.log("Failed value replacement based on index: ", e)
+													}
+												}
+											}
+										}
+									}
 									setWorkflow(workflow);
                   					setUpdate(Math.random());
 									setPrevActionName(name)
@@ -3379,7 +3452,13 @@ const ParsedAction = (props) => {
 									if (parsedvalue === undefined || parsedvalue === null) {
 										parsedvalue = ""
 									}
-
+									console.log("Data sending to codeeditor(Action): ", {
+										"name": data.name,
+										"value": parsedvalue,
+										"field_number": count,
+										"actionlist": actionlist,
+										"field_id": clickedFieldId,
+									} )
 									setEditorData({
 										"name": data.name,
 										"value": parsedvalue,
diff --git a/frontend/src/components/ShuffleCodeEditor1.jsx b/frontend/src/components/ShuffleCodeEditor1.jsx
index 05830da8..667fafe3 100644
--- a/frontend/src/components/ShuffleCodeEditor1.jsx
+++ b/frontend/src/components/ShuffleCodeEditor1.jsx
@@ -109,6 +109,7 @@ const CodeEditor = (props) => {
 		setActiveDialog,
 		fieldname,
 		contentLoading,
+		selectedTrigger,
 	} = props
 
 	const [localcodedata, setlocalcodedata] = React.useState(codedata === undefined || codedata === null || codedata.length === 0 ? "" : codedata);
@@ -436,7 +437,8 @@ const CodeEditor = (props) => {
 	}
 
 	const autoFormat = (input) => {
-		// Check if it's default too
+		if(selectedAction && selectedAction.parameters && selectedAction.parameters.length > 0){
+				// Check if it's default too
 		if (validation !== true) {
 
 			// Should try to automatically fix this input
@@ -475,6 +477,48 @@ const CodeEditor = (props) => {
 		if (input !== localcodedata) {
 			setlocalcodedata(input)
 		}
+		}
+
+		if(selectedTrigger && selectedTrigger.parameters && selectedTrigger.parameters.length > 0){
+			if (validation !== true) {
+
+				// Should try to automatically fix this input
+				console.log("Running AI input fixer")
+				if (aiSubmit !== undefined && parameterName !== undefined && selectedTrigger !== undefined) {
+	
+					// Should remove params from selectedAction that aren't parameterName  
+					var tmpAction = JSON.parse(JSON.stringify(selectedTrigger))
+					var tmpParams = selectedTrigger.parameters.filter((param) => param.name === parameterName)
+	
+					var aiMsg = `Make it valid for trigger ${tmpAction.label} with parameter ${parameterName}: `
+					if (tmpParams.length > 0) {
+						aiMsg += tmpParams[0].value
+					}
+	
+	
+					if (localcodedata.startsWith("//")) {
+						aiMsg = localcodedata
+					}
+	
+					tmpAction.parameters = tmpParams
+					console.log("Parameters: ", tmpParams.length)
+	
+					aiSubmit(aiMsg, tmpAction)
+				}
+	
+				return
+			}
+	
+			try {
+				input = JSON.stringify(JSON.parse(input), null, 4)
+			} catch (e) {
+				console.log("Failed magic JSON stringification: ", e)
+			}
+	
+			if (input !== localcodedata) {
+				setlocalcodedata(input)
+			}
+		}
 	}
 
 	const findIndex = (line, loc) => {
@@ -1802,4 +1846,4 @@ const CodeEditor = (props) => {
 		</Dialog>)
 }
 
-export default CodeEditor;
+export default CodeEditor;
\ No newline at end of file
diff --git a/frontend/src/views/AngularWorkflow.jsx b/frontend/src/views/AngularWorkflow.jsx
index c6a1cb20..63540a32 100755
--- a/frontend/src/views/AngularWorkflow.jsx
+++ b/frontend/src/views/AngularWorkflow.jsx
@@ -1,5 +1,5 @@
 /* eslint-disable react/no-multi-comp */
-import React, { useState, useEffect, useLayoutEffect, memo, useMemo, useRef } from "react";
+import React, { useState, useEffect, useLayoutEffect } from "react";
 import ReactDOM from "react-dom"
 
 import theme from "../theme.jsx";
@@ -69,6 +69,7 @@ import {
   AvatarGroup,
   Autocomplete,
   Radio,
+  ButtonGroup,
 } from "@mui/material";
 
 import {
@@ -522,7 +523,9 @@ const AngularWorkflow = (defaultprops) => {
 
   const [lastSaved, setLastSaved] = React.useState(true);
   const [selectionOpen, setSelectionOpen] = React.useState(false);
-
+  const [menuPosition, setMenuPosition] = useState(null);
+  const [showDropdown, setShowDropdown] = React.useState(false);
+  const [subflowActionList, setSubflowActionlist] = React.useState([]);
   // eslint-disable-next-line no-unused-vars
   const [_, setUpdate] = useState(""); // Used to force rendring, don't remove
 
@@ -540,7 +543,7 @@ const AngularWorkflow = (defaultprops) => {
 
   const [distributedFromParent, setDistributedFromParent] = React.useState("")
   const [suborgWorkflows, setSuborgWorkflows] = React.useState([])
-
+  const [subflowExec, setSubflowExec] = React.useState("")
   const [suggestionBox, setSuggestionBox] = React.useState({
   	"position": {
   		"top": 500,
@@ -549,7 +552,6 @@ const AngularWorkflow = (defaultprops) => {
   	"open": false,
   	"attachedTo": "",
   })
-
   useEffect(() => {
 	  if (!firstrequest && isLoaded && isLoggedIn && editWorkflowModalOpen === false) {
         saveWorkflow(workflow)
@@ -790,6 +792,142 @@ const releaseToConnectLabel = "Release to Connect"
 
   }, [selectedApp])
 
+  useEffect(() => {
+
+    const newActionList = [];
+    
+      // Process workflowExecutions
+      if (workflowExecutions.length > 0) {
+        for (let execution of workflowExecutions) {
+            const execArg = execution.execution_argument;
+            if (execArg && execArg.length > 0) {
+                const valid = validateJson(execArg);
+                if (valid.valid) {
+                    newActionList.push({
+                        type: "Execution Argument",
+                        name: "Execution Argument",
+                        value: "$exec",
+                        highlight: "exec",
+                        autocomplete: "exec",
+                        example: valid.result,
+                    });
+                    break;
+                }
+            }
+        }
+      }
+
+      if (newActionList.length === 0) {
+        // FIXME: Have previous execution values in here
+        newActionList.push({
+          type: "Execution Argument",
+          name: "Execution Argument",
+          value: "$exec",
+          highlight: "exec",
+          autocomplete: "exec",
+          example: "hello",
+        })
+        newActionList.push({
+          type: "Shuffle Database",
+          name: "Shuffle Database",
+          value: "$shuffle_cache",
+          highlight: "shuffle_db",
+          autocomplete: "shuffle_cache",
+          example: "hello",
+        })
+      }
+
+      if (
+        workflow.workflow_variables !== null &&
+        workflow.workflow_variables !== undefined &&
+        workflow.workflow_variables.length > 0
+      ) {
+        for (let varkey in workflow.workflow_variables) {
+          const item = workflow.workflow_variables[varkey];
+          newActionList.push({
+            type: "workflow_variable",
+            name: item.name,
+            value: item.value,
+            id: item.id,
+            autocomplete: `${item.name.split(" ").join("_")}`,
+            example: item.value,
+          });
+        }
+      }
+
+      // FIXME: Add values from previous executions if they exist
+      if (
+        workflow.execution_variables !== null &&
+        workflow.execution_variables !== undefined &&
+        workflow.execution_variables.length > 0
+      ) {
+        for (let varkey in workflow.execution_variables) {
+          const item = workflow.execution_variables[varkey];
+          newActionList.push({
+            type: "execution_variable",
+            name: item.name,
+            value: item.value,
+            id: item.id,
+            autocomplete: `${item.name.split(" ").join("_")}`,
+            example: "",
+          });
+        }
+      }
+
+      if(getParents){
+        var parents = getParents(selectedTrigger);
+        if (parents.length > 1) {
+          for (let parentkey in parents) {
+            const item = parents[parentkey];
+            if (item.label === "Execution Argument") {
+              continue;
+            }
+  
+            var exampledata = item.example === undefined ? "" : item.example;
+            // Find previous execution and their variables
+            if (workflowExecutions.length > 0) {
+              // Look for the ID
+              for (let execkey in workflowExecutions) {
+                if (
+                  workflowExecutions[execkey].results === undefined ||
+                  workflowExecutions[execkey].results === null
+                ) {
+                  continue;
+                }
+  
+                var foundResult = workflowExecutions[execkey].results.find(
+                  (result) => result.action.id === item.id
+                );
+                if (foundResult === undefined) {
+                  continue;
+                }
+  
+                const validated = validateJson(foundResult.result)
+                if (validated.valid) {
+                  exampledata = validateJson.result
+                  break
+                }
+              }
+            }
+  
+            // 1. Take
+            const actionvalue = {
+              type: "action",
+              id: item.id,
+              name: item.label,
+              autocomplete: `${item.label.split(" ").join("_")}`,
+              example: exampledata,
+            }
+            newActionList.push(actionvalue);
+          }
+        }
+      }
+
+      setSubflowActionlist(newActionList);
+
+  },[selectedTrigger, workflowExecutions, workflow.workflow_variables, workflow.execution_variables, workflow.branches,workflow]);
+  
+
   const [executionArgumentModalOpen, setExecutionArgumentModalOpen] = React.useState(false);
 
   // This should all be set once, not on every iteration
@@ -4577,7 +4715,6 @@ const releaseToConnectLabel = "Release to Connect"
 	}
 
 
-
   // Nodeselectbatching:
   // https://stackoverflow.com/questions/16677856/cy-onselect-callback-only-once
   // onNodeClick
@@ -4589,7 +4726,7 @@ const releaseToConnectLabel = "Release to Connect"
     const data = event.target.data()
 
     if (data.app_name === "Shuffle Workflow") {
-      if ((data.parameters !== undefined) && (data.parameters.length > 0)) {
+      if ((data.parameters !== undefined) && (data?.parameters?.length > 0)) {
         getWorkflowApps(data.parameters[0].value)
       }
     }
@@ -10301,7 +10438,7 @@ const releaseToConnectLabel = "Release to Connect"
     var maxiter = 10;
     while (true) {
       for (let parentkey in allkeys) {
-        var currentnode = cy.getElementById(allkeys[parentkey]);
+        var currentnode = cy?.getElementById(allkeys[parentkey]);
         if (currentnode === undefined || currentnode === null) {
           continue;
         }
@@ -12740,124 +12877,98 @@ const releaseToConnectLabel = "Release to Connect"
     );
   };
 
-  const SubflowSidebar = () => {
-    const [menuPosition, setMenuPosition] = useState(null);
-    const [showDropdown, setShowDropdown] = React.useState(false);
-    const [actionlist, setActionlist] = React.useState([]);
 
-    if (actionlist.length === 0) {
-      // FIXME: Have previous execution values in here
-      actionlist.push({
-        type: "Execution Argument",
-        name: "Execution Argument",
-        value: "$exec",
-        highlight: "exec",
-        autocomplete: "exec",
-        example: "hello",
-      })
-      actionlist.push({
-        type: "Shuffle Database",
-        name: "Shuffle Database",
-        value: "$shuffle_cache",
-        highlight: "shuffle_db",
-        autocomplete: "shuffle_cache",
-        example: "hello",
-      })
-      if (
-        workflow.workflow_variables !== null &&
-        workflow.workflow_variables !== undefined &&
-        workflow.workflow_variables.length > 0
-      ) {
-        for (let varkey in workflow.workflow_variables) {
-          const item = workflow.workflow_variables[varkey];
-          actionlist.push({
-            type: "workflow_variable",
-            name: item.name,
-            value: item.value,
-            id: item.id,
-            autocomplete: `${item.name.split(" ").join("_")}`,
-            example: item.value,
-          });
-        }
+    var handleSubflowStartnodeSelection = (e) => {
+      setSubworkflowStartnode(e.target.value);
+
+      if (e.target.value === null || e.target.value === undefined) {
+        return
       }
 
-      // FIXME: Add values from previous executions if they exist
-      if (
-        workflow.execution_variables !== null &&
-        workflow.execution_variables !== undefined &&
-        workflow.execution_variables.length > 0
-      ) {
-        for (let varkey in workflow.execution_variables) {
-          const item = workflow.execution_variables[varkey];
-          actionlist.push({
-            type: "execution_variable",
-            name: item.name,
-            value: item.value,
-            id: item.id,
-            autocomplete: `${item.name.split(" ").join("_")}`,
-            example: "",
-          });
-        }
-      }
+      const branchId = uuidv4();
+      const newbranch = {
+        source_id: workflow.triggers[selectedTriggerIndex].id,
+        destination_id: e.target.value.id,
+        source: workflow.triggers[selectedTriggerIndex].id,
+        target: e.target.value.id,
+        has_errors: false,
+        id: branchId,
+        _id: branchId,
+        label: "Subflow",
+        decorator: true,
+      };
 
-      var parents = getParents(selectedTrigger);
-      if (parents.length > 1) {
-        for (let parentkey in parents) {
-          const item = parents[parentkey];
-          if (item.label === "Execution Argument") {
-            continue;
-          }
-
-          var exampledata = item.example === undefined ? "" : item.example;
-          // Find previous execution and their variables
-          if (workflowExecutions.length > 0) {
-            // Look for the ID
-            for (let execkey in workflowExecutions) {
-              if (
-                workflowExecutions[execkey].results === undefined ||
-                workflowExecutions[execkey].results === null
-              ) {
-                continue;
-              }
-
-              var foundResult = workflowExecutions[execkey].results.find(
-                (result) => result.action.id === item.id
-              );
-              if (foundResult === undefined) {
-                continue;
-              }
-
-              const validated = validateJson(foundResult.result)
-              if (validated.valid) {
-                exampledata = validateJson.result
-                break
-              }
+      if (workflow.visual_branches !== undefined) {
+        if (workflow.visual_branches === null) {
+          workflow.visual_branches = [newbranch];
+        } else if (workflow.visual_branches.length === 0) {
+          workflow.visual_branches.push(newbranch);
+        } else {
+          const foundIndex = workflow.visual_branches.findIndex(
+            (branch) => branch.source_id === newbranch.source_id
+          );
+          if (foundIndex !== -1) {
+            const currentEdge = cy.getElementById(
+              workflow.visual_branches[foundIndex].id
+            );
+            if (
+              currentEdge !== undefined &&
+              currentEdge !== null
+            ) {
+              currentEdge.remove();
             }
           }
 
-          // 1. Take
-          const actionvalue = {
-            type: "action",
-            id: item.id,
-            name: item.label,
-            autocomplete: `${item.label.split(" ").join("_")}`,
-            example: exampledata,
-          }
-          actionlist.push(actionvalue);
+          workflow.visual_branches.splice(foundIndex, 1);
+          workflow.visual_branches.push(newbranch);
         }
       }
 
-      setActionlist(actionlist);
-    }
+      if (workflow.id === subworkflow.id) {
+        const cybranch = {
+          group: "edges",
+          source: newbranch.source_id,
+          target: newbranch.destination_id,
+          id: branchId,
+          data: newbranch,
+        };
+
+        cy.add(cybranch);
+      }
+
+      console.log("Value to be set: ", e.target.value);
+      try {
+        workflow.triggers[
+          selectedTriggerIndex
+        ].parameters[3].value = e.target.value.id;
+      } catch {
+        workflow.triggers[selectedTriggerIndex].parameters[3] =
+        {
+          name: "startnode",
+          value: e.target.value.id,
+        };
+      }
+
+      setWorkflow(workflow);
+    };
+
+    
+    var subflowtypes = [
+      {
+      name: "Any",
+        },
+      {
+      name: "Enrich",
+        }
+    ]
 
 
-      const handleMenuClose = () => {
-        setUpdate(Math.random());
-        setMenuPosition(null);
-      };
+    const handleMenuClose = () => {
+      setUpdate(Math.random());
+      setMenuPosition(null);
+    };
 
-      const handleItemClick = (values) => {
-        console.log("VALUES: ", values)
+    const handleItemClick = (values) => {
         if (values === undefined || values === null || values.length === 0) {
           return;
         }
@@ -12879,988 +12990,38 @@ const releaseToConnectLabel = "Release to Connect"
         }
         */
 
-        console.log("SELECTED TRIGGER: ", selectedTrigger)
         if (selectedTrigger.name === "Shuffle Workflow") {
           const toComplete = selectedTrigger.parameters[1].value + "$" + values[0].autocomplete
-          selectedTrigger.parameters[1].value = toComplete
-          setSelectedTrigger(selectedTrigger)
+          // selectedTrigger.parameters[1].value = toComplete
+          workflow.triggers[selectedTriggerIndex].parameters[1].value = toComplete
+          const foundfield = document.getElementById("subflow_field")
+							if (foundfield !== undefined && foundfield !== null) {
+								foundfield.value = toComplete
+							}
+          // setSelectedTrigger(selectedTrigger)
+          // setSubflowExec(toComplete)
+          setWorkflow(workflow)
+        }
+
+        if(selectedTrigger.name === "User Input"){
+          const toComplete = selectedTrigger.parameters[0].value + "$" + values[0].autocomplete
+          // selectedTrigger.parameters[1].value = toComplete
+          workflow.triggers[selectedTriggerIndex].parameters[0].value = toComplete
+          const foundfield = document.getElementById("userinput_info")
+							if (foundfield !== undefined && foundfield !== null) {
+								foundfield.value = toComplete
+							}
+          // setSelectedTrigger(selectedTrigger)
+          // setSubflowExec(toComplete)
+          setWorkflow(workflow)
         }
 
         setUpdate(Math.random());
         setShowDropdown(false);
         setMenuPosition(null);
-      };
+    };
 
-      const iconStyle = {
-        marginRight: 15,
-      };
-
-  
-    if (Object.getOwnPropertyNames(selectedTrigger).length > 0) {
-      if (workflow.triggers[selectedTriggerIndex] === undefined) {
-        return null;
-      }
-
-      if (
-        workflow.triggers[selectedTriggerIndex].parameters === undefined ||
-        workflow.triggers[selectedTriggerIndex].parameters === null ||
-        workflow.triggers[selectedTriggerIndex].parameters.length === 0
-      ) {
-        workflow.triggers[selectedTriggerIndex].parameters = [];
-        workflow.triggers[selectedTriggerIndex].parameters[0] = {
-          name: "workflow",
-          value: "",
-        };
-        workflow.triggers[selectedTriggerIndex].parameters[1] = {
-          name: "argument",
-          value: "",
-        };
-        workflow.triggers[selectedTriggerIndex].parameters[2] = {
-          name: "user_apikey",
-          value: "",
-        };
-        workflow.triggers[selectedTriggerIndex].parameters[3] = {
-          name: "startnode",
-          value: "",
-        };
-        workflow.triggers[selectedTriggerIndex].parameters[4] = {
-          name: "check_result",
-          value: "false",
-        };
-        workflow.triggers[selectedTriggerIndex].parameters[5] = {
-          name: "auth_override",
-          value: "",
-        };
-
-        /*
-        // API-key has been replaced by auth key for the execution. 
-        // Parents can now automatically execute children without auth from a user, as long as the subflow in question is owned by the same org and the subflow is actually referencing it during checkin.
-        console.log("SETTINGS: ", userSettings);
-        if (
-          userSettings !== undefined &&
-          userSettings !== null &&
-          userSettings.apikey !== null &&
-          userSettings.apikey !== undefined &&
-          userSettings.apikey.length > 0
-        ) {
-          workflow.triggers[selectedTriggerIndex].parameters[2] = {
-            name: "user_apikey",
-            value: userSettings.apikey,
-          };
-        }
-        */
-      }
-
-      const handleSubflowStartnodeSelection = (e) => {
-        setSubworkflowStartnode(e.target.value);
-
-        if (e.target.value === null || e.target.value === undefined) {
-          return
-        }
-
-        const branchId = uuidv4();
-        const newbranch = {
-          source_id: workflow.triggers[selectedTriggerIndex].id,
-          destination_id: e.target.value.id,
-          source: workflow.triggers[selectedTriggerIndex].id,
-          target: e.target.value.id,
-          has_errors: false,
-          id: branchId,
-          _id: branchId,
-          label: "Subflow",
-          decorator: true,
-        };
-
-        if (workflow.visual_branches !== undefined) {
-          if (workflow.visual_branches === null) {
-            workflow.visual_branches = [newbranch];
-          } else if (workflow.visual_branches.length === 0) {
-            workflow.visual_branches.push(newbranch);
-          } else {
-            const foundIndex = workflow.visual_branches.findIndex(
-              (branch) => branch.source_id === newbranch.source_id
-            );
-            if (foundIndex !== -1) {
-              const currentEdge = cy.getElementById(
-                workflow.visual_branches[foundIndex].id
-              );
-              if (
-                currentEdge !== undefined &&
-                currentEdge !== null
-              ) {
-                currentEdge.remove();
-              }
-            }
-
-            workflow.visual_branches.splice(foundIndex, 1);
-            workflow.visual_branches.push(newbranch);
-          }
-        }
-
-        if (workflow.id === subworkflow.id) {
-          const cybranch = {
-            group: "edges",
-            source: newbranch.source_id,
-            target: newbranch.destination_id,
-            id: branchId,
-            data: newbranch,
-          };
-
-          cy.add(cybranch);
-        }
-
-        console.log("Value to be set: ", e.target.value);
-        try {
-          workflow.triggers[
-            selectedTriggerIndex
-          ].parameters[3].value = e.target.value.id;
-        } catch {
-          workflow.triggers[selectedTriggerIndex].parameters[3] =
-          {
-            name: "startnode",
-            value: e.target.value.id,
-          };
-        }
-
-        setWorkflow(workflow);
-      }
-
-      
-	  const subflowtypes = [
-		  {
-			name: "Any",
-	  	  },
-		  {
-			name: "Enrich",
-	  	  }
-	  ]
-
-      return (
-        <div style={appApiViewStyle}>
-		  <span style={{display: "flex", }}>
-		    <h3 style={{ marginBottom: "5px", flex: 3, }}>
-		      {selectedTrigger.app_name}
-		    </h3>
-		  	<Tooltip title="Choose the type of subflow to run. This is NOT required, but is used to help Shuffle's workflow generators better understand the workflow." placement="top">
-				<Select
-				  MenuProps={{
-					disableScrollLock: true,
-				  }}
-				  value={selectedTrigger.tags !== undefined && selectedTrigger.tags !== null && selectedTrigger.tags.length > 0 ? selectedTrigger.tags[0] : "Any"}
-				  onChange={(event) => {
-					  if (selectedTrigger.tags === undefined || selectedTrigger.tags === null) {
-						  selectedTrigger.tags = [event.target.value]
-					  } else {
-						  if (selectedTrigger.tags.includes(event.target.value)) {
-							  return
-						  } 
-
-						  if (selectedTrigger.tags.length > 0) {
-							  selectedTrigger.tags = []
-						  }
-
-						  selectedTrigger.tags.push(event.target.value)
-					  }
-
-					  setSelectedTrigger(selectedTrigger)
-					  setUpdate(Math.random())
-				  }}
-				  style={{
-					marginTop: 10,
-					flex: 1, 
-					backgroundColor: theme.palette.inputColor,
-					color: "white",
-					height: 35,
-					marginleft: 10,
-					borderRadius: theme.palette.borderRadius,
-				    color: "rgba(255,255,255,0.4)",
-				  }}
-				  SelectDisplayProps={{
-					style: {
-					},
-				  }}
-				>
-				  {subflowtypes.map((data, index) => {
-					return (
-					  <MenuItem
-						key={index}
-						style={{
-						  backgroundColor: theme.palette.inputColor,
-						  color: "white",
-						}}
-						value={data.name}
-					  >
-						{data.name}
-					  </MenuItem>
-					);
-				  })}
-				</Select>
-		    </Tooltip>
-		  </span>
-	  	  <a
-			rel="noopener noreferrer"
-			target="_blank"
-			href="https://shuffler.io/docs/triggers#subflow"
-			style={{ textDecoration: "none", color: "#f85a3e" }}
-		  >
-			What are subflows?
-		  </a>
-          <Divider
-            style={{
-              marginBottom: "10px",
-              marginTop: "10px",
-              height: "1px",
-              width: "100%",
-              backgroundColor: "rgb(91, 96, 100)",
-            }}
-          />
-          <div style={{ display: "flex" }}>
-            <div style={{ flex: 5 }}>
-              <Typography>Name</Typography>
-              <TextField
-                style={{
-                  backgroundColor: theme.palette.inputColor,
-                  borderRadius: theme.palette.borderRadius,
-                }}
-                InputProps={{
-                  style: {
-                  },
-                }}
-                fullWidth
-                color="primary"
-                placeholder={selectedTrigger.label}
-                onChange={selectedTriggerChange}
-              />
-            </div>
-            <div>
-              <div style={{ flex: 1, marginLeft: 5, }}>
-                <Tooltip
-                  color="primary"
-                  title={"Delay before action runs (in seconds)"}
-                  placement="top"
-                >
-                  <span>
-                    <Typography>Delay</Typography>
-                    <TextField
-                      style={{
-                        backgroundColor: theme.palette.inputColor,
-						maxWidth: 50,
-                      }}
-                      InputProps={{
-                        style: theme.palette.innerTextfieldStyle,
-                      }}
-                      placeholder={selectedTrigger.execution_delay}
-                      defaultValue={selectedAction.execution_delay}
-                      onChange={(event) => {
-                        if (isNaN(event.target.value)) {
-                          console.log("NAN: ", event.target.value)
-                          return
-                        }
-
-                        const parsedNumber = parseInt(event.target.value)
-                        if (parsedNumber > 86400) {
-                          console.log("Max number is 1 day (86400)")
-                          return
-                        }
-
-                        selectedTrigger.execution_delay = parseInt(event.target.value)
-                        setSelectedTrigger(selectedTrigger)
-                      }}
-                    />
-                  </span>
-                </Tooltip>
-              </div>
-            </div>
-          </div>
-          <FormControlLabel
-            control={
-              <Checkbox
-                checked={
-                  workflow.triggers[selectedTriggerIndex].parameters[4] !==
-                  undefined &&
-                  workflow.triggers[selectedTriggerIndex].parameters[4]
-                    .value === "true"
-                }
-                onChange={() => {
-                  const newvalue = workflow.triggers[selectedTriggerIndex].parameters[4] === undefined || workflow.triggers[selectedTriggerIndex].parameters[4].value === "false"? "true" : "false";
-                  workflow.triggers[selectedTriggerIndex].parameters[4] = {
-                    name: "check_result",
-                    value: newvalue,
-                  };
-
-                  setWorkflow(workflow);
-                  setUpdate(Math.random());
-                }}
-                color="primary"
-                value="Wait for results"
-              />
-            }
-            style={{ marginTop: 10 }}
-            label={<div style={{ color: "white" }}>Wait for results</div>}
-          />
-          <div style={{ flex: "6", marginTop: 10, }}>
-            <div>
-              <div style={{ display: "flex" }}>
-                <div
-                  style={{
-                    marginTop: "20px",
-                    marginBottom: "7px",
-                    display: "flex",
-                    flex: 5,
-                  }}
-                >
-                  <div style={{ flex: "10" }}>
-                    <b>Select a workflow to execute </b>
-                  </div>
-                </div>
-                {workflow.triggers[selectedTriggerIndex].parameters[0].value
-                  .length === 0 ? null : workflow.triggers[selectedTriggerIndex]
-                    .parameters[0].value === props.match.params.key ? null : (
-                  <div style={{ marginLeft: 5, flex: 1 }}>
-                    <a
-                      rel="noopener noreferrer"
-                      href={`/workflows/${workflow.triggers[selectedTriggerIndex].parameters[0].value}`}
-                      target="_blank"
-                      style={{
-                        textDecoration: "none",
-                        color: "#f85a3e",
-                        marginLeft: 5,
-                        marginTop: 10,
-                      }}
-                    >
-                      <OpenInNewIcon />
-                    </a>
-                  </div>
-                )}
-              </div>
-
-              {workflows === undefined ||
-                workflows === null ||
-                workflows.length === 0 ? null : (
-
-                <Autocomplete
-                  id="subflow_search"
-                  autoHighlight
-				  freeSolo
-                  value={subworkflow}
-                  classes={{ inputRoot: classes.inputRoot }}
-                  ListboxProps={{
-                    style: {
-                      backgroundColor: theme.palette.inputColor,
-                      color: "white",
-                    },
-                  }}
-                  getOptionSelected={(option, value) => option.id === value.id}
-                  getOptionLabel={(option) => {
-                    if (
-                      option === undefined ||
-                      option === null ||
-                      option.name === undefined ||
-                      option.name === null
-                    ) {
-                      return "No Workflow Selected";
-                    }
-
-                    const newname = (
-                      option.name.charAt(0).toUpperCase() + option.name.substring(1)
-                    ).replaceAll("_", " ");
-                    return newname;
-                  }}
-                  options={workflows}
-                  fullWidth
-                  style={{
-                    backgroundColor: theme.palette.inputColor,
-                    height: 50,
-                    borderRadius: theme.palette.borderRadius,
-                  }}
-                  onChange={(event, newValue) => {
-                    setLastSaved(false)
-                    console.log("Found value: ", newValue)
-
-					var parsedinput = { target: { value: newValue } }
-
-					// For variables
-					if (typeof newValue === 'string' && newValue.startsWith("$")) {
-						parsedinput = { 
-							target: { 
-								value: {
-									"name": newValue, 
-									"id": newValue,
-									"actions": [],
-									"triggers": [],
-								} 
-							} 
-						}
-					}
-
-                    handleWorkflowSelectionUpdate(parsedinput)
-                  }}
-            	  renderOption={(props, data, state) => {
-                    if (data.id === workflow.id) {
-                      data = workflow;
-                    }
-
-                    //key={index}
-                    return (
-                      <Tooltip arrow placement="left" title={
-                        <span style={{}}>
-                          {data.image !== undefined && data.image !== null && data.image.length > 0 ?
-                            <img src={data.image} alt={data.name} style={{ backgroundColor: theme.palette.surfaceColor, maxHeight: 200, minHeigth: 200, borderRadius: theme.palette.borderRadius, }} />
-                            : null}
-                          <Typography>
-                            Choose Subflow '{data.name}'
-                          </Typography>
-                        </span>
-                      }>
-                        <MenuItem
-                          style={{
-                            backgroundColor: theme.palette.inputColor,
-                            color: data.id === workflow.id ? "red" : "white",
-                          }}
-                          value={data}
-						  onClick={() => {	
-              getWorkflowApps(data.id);
-							handleWorkflowSelectionUpdate({
-								target: {
-									value: data
-								}
-							})
-						  }}
-                        >
-						  <PolylineIcon style={{ marginRight: 8 }} />
-                          {data.name}
-                        </MenuItem>
-                      </Tooltip>
-                    )
-                  }}
-                  renderInput={(params) => {
-                    return (
-                      <TextField
-                        style={{
-                          backgroundColor: theme.palette.inputColor,
-                          borderRadius: theme.palette.borderRadius,
-                        }}
-                        {...params}
-                        label="Find your workflow"
-                        variant="outlined"
-                      />
-                    );
-                  }}
-                />
-              )}
-
-              {subworkflow === undefined ||
-                subworkflow === null ||
-                subworkflow.id === undefined ||
-                subworkflow.actions === null ||
-                subworkflow.actions === undefined ||
-                subworkflow.actions.length === 0 ? null : (
-                <span>
-                  <div
-                    style={{
-                      marginTop: "20px",
-                      marginBottom: "7px",
-                      display: "flex",
-                    }}
-                  >
-                    <div style={{ flex: "10" }}>
-                      <b>Select the Startnode</b>
-                    </div>
-                  </div>
-                  <Autocomplete
-                    id="subflow_node_search"
-                    autoHighlight
-                    value={subworkflowStartnode}
-                    classes={{ inputRoot: classes.inputRoot }}
-                    ListboxProps={{
-                      style: {
-                        backgroundColor: theme.palette.inputColor,
-                        color: "white",
-                      },
-                    }}
-                    getOptionSelected={(option, value) => option.id === value.id}
-                    getOptionLabel={(option) => {
-                      if (option === undefined || option === null || option.label === undefined || option.label === null) {
-                        if (option.length === 36) {
-
-                        }
-
-                        return "TMP";
-                      }
-
-                      const newname = (
-                        option.label.charAt(0).toUpperCase() + option.label.substring(1)
-                      ).replaceAll("_", " ");
-                      return newname;
-                    }}
-                    options={subworkflow.actions}
-                    fullWidth
-                    style={{
-                      backgroundColor: theme.palette.inputColor,
-                      height: 50,
-                      borderRadius: theme.palette.borderRadius,
-                    }}
-                    onChange={(event, newValue) => {
-      				        setLastSaved(false)
-                      handleSubflowStartnodeSelection({ target: { value: newValue } })
-                    }}
-            		renderOption={(props, action, state) => {
-                      const isParent = getParents(selectedTrigger).find(
-                        (parent) => parent.id === action.id
-                      )
-
-                      return (
-                        <MenuItem
-                          onMouseOver={() => {
-                            if (subworkflow.id === workflow.id) {
-                              handleActionHover(true, action.id)
-                            }
-                          }}
-                          onMouseOut={() => {
-                            if (subworkflow.id === workflow.id) {
-                              handleActionHover(false, action.id)
-                            }
-                          }}
-                          disabled={isCloud && isParent}
-						  onClick={() => {
-                      		handleSubflowStartnodeSelection({ 
-								target: { 
-									value: action 
-								} 
-							})
-						  }}
-                          style={{
-                            backgroundColor: theme.palette.inputColor,
-                            color: isParent ? "red" : "white",
-                          }}
-                          value={action}
-                        >
-                          {action.label}
-                        </MenuItem>
-                      );
-                    }}
-                    renderInput={(params) => {
-                      return (
-                        <TextField
-                          style={{
-                            backgroundColor: theme.palette.inputColor,
-                            borderRadius: theme.palette.borderRadius,
-                          }}
-                          {...params}
-                          label="Select a start-node (optional)"
-                          variant="outlined"
-                        />
-                      );
-                    }}
-                  />
-                </span>
-              )}
-              <div
-                style={{
-                  marginTop: "20px",
-                  marginBottom: "7px",
-                  display: "flex",
-                }}
-              >
-                <div style={{ flex: "10" }}>
-                  <b>Execution Argument</b>
-                </div>
-              </div>
-              <TextField
-                style={{
-                  backgroundColor: theme.palette.inputColor,
-                  borderRadius: theme.palette.borderRadius,
-                }}
-                InputProps={{
-                  style: {
-                  },
-                  endAdornment: (
-                    <InputAdornment position="end">
-                      <Tooltip title="Autocomplete text" placement="top">
-                        <AddCircleOutlineIcon
-                          style={{ cursor: "pointer" }}
-                          onClick={(event) => {
-                            setMenuPosition({
-                              top: event.pageY + 10,
-                              left: event.pageX + 10,
-                            });
-                            //setShowDropdownNumber(3)
-                            setShowDropdown(true);
-                          }}
-                        />
-                      </Tooltip>
-                    </InputAdornment>
-                  ),
-                }}
-                rows="6"
-                multiline
-                fullWidth
-                color="primary"
-                placeholder="Some execution data"
-                defaultValue={
-                  workflow.triggers[selectedTriggerIndex].parameters[1].value
-                }
-                onBlur={(e) => {
-      			  setLastSaved(false)
-
-                  workflow.triggers[selectedTriggerIndex].parameters[1].value = e.target.value
-                  setWorkflow(workflow)
-                }}
-              />
-              {!showDropdown ? null :
-							  <Menu
-                anchorReference="anchorPosition"
-                anchorPosition={menuPosition}
-                onClose={() => {
-                  handleMenuClose();
-                }}
-                open={!!menuPosition}
-                style={{
-                  border: `2px solid #f85a3e`,
-                  color: "white",
-                  marginTop: 2,
-                }}
-              >
-                {actionlist.map((innerdata) => {
-                  const icon =
-                    innerdata.type === "action" ? (
-                      <AppsIcon style={{ marginRight: 10 }} />
-                    ) : innerdata.type === "workflow_variable" ||
-                      innerdata.type === "execution_variable" ? (
-                      <FavoriteBorderIcon style={{ marginRight: 10 }} />
-                    ) : (
-                      <ScheduleIcon style={{ marginRight: 10 }} />
-                    );
-      
-                  const handleExecArgumentHover = (inside) => {
-                    var exec_text_field = document.getElementById(
-                      "execution_argument_input_field"
-                    );
-                    if (exec_text_field !== null) {
-                      if (inside) {
-                        exec_text_field.style.border = "2px solid #f85a3e";
-                      } else {
-                        exec_text_field.style.border = "";
-                      }
-                    }
-      
-                    // Also doing arguments
-                    if (
-                      workflow.triggers !== undefined &&
-                      workflow.triggers !== null &&
-                      workflow.triggers.length > 0
-                    ) {
-                      for (let triggerkey in workflow.triggers) {
-                        const item = workflow.triggers[triggerkey];
-      
-                        if (cy !== undefined) {
-                          var node = cy.getElementById(item.id);
-                          if (node.length > 0) {
-                            if (inside) {
-                              node.addClass("shuffle-hover-highlight");
-                            } else {
-                              node.removeClass("shuffle-hover-highlight");
-                            }
-                          }
-                        }
-                      }
-                    }
-                  }
-      
-                  const handleActionHover = (inside, actionId) => {
-                    if (cy !== undefined) {
-                      var node = cy.getElementById(actionId);
-                      if (node.length > 0) {
-                        if (inside) {
-                          node.addClass("shuffle-hover-highlight");
-                        } else {
-                          node.removeClass("shuffle-hover-highlight");
-                        }
-                      }
-                    }
-                  };
-      
-                  const handleMouseover = () => {
-                    if (innerdata.type === "Execution Argument") {
-                      handleExecArgumentHover(true);
-                    } else if (innerdata.type === "action") {
-                      handleActionHover(true, innerdata.id);
-                    }
-                  };
-      
-                  const handleMouseOut = () => {
-                    if (innerdata.type === "Execution Argument") {
-                      handleExecArgumentHover(false);
-                    } else if (innerdata.type === "action") {
-                      handleActionHover(false, innerdata.id);
-                    }
-                  };
-      
-                  var parsedPaths = [];
-                  console.log("Found example data: ", innerdata.example)
-                  if (typeof innerdata.example === "object") {
-                    parsedPaths = GetParsedPaths(innerdata.example, "");
-                  }
-      
-                  const coverColor = "#82ccc3"
-      
-                  return parsedPaths.length > 0 ? (
-                    <span>
-                    {/*
-                    <NestedMenuItem
-                      key={innerdata.name}
-                      label={
-                        <div style={{ display: "flex" }}>
-                          {icon} {innerdata.name}
-                        </div>
-                      }
-                      parentMenuOpen={!!menuPosition}
-                      style={{
-                        backgroundColor: theme.palette.inputColor,
-                        color: "white",
-                        minWidth: 250,
-                      }}
-                      onClick={() => {
-                        handleItemClick([innerdata]);
-                      }}
-                    >
-                      {parsedPaths.map((pathdata, index) => {
-                        // FIXME: Should be recursive in here
-                        const icon =
-                          pathdata.type === "value" ? (
-                            <VpnKeyIcon style={iconStyle} />
-                          ) : pathdata.type === "list" ? (
-                            <FormatListNumberedIcon style={iconStyle} />
-                          ) : (
-                            <ExpandMoreIcon style={iconStyle} />
-                          )
-      
-                        return (
-                          <MenuItem
-                            key={pathdata.name}
-                            style={{
-                              backgroundColor: theme.palette.inputColor,
-                              color: "white",
-                              minWidth: 250,
-                            }}
-                            value={pathdata}
-                            onMouseOver={() => { }}
-                            onClick={() => {
-                              handleItemClick([innerdata, pathdata]);
-                            }}
-                          >
-                            <Tooltip
-                              color="primary"
-                              title={`Ex. value: ${pathdata.value}`}
-                              placement="left"
-                            >
-                              <div style={{ display: "flex" }}>
-                                {icon} {pathdata.name}
-                              </div>
-                            </Tooltip>
-                          </MenuItem>
-                        );
-                      })}
-                    </NestedMenuItem>
-                    */}
-      
-                    <NestedMenuItem
-                      key={innerdata.name}
-                      label={
-                        <div style={{ display: "flex", marginLeft: 0, }}>
-                          {icon} {innerdata.name}
-                        </div>
-                      }
-                      parentMenuOpen={!!menuPosition}
-                      style={{
-                        color: "white",
-                        minWidth: 250,
-                        maxWidth: 250,
-                        maxHeight: 50,
-                        overflow: "hidden",
-                      }}
-                      onClick={() => {
-                        console.log("CLICKED: ", innerdata);
-                        console.log(innerdata.example)
-                        handleItemClick([innerdata]);
-                      }}
-                    >
-                      <Paper style={{minHeight: 500, maxHeight: 500, minWidth: 275, maxWidth: 275, position: "fixed", top: menuPosition.top-200, left: menuPosition.left-455, padding: "10px 0px 10px 10px", backgroundColor: theme.palette.inputColor, overflow: "hidden", overflowY: "auto", border: "1px solid rgba(255,255,255,0.3)",}}>
-      
-                        <MenuItem
-                          key={innerdata.name}
-                          style={{
-                            backgroundColor: theme.palette.inputColor,
-                            marginLeft: 15,
-                            color: "white",
-                            minWidth: 250,
-                            maxWidth: 250,
-                            padding: 0, 
-                            position: "relative",
-                          }}
-                          value={innerdata}
-                          onMouseOver={() => {
-                            //console.log("HOVER: ", pathdata);
-                          }}
-                          onClick={() => {
-                            handleItemClick([innerdata]);
-                          }}
-                        >
-                          <Typography variant="h6" style={{paddingBottom: 5}}>
-                            {innerdata.name}
-                          </Typography>
-                        </MenuItem>
-      
-                        {parsedPaths.map((pathdata, index) => {
-                          // FIXME: Should be recursive in here
-                          //<VpnKeyIcon style={iconStyle} />
-                          const icon =
-                            pathdata.type === "value" ? (
-                              <span style={{marginLeft: 9, }} />
-                            ) : pathdata.type === "list" ? (
-                              <FormatListNumberedIcon style={{marginLeft: 9, marginRight: 10, }} />
-                            ) : (
-                              <CircleIcon style={{marginLeft: 9, marginRight: 10, color: coverColor}}/>
-                            );
-                          //<ExpandMoreIcon style={iconStyle} />
-      
-                          const indentation_count = (pathdata.name.match(/\./g) || []).length+1
-                          const baseIndent = <div style={{marginLeft: 20, height: 30, width: 1, backgroundColor: coverColor,}} />
-                          //const boxPadding = pathdata.type === "object" ? "10px 0px 0px 0px" : 0
-                          const boxPadding = 0 
-                          const namesplit = pathdata.name.split(".")
-                          const newname = namesplit[namesplit.length-1]
-                          return (
-                            <MenuItem
-                              key={pathdata.name}
-                              style={{
-                                backgroundColor: theme.palette.inputColor,
-                                color: "white",
-                                minWidth: 250,
-                                maxWidth: 250,
-                                padding: boxPadding, 
-                              }}
-                              value={pathdata}
-                              onMouseOver={() => {
-                                //console.log("HOVER: ", pathdata);
-                              }}
-                              onClick={() => {
-                                handleItemClick([innerdata, pathdata]);
-                              }}
-                            >
-                              <Tooltip
-                                color="primary"
-                                title={`Ex. value: ${pathdata.value}`}
-                                placement="left"
-                              >
-                                <div style={{ display: "flex", height: 30, }}>
-                                  {Array(indentation_count).fill().map((subdata, subindex) => {
-                                    return (
-                                      baseIndent
-                                    )
-                                  })}
-                                  {icon} {newname} 
-                                  {pathdata.type === "list" ? <SquareFootIcon style={{marginleft: 10, }} onClick={(e) => {
-      
-                                  }} /> : null}
-                                </div>
-                              </Tooltip>
-                            </MenuItem>
-                          );
-                        })}
-                      </Paper>
-                    </NestedMenuItem>
-                    </span>
-                  ) : (
-                    <MenuItem
-                      key={innerdata.name}
-                      style={{
-                        backgroundColor: theme.palette.inputColor,
-                        color: "white",
-                      }}
-                      value={innerdata}
-                      onMouseOver={() => handleMouseover()}
-                      onMouseOut={() => {
-                        handleMouseOut();
-                      }}
-                      onClick={() => {
-                        handleItemClick([innerdata]);
-                      }}
-                    >
-                      <Tooltip
-                        color="primary"
-                        title={`Value: ${innerdata.value}`}
-                        placement="left"
-                      >
-                        <div style={{ display: "flex" }}>
-                          {icon} {innerdata.name}
-                        </div>
-                      </Tooltip>
-                    </MenuItem>
-                  );
-                })}
-              </Menu>
-               }
-              {/*
-								<div
-									style={{
-										marginTop: "20px",
-										marginBottom: "7px",
-										display: "flex",
-									}}
-								>
-									<div style={{ flex: "10" }}>
-										<b>API-key </b>
-									</div>
-								</div>
-								<TextField
-									style={{
-										backgroundColor: theme.palette.inputColor,
-										borderRadius: theme.palette.borderRadius,
-									}}
-									InputProps={{
-										style: {
-										},
-									}}
-									fullWidth
-									color="primary"
-									placeholder="Your apikey"
-									defaultValue={
-										workflow.triggers[selectedTriggerIndex].parameters[2].value
-									}
-									onBlur={(e) => {
-										workflow.triggers[selectedTriggerIndex].parameters[2].value =
-											e.target.value;
-										setWorkflow(workflow);
-									}}
-								/>
-							*/}
-            </div>
-          </div>
-
-          <div>
-            <div>
-            <div className="app">
-              <div style={{ display: "flex", marginTop: 50 }}>
-                <div style={{ flex: "10" }}>
-                  <b>Authentication Override</b>
-                </div>
-              </div>
-
-              <div style={{ display: "flex", marginTop: 10 }}>
-                <div style={{ flex: "10", marginLeft: 10 }}>
-                  <AppAuthSelector appAuthData={appAuthentication} />
-                </div>
-              </div>
-            </div>
-            </div>
-          </div>
-        </div>
-      );
-    }
-
-    return null;
-  };
+ 
 
   const CommentSidebar = () => {
     if (Object.getOwnPropertyNames(selectedComment).length > 0) {
@@ -14047,20 +13208,32 @@ const releaseToConnectLabel = "Release to Connect"
 
   // Special SCHEDULE handler
   var trigger_header_auth = ""
-  if (Object.getOwnPropertyNames(selectedTrigger).length > 0 && workflow.triggers !== null && workflow.triggers !== undefined && workflow.triggers.length >= selectedTriggerIndex && workflow.triggers[selectedTriggerIndex] !== undefined ) {
-      if (selectedTrigger.trigger_type === "SCHEDULE" && workflow.triggers[selectedTriggerIndex].parameters === undefined || workflow.triggers[selectedTriggerIndex].parameters === null) {
-	    console.log("Autofixing schedule")
 
-        workflow.triggers[selectedTriggerIndex].parameters = [];
-        workflow.triggers[selectedTriggerIndex].parameters[0] = {
-          name: "cron",
-          value: isCloud ? "*/25 * * * *" : "60",
-        };
-        workflow.triggers[selectedTriggerIndex].parameters[1] = {
-          name: "execution_argument",
-          value: '{"example": {"json": "is cool"}}',
-        };
-        setWorkflow(workflow);
+  if (Object.getOwnPropertyNames(selectedTrigger).length > 0 && workflow.triggers !== null && workflow.triggers !== undefined && workflow.triggers.length >= selectedTriggerIndex && workflow.triggers[selectedTriggerIndex] !== undefined ) {
+    
+    if (selectedTrigger.trigger_type === "SCHEDULE") {
+        if (workflow.triggers[selectedTriggerIndex] === undefined) {
+          return null;
+        }
+
+        if (
+          workflow.triggers[selectedTriggerIndex].parameters === undefined ||
+          workflow.triggers[selectedTriggerIndex].parameters === null ||
+          workflow.triggers[selectedTriggerIndex].parameters.length === 0
+        ) {
+        console.log("Autofixing schedule")
+
+          workflow.triggers[selectedTriggerIndex].parameters = [];
+          workflow.triggers[selectedTriggerIndex].parameters[0] = {
+            name: "cron",
+            value: isCloud ? "*/25 * * * *" : "60",
+          };
+          workflow.triggers[selectedTriggerIndex].parameters[1] = {
+            name: "execution_argument",
+            value: '{"example": {"json": "is cool"}}',
+          };
+          setWorkflow(workflow);
+        }
       } else if (selectedTrigger.trigger_type === "WEBHOOK") {
 	  	if (workflow.triggers[selectedTriggerIndex] === undefined) {
       	  return null;
@@ -14120,6 +13293,7 @@ const releaseToConnectLabel = "Release to Connect"
         ) {
           workflow.triggers[selectedTriggerIndex].parameters = [];
           workflow.triggers[selectedTriggerIndex].parameters[0] = {
+            id:"userinput_info",
             name: "alertinfo",
             value: "Do you want to continue the workflow? Start parameters: $exec",
           };
@@ -14151,9 +13325,63 @@ const releaseToConnectLabel = "Release to Connect"
   
           setWorkflow(workflow);
         }
+      }else if(selectedTrigger.trigger_type === "SUBFLOW"){
+
+        if (
+          workflow.triggers[selectedTriggerIndex].parameters === undefined ||
+          workflow.triggers[selectedTriggerIndex].parameters === null ||
+          workflow.triggers[selectedTriggerIndex].parameters.length === 0
+        ) {
+          workflow.triggers[selectedTriggerIndex].parameters = [];
+          workflow.triggers[selectedTriggerIndex].parameters[0] = {
+            name: "workflow",
+            value: "",
+          };
+          workflow.triggers[selectedTriggerIndex].parameters[1] = {
+            name: "argument",
+            value: "",
+            id:"subflow_field"
+          };
+          workflow.triggers[selectedTriggerIndex].parameters[2] = {
+            name: "user_apikey",
+            value: "",
+          };
+          workflow.triggers[selectedTriggerIndex].parameters[3] = {
+            name: "startnode",
+            value: "",
+          };
+          workflow.triggers[selectedTriggerIndex].parameters[4] = {
+            name: "check_result",
+            value: "false",
+          };
+          workflow.triggers[selectedTriggerIndex].parameters[5] = {
+            name: "auth_override",
+            value: "",
+          };
+          setWorkflow(workflow)
+          /*
+          // API-key has been replaced by auth key for the execution. 
+          // Parents can now automatically execute children without auth from a user, as long as the subflow in question is owned by the same org and the subflow is actually referencing it during checkin.
+          console.log("SETTINGS: ", userSettings);
+          if (
+            userSettings !== undefined &&
+            userSettings !== null &&
+            userSettings.apikey !== null &&
+            userSettings.apikey !== undefined &&
+            userSettings.apikey.length > 0
+          ) {
+            workflow.triggers[selectedTriggerIndex].parameters[2] = {
+              name: "user_apikey",
+              value: userSettings.apikey,
+            };
+          }
+          */
+        }
       }
   }
 
+  console.log(selectedTrigger)
+
   const WebhookSidebar = Object.getOwnPropertyNames(selectedTrigger).length === 0 || workflow.triggers[selectedTriggerIndex] === undefined || selectedTrigger.trigger_type !== "WEBHOOK" ? null :
         <div style={appApiViewStyle}>
 		  <h3 style={{ marginBottom: "5px" }}>
@@ -15026,6 +14254,7 @@ const releaseToConnectLabel = "Release to Connect"
               </div>
             </div>
             <TextField
+              id="userinput_info"
               style={{
                 backgroundColor: theme.palette.inputColor,
                 borderRadius: theme.palette.borderRadius,
@@ -15033,9 +14262,58 @@ const releaseToConnectLabel = "Release to Connect"
               InputProps={{
                 style: {
                 },
+                endAdornment: (
+                  <InputAdornment position="end">
+                    <ButtonGroup orientation="vertical">
+                      <Tooltip title="Expand window" placement="top">
+                        <AspectRatioIcon
+                          style={{ cursor: "pointer", marginBottom: 10}}
+                          onClick={(event) => {
+                            event.preventDefault()
+                            // setFieldCount(count)
+                            setCodeEditorModalOpen(true)
+                            setActiveDialog("codeeditor")
+                            //setcodedata(data.value)
+                            var parsedvalue = workflow?.triggers[selectedTriggerIndex]?.parameters[0]?.value
+                            // if (parsedvalue === undefined || parsedvalue === null) {
+                            //   parsedvalue = ""
+                            // }
+                            console.log("Data sending to codeeditor: ",{
+                              "name": workflow.triggers[selectedTriggerIndex].parameters[0].name,
+                              "value": parsedvalue,
+                              "field_number": 0,
+                              "actionlist": subflowActionList,
+                              "field_id": "userinput_info",
+                            })
+                            setEditorData({
+                              "name": workflow.triggers[selectedTriggerIndex].parameters[0].name,
+                              "value": parsedvalue,
+                              "field_number": 0,
+                              "actionlist": subflowActionList,
+                              "field_id": "userinput_info",
+                            })
+                          }}
+                        />
+                      </Tooltip>
+                      <Tooltip title="Autocomplete text" placement="bottom">
+                          <AddCircleOutlineIcon
+                            style={{ cursor: "pointer" }}
+                            onClick={(event) => {
+                              setMenuPosition({
+                                top: event.pageY + 10,
+                                left: event.pageX + 10,
+                              });
+                              //setShowDropdownNumber(3)
+                              setShowDropdown(true);
+                            }}
+                          />
+                      </Tooltip>
+                    </ButtonGroup>
+                  </InputAdornment>
+                ),
               }}
               fullWidth
-              rows="4"
+              rows="6"
               multiline
               defaultValue={
 				workflow.triggers !== undefined && workflow.triggers !== null && workflow.triggers[selectedTriggerIndex].parameters !== undefined && workflow.triggers[selectedTriggerIndex].parameters.length > 0  && workflow.triggers[selectedTriggerIndex].parameters[0] !== undefined && workflow.triggers[selectedTriggerIndex].parameters[0].value !== undefined ? workflow.triggers[selectedTriggerIndex].parameters[0].value : ""
@@ -15046,6 +14324,300 @@ const releaseToConnectLabel = "Release to Connect"
                 setTriggerTextInformationWrapper(e.target.value);
               }}
             />
+             {!showDropdown ? null :
+							  <Menu
+                anchorReference="anchorPosition"
+                anchorPosition={menuPosition}
+                onClose={() => {
+                  handleMenuClose();
+                }}
+                open={!!menuPosition}
+                style={{
+                  border: `2px solid #f85a3e`,
+                  color: "white",
+                  marginTop: 2,
+                }}
+              >
+                {subflowActionList.map((innerdata) => {
+                  const icon =
+                    innerdata.type === "action" ? (
+                      <AppsIcon style={{ marginRight: 10 }} />
+                    ) : innerdata.type === "workflow_variable" ||
+                      innerdata.type === "execution_variable" ? (
+                      <FavoriteBorderIcon style={{ marginRight: 10 }} />
+                    ) : (
+                      <ScheduleIcon style={{ marginRight: 10 }} />
+                    );
+      
+                  const handleExecArgumentHover = (inside) => {
+                    var exec_text_field = document.getElementById(
+                      "execution_argument_input_field"
+                    );
+                    if (exec_text_field !== null) {
+                      if (inside) {
+                        exec_text_field.style.border = "2px solid #f85a3e";
+                      } else {
+                        exec_text_field.style.border = "";
+                      }
+                    }
+      
+                    // Also doing arguments
+                    if (
+                      workflow.triggers !== undefined &&
+                      workflow.triggers !== null &&
+                      workflow.triggers.length > 0
+                    ) {
+                      for (let triggerkey in workflow.triggers) {
+                        const item = workflow.triggers[triggerkey];
+      
+                        if (cy !== undefined) {
+                          var node = cy.getElementById(item.id);
+                          if (node.length > 0) {
+                            if (inside) {
+                              node.addClass("shuffle-hover-highlight");
+                            } else {
+                              node.removeClass("shuffle-hover-highlight");
+                            }
+                          }
+                        }
+                      }
+                    }
+                  }
+      
+                  const handleActionHover = (inside, actionId) => {
+                    if (cy !== undefined) {
+                      var node = cy.getElementById(actionId);
+                      if (node.length > 0) {
+                        if (inside) {
+                          node.addClass("shuffle-hover-highlight");
+                        } else {
+                          node.removeClass("shuffle-hover-highlight");
+                        }
+                      }
+                    }
+                  };
+      
+                  const handleMouseover = () => {
+                    if (innerdata.type === "Execution Argument") {
+                      handleExecArgumentHover(true);
+                    } else if (innerdata.type === "action") {
+                      handleActionHover(true, innerdata.id);
+                    }
+                  };
+      
+                  const handleMouseOut = () => {
+                    if (innerdata.type === "Execution Argument") {
+                      handleExecArgumentHover(false);
+                    } else if (innerdata.type === "action") {
+                      handleActionHover(false, innerdata.id);
+                    }
+                  };
+      
+                  var parsedPaths = [];
+                  console.log("Found example data: ", innerdata.example)
+                  if (typeof innerdata.example === "object") {
+                    parsedPaths = GetParsedPaths(innerdata.example, "");
+                  }
+      
+                  const coverColor = "#82ccc3"
+      
+                  return parsedPaths.length > 0 ? (
+                    <span>
+                    {/*
+                    <NestedMenuItem
+                      key={innerdata.name}
+                      label={
+                        <div style={{ display: "flex" }}>
+                          {icon} {innerdata.name}
+                        </div>
+                      }
+                      parentMenuOpen={!!menuPosition}
+                      style={{
+                        backgroundColor: theme.palette.inputColor,
+                        color: "white",
+                        minWidth: 250,
+                      }}
+                      onClick={() => {
+                        handleItemClick([innerdata]);
+                      }}
+                    >
+                      {parsedPaths.map((pathdata, index) => {
+                        // FIXME: Should be recursive in here
+                        const icon =
+                          pathdata.type === "value" ? (
+                            <VpnKeyIcon style={iconStyle} />
+                          ) : pathdata.type === "list" ? (
+                            <FormatListNumberedIcon style={iconStyle} />
+                          ) : (
+                            <ExpandMoreIcon style={iconStyle} />
+                          )
+      
+                        return (
+                          <MenuItem
+                            key={pathdata.name}
+                            style={{
+                              backgroundColor: theme.palette.inputColor,
+                              color: "white",
+                              minWidth: 250,
+                            }}
+                            value={pathdata}
+                            onMouseOver={() => { }}
+                            onClick={() => {
+                              handleItemClick([innerdata, pathdata]);
+                            }}
+                          >
+                            <Tooltip
+                              color="primary"
+                              title={`Ex. value: ${pathdata.value}`}
+                              placement="left"
+                            >
+                              <div style={{ display: "flex" }}>
+                                {icon} {pathdata.name}
+                              </div>
+                            </Tooltip>
+                          </MenuItem>
+                        );
+                      })}
+                    </NestedMenuItem>
+                    */}
+      
+                    <NestedMenuItem
+                      key={innerdata.name}
+                      label={
+                        <div style={{ display: "flex", marginLeft: 0, }}>
+                          {icon} {innerdata.name}
+                        </div>
+                      }
+                      parentMenuOpen={!!menuPosition}
+                      style={{
+                        color: "white",
+                        minWidth: 250,
+                        maxWidth: 250,
+                        maxHeight: 50,
+                        overflow: "hidden",
+                      }}
+                      onClick={() => {
+                        console.log("CLICKED: ", innerdata);
+                        console.log(innerdata.example)
+                        handleItemClick([innerdata]);
+                      }}
+                    >
+                      <Paper style={{minHeight: 500, maxHeight: 500, minWidth: 275, maxWidth: 275, position: "fixed", top: menuPosition.top-200, left: menuPosition.left-455, padding: "10px 0px 10px 10px", backgroundColor: theme.palette.inputColor, overflow: "hidden", overflowY: "auto", border: "1px solid rgba(255,255,255,0.3)",}}>
+      
+                        <MenuItem
+                          key={innerdata.name}
+                          style={{
+                            backgroundColor: theme.palette.inputColor,
+                            marginLeft: 15,
+                            color: "white",
+                            minWidth: 250,
+                            maxWidth: 250,
+                            padding: 0, 
+                            position: "relative",
+                          }}
+                          value={innerdata}
+                          onMouseOver={() => {
+                            //console.log("HOVER: ", pathdata);
+                          }}
+                          onClick={() => {
+                            handleItemClick([innerdata]);
+                          }}
+                        >
+                          <Typography variant="h6" style={{paddingBottom: 5}}>
+                            {innerdata.name}
+                          </Typography>
+                        </MenuItem>
+      
+                        {parsedPaths.map((pathdata, index) => {
+                          // FIXME: Should be recursive in here
+                          //<VpnKeyIcon style={iconStyle} />
+                          const icon =
+                            pathdata.type === "value" ? (
+                              <span style={{marginLeft: 9, }} />
+                            ) : pathdata.type === "list" ? (
+                              <FormatListNumberedIcon style={{marginLeft: 9, marginRight: 10, }} />
+                            ) : (
+                              <CircleIcon style={{marginLeft: 9, marginRight: 10, color: coverColor}}/>
+                            );
+                          //<ExpandMoreIcon style={iconStyle} />
+      
+                          const indentation_count = (pathdata.name.match(/\./g) || []).length+1
+                          const baseIndent = <div style={{marginLeft: 20, height: 30, width: 1, backgroundColor: coverColor,}} />
+                          //const boxPadding = pathdata.type === "object" ? "10px 0px 0px 0px" : 0
+                          const boxPadding = 0 
+                          const namesplit = pathdata.name.split(".")
+                          const newname = namesplit[namesplit.length-1]
+                          return (
+                            <MenuItem
+                              key={pathdata.name}
+                              style={{
+                                backgroundColor: theme.palette.inputColor,
+                                color: "white",
+                                minWidth: 250,
+                                maxWidth: 250,
+                                padding: boxPadding, 
+                              }}
+                              value={pathdata}
+                              onMouseOver={() => {
+                                //console.log("HOVER: ", pathdata);
+                              }}
+                              onClick={() => {
+                                handleItemClick([innerdata, pathdata]);
+                              }}
+                            >
+                              <Tooltip
+                                color="primary"
+                                title={`Ex. value: ${pathdata.value}`}
+                                placement="left"
+                              >
+                                <div style={{ display: "flex", height: 30, }}>
+                                  {Array(indentation_count).fill().map((subdata, subindex) => {
+                                    return (
+                                      baseIndent
+                                    )
+                                  })}
+                                  {icon} {newname} 
+                                  {pathdata.type === "list" ? <SquareFootIcon style={{marginleft: 10, }} onClick={(e) => {
+      
+                                  }} /> : null}
+                                </div>
+                              </Tooltip>
+                            </MenuItem>
+                          );
+                        })}
+                      </Paper>
+                    </NestedMenuItem>
+                    </span>
+                  ) : (
+                    <MenuItem
+                      key={innerdata.name}
+                      style={{
+                        backgroundColor: theme.palette.inputColor,
+                        color: "white",
+                      }}
+                      value={innerdata}
+                      onMouseOver={() => handleMouseover()}
+                      onMouseOut={() => {
+                        handleMouseOut();
+                      }}
+                      onClick={() => {
+                        handleItemClick([innerdata]);
+                      }}
+                    >
+                      <Tooltip
+                        color="primary"
+                        title={`Value: ${innerdata.value}`}
+                        placement="left"
+                      >
+                        <div style={{ display: "flex" }}>
+                          {icon} {innerdata.name}
+                        </div>
+                      </Tooltip>
+                    </MenuItem>
+                  );
+                })}
+              </Menu>
+              }
             <div
               style={{
                 marginTop: "20px",
@@ -15354,15 +14926,17 @@ const releaseToConnectLabel = "Release to Connect"
 		  }
 
         </div>
+
   const defaultEnvironment = environments.find(
     (env) => env.default && env.Name.toLowerCase() !== "cloud"
   );
 
   if (selectedTrigger.trigger_type === "PIPELINE" && selectedTrigger.environment === "onprem" && defaultEnvironment !== undefined) {
      selectedTrigger.environment = defaultEnvironment.Name
-     setSelectedTrigger(selectedTrigger)  }
+     setSelectedTrigger(selectedTrigger)  
+    }
 
-  const PipelineSidebar = Object.getOwnPropertyNames(selectedTrigger).length === 0 || workflow.triggers[selectedTriggerIndex] === undefined && selectedTrigger.trigger_type !== "SCHEDULE" ? null : 
+  const PipelineSidebar = Object.getOwnPropertyNames(selectedTrigger).length === 0 || workflow.triggers[selectedTriggerIndex] === undefined && selectedTrigger.trigger_type !== "PIPELINE" ? null : 
           <div style={appApiViewStyle}>
             <h3 style={{ marginBottom: "5px" }}>
               {selectedTrigger.app_name}: {selectedTrigger.status}
@@ -15911,6 +15485,863 @@ const releaseToConnectLabel = "Release to Connect"
           </div>
         </div>
 
+  const SubflowSidebar =  Object.getOwnPropertyNames(selectedTrigger).length === 0 || workflow.triggers[selectedTriggerIndex] === undefined || selectedTrigger.trigger_type !== "SUBFLOW" ? null :
+          <div style={appApiViewStyle}>
+          <span style={{display: "flex", }}>
+          <h3 style={{ marginBottom: "5px", flex: 3, }}>
+            {selectedTrigger.app_name}
+          </h3>
+          <Tooltip title="Choose the type of subflow to run. This is NOT required, but is used to help Shuffle's workflow generators better understand the workflow." placement="top">
+          <Select
+            MenuProps={{
+            disableScrollLock: true,
+            }}
+            value={selectedTrigger.tags !== undefined && selectedTrigger.tags !== null && selectedTrigger.tags.length > 0 ? selectedTrigger.tags[0] : "Any"}
+            onChange={(event) => {
+              if (selectedTrigger.tags === undefined || selectedTrigger.tags === null) {
+                selectedTrigger.tags = [event.target.value]
+              } else {
+                if (selectedTrigger.tags.includes(event.target.value)) {
+                  return
+                } 
+
+                if (selectedTrigger.tags.length > 0) {
+                  selectedTrigger.tags = []
+                }
+
+                selectedTrigger.tags.push(event.target.value)
+              }
+
+              setSelectedTrigger(selectedTrigger)
+              setUpdate(Math.random())
+            }}
+            style={{
+            marginTop: 10,
+            flex: 1, 
+            backgroundColor: theme.palette.inputColor,
+            color: "white",
+            height: 35,
+            marginleft: 10,
+            borderRadius: theme.palette.borderRadius,
+              color: "rgba(255,255,255,0.4)",
+            }}
+            SelectDisplayProps={{
+            style: {
+            },
+            }}
+          >
+            {subflowtypes.map((data, index) => {
+            return (
+              <MenuItem
+              key={index}
+              style={{
+                backgroundColor: theme.palette.inputColor,
+                color: "white",
+              }}
+              value={data.name}
+              >
+              {data.name}
+              </MenuItem>
+            );
+            })}
+          </Select>
+          </Tooltip>
+          </span>
+          <a
+          rel="noopener noreferrer"
+          target="_blank"
+          href="https://shuffler.io/docs/triggers#subflow"
+          style={{ textDecoration: "none", color: "#f85a3e" }}
+          >
+          What are subflows?
+          </a>
+            <Divider
+              style={{
+                marginBottom: "10px",
+                marginTop: "10px",
+                height: "1px",
+                width: "100%",
+                backgroundColor: "rgb(91, 96, 100)",
+              }}
+            />
+            <div style={{ display: "flex" }}>
+              <div style={{ flex: 5 }}>
+                <Typography>Name</Typography>
+                <TextField
+                  style={{
+                    backgroundColor: theme.palette.inputColor,
+                    borderRadius: theme.palette.borderRadius,
+                  }}
+                  InputProps={{
+                    style: {
+                    },
+                  }}
+                  fullWidth
+                  color="primary"
+                  placeholder={selectedTrigger.label}
+                  onChange={selectedTriggerChange}
+                />
+              </div>
+              <div>
+                <div style={{ flex: 1, marginLeft: 5, }}>
+                  <Tooltip
+                    color="primary"
+                    title={"Delay before action runs (in seconds)"}
+                    placement="top"
+                  >
+                    <span>
+                      <Typography>Delay</Typography>
+                      <TextField
+                        style={{
+                          backgroundColor: theme.palette.inputColor,
+              maxWidth: 50,
+                        }}
+                        InputProps={{
+                          style: theme.palette.innerTextfieldStyle,
+                        }}
+                        placeholder={selectedTrigger.execution_delay}
+                        defaultValue={selectedAction.execution_delay}
+                        onChange={(event) => {
+                          if (isNaN(event.target.value)) {
+                            console.log("NAN: ", event.target.value)
+                            return
+                          }
+
+                          const parsedNumber = parseInt(event.target.value)
+                          if (parsedNumber > 86400) {
+                            console.log("Max number is 1 day (86400)")
+                            return
+                          }
+
+                          selectedTrigger.execution_delay = parseInt(event.target.value)
+                          setSelectedTrigger(selectedTrigger)
+                        }}
+                      />
+                    </span>
+                  </Tooltip>
+                </div>
+              </div>
+            </div>
+            <FormControlLabel
+              control={
+                <Checkbox
+                  checked={
+                    workflow.triggers[selectedTriggerIndex].parameters[4] !==
+                    undefined &&
+                    workflow.triggers[selectedTriggerIndex].parameters[4]
+                      .value === "true"
+                  }
+                  onChange={() => {
+                    const newvalue = workflow.triggers[selectedTriggerIndex].parameters[4] === undefined || workflow.triggers[selectedTriggerIndex].parameters[4].value === "false"? "true" : "false";
+                    workflow.triggers[selectedTriggerIndex].parameters[4] = {
+                      name: "check_result",
+                      value: newvalue,
+                    };
+
+                    setWorkflow(workflow);
+                    setUpdate(Math.random());
+                  }}
+                  color="primary"
+                  value="Wait for results"
+                />
+              }
+              style={{ marginTop: 10 }}
+              label={<div style={{ color: "white" }}>Wait for results</div>}
+            />
+            <div style={{ flex: "6", marginTop: 10, }}>
+              <div>
+                <div style={{ display: "flex" }}>
+                  <div
+                    style={{
+                      marginTop: "20px",
+                      marginBottom: "7px",
+                      display: "flex",
+                      flex: 5,
+                    }}
+                  >
+                    <div style={{ flex: "10" }}>
+                      <b>Select a workflow to execute </b>
+                    </div>
+                  </div>
+                  {workflow.triggers[selectedTriggerIndex].parameters[0].value
+                    .length === 0 ? null : workflow.triggers[selectedTriggerIndex]
+                      .parameters[0].value === props.match.params.key ? null : (
+                    <div style={{ marginLeft: 5, flex: 1 }}>
+                      <a
+                        rel="noopener noreferrer"
+                        href={`/workflows/${workflow.triggers[selectedTriggerIndex].parameters[0].value}`}
+                        target="_blank"
+                        style={{
+                          textDecoration: "none",
+                          color: "#f85a3e",
+                          marginLeft: 5,
+                          marginTop: 10,
+                        }}
+                      >
+                        <OpenInNewIcon />
+                      </a>
+                    </div>
+                  )}
+                </div>
+
+                {workflows === undefined ||
+                  workflows === null ||
+                  workflows.length === 0 ? null : (
+
+                  <Autocomplete
+                    id="subflow_search"
+                    autoHighlight
+                    freeSolo
+                    value={subworkflow}
+                    classes={{ inputRoot: classes.inputRoot }}
+                    ListboxProps={{
+                      style: {
+                        backgroundColor: theme.palette.inputColor,
+                        color: "white",
+                      },
+                    }}
+                    getOptionSelected={(option, value) => option.id === value.id}
+                    getOptionLabel={(option) => {
+                      if (
+                        option === undefined ||
+                        option === null ||
+                        option.name === undefined ||
+                        option.name === null
+                      ) {
+                        return "No Workflow Selected";
+                      }
+
+                      const newname = (
+                        option.name.charAt(0).toUpperCase() + option.name.substring(1)
+                      ).replaceAll("_", " ");
+                      return newname;
+                    }}
+                    options={workflows}
+                    fullWidth
+                    style={{
+                      backgroundColor: theme.palette.inputColor,
+                      height: 50,
+                      borderRadius: theme.palette.borderRadius,
+                    }}
+                    onChange={(event, newValue) => {
+                      setLastSaved(false)
+                      console.log("Found value: ", newValue)
+
+            var parsedinput = { target: { value: newValue } }
+
+            // For variables
+            if (typeof newValue === 'string' && newValue.startsWith("$")) {
+              parsedinput = { 
+                target: { 
+                  value: {
+                    "name": newValue, 
+                    "id": newValue,
+                    "actions": [],
+                    "triggers": [],
+                  } 
+                } 
+              }
+            }
+
+                      handleWorkflowSelectionUpdate(parsedinput)
+                    }}
+                  renderOption={(props, data, state) => {
+                      if (data.id === workflow.id) {
+                        data = workflow;
+                      }
+
+                      //key={index}
+                      return (
+                        <Tooltip arrow placement="left" title={
+                          <span style={{}}>
+                            {data.image !== undefined && data.image !== null && data.image.length > 0 ?
+                              <img src={data.image} alt={data.name} style={{ backgroundColor: theme.palette.surfaceColor, maxHeight: 200, minHeigth: 200, borderRadius: theme.palette.borderRadius, }} />
+                              : null}
+                            <Typography>
+                              Choose Subflow '{data.name}'
+                            </Typography>
+                          </span>
+                        }>
+                          <MenuItem
+                            style={{
+                              backgroundColor: theme.palette.inputColor,
+                              color: data.id === workflow.id ? "red" : "white",
+                            }}
+                            value={data}
+                onClick={() => {	
+                getWorkflowApps(data.id);
+                handleWorkflowSelectionUpdate({
+                  target: {
+                    value: data
+                  }
+                })
+                document.activeElement.blur();
+                }}
+                          >
+                <PolylineIcon style={{ marginRight: 8 }} />
+                            {data.name}
+                          </MenuItem>
+                        </Tooltip>
+                      )
+                    }}
+                    renderInput={(params) => {
+                      return (
+                        <TextField
+                          style={{
+                            backgroundColor: theme.palette.inputColor,
+                            borderRadius: theme.palette.borderRadius,
+                          }}
+                          {...params}
+                          label="Find your workflow"
+                          variant="outlined"
+                        />
+                      );
+                    }}
+                  />
+                )}
+
+                {subworkflow === undefined ||
+                  subworkflow === null ||
+                  subworkflow.id === undefined ||
+                  subworkflow.actions === null ||
+                  subworkflow.actions === undefined ||
+                  subworkflow.actions.length === 0 ? null : (
+                  <span>
+                    <div
+                      style={{
+                        marginTop: "20px",
+                        marginBottom: "7px",
+                        display: "flex",
+                      }}
+                    >
+                      <div style={{ flex: "10" }}>
+                        <b>Select the Startnode</b>
+                      </div>
+                    </div>
+                    <Autocomplete
+                      id="subflow_node_search"
+                      autoHighlight
+                      value={subworkflowStartnode}
+                      classes={{ inputRoot: classes.inputRoot }}
+                      ListboxProps={{
+                        style: {
+                          backgroundColor: theme.palette.inputColor,
+                          color: "white",
+                        },
+                      }}
+                      getOptionSelected={(option, value) => option.id === value.id}
+                      getOptionLabel={(option) => {
+                        if (option === undefined || option === null || option.label === undefined || option.label === null) {
+                          if (option.length === 36) {
+
+                          }
+
+                          return "TMP";
+                        }
+
+                        const newname = (
+                          option.label.charAt(0).toUpperCase() + option.label.substring(1)
+                        ).replaceAll("_", " ");
+                        return newname;
+                      }}
+                      options={subworkflow.actions}
+                      fullWidth
+                      style={{
+                        backgroundColor: theme.palette.inputColor,
+                        height: 50,
+                        borderRadius: theme.palette.borderRadius,
+                      }}
+                      onChange={(event, newValue) => {
+                        setLastSaved(false)
+                        handleSubflowStartnodeSelection({ target: { value: newValue } })
+                      }}
+                  renderOption={(props, action, state) => {
+                        const isParent = getParents(selectedTrigger).find(
+                          (parent) => parent.id === action.id
+                        )
+
+                        return (
+                          <MenuItem
+                            onMouseOver={() => {
+                              if (subworkflow.id === workflow.id) {
+                                handleActionHover(true, action.id)
+                              }
+                            }}
+                            onMouseOut={() => {
+                              if (subworkflow.id === workflow.id) {
+                                handleActionHover(false, action.id)
+                              }
+                            }}
+                            disabled={isCloud && isParent}
+                            onClick={() => {
+                                        handleSubflowStartnodeSelection({ 
+                              target: { 
+                                value: action 
+                              } 
+                            })
+                            document.activeElement.blur();
+                            }}
+                            style={{
+                              backgroundColor: theme.palette.inputColor,
+                              color: isParent ? "red" : "white",
+                            }}
+                            value={action}
+                          >
+                            {action.label}
+                          </MenuItem>
+                        );
+                      }}
+                      renderInput={(params) => {
+                        return (
+                          <TextField
+                            style={{
+                              backgroundColor: theme.palette.inputColor,
+                              borderRadius: theme.palette.borderRadius,
+                            }}
+                            {...params}
+                            label="Select a start-node (optional)"
+                            variant="outlined"
+                          />
+                        );
+                      }}
+                    />
+                  </span>
+                )}
+                <div
+                  style={{
+                    marginTop: "20px",
+                    marginBottom: "7px",
+                    display: "flex",
+                  }}
+                >
+                  <div style={{ flex: "10" }}>
+                    <b>Execution Argument</b>
+                  </div>
+                </div>
+                <TextField
+                  id="subflow_field"
+                  style={{
+                    backgroundColor: theme.palette.inputColor,
+                    borderRadius: theme.palette.borderRadius,
+                  }}
+                  InputProps={{
+                    style: {
+                    },
+                    endAdornment: (
+                      <InputAdornment position="end">
+                        <ButtonGroup orientation="vertical">
+                          <Tooltip title="Expand window" placement="top">
+                            <AspectRatioIcon
+                              style={{ cursor: "pointer", marginBottom: 10}}
+                              onClick={(event) => {
+                                event.preventDefault()
+                                // setFieldCount(count)
+                                setCodeEditorModalOpen(true)
+                                setActiveDialog("codeeditor")
+                                //setcodedata(data.value)
+                                var parsedvalue = workflow?.triggers[selectedTriggerIndex]?.parameters[1]?.value
+                                // if (parsedvalue === undefined || parsedvalue === null) {
+                                //   parsedvalue = ""
+                                // }
+                                console.log("Data sending to codeeditor: ",{
+                                  "name": workflow.triggers[selectedTriggerIndex].parameters[1].name,
+                                  "value": parsedvalue,
+                                  "field_number": 1,
+                                  "actionlist": subflowActionList,
+                                  "field_id": "subflow_field",
+                                })
+                                setEditorData({
+                                  "name": workflow.triggers[selectedTriggerIndex].parameters[1].name,
+                                  "value": parsedvalue,
+                                  "field_number": 1,
+                                  "actionlist": subflowActionList,
+                                  "field_id": "subflow_field",
+                                })
+                              }}
+                            />
+                          </Tooltip>
+                          <Tooltip title="Autocomplete text" placement="bottom">
+                            <AddCircleOutlineIcon
+                              style={{ cursor: "pointer" }}
+                              onClick={(event) => {
+                                setMenuPosition({
+                                  top: event.pageY + 10,
+                                  left: event.pageX + 10,
+                                });
+                                //setShowDropdownNumber(3)
+                                setShowDropdown(true);
+                              }}
+                            />
+                          </Tooltip>
+                        </ButtonGroup>
+                      </InputAdornment>
+                    ),
+                  }}
+                  rows="6"
+                  multiline
+                  fullWidth
+                  color="primary"
+                  placeholder="Some execution data"
+                  defaultValue={
+                    workflow?.triggers[selectedTriggerIndex]?.parameters[1]?.value
+                  }
+                  onBlur={(e) => {
+                    workflow.triggers[selectedTriggerIndex].parameters[1].value = e.target.value
+                    setWorkflow(workflow)
+                    setLastSaved(false)
+
+                  }}
+                />
+                {!showDropdown ? null :
+                  <Menu
+                  anchorReference="anchorPosition"
+                  anchorPosition={menuPosition}
+                  onClose={() => {
+                    handleMenuClose();
+                  }}
+                  open={!!menuPosition}
+                  style={{
+                    border: `2px solid #f85a3e`,
+                    color: "white",
+                    marginTop: 2,
+                  }}
+                >
+                  {subflowActionList.map((innerdata) => {
+                    const icon =
+                      innerdata.type === "action" ? (
+                        <AppsIcon style={{ marginRight: 10 }} />
+                      ) : innerdata.type === "workflow_variable" ||
+                        innerdata.type === "execution_variable" ? (
+                        <FavoriteBorderIcon style={{ marginRight: 10 }} />
+                      ) : (
+                        <ScheduleIcon style={{ marginRight: 10 }} />
+                      );
+
+                    const handleExecArgumentHover = (inside) => {
+                      var exec_text_field = document.getElementById(
+                        "execution_argument_input_field"
+                      );
+                      if (exec_text_field !== null) {
+                        if (inside) {
+                          exec_text_field.style.border = "2px solid #f85a3e";
+                        } else {
+                          exec_text_field.style.border = "";
+                        }
+                      }
+
+                      // Also doing arguments
+                      if (
+                        workflow.triggers !== undefined &&
+                        workflow.triggers !== null &&
+                        workflow.triggers.length > 0
+                      ) {
+                        for (let triggerkey in workflow.triggers) {
+                          const item = workflow.triggers[triggerkey];
+
+                          if (cy !== undefined) {
+                            var node = cy.getElementById(item.id);
+                            if (node.length > 0) {
+                              if (inside) {
+                                node.addClass("shuffle-hover-highlight");
+                              } else {
+                                node.removeClass("shuffle-hover-highlight");
+                              }
+                            }
+                          }
+                        }
+                      }
+                    }
+
+                    const handleActionHover = (inside, actionId) => {
+                      if (cy !== undefined) {
+                        var node = cy.getElementById(actionId);
+                        if (node.length > 0) {
+                          if (inside) {
+                            node.addClass("shuffle-hover-highlight");
+                          } else {
+                            node.removeClass("shuffle-hover-highlight");
+                          }
+                        }
+                      }
+                    };
+
+                    const handleMouseover = () => {
+                      if (innerdata.type === "Execution Argument") {
+                        handleExecArgumentHover(true);
+                      } else if (innerdata.type === "action") {
+                        handleActionHover(true, innerdata.id);
+                      }
+                    };
+
+                    const handleMouseOut = () => {
+                      if (innerdata.type === "Execution Argument") {
+                        handleExecArgumentHover(false);
+                      } else if (innerdata.type === "action") {
+                        handleActionHover(false, innerdata.id);
+                      }
+                    };
+
+                    var parsedPaths = [];
+                    console.log("Found example data: ", innerdata.example)
+                    if (typeof innerdata.example === "object") {
+                      parsedPaths = GetParsedPaths(innerdata.example, "");
+                    }
+
+                    const coverColor = "#82ccc3"
+
+                    return parsedPaths.length > 0 ? (
+                      <span>
+                      {/*
+                      <NestedMenuItem
+                        key={innerdata.name}
+                        label={
+                          <div style={{ display: "flex" }}>
+                            {icon} {innerdata.name}
+                          </div>
+                        }
+                        parentMenuOpen={!!menuPosition}
+                        style={{
+                          backgroundColor: theme.palette.inputColor,
+                          color: "white",
+                          minWidth: 250,
+                        }}
+                        onClick={() => {
+                          handleItemClick([innerdata]);
+                        }}
+                      >
+                        {parsedPaths.map((pathdata, index) => {
+                          // FIXME: Should be recursive in here
+                          const icon =
+                            pathdata.type === "value" ? (
+                              <VpnKeyIcon style={iconStyle} />
+                            ) : pathdata.type === "list" ? (
+                              <FormatListNumberedIcon style={iconStyle} />
+                            ) : (
+                              <ExpandMoreIcon style={iconStyle} />
+                            )
+
+                          return (
+                            <MenuItem
+                              key={pathdata.name}
+                              style={{
+                                backgroundColor: theme.palette.inputColor,
+                                color: "white",
+                                minWidth: 250,
+                              }}
+                              value={pathdata}
+                              onMouseOver={() => { }}
+                              onClick={() => {
+                                handleItemClick([innerdata, pathdata]);
+                              }}
+                            >
+                              <Tooltip
+                                color="primary"
+                                title={`Ex. value: ${pathdata.value}`}
+                                placement="left"
+                              >
+                                <div style={{ display: "flex" }}>
+                                  {icon} {pathdata.name}
+                                </div>
+                              </Tooltip>
+                            </MenuItem>
+                          );
+                        })}
+                      </NestedMenuItem>
+                      */}
+
+                      <NestedMenuItem
+                        key={innerdata.name}
+                        label={
+                          <div style={{ display: "flex", marginLeft: 0, }}>
+                            {icon} {innerdata.name}
+                          </div>
+                        }
+                        parentMenuOpen={!!menuPosition}
+                        style={{
+                          color: "white",
+                          minWidth: 250,
+                          maxWidth: 250,
+                          maxHeight: 50,
+                          overflow: "hidden",
+                        }}
+                        onClick={() => {
+                          console.log("CLICKED: ", innerdata);
+                          console.log(innerdata.example)
+                          handleItemClick([innerdata]);
+                        }}
+                      >
+                        <Paper style={{minHeight: 500, maxHeight: 500, minWidth: 275, maxWidth: 275, position: "fixed", top: menuPosition.top-200, left: menuPosition.left-455, padding: "10px 0px 10px 10px", backgroundColor: theme.palette.inputColor, overflow: "hidden", overflowY: "auto", border: "1px solid rgba(255,255,255,0.3)",}}>
+
+                          <MenuItem
+                            key={innerdata.name}
+                            style={{
+                              backgroundColor: theme.palette.inputColor,
+                              marginLeft: 15,
+                              color: "white",
+                              minWidth: 250,
+                              maxWidth: 250,
+                              padding: 0, 
+                              position: "relative",
+                            }}
+                            value={innerdata}
+                            onMouseOver={() => {
+                              //console.log("HOVER: ", pathdata);
+                            }}
+                            onClick={() => {
+                              handleItemClick([innerdata]);
+                            }}
+                          >
+                            <Typography variant="h6" style={{paddingBottom: 5}}>
+                              {innerdata.name}
+                            </Typography>
+                          </MenuItem>
+
+                          {parsedPaths.map((pathdata, index) => {
+                            // FIXME: Should be recursive in here
+                            //<VpnKeyIcon style={iconStyle} />
+                            const icon =
+                              pathdata.type === "value" ? (
+                                <span style={{marginLeft: 9, }} />
+                              ) : pathdata.type === "list" ? (
+                                <FormatListNumberedIcon style={{marginLeft: 9, marginRight: 10, }} />
+                              ) : (
+                                <CircleIcon style={{marginLeft: 9, marginRight: 10, color: coverColor}}/>
+                              );
+                            //<ExpandMoreIcon style={iconStyle} />
+
+                            const indentation_count = (pathdata.name.match(/\./g) || []).length+1
+                            const baseIndent = <div style={{marginLeft: 20, height: 30, width: 1, backgroundColor: coverColor,}} />
+                            //const boxPadding = pathdata.type === "object" ? "10px 0px 0px 0px" : 0
+                            const boxPadding = 0 
+                            const namesplit = pathdata.name.split(".")
+                            const newname = namesplit[namesplit.length-1]
+                            return (
+                              <MenuItem
+                                key={pathdata.name}
+                                style={{
+                                  backgroundColor: theme.palette.inputColor,
+                                  color: "white",
+                                  minWidth: 250,
+                                  maxWidth: 250,
+                                  padding: boxPadding, 
+                                }}
+                                value={pathdata}
+                                onMouseOver={() => {
+                                  //console.log("HOVER: ", pathdata);
+                                }}
+                                onClick={() => {
+                                  handleItemClick([innerdata, pathdata]);
+                                }}
+                              >
+                                <Tooltip
+                                  color="primary"
+                                  title={`Ex. value: ${pathdata.value}`}
+                                  placement="left"
+                                >
+                                  <div style={{ display: "flex", height: 30, }}>
+                                    {Array(indentation_count).fill().map((subdata, subindex) => {
+                                      return (
+                                        baseIndent
+                                      )
+                                    })}
+                                    {icon} {newname} 
+                                    {pathdata.type === "list" ? <SquareFootIcon style={{marginleft: 10, }} onClick={(e) => {
+
+                                    }} /> : null}
+                                  </div>
+                                </Tooltip>
+                              </MenuItem>
+                            );
+                          })}
+                        </Paper>
+                      </NestedMenuItem>
+                      </span>
+                    ) : (
+                      <MenuItem
+                        key={innerdata.name}
+                        style={{
+                          backgroundColor: theme.palette.inputColor,
+                          color: "white",
+                        }}
+                        value={innerdata}
+                        onMouseOver={() => handleMouseover()}
+                        onMouseOut={() => {
+                          handleMouseOut();
+                        }}
+                        onClick={() => {
+                          handleItemClick([innerdata]);
+                        }}
+                      >
+                        <Tooltip
+                          color="primary"
+                          title={`Value: ${innerdata.value}`}
+                          placement="left"
+                        >
+                          <div style={{ display: "flex" }}>
+                            {icon} {innerdata.name}
+                          </div>
+                        </Tooltip>
+                      </MenuItem>
+                    );
+                  })}
+                </Menu>
+                }
+                {/*
+                  <div
+                    style={{
+                      marginTop: "20px",
+                      marginBottom: "7px",
+                      display: "flex",
+                    }}
+                  >
+                    <div style={{ flex: "10" }}>
+                      <b>API-key </b>
+                    </div>
+                  </div>
+                  <TextField
+                    style={{
+                      backgroundColor: theme.palette.inputColor,
+                      borderRadius: theme.palette.borderRadius,
+                    }}
+                    InputProps={{
+                      style: {
+                      },
+                    }}
+                    fullWidth
+                    color="primary"
+                    placeholder="Your apikey"
+                    defaultValue={
+                      workflow.triggers[selectedTriggerIndex].parameters[2].value
+                    }
+                    onBlur={(e) => {
+                      workflow.triggers[selectedTriggerIndex].parameters[2].value =
+                        e.target.value;
+                      setWorkflow(workflow);
+                    }}
+                  />
+                */}
+              </div>
+            </div>
+
+            <div>
+              <div>
+              <div className="app">
+                <div style={{ display: "flex", marginTop: 50 }}>
+                  <div style={{ flex: "10" }}>
+                    <b>Authentication Override</b>
+                  </div>
+                </div>
+
+                <div style={{ display: "flex", marginTop: 10 }}>
+                  <div style={{ flex: "10", marginLeft: 10 }}>
+                    <AppAuthSelector appAuthData={appAuthentication} />
+                  </div>
+                </div>
+              </div>
+              </div>
+            </div>
+          </div>
+
   const cytoscapeViewWidths = isMobile ? 50 : 950;
   const bottomBarStyle = {
     position: "fixed",
@@ -20208,6 +20639,7 @@ const releaseToConnectLabel = "Release to Connect"
         workflowExecutions={workflowExecutions}
         setSelectedResult={setSelectedResult}
         setSelectedApp={setSelectedApp}
+        selectedTrigger={selectedTrigger}
         setSelectedTrigger={setSelectedTrigger}
         setSelectedEdge={setSelectedEdge}
         setCurrentView={setCurrentView}
@@ -20243,7 +20675,7 @@ const releaseToConnectLabel = "Release to Connect"
 	  {/* Looks for triggers" */}
 	  {/* Only fixed the ones that require scrolling on a small screen */}
 	  {/* Most important: Actions. But these are a lot more complex */}
-	  {rightSideBarOpen && (selectedTrigger.trigger_type === "SCHEDULE" || selectedTrigger.trigger_type === "WEBHOOK" || selectedTrigger.trigger_type === "PIPELINE" || selectedTrigger.trigger_type === "USERINPUT") ?
+	  {rightSideBarOpen && (selectedTrigger.trigger_type === "SCHEDULE" || selectedTrigger.trigger_type === "WEBHOOK" || selectedTrigger.trigger_type === "PIPELINE" || selectedTrigger.trigger_type === "USERINPUT" || selectedTrigger.trigger_type === "SUBFLOW") ?
 		  <div id="rightside_actions" style={rightsidebarStyle}>
 			  {Object.getOwnPropertyNames(selectedTrigger).length > 0 ? 
 				selectedTrigger.trigger_type === "SCHEDULE" ? 
@@ -20254,17 +20686,19 @@ const releaseToConnectLabel = "Release to Connect"
 					WebhookSidebar
         : selectedTrigger.trigger_type === "USERINPUT" ? 
           UserinputSidebar
+        : selectedTrigger.trigger_type === "SUBFLOW" ?
+          SubflowSidebar
 				: null 
 			  : null}
 		  </div>
 	  : null}
 
-    {
+    {/* {
       rightSideBarOpen && selectedTrigger.trigger_type === "SUBFLOW"&& Object.getOwnPropertyNames(selectedTrigger).length > 0   ? 
       <div id="rightside_actions" style={rightsidebarStyle}>
         <SubflowSidebar/>
         </div> : null
-    }
+    } */}
 	  
 	  {/*
       <RightSideBar
@@ -21904,103 +22338,154 @@ const releaseToConnectLabel = "Release to Connect"
 		</div>
 
 	const changeActionParameterCodeMirror = (event, count, data, actionlist) => {
-		// Check if event.target.value is an array. If it is, split with comma
-		console.log("1 - SELECTED ACTION: ", selectedAction)
-		console.log("1 - DATA: ", data)
+		
+    if(selectedAction && selectedAction.parameters && selectedAction.parameters.length > 0){
 
-		if (data.startsWith("${") && data.endsWith("}")) {
-			// PARAM FIX - Gonna use the ID field, even though it's a hack
-			const paramcheck = selectedAction.parameters.find(param => param.name === "body")
-			if (paramcheck !== undefined) {
-				// Escapes all double quotes
-				const toReplace = event.target.value.trim().replaceAll("\\\"", "\"").replaceAll("\"", "\\\"");
-				if (paramcheck["value_replace"] === undefined || paramcheck["value_replace"] === null) {
-					paramcheck["value_replace"] = [{
-						"key": data.name,
-						"value": toReplace,
-					}]
+      // Check if event.target.value is an array. If it is, split with comma
+      console.log("1 - SELECTED ACTION: ", selectedAction)
+      console.log("1 - DATA: ", data)
 
-				} else {
-					const subparamindex = paramcheck["value_replace"].findIndex(param => param.key === data.name)
-					if (subparamindex === -1) {
-						paramcheck["value_replace"].push({
-							"key": data.name,
-							"value": toReplace,
-						})
-					} else {
-						paramcheck["value_replace"][subparamindex]["value"] = toReplace 
-					}
-				}
+      if (data.startsWith("${") && data.endsWith("}")) {
+        // PARAM FIX - Gonna use the ID field, even though it's a hack
+        const paramcheck = selectedAction.parameters.find(param => param.name === "body")
+        if (paramcheck !== undefined) {
+          // Escapes all double quotes
+          const toReplace = event.target.value.trim().replaceAll("\\\"", "\"").replaceAll("\"", "\\\"");
+          if (paramcheck["value_replace"] === undefined || paramcheck["value_replace"] === null) {
+            paramcheck["value_replace"] = [{
+              "key": data.name,
+              "value": toReplace,
+            }]
 
-				if (paramcheck["value_replace"] === undefined) {
-					selectedAction.parameters[count]["value_replace"] = paramcheck
-				} else {
-					//selectedActionParameters[count]["value_replace"] = paramcheck["value_replace"]
-					selectedAction.parameters[count]["value_replace"] = paramcheck["value_replace"]
-				}
-				setSelectedAction(selectedAction)
-				//setUpdate(Math.random())
-				return
-			}
-		}
+          } else {
+            const subparamindex = paramcheck["value_replace"].findIndex(param => param.key === data.name)
+            if (subparamindex === -1) {
+              paramcheck["value_replace"].push({
+                "key": data.name,
+                "value": toReplace,
+              })
+            } else {
+              paramcheck["value_replace"][subparamindex]["value"] = toReplace 
+            }
+          }
 
-		if (event.target.value[event.target.value.length-1] === "." && actionlist.length > 0) {
-			var curstring = ""
-			var record = false
-			for (let [key,keyval] in Object.entries(selectedAction.parameters[count].value)) {
-				const item = selectedAction.parameters[count].value[key]
-				if (record) {
-					curstring += item
-				}
+          if (paramcheck["value_replace"] === undefined) {
+            selectedAction.parameters[count]["value_replace"] = paramcheck
+          } else {
+            //selectedActionParameters[count]["value_replace"] = paramcheck["value_replace"]
+            selectedAction.parameters[count]["value_replace"] = paramcheck["value_replace"]
+          }
+          setSelectedAction(selectedAction)
+          //setUpdate(Math.random())
+          return
+        }
+      }
 
-				if (item === "$") {
-					record = true
-					curstring = ""
-				}
-			}
+      if (event.target.value[event.target.value.length-1] === "." && actionlist.length > 0) {
+        var curstring = ""
+        var record = false
+        for (let [key,keyval] in Object.entries(selectedAction.parameters[count].value)) {
+          const item = selectedAction.parameters[count].value[key]
+          if (record) {
+            curstring += item
+          }
 
-			if (curstring.length > 0 && actionlist !== null) {
-				// Search back in the action list
-				curstring = curstring.split(" ").join("_").toLowerCase()
-				var actionItem = actionlist.find(data => data.autocomplete.split(" ").join("_").toLowerCase() === curstring)
-				if (actionItem !== undefined) {
-					console.log("Found item: ", actionItem)
+          if (item === "$") {
+            record = true
+            curstring = ""
+          }
+        }
 
-					var jsonvalid = true
-					try {
-						const tmp = String(JSON.parse(actionItem.example))
-						if (!actionItem.example.includes("{") && !actionItem.example.includes("[")) {
-							jsonvalid = false
-						}
-					} catch (e) {
-						jsonvalid = false
-					}
-				}
-			}
-		} 
+        if (curstring.length > 0 && actionlist !== null) {
+          // Search back in the action list
+          curstring = curstring.split(" ").join("_").toLowerCase()
+          var actionItem = actionlist.find(data => data.autocomplete.split(" ").join("_").toLowerCase() === curstring)
+          if (actionItem !== undefined) {
+            console.log("Found item: ", actionItem)
 
-		if (selectedAction.app_name === "Shuffle Tools" && selectedAction.name === "filter_list" && count === 0) {
-			const parsedvalue = data
-			if (parsedvalue.includes("#")) {
-				const splitparsed = parsedvalue.split(".#.")
-				//console.log("Cant contain #: ", splitparsed)
-				if (splitparsed.length > 1) {
-					//data.value = splitparsed[0]
+            var jsonvalid = true
+            try {
+              const tmp = String(JSON.parse(actionItem.example))
+              if (!actionItem.example.includes("{") && !actionItem.example.includes("[")) {
+                jsonvalid = false
+              }
+            } catch (e) {
+              jsonvalid = false
+            }
+          }
+        }
+      } 
 
-					selectedAction.parameters[0].value = splitparsed[0]
-					selectedAction.parameters[1].value = splitparsed[1] 
+      console.log("2 - SELECTED ACTION: ", selectedAction)
+      console.log("2 - DATA: ", data)
 
-					selectedAction.parameters[0].autocompleted = true 
-					selectedAction.parameters[1].autocompleted = true 
-					setUpdate(Math.random())
-				} 
-			}
-		} else {
-			selectedAction.parameters[count].autocompleted = false 
-			selectedAction.parameters[count].value = data
-		}
+      if (selectedAction.app_name === "Shuffle Tools" && selectedAction.name === "filter_list" && count === 0) {
+        const parsedvalue = data
+        console.log("Parsed value: ", parsedvalue)
+        if (parsedvalue.includes("#")) {
+          const splitparsed = parsedvalue.split(".#.")
+          //console.log("Cant contain #: ", splitparsed)
+          if (splitparsed.length > 1) {
+            console.log("IN HERE AY")
+            //data.value = splitparsed[0]
 
-		setSelectedAction(selectedAction)
+            selectedAction.parameters[0].value = splitparsed[0]
+            selectedAction.parameters[1].value = splitparsed[1] 
+
+            selectedAction.parameters[0].autocompleted = true 
+            selectedAction.parameters[1].autocompleted = true 
+            setUpdate(Math.random())
+          } 
+        }
+      } else {
+        selectedAction.parameters[count].autocompleted = false 
+        selectedAction.parameters[count].value = data
+      }
+
+      setSelectedAction(selectedAction)
+    }
+
+    if(selectedTrigger && selectedTrigger.parameters && selectedTrigger.parameters.length > 0){
+
+      if (event.target.value[event.target.value.length-1] === "." && actionlist.length > 0) {
+        var curstring = ""
+        var record = false
+        for (let [key,keyval] in Object.entries(selectedTrigger.parameters[count].value)) {
+          const item = selectedTrigger.parameters[count].value[key]
+          if (record) {
+            curstring += item
+          }
+
+          if (item === "$") {
+            record = true
+            curstring = ""
+          }
+        }
+
+        if (curstring.length > 0 && actionlist !== null) {
+          // Search back in the action list
+          curstring = curstring.split(" ").join("_").toLowerCase()
+          var actionItem = actionlist.find(data => data.autocomplete.split(" ").join("_").toLowerCase() === curstring)
+          if (actionItem !== undefined) {
+            console.log("Found item: ", actionItem)
+
+            var jsonvalid = true
+            try {
+              const tmp = String(JSON.parse(actionItem.example))
+              if (!actionItem.example.includes("{") && !actionItem.example.includes("[")) {
+                jsonvalid = false
+              }
+            } catch (e) {
+              jsonvalid = false
+            }
+          }
+        }
+      } 
+
+      selectedTrigger.parameters[count].value = data      
+      setSelectedTrigger(selectedTrigger);
+      console.log("get into trigger controller", selectedTrigger,data)
+    }
 		//setUpdate(Math.random())
 	}
 
@@ -22101,7 +22586,7 @@ const releaseToConnectLabel = "Release to Connect"
 				fieldCount={editorData.field_number}
 				actionlist={editorData.actionlist}
 				fieldname={editorData.field_id}
-
+        selectedTrigger={selectedTrigger}
 				changeActionParameterCodeMirror={changeActionParameterCodeMirror}
         activeDialog={activeDialog}
         setActiveDialog={setActiveDialog}
@@ -22231,4 +22716,4 @@ const releaseToConnectLabel = "Release to Connect"
   );
 };
 
-export default AngularWorkflow;
+export default AngularWorkflow;
\ No newline at end of file