fix(n8n Form Node): Support expressions in completion page (#11781)

Co-authored-by: Shireen Missi <shireen@n8n.io>

packages/nodes-base/nodes/Form/Form.node.ts

@@ -20,6 +20,7 @@ import {
 
 import { formDescription, formFields, formTitle } from '../Form/common.descriptions';
 import { prepareFormReturnItem, renderForm, resolveRawData } from '../Form/utils';
+import { type CompletionPageConfig } from './interfaces';
 
 const pageProperties = updateDisplayOptions(
 	{
@@ -267,22 +268,17 @@ export class Form extends Node {
 		const method = context.getRequestObject().method;
 
 		if (operation === 'completion') {
-			const respondWith = context.getNodeParameter('respondWith', '') as string;
+			const staticData = context.getWorkflowStaticData('node');
+			const id = `${context.getExecutionId()}-${context.getNode().name}`;
+			const config = staticData?.[id] as CompletionPageConfig;
+			delete staticData[id];
 
-			if (respondWith === 'redirect') {
+			if (config.redirectUrl) {
-				const redirectUrl = context.getNodeParameter('redirectUrl', '') as string;
+				res.redirect(config.redirectUrl);
-				res.redirect(redirectUrl);
+				return { noWebhookResponse: true };
-				return {
-					noWebhookResponse: true,
-				};
 			}
 
-			const completionTitle = context.getNodeParameter('completionTitle', '') as string;
+			let title = config.pageTitle;
-			const completionMessage = context.getNodeParameter('completionMessage', '') as string;
-			const options = context.getNodeParameter('options', {}) as {
-				formTitle: string;
-			};
-			let title = options.formTitle;
 			if (!title) {
 				title = context.evaluateExpression(
 					`{{ $('${trigger?.name}').params.formTitle }}`,
@@ -293,15 +289,13 @@ export class Form extends Node {
 			) as boolean;
 
 			res.render('form-trigger-completion', {
-				title: completionTitle,
+				title: config.completionTitle,
-				message: completionMessage,
+				message: config.completionMessage,
 				formTitle: title,
 				appendAttribution,
 			});
 
-			return {
+			return { noWebhookResponse: true };
-				noWebhookResponse: true,
-			};
 		}
 
 		if (method === 'GET') {
@@ -415,6 +409,22 @@ export class Form extends Node {
 		if (operation !== 'completion') {
 			const waitTill = new Date(WAIT_TIME_UNLIMITED);
 			await context.putExecutionToWait(waitTill);
+		} else {
+			const staticData = context.getWorkflowStaticData('node');
+			const completionTitle = context.getNodeParameter('completionTitle', 0, '') as string;
+			const completionMessage = context.getNodeParameter('completionMessage', 0, '') as string;
+			const redirectUrl = context.getNodeParameter('redirectUrl', 0, '') as string;
+			const options = context.getNodeParameter('options', 0, {}) as { formTitle: string };
+			const id = `${context.getExecutionId()}-${context.getNode().name}`;
+
+			const config: CompletionPageConfig = {
+				completionTitle,
+				completionMessage,
+				redirectUrl,
+				pageTitle: options.formTitle,
+			};
+
+			staticData[id] = config;
 		}
 
 		return [context.getInputData()];

packages/nodes-base/nodes/Form/interfaces.ts

@@ -31,4 +31,11 @@ export type FormTriggerData = {
 	buttonLabel?: string;
 };
 
+export type CompletionPageConfig = {
+	pageTitle?: string;
+	completionMessage?: string;
+	completionTitle?: string;
+	redirectUrl?: string;
+};
+
 export const FORM_TRIGGER_AUTHENTICATION_PROPERTY = 'authentication';

packages/nodes-base/nodes/Form/test/Form.node.test.ts

@@ -1,3 +1,4 @@
+import type { Response, Request } from 'express';
 import type { MockProxy } from 'jest-mock-extended';
 import { mock } from 'jest-mock-extended';
 import type {
@@ -7,7 +8,7 @@ import type {
 	IWebhookFunctions,
 	NodeTypeAndVersion,
 } from 'n8n-workflow';
-import type { Response, Request } from 'express';
+
 import { Form } from '../Form.node';
 
 describe('Form Node', () => {
@@ -15,6 +16,8 @@ describe('Form Node', () => {
 	let mockExecuteFunctions: MockProxy<IExecuteFunctions>;
 	let mockWebhookFunctions: MockProxy<IWebhookFunctions>;
 
+	const formCompletionNodeName = 'Form Completion';
+	const testExecutionId = 'test_execution_id';
 	beforeEach(() => {
 		form = new Form();
 		mockExecuteFunctions = mock<IExecuteFunctions>();
@@ -68,7 +71,12 @@ describe('Form Node', () => {
 			]);
 			mockExecuteFunctions.getChildNodes.mockReturnValue([]);
 			mockExecuteFunctions.getInputData.mockReturnValue(inputData);
-			mockExecuteFunctions.getNode.mockReturnValue(mock<INode>());
+			mockExecuteFunctions.getNode.mockReturnValue(mock<INode>({ name: formCompletionNodeName }));
+			mockExecuteFunctions.getExecutionId.mockReturnValue(testExecutionId);
+
+			mockExecuteFunctions.getWorkflowStaticData.mockReturnValue({
+				[`${testExecutionId}-${formCompletionNodeName}`]: { redirectUrl: 'test' },
+			});
 
 			const result = await form.execute(mockExecuteFunctions);
 
@@ -172,11 +180,16 @@ describe('Form Node', () => {
 
 			const mockResponseObject = {
 				render: jest.fn(),
+				redirect: jest.fn(),
 			};
 			mockWebhookFunctions.getResponseObject.mockReturnValue(
 				mockResponseObject as unknown as Response,
 			);
-			mockWebhookFunctions.getNode.mockReturnValue(mock<INode>());
+			mockWebhookFunctions.getNode.mockReturnValue(mock<INode>({ name: formCompletionNodeName }));
+			mockWebhookFunctions.getExecutionId.mockReturnValue(testExecutionId);
+			mockWebhookFunctions.getWorkflowStaticData.mockReturnValue({
+				[`${testExecutionId}-${formCompletionNodeName}`]: { redirectUrl: '' },
+			});
 
 			const result = await form.webhook(mockWebhookFunctions);