n8n-nodes-base
Version:
Base nodes of n8n
675 lines (673 loc) • 24.4 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.appendAttributionToForm = exports.respondWithOptions = exports.formTriggerPanel = exports.formRespondMode = exports.formFieldsDynamic = exports.formFields = exports.ipAllowlist = exports.formDescription = exports.formTitle = exports.webhookPath = exports.placeholder = exports.formElementTypes = void 0;
const descriptions_1 = require("../../utils/descriptions");
// Shared form element types used in both formFields and formFieldsDynamic
exports.formElementTypes = [
{
name: 'Checkboxes',
value: 'checkbox',
},
{
name: 'Custom HTML',
value: 'html',
},
{
name: 'Date',
value: 'date',
},
{
name: 'Dropdown',
value: 'dropdown',
},
{
name: 'Email',
value: 'email',
},
{
name: 'File',
value: 'file',
},
{
name: 'Hidden Field',
value: 'hiddenField',
},
{
name: 'Number',
value: 'number',
},
{
name: 'Password',
value: 'password',
},
{
name: 'Radio Buttons',
value: 'radio',
},
{
name: 'Text Input',
value: 'text',
},
{
name: 'Textarea',
value: 'textarea',
},
];
exports.placeholder = `
<!-- Your custom HTML here --->
`.trimStart();
exports.webhookPath = {
displayName: 'Form Path',
name: 'path',
type: 'string',
default: '',
placeholder: 'webhook',
required: true,
description: "The final segment of the form's URL, both for test and production",
};
exports.formTitle = {
displayName: 'Form Title',
name: 'formTitle',
type: 'string',
default: '',
placeholder: 'e.g. Contact us',
required: true,
description: 'Shown at the top of the form',
};
exports.formDescription = {
displayName: 'Form Description',
name: 'formDescription',
type: 'string',
default: '',
placeholder: "e.g. We'll get back to you soon",
description: 'Shown underneath the Form Title. Can be used to prompt the user on how to complete the form. Accepts HTML. Does not accept <code><script></code>, <code><style></code> or <code><input></code> tags.',
typeOptions: {
rows: 2,
},
};
exports.ipAllowlist = {
displayName: 'IP(s) Allowlist',
name: 'ipWhitelist',
type: 'string',
placeholder: 'e.g. 127.0.0.1, 192.168.1.0/24',
default: '',
description: 'Comma-separated list of allowed IP addresses or CIDR ranges. Leave empty to allow all IPs.',
};
const formOptions = [
{
displayName: 'Values',
name: 'values',
values: [
{
displayName: 'Field Name',
name: 'fieldName',
description: 'The name of the field, used in input attributes and referenced by the workflow',
required: true,
type: 'string',
default: '',
displayOptions: {
hide: {
fieldType: ['html'],
},
show: {
'@version': [2.4],
},
},
},
{
displayName: 'Label',
name: 'fieldLabel',
type: 'string',
default: '',
placeholder: 'e.g. What is your name?',
description: 'Label that appears above the input field',
required: true,
displayOptions: {
hide: {
fieldType: ['hiddenField', 'html'],
},
show: {
'@version': [{ _cnd: { gte: 2.4 } }],
},
},
},
{
displayName: 'Field Name',
name: 'fieldLabel',
type: 'string',
default: '',
placeholder: 'e.g. What is your name?',
description: 'Label that appears above the input field',
required: true,
displayOptions: {
hide: {
fieldType: ['hiddenField', 'html'],
},
show: {
'@version': [{ _cnd: { lt: 2.4 } }],
},
},
},
{
displayName: 'Field Name',
name: 'fieldName',
description: 'The name of the field, used in input attributes and referenced by the workflow',
type: 'string',
default: '',
displayOptions: {
show: {
fieldType: ['hiddenField'],
'@version': [{ _cnd: { lt: 2.4 } }],
},
},
},
{
displayName: 'Element Type',
name: 'fieldType',
type: 'options',
default: 'text',
description: 'The type of field to add to the form',
// Update ALLOWED_FIELD_TYPES in packages/workflow/src/type-validation.ts when adding new field types
options: exports.formElementTypes,
required: true,
},
{
displayName: 'Element Name',
name: 'elementName',
type: 'string',
default: '',
placeholder: 'e.g. content-section',
description: 'Optional field. It can be used to include the html in the output.',
displayOptions: {
show: {
fieldType: ['html'],
},
},
},
{
displayName: 'Custom Field Name',
name: 'fieldName',
description: 'The name of the field, used in input attributes and referenced by the workflow',
type: 'string',
default: '',
displayOptions: {
hide: {
fieldType: ['html'],
},
show: {
'@version': [{ _cnd: { gte: 2.5 } }],
},
},
},
{
displayName: 'Placeholder',
name: 'placeholder',
description: 'Sample text to display inside the field',
type: 'string',
default: '',
displayOptions: {
hide: {
fieldType: ['dropdown', 'date', 'file', 'html', 'hiddenField', 'radio', 'checkbox'],
},
},
},
{
displayName: 'Default Value',
name: 'defaultValue',
description: 'Default value that will be pre-filled in the form field',
type: 'string',
default: '',
displayOptions: {
show: {
fieldType: ['text', 'number', 'email', 'textarea'],
},
},
},
{
displayName: 'Default Value',
name: 'defaultValue',
description: 'Default date value that will be pre-filled in the form field (format: YYYY-MM-DD)',
type: 'dateTime',
typeOptions: {
dateOnly: true,
},
default: '',
displayOptions: {
show: {
fieldType: ['date'],
},
},
},
{
displayName: 'Default Value',
name: 'defaultValue',
description: 'Default value that will be pre-selected. Must match one of the option labels.',
type: 'string',
default: '',
displayOptions: {
show: {
fieldType: ['dropdown', 'radio'],
},
},
},
{
displayName: 'Default Value',
name: 'defaultValue',
description: 'Default value(s) that will be pre-selected. Must match one or multiple of the option labels. Separate multiple pre-selected options with a comma.',
type: 'string',
default: '',
displayOptions: {
show: {
fieldType: ['checkbox'],
},
},
},
{
displayName: 'Field Value',
name: 'fieldValue',
description: 'Input value can be set here or will be passed as a query parameter via Field Name if no value is set',
type: 'string',
default: '',
displayOptions: {
show: {
fieldType: ['hiddenField'],
},
},
},
{
displayName: 'Field Options',
name: 'fieldOptions',
placeholder: 'Add Field Option',
description: 'List of options that can be selected from the dropdown',
type: 'fixedCollection',
default: { values: [{ option: '' }] },
required: true,
displayOptions: {
show: {
fieldType: ['dropdown'],
},
},
typeOptions: {
multipleValues: true,
sortable: true,
},
options: [
{
displayName: 'Values',
name: 'values',
values: [
{
displayName: 'Option',
name: 'option',
type: 'string',
default: '',
},
],
},
],
},
{
displayName: 'Checkboxes',
name: 'fieldOptions',
placeholder: 'Add Checkbox',
type: 'fixedCollection',
default: { values: [{ option: '' }] },
required: true,
displayOptions: {
show: {
fieldType: ['checkbox'],
},
},
typeOptions: {
multipleValues: true,
sortable: true,
},
options: [
{
displayName: 'Values',
name: 'values',
values: [
{
displayName: 'Checkbox Label',
name: 'option',
type: 'string',
default: '',
},
],
},
],
},
{
displayName: 'Radio Buttons',
name: 'fieldOptions',
placeholder: 'Add Radio Button',
type: 'fixedCollection',
default: { values: [{ option: '' }] },
required: true,
displayOptions: {
show: {
fieldType: ['radio'],
},
},
typeOptions: {
multipleValues: true,
sortable: true,
},
options: [
{
displayName: 'Values',
name: 'values',
values: [
{
displayName: 'Radio Button Label',
name: 'option',
type: 'string',
default: '',
},
],
},
],
},
{
displayName: 'Multiple Choice is a legacy option, please use Checkboxes or Radio Buttons field type instead',
name: 'multiselectLegacyNotice',
type: 'notice',
default: '',
displayOptions: {
show: {
multiselect: [true],
fieldType: ['dropdown'],
'@version': [{ _cnd: { lt: 2.3 } }],
},
},
},
{
displayName: 'Multiple Choice',
name: 'multiselect',
type: 'boolean',
default: false,
description: 'Whether to allow the user to select multiple options from the dropdown list',
displayOptions: {
show: {
fieldType: ['dropdown'],
'@version': [{ _cnd: { lt: 2.3 } }],
},
},
},
{
displayName: 'Limit Selection',
name: 'limitSelection',
type: 'options',
default: 'unlimited',
options: [
{
name: 'Exact Number',
value: 'exact',
},
{
name: 'Range',
value: 'range',
},
{
name: 'Unlimited',
value: 'unlimited',
},
],
displayOptions: {
show: {
fieldType: ['checkbox'],
},
},
},
{
displayName: 'Number of Selections',
name: 'numberOfSelections',
type: 'number',
default: 1,
typeOptions: {
numberPrecision: 0,
minValue: 1,
showEvenWhenOptional: true,
},
displayOptions: {
show: {
fieldType: ['checkbox'],
limitSelection: ['exact'],
},
},
},
{
displayName: 'Minimum Selections',
name: 'minSelections',
type: 'number',
default: 0,
typeOptions: {
numberPrecision: 0,
minValue: 0,
showEvenWhenOptional: true,
},
displayOptions: {
show: {
fieldType: ['checkbox'],
limitSelection: ['range'],
},
},
},
{
displayName: 'Maximum Selections',
name: 'maxSelections',
type: 'number',
default: 1,
typeOptions: {
numberPrecision: 0,
minValue: 1,
showEvenWhenOptional: true,
},
displayOptions: {
show: {
fieldType: ['checkbox'],
limitSelection: ['range'],
},
},
},
{
displayName: 'HTML',
name: 'html',
typeOptions: {
editor: 'htmlEditor',
},
type: 'string',
noDataExpression: true,
default: exports.placeholder,
description: 'HTML elements to display on the form page',
hint: 'Does not accept <code><script></code>, <code><style></code> or <code><input></code> tags',
displayOptions: {
show: {
fieldType: ['html'],
},
},
},
{
displayName: 'Multiple Files',
name: 'multipleFiles',
type: 'boolean',
default: true,
description: 'Whether to allow the user to select multiple files from the file input or just one',
displayOptions: {
show: {
fieldType: ['file'],
},
},
},
{
displayName: 'Accepted File Types',
name: 'acceptFileTypes',
type: 'string',
default: '',
description: 'Comma-separated list of allowed file extensions',
hint: 'Leave empty to allow all file types',
placeholder: 'e.g. .jpg, .png',
displayOptions: {
show: {
fieldType: ['file'],
},
},
},
{
displayName: "The displayed date is formatted based on the locale of the user's browser",
name: 'formatDate',
type: 'notice',
default: '',
displayOptions: {
show: {
fieldType: ['date'],
},
},
},
{
displayName: 'Required Field',
name: 'requiredField',
type: 'boolean',
default: false,
description: 'Whether to require the user to enter a value for this field before submitting the form',
displayOptions: {
hide: {
fieldType: ['html', 'hiddenField'],
},
},
},
],
},
];
exports.formFields = {
displayName: 'Form Elements',
name: 'formFields',
placeholder: 'Add Form Element',
type: 'fixedCollection',
default: {},
typeOptions: {
multipleValues: true,
sortable: true,
fixedCollection: {
itemTitle: '={{ $collection.item.properties.find(p => p.name === "fieldType").options.find(o => o.value === $collection.item.value.fieldType).name }}',
},
},
options: formOptions,
};
exports.formFieldsDynamic = {
displayName: 'Form Elements',
name: 'formFields',
placeholder: 'Add Form Element',
type: 'fixedCollection',
default: {},
typeOptions: {
multipleValues: true,
sortable: true,
hideOptionalFields: true,
addOptionalFieldButtonText: 'Add Attributes',
fixedCollection: {
itemTitle: '={{ $collection.item.properties.find(p => p.name === "fieldType").options.find(o => o.value === $collection.item.value.fieldType).name }}',
},
},
options: formOptions,
};
exports.formRespondMode = {
displayName: 'Respond When',
name: 'responseMode',
type: 'options',
options: [
{
name: 'Form Is Submitted',
value: 'onReceived',
description: 'As soon as this node receives the form submission',
},
{
name: 'Workflow Finishes',
value: 'lastNode',
description: 'When the last node of the workflow is executed',
},
{
name: "Using 'Respond to Webhook' Node",
value: 'responseNode',
description: "When the 'Respond to Webhook' node is executed",
},
],
default: 'onReceived',
description: 'When to respond to the form submission',
};
exports.formTriggerPanel = {
header: 'Pull in a test form submission',
executionsHelp: {
inactive: "Form Trigger has two modes: test and production. <br /> <br /> <b>Use test mode while you build your workflow</b>. Click the 'Execute step' button, then fill out the test form that opens in a popup tab. The executions will show up in the editor.<br /> <br /> <b>Use production mode to run your workflow automatically</b>. Publish the workflow, then make requests to the production URL. Then every time there's a form submission via the Production Form URL, the workflow will execute. These executions will show up in the executions list, but not in the editor.",
active: "Form Trigger has two modes: test and production. <br /> <br /> <b>Use test mode while you build your workflow</b>. Click the 'Execute step' button, then fill out the test form that opens in a popup tab. The executions will show up in the editor.<br /> <br /> <b>Use production mode to run your workflow automatically</b>. Publish the workflow, then make requests to the production URL. Then every time there's a form submission via the Production Form URL, the workflow will execute. These executions will show up in the executions list, but not in the editor.",
},
activationHint: {
active: "This node will also trigger automatically on new form submissions (but those executions won't show up here).",
inactive: 'Publish this workflow to have it also run automatically for new form submissions created via the Production URL.',
},
};
exports.respondWithOptions = {
displayName: 'Form Response',
name: 'respondWithOptions',
type: 'fixedCollection',
placeholder: 'Add option',
default: { values: { respondWith: 'text' } },
options: [
{
displayName: 'Values',
name: 'values',
values: [
{
displayName: 'Respond With',
name: 'respondWith',
type: 'options',
default: 'text',
options: [
{
name: 'Form Submitted Text',
value: 'text',
description: 'Show a response text to the user',
},
{
name: 'Redirect URL',
value: 'redirect',
description: 'Redirect the user to a URL',
},
],
},
{
displayName: 'Text to Show',
name: 'formSubmittedText',
description: "The text displayed to users after they fill the form. Leave it empty if don't want to show any additional text.",
type: 'string',
default: 'Your response has been recorded',
displayOptions: {
show: {
respondWith: ['text'],
},
},
},
{
// eslint-disable-next-line n8n-nodes-base/node-param-display-name-miscased
displayName: 'URL to Redirect to',
name: 'redirectUrl',
description: 'The URL to redirect users to after they fill the form. Must be a valid URL.',
type: 'string',
default: '',
validateType: 'url',
placeholder: 'e.g. http://www.n8n.io',
displayOptions: {
show: {
respondWith: ['redirect'],
},
},
},
],
},
],
};
exports.appendAttributionToForm = {
...descriptions_1.appendAttributionOption,
description: 'Whether to include the link “Form automated with n8n” at the bottom of the form',
};
//# sourceMappingURL=common.descriptions.js.map