Switch Node UI Change - i am new to node-red, i want to change the UI of all the nodes, but to start with can someone tell me how to change the UI of the switch node to match the screenshot that i uploaded
Changing the appearance of nodes is not something you can do via settable options - this is something you would need to do in the source code of node-red.
Are you developing an application and want to use a customised version of Node-RED as core part of your application?
yes you are correct. my app wants the nodes to appear as this but also wants to use node-red for its usage. So i am trying to customize the ui of the nodes but it is pretty difficult
You are trying to make Node-RED do something it isn't designed for so it is no surprise that it is difficult.
Changes to the settings of a node are generally expected to happen via the node's config panel. A button on the outside of the node is, therefore, something that hasn't previously ever been done. The switch node specifically expands its output ports when you add new tests.
Because a change to a node's settings requires a (re)deploy, being able to make dynamic changes such as the one you suggest from the image don't make as much sense.
Also, node colours are set in the node's defining html file. It is possible to override these however by applying a custom theme with overrides since everything in the Editor UI is either HTML or SVG.
Changing the size and shape of the port indicators however would require code changes to Node-RED core code.
And it appears as though you want 2 input ports? This is not possible without changes to core code and likely wouldn't be very helpful anyway since flow processing is asynchronous and so there would be no simple way of coordinating multiple inputs. This has been discussed many times previously. You would have to replace the whole runtime to achieve something meaningful there I think.