mirrors/n8n-docs
2
0
Fork 0
mirror of https://github.com/n8n-io/n8n-docs.git synced 2025-11-20 17:48:34 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

🔨 Updates based on feedback

Browse Source
This commit is contained in:
Tanay Pant 2021-02-18 10:25:04 +01:00
parent ea0cd97a9c
commit 3cf751db1b
3 changed files with 160 additions and 178 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
docs/nodes/creating-nodes/create-node.md
View File

@ -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 `<USERNAME>` with your GitHub username):
```bash
gh repo fork n8n-io/n8n --remote=true --clone=true && cd n8n
git clone https://github.com/<USERNAME>/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)
<img src="./images/n8n-folder-structure.png" width="500">
## 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<INodeExecutionData[][]> {
// 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;

BIN
docs/nodes/creating-nodes/images/collection.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 101 KiB

321
docs/nodes/creating-nodes/node-elements.md
View File

@ -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)
<img src="./images/string.png" width="350">
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)
<img src="./images/password.png" width="350">
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)
<img src="./images/multiple-rows.png" width="350">
## 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)
<img src="./images/number.png" width="350">
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)
<img src="./images/decimal.png" width="350">
## 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: '',
},
],
},
```
<img src="./images/collection.png" width="350">
## 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)
<img src="./images/datetime.png" width="350">
## 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)
<img src="./images/boolean.png" width="350">
## 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)
<img src="./images/color.png" width="300">
## 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)
<img src="./images/options.png" width="350">
## 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)
<img src="./images/multioptions.png" width="350">
## 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)
<img src="./images/fixed-collection.png" width="350">
## 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)
<img src="./images/json.png" width="350">