diff --git a/docs/nodes/creating-nodes/create-node.md b/docs/nodes/creating-nodes/create-node.md index eb3529ed4..81c6a70e9 100644 --- a/docs/nodes/creating-nodes/create-node.md +++ b/docs/nodes/creating-nodes/create-node.md @@ -4,12 +4,12 @@ Today, you will learn how to create your first node for n8n. ## Prerequisites You have knowledge of: -- JavaScript +- JavaScript/TypeScript - REST APIs - Expressions in n8n Install the following tools: -- **GitHub CLI:** You can find instructions on how to install it [here](https://cli.github.com/). +- **Git:** You can find instructions on how to install Git [here](https://git-scm.com/downloads). - **Node.js and npm:** You can find instructions how to install both using nvm (Node Version Manager) [here](https://github.com/nvm-sh/nvm). The current minimum version is `14.15`. In case you already have installed Node.js, you can check your current version with following command: ```bash node -v @@ -27,10 +27,10 @@ For the sake of brevity, we will only showcase how to add the functionality to c ## Cloning the repository -To download the project, run the following command in your terminal: +In GitHub, fork the [n8n repository](https://github.com/n8n-io/n8n). Clone it by running the following command in your terminal (don't forget to replace `` with your GitHub username): ```bash -gh repo fork n8n-io/n8n --remote=true --clone=true && cd n8n +git clone https://github.com//n8n.git && cd n8n ``` n8n is built from four main packages: @@ -44,7 +44,8 @@ All these packages are under the `/packages` folder in the main n8n folder. We w - The folder `credentials` contains all the credentials that the different nodes use. Each node can define multiple credentials. For example, OAuth2 or API Key. Each credential requires different parameters that the user will have to input. The credentials data that the user provides is stored in an encrypted format in n8n's database. - The file `package.json` contains all the npm packages that the nodes use. It also contains all the nodes and credentials that are loaded when n8n is started. -![n8n folder structure](./images/n8n-folder-structure.png) + + ## Creating the node @@ -143,7 +144,7 @@ npm run dev Double-clicking on the FriendGrid node will open the Node Editor View. It will be empty since we haven't added any UI components yet. Luckily, n8n provides predefined JSON-based UI components that we can use to ask the user for different types of data. -FriendGrid's [docs](https://sendgrid.com/docs/api-reference/) mention that to create a contact, we need to provide the following pieces of information: +SendGrid's [docs](https://sendgrid.com/docs/api-reference/) mention that to create a contact, we need to provide the following pieces of information: - email - Required - first_name - Optional - last_name - Optional @@ -465,8 +466,8 @@ async execute(this: IExecuteFunctions): Promise { // get email input const email = this.getNodeParameter('email', i) as string; - // i = 1 print ricardo@n8n.io - // i = 2 print hello@n8n.io + // i = 1 returns ricardo@n8n.io + // i = 2 returns hello@n8n.io // get additional fields input const additionalFields = this.getNodeParameter('additionalFields', i) as IDataObject; diff --git a/docs/nodes/creating-nodes/images/collection.png b/docs/nodes/creating-nodes/images/collection.png new file mode 100644 index 000000000..3c6c65271 Binary files /dev/null and b/docs/nodes/creating-nodes/images/collection.png differ diff --git a/docs/nodes/creating-nodes/node-elements.md b/docs/nodes/creating-nodes/node-elements.md index cd691540a..d28d58ce7 100644 --- a/docs/nodes/creating-nodes/node-elements.md +++ b/docs/nodes/creating-nodes/node-elements.md @@ -11,54 +11,54 @@ The `string` type is used to input string values. Basic configuration ```typescript - { - displayName: Name, // The value the user would see in the UI - name: name, // The name use to reference the element UI within the code - type: string, - required: true, // Whether the field is required or not - default: 'n8n', // Value that would be set by default - description: 'The name of the user', - }, +{ + displayName: Name, // The value the user would see in the UI + name: name, // The name use to reference the element UI within the code + type: string, + required: true, // Whether the field is required or not + default: 'n8n', // Value that would be set by default + description: 'The name of the user', +}, ``` -![String](./images/string.png) + Variation for inputting passwords ```typescript - { - displayName: 'Password', - name: 'password', - type: 'string', - required: true, - typeOptions: { - password: true, - }, - default: '', - description: `User's password`, +{ + displayName: 'Password', + name: 'password', + type: 'string', + required: true, + typeOptions: { + password: true, + }, + default: '', + description: `User's password`, - }, +}, ``` -![Password](./images/password.png) + Variation with multiple rows ```typescript - { - displayName: 'Description', - name: 'description', - type: 'string', - required: true, - typeOptions: { - rows: 4, - }, - default: '', - description: 'Description', - }, +{ + displayName: 'Description', + name: 'description', + type: 'string', + required: true, + typeOptions: { + rows: 4, + }, + default: '', + description: 'Description', +}, ``` -![Mutiple rows](./images/multiple-rows.png) + ## Number @@ -68,40 +68,40 @@ The `number` type is used to input numbers. Basic configuration ```typescript - { - displayName: 'Age', - name: 'age', - type: 'number', - required: true, - typeOptions: { - maxValue: 10, - minValue: 0, - numberStepSize: 1, - }, - default: 10, - description: 'Your current age', - }, +{ + displayName: 'Age', + name: 'age', + type: 'number', + required: true, + typeOptions: { + maxValue: 10, + minValue: 0, + numberStepSize: 1, + }, + default: 10, + description: 'Your current age', +}, ``` -![Number](./images/number.png) + Variation with decimal points ```typescript - { - displayName: 'Amount', - name: 'amount', - type: 'number', - required: true, - typeOptions: { - numberPrecision: 2, - }, - default: 10.00, - description: 'Your current amount', +{ + displayName: 'Amount', + name: 'amount', + type: 'number', + required: true, + typeOptions: { + numberPrecision: 2, }, + default: 10.00, + description: 'Your current amount', +}, ``` -![Decimal](./images/decimal.png) + ## Collection @@ -109,74 +109,72 @@ Variation with decimal points The `collection` type is used to input a collection of fields. For example, additional fields (or optional fields). ```typescript - { - displayName: 'Additional Fields', - name: 'additionalFields', - type: 'collection', - description: 'Fields optional for the operation', - placeholder: 'Add Field', // This for the button to add fields - displayOptions: { - show: { - operation: [ - 'create', - ], - resource: [ - 'customer', - ], - }, - }, - default: {}, // The fields that will be selected by default - options: [ // The fields contained in the Additional Fields collection - { - displayName: 'Address', - name: 'address', - type: 'string', - default: '', - description: 'The address of the customer', - }, - { - displayName: 'Telephone Number', - name: 'telephoneNumber', - type: 'string', - default: '', - description: 'The telephone number of the customer.', - }, - ], - }, +{ + displayName: 'Filters', + name: 'filters', + type: 'collection', + placeholder: 'Add Field', + default: {}, + options: [ + { + displayName: 'Type', + name: 'type', + type: 'options', + options: [ + { + name: 'Automated', + value: 'automated', + }, + { + name: 'Past', + value: 'past', + }, + { + name: 'Upcoming', + value: 'upcoming', + }, + ], + default: '', + }, + ], +}, ``` + + ## Datetime The `dateTime` type provides a calendar from which you can pick a specific date and time. ```typescript - { - displayName: 'Modified Since', - name: 'modified_since', - type: 'dateTime', - default: '', - description: 'The date and time when the file was last modified', - }, +{ + displayName: 'Modified Since', + name: 'modified_since', + type: 'dateTime', + default: '', + description: 'The date and time when the file was last modified', +}, ``` -![Datetime](./images/datetime.png) + + ## Boolean The `boolean` type is used to input a value that is either true or false. It is shown as a toggle that can be either on or off. ```typescript - { - displayName: 'Wait for Image', - name: 'waitForImage', - type: 'boolean', - default: true, // Initial state of the toggle - description: 'Whether to wait for the image or not', - }, +{ + displayName: 'Wait for Image', + name: 'waitForImage', + type: 'boolean', + default: true, // Initial state of the toggle + description: 'Whether to wait for the image or not', +}, ``` -![Boolean](./images/boolean.png) + ## Color @@ -184,15 +182,15 @@ The `boolean` type is used to input a value that is either true or false. It is The `color` type provides a color palette from which a specific color can be selected. ```typescript - { - displayName: 'Background Color', - name: 'backgroundColor', - type: 'color', - default: '', // Initially selected color - }, +{ + displayName: 'Background Color', + name: 'backgroundColor', + type: 'color', + default: '', // Initially selected color +}, ``` -![Color](./images/color.png) + ## Options @@ -200,26 +198,26 @@ The `color` type provides a color palette from which a specific color can be sel The `options` type is used to provide options from which a single one has to be selected. ```typescript - { - displayName: 'Resource', - name: 'resource', - type: 'options', - options: [ - { - name: 'Image', - value: 'image', - }, - { - name: 'Template', - value: 'template', - }, - ], - default: 'image', // The initially selected option - description: 'Resource to consume', - }, +{ + displayName: 'Resource', + name: 'resource', + type: 'options', + options: [ + { + name: 'Image', + value: 'image', + }, + { + name: 'Template', + value: 'template', + }, + ], + default: 'image', // The initially selected option + description: 'Resource to consume', +}, ``` -![Options](./images/options.png) + ## Multi Options @@ -227,26 +225,26 @@ The `options` type is used to provide options from which a single one has to be The `multiOptions` type is used to provide options from which many can be selected. ```typescript - { - displayName: 'Events', - name: 'events', - type: 'multiOptions', - options: [ - { - name: 'Plan Created', - value: 'planCreated', - }, - { - name: 'Plan Deleted', - value: 'planDeleted', - }, - ], - default: [], // Initially selected options - description: 'The events to be monitored', - }, +{ + displayName: 'Events', + name: 'events', + type: 'multiOptions', + options: [ + { + name: 'Plan Created', + value: 'planCreated', + }, + { + name: 'Plan Deleted', + value: 'planDeleted', + }, + ], + default: [], // Initially selected options + description: 'The events to be monitored', +}, ``` -![MultiOptions](./images/multioptions.png) + ## Fixed Collection @@ -288,7 +286,7 @@ The `fixedCollection? type is used to present groups of fields that are semantic }, ``` -![Fixed Collection](./images/fixed-collection.png) + ## JSON @@ -300,26 +298,9 @@ The `json` type is used to input data formatted as JSON. displayName: 'Content (JSON)', name: 'content', type: 'json', - displayOptions: { - show: { - source: [ - 'adminApi', - ], - resource: [ - 'post', - ], - operation: [ - 'create', - ], - contentFormat: [ - 'mobileDoc', - ], - }, - }, - default: '', description: '', }, ``` -![JSON](./images/json.png) +