How to add option at UI form?

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\"]"
    },
}

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)}}'.

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.

2 Likes

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.