How to add option at UI form?

Questions
,
1

Describe the issue/error/question

I tried to use json type to let user add an option to json body,but n8n transfer string type at json body

I expect json body is:

{
    "text": {
        "mentioned_list": ["1","bb","c"]
    },
}

here’s the code

{
				displayName: 'Mentioned List',
				name: 'mentionedList',
				type: 'json',
				required: false,
				default: null,
				description: "description",
				displayOptions: {
					show: {
						messageType: ['text'],
					},
				},
				routing: {
					request: {
						body: {
							text: {
								mentioned_list: '={{$parameter.mentionedList}}',
							},
						},
					},
				},
			},

I got the json body which use above code is:

{
    "text": {
        "mentioned_list": "[\"1\",\"bb\",\"c\"]"
    },
}
2

Hi @x9_Nash, I am not super familiar with the declarative node building style you’re using node from the looks of it yet (perhaps @marcus can chip in on this one). But my first thought would be to simply try and parse your string on the fly. So instead of mentioned_list: '={{$parameter.mentionedList}}' perhaps do something like mentioned_list: '={{JSON.parse($parameter.mentionedList)}}'.

3

Hey @x9_Nash,
in n8n we do support something we call preSend actions allowing you to manipulate http request options like the body. Here is an example trying to parse your text.mentioned_list as json.

async function parseJsonPreSendAction(
	this: IExecuteSingleFunctions,
	requestOptions: IHttpRequestOptions,
): Promise<IHttpRequestOptions> {
	const body = (requestOptions.body || {}) as { text: { mentioned_list: string } };
	body.text.mentioned_list = JSON.parse(body.text.mentioned_list);
	return requestOptions;
}

To use presend actions you can set them like this

image

It also seems like you are trying to set an array of strings so as an alternative you could look into using type: "string" with multipleValues: true, e.g. how the AgileCrm node does it here.

3 Likes
4

Thks for your solution! type: "string" with multipleValues: true resolve my problem,it is an easy and useful way.

Is there any way to help edit document? I think document should write this,add option is a common and usual point.

Thanks aging, you teach me a way which use preSend to debug.

5

Where can I add preSend with declarative style?
Is there such a postResult too?
Where is it’s doc?

6

Hi @rostamiani,
you can set preSend functions using the node parameter’s routing.send.preSend property. Our HighLevel node is in decarative style making use of preSend like here.

To change responses you can use the node parameter’s routing.output.postReceive property like here.

It’s generally a good idea to look at our existing node implementations when developing your own custom nodes. To identify our declarative nodes you can look for nodes using the requestDefaults property without having an execute function like: