Nested displayOptions for having multiple fields with the same name

Tips & Tricks
1

I am trying to extend the Taiga node with support for tasks and userstories.
There is one field, called status, that is implemented in all three types but is just called status.

I have two ways of implementing them. One working, but ugly, one more smooth, but not working.
Maybe you can give me an advice, why it does not work.

First working solution is to create all additional fields three times with display options for each of them like the following:

		displayOptions: {
		show: {
			resource: [
				'issue',
			],
			operation: [
				'create',
			],
		},
	},
do stuff.. another display options, same do stuff but with the one status field formatted different.

This solution works but I’m not satisfied with it to make a PR.
See the changes:
https://github.com/cmprmsd/n8n/commit/ad2a97e9e02b2a7cc510cc51e9c105f132f789a7

So I thought of nesting display options but that does not work for me:

displayName: 'Update Fields',
	name: 'updateFields',
	type: 'collection',
	placeholder: 'Add Field',
	default: {},
	displayOptions: {
		show: {
			resource: [
				'issue',
				'userstory',
				'task',
			],
			operation: [
				'update',
			],
		},
	},

and then I would have only to customize fields that are named the same in different contexts:

{
			displayName: 'Issue Status ID',
			name: 'status',
			type: 'options',
			displayOptions: {
				show: {
					resource: [
						'issue',
					],
					operation: [
						'update',
					],
				},
			},
			typeOptions: {
				loadOptionsMethod: 'getIssueStatuses',
			},
			default: '',
		},
		{
			displayName: 'User Story Status ID',
			name: 'status',
			type: 'options',
			displayOptions: {
				show: {
					resource: [
						'userstory',
					],
					operation: [
						'update',
					],
				},
			},
			typeOptions: {
				loadOptionsMethod: 'getUserstoryStatuses',
			},
			default: '',
		},
		{
			displayName: 'Task Status ID',
			name: 'status',
			type: 'options',
			displayOptions: {
				show: {
					resource: [
						'task',
					],
					operation: [
						'update',
					],
				},
			},

Do I have to go with option one and have tons of duplicated text?

1 Like
2

You can just one collection and control what is shown inside using the displayOptions. However, with an small tweek. Let’s say that we have a collection called additonalFields that will be shown when the resource is issue and the operation is created and updated. It should look like:

displayName: 'Additional Fields',
	name: 'additionalFields',
	type: 'collection',
	placeholder: 'Add Field',
	default: {},
	displayOptions: {
		show: {
			resource: [
				'issue',
			],
			operation: [
				'update',
                            'create''
			],
		},
	},

Within the collection, we have two fields: status and name. We want to show the field status when the operation is update and the field name when the operation is create. To achieve that, the fields should be configured/setup as follow:

displayName: 'Status',
	name: 'status',
	type: 'string',
	default: {},
	displayOptions: {
		show: {
			resource: [
				'/issue',
			],
			operation: [
				'/update',
			],
		},
	},


displayName: 'Name',
	name: 'name',
	type: 'string',
	default: {},
	displayOptions: {
		show: {
			resource: [
				'/issue',
			],
			operation: [
				'/create',
			],
		},
	},

Noticed the difference? To use a displayOptions within a collection the value need the prefix /.

Let me know that helps.

3

Thanks for your reply. I can’t get it to work though.

See the example here:

{// Global Update Fields
	displayName: 'Update Fields',
	name: 'updateFields',
	type: 'collection',
	placeholder: 'Add Field',
	default: {},
	displayOptions: {
		show: {
			resource: [
				'issue',
				'userstory',
				'task',
			],
			operation: [
				'update',
			],
		},
	},
	options: [
              {
			displayName: 'Assigned To',
			name: 'assigned_to',
			type: 'options',
			typeOptions: {
				loadOptionsDependsOn: [
					'projectId',
				],
				loadOptionsMethod: 'getProjectUsers',
			},
			default: '',
			description: 'User id to you want assign the issue to',
		},
{
			displayName: 'Issue Status ID',
			name: 'status',
			type: 'options',
			typeOptions: {
				loadOptionsMethod: 'getIssueStatuses',
			},
			displayOptions: {
				show: {
					resource: [
						'/issue',
					],
					operation: [
						'/update',
					],
				},
			},
			default: '',
		},
		{
			displayName: 'User Story Status ID',
			name: 'status',
			type: 'options',
			typeOptions: {
				loadOptionsMethod: 'getUserstoryStatuses',
			},
			default: '',
		},
		{
			displayName: 'Task Status ID',
			name: 'status',
			type: 'options',
			displayOptions: {
				show: {
					resource: [
						'/task',
					],
					operation: [
						'/update',
					],
				},
			},
			typeOptions: {
				loadOptionsMethod: 'getTaskStatuses',
			},
			default: '',
		},

In this example only the User Story Status ID gets displayed and of course for all three (task,story and issue).

With the display options within display options, it just gets never displayed.

4

Can you please create a PR as a draft so that I can test it?

5

Sure! :slight_smile:
https://github.com/cmprmsd/n8n/commit/e6f5609c00cf67dfa88c0241660574355574247d

For easy reference to my second way there is the copy of issueOperationFields.ts. I haven’t managed to cleanup the naming yet :smiley:

6

Did you have a change to test it out?
If not, I’ll just write it the way it’s working for me and create a PR, where changes might be needed then :smiley:

7

Sorry, have been quite busy. Send the PR and will check it out there.

8

Hi

I’m wondering if this has progressed any?

I’m interested in the Tasks and Stories features too :smile: wish I could contribute but I’m not really a developer…

9

Hey,
I started a merge request.

However ivov created another merge request and I’m happy if his will be merged :slight_smile:

Just follow both topics and you’ll be posted :wink:

1 Like
10

Awesome. Subscribed!