# How to use an ui-button with a http in node

**URL:** <https://discourse.nodered.org/t/how-to-use-an-ui-button-with-a-http-in-node/60486>\
**Category:** General\
**Created:** [29 March 2022 10:24 UTC](https://discourse.nodered.org/t/how-to-use-an-ui-button-with-a-http-in-node/60486 "2022-03-29T10:24:09Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![between](https://avatars.discourse-cdn.com/v4/letter/b/c5a1d2/32.png) [@between](https://discourse.nodered.org/u/between)\
**Post date:** [29 March 2022 10:24 UTC](https://discourse.nodered.org/t/how-to-use-an-ui-button-with-a-http-in-node/60486/1 "2022-03-29T10:24:09Z")

</div>

I want to export a file by clicking a button. There are the flows I'm using for:

```auto
[{"id":"7adc8e2c.3a56d","type":"function","z":"339f2e0a.80f992","name":"Base path","func":"//var basePath = \"/home/pi/Documents/S0_data/\";\nvar basePath = \"/var/snap/node-red/675/\";\nvar filename = msg.req.params.fn;\n\n\nif(filename.includes(\"..\\\\\")){\n msg.payload = \"Illegal file path\";\n msg.statusCode = 405;//not allowed\n return [null, msg];//fire output 2\n} else if(filename.includes(\"../\")){\n msg.payload = \"Illegal file path\";\n msg.statusCode = 405;//not allowed\n return [null, msg];//fire output 2\n} \n//TODO: add more checks\n\nmsg.filename = basePath + filename;\nreturn [msg, null];//fire output 1\n\n\n","outputs":2,"noerr":0,"initialize":"","finalize":"","x":240,"y":140,"wires":[["a1d36f5f.bfd8d"],["74bf307e.adb05"]]},{"id":"74bf307e.adb05","type":"http response","z":"339f2e0a.80f992","name":"","statusCode":"","headers":{},"x":410,"y":200,"wires":[]},{"id":"a1d36f5f.bfd8d","type":"file in","z":"339f2e0a.80f992","name":"","filename":"","format":"","chunk":false,"sendError":false,"encoding":"none","x":410,"y":140,"wires":[["74bf307e.adb05"]]},{"id":"ea09d67e.e1bda8","type":"catch","z":"339f2e0a.80f992","name":"","scope":null,"uncaught":false,"x":100,"y":200,"wires":[["68386e48.5dacf"]]},{"id":"68386e48.5dacf","type":"function","z":"339f2e0a.80f992","name":"Set 404","func":"msg.payload = msg.error;\nmsg.statusCode = 404;//resource not found\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":240,"y":200,"wires":[["74bf307e.adb05"]]},{"id":"3c05ab7d.2c9ed4","type":"ui_template","z":"339f2e0a.80f992","group":"2b825e99.b695e2","name":"Download Button","order":9,"width":"2","height":"1","format":"<button style= \"background-color:#097479; border-color:#097479; color:white; font-size: 13px; padding: 10px\" button onclick=\"document.location='/var/snap/node-red/675/export.csv'\"><b>Download</b></button>\n\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","className":"","x":130,"y":80,"wires":[[]]},{"id":"46bab025.c8036","type":"http in","z":"339f2e0a.80f992","name":"[Get] path","url":"/var/snap/node-red/675/:fn","method":"get","upload":false,"swaggerDoc":"","x":100,"y":140,"wires":[["7adc8e2c.3a56d"]]},{"id":"2b825e99.b695e2","type":"ui_group","name":"Buttons","tab":"20a844b0.75e7fc","order":8,"disp":false,"width":"5","collapse":false},{"id":"20a844b0.75e7fc","type":"ui_tab","name":"S314","icon":"fa-2x fa-bar-chart","order":3,"disabled":false,"hidden":false}]

```

The code is working fine but I want to use an ui-button instead the template button, is it possible?  
Thanks in advance.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [29 March 2022 14:36 UTC](https://discourse.nodered.org/t/how-to-use-an-ui-button-with-a-http-in-node/60486/2 "2022-03-29T14:36:37Z")

</div>

No, it is not possible. The ui button is for the Dashboard which is a separate set of features.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [29 March 2022 15:00 UTC](https://discourse.nodered.org/t/how-to-use-an-ui-button-with-a-http-in-node/60486/3 "2022-03-29T15:00:58Z")

</div>

I suspect the OP wants to use a `ui-button` node (on their dashboard) in place of a `ui-template` with a button in - to initiate (on click) a call to the endpoint to download a document.

@between The answer is Yes, but it is more difficult. The ui-button is intended to call back to server side (to node-red) where as the `onclick` of the button in the `ui-template` runs client side (which is what you need to initiate a download)

What is wrong with using a template button? You can style it to look identical to the ui-button.

---

<div class="post-metadata">

**Author:** ![between](https://avatars.discourse-cdn.com/v4/letter/b/c5a1d2/32.png) [@between](https://discourse.nodered.org/u/between)\
**Post date:** [30 March 2022 12:45 UTC](https://discourse.nodered.org/t/how-to-use-an-ui-button-with-a-http-in-node/60486/4 "2022-03-30T12:45:13Z")

</div>

Hi.

There’s nothing wrong using the ui-template button. But what I want to do is to download a csv file previously created from data of a database. With the shared flows I need two separate actions to do the job: one for writing the data to the file and another to download it (by using the ui-template button). I don’t know how to link the first action with an ui-template button to do the second action, neither how to call a http in node from the flow (first action). That’s why I asked to for the use of a ui-button, because I can link the flow with the button’s input.

Regards,

Juan.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [29 May 2022 12:45 UTC](https://discourse.nodered.org/t/how-to-use-an-ui-button-with-a-http-in-node/60486/5 "2022-05-29T12:45:15Z")

</div>

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.