Custom Node Text Icons + Dynamic HTML Title (for browser tab)

Hey there,
We have a custom Node that we are trying to add functionality to so that it can programmatically access the DOM (in our case, change the logo of the Node dynamically based on User Provided Parameters + Change the HTML Title so that the user sees their current workflow name in their browser tab). I got it all working in my browser but when I went to try it in my custom Node using document.getElementById I got the following error:

Cannot find name ‘document’. Do you need to change your target library? Try changing the lib compiler option to include ‘dom’.

Based on research I did, it looks like for this to work ‘DOM’ needs to be added to the “lib” list in compilerOptions of tsconfig.json.

Could this be added to tsconfig.json? Or could we modify the n8n-node-dev build command to accept additional parameters like “lib” values for tsconfig.json?

Thanks!
Dakota Heyman

Sorry do not understand. Where do you have that code? Because can not think of a location for that of the top of my head. After all does all the code node code get executed in the backend and as the backend is Node.js and not the browser, there will be no document.

Hey @jan - you’re totally right, I am mixing up server side and client side javascript. Sorry about that. In that case I’m wondering if we could get this functionality a different way. Looking at https://github.com/n8n-io/n8n/blob/0ac97c65232798a2c3c32e249a5358185e014ce2/packages/editor-ui/src/components/NodeIcon.vue, it looks like type and path are being set, with a condition for type being a file path. Could we have another condition where type is a string/text? It would be useful to be able to have our node icon to be text. I’m not sure how the sizing would work on long words but for our use case, our text would only be like 4 characters long.

As for our other use case, I’m not sure if there is a solution without us modifying The Vue code. For our users, they may be running multiple n8n flows at once across multiple tabs in their browser. And so it would be useful if the tab name (HTML title) could reflect something other than n8n.io - Workflow Automation. Ideally it would be the workflow name and maybe a status like “Executing” or “Completed” in front of it. (ex: “Running: Workflow1”). But as mentioned, I don’t know the feasibility of this.

Thanks!
Dakota

Ok understand now. Yes both should be possible.

Node-Text: Currently we have “fa” and “file”. It would theoretically be possible to add another one “text”. Which does what you described to then simply display some text instead of the image.

Title: Yes sounds like a good idea. Having something like: `n8n.io - Workflow1 - Running"

Can however not promise you that we will time for those features soon. If you, however, find time yourself and create a PR I will merge it and then release it with the next version.

Thanks Jan,
I understand these won’t get added right away. If I have time, I will look into creating a PR for them - otherwise I will look for them in a future release.
Thanks!

@dakotaheyman wanted to inform you that the dynamic title got implemented by @Ronalds_Upenieks and will be released with the next version.

2 Likes

That’s awesome - Thanks!

Just got released with [email protected]