# Make a button link to another page HTML !?

**URL:** https://discourse.nodered.org/t/make-a-button-link-to-another-page-html/880
**Category:** General
**Created:** [18 June 2018 07:23 UTC](https://discourse.nodered.org/t/make-a-button-link-to-another-page-html/880 "2018-06-18T07:23:01Z")
**Posts on this page:** 17
**Page:** 1

<div class="post-metadata">

### Author: ![imadouino](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/imadouino/32/487_2.png) [@imadouino](https://discourse.nodered.org/u/imadouino)
#### Post date: [18 June 2018 07:23 UTC](https://discourse.nodered.org/t/make-a-button-link-to-another-page-html/880/1 "2018-06-18T07:23:02Z")

</div>

Hi,  
i searsh to make a button link to another page HTML. it's work with a link like ([www.google.com](http://www.google.com)) but i can't do it with my link ( [http://IP/ui/#/1](http://IP/ui/#/1)), the link change in the case of the adresse of my navigator but it does run it.  
this is the page of redirection  
 ![1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/708d75545bc292506ac9e0b85c87ec587f00d6c6.png)  
 ![2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/547b162268db90d3442df518cf59e178b2eeeab0.png)  
 ![3](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/97fc52d4347ae42114275ecaeee140143a944db7.png)  
this is my code HTML.  
Thank you for your help

```
<html>
<head>
<style>
#customers {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 20%;
}

#customers td, #customers th {
    border: 1px solid #ddd;
    padding: 8px;
}

#customers tr:nth-child(even){background-color: black;}

#customers tr:hover {background-color: #5F5755;}

#customers th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #ddd;
    color: black;
    width : 100px;

}
.eb1 {
    background-color: {{msg.payload[0]}};
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 45px;
    margin: 4px 2px;
    cursor: pointer;
}
.eb2 {
    background-color: {{msg.payload[1]}};
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 45px;
    margin: 4px 2px;
    cursor: pointer;
}
.mf1 {
    background-color: {{msg.payload[2]}};
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 45px;
    margin: 4px 2px;
    cursor: pointer;
}
.mf2 {
    background-color: {{msg.payload[3]}};
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 45px;
    margin: 4px 2px;
    cursor: pointer;
}
</style>
</head>

<table id="customers">
    <tr>
    <th>Bancs</th>
    <th>Etat du banc</th>
    <th>Fonc- tion- nement </th>
    <th>Anoma- lie</th>
    </tr>
    <tr>
    <td>BANC1</td>
    <td> <button type="button" class = "eb1" onClick="parent.location='http://192.168.5.247:1880/ui/#/1'" ></button> </td>
    <td><button class="mf1"></button></td>
    <td>zerzer</td>
     </tr>
  <tr>
    <td>BANC2</td>
    <td><button class="eb2"></button></td>
    <td><button class="mf2"></button></td>
    <td>zerzer</td>
     </tr>
     <tr>
    <td>BANC3</td>
    <td>zerzer</td>
    <td>zerzer</td>
    <td>zerzer</td>
  </tr>
  <tr>
    <td>BANC4</td>
    <td>zerzer</td>
    <td>zerzer</td>
    <td>zerzer</td>
  </tr>
  <tr>
    <td>BANC5</td>
    <td>zerzer</td>
    <td>zerzer</td>
    <td>zerzer</td>
  </tr>
  <tr>
    <td>BANC6</td>
    <td>zerzer</td>
    <td>zerzer</td>
    <td>zerzer</td>
  </tr>
</table>

</html>
```

---

<div class="post-metadata">

### Author: ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)
#### Post date: [18 June 2018 13:28 UTC](https://discourse.nodered.org/t/make-a-button-link-to-another-page-html/880/2 "2018-06-18T13:28:13Z")

</div>

Hello Imadouino,

I guess the solution relies on the use of the settings.js configuration file in your .node-red folder

When we want to serve local content we need to set up an http static path in this configuration file.

I use Windows10 and configured below path to point to the projects file in the node-red installation.

```auto
    // following property can be used to identify a directory of static content
    // that should be served at http://localhost:1880/.
    //httpStatic: '/home/nol/node-red-static/',
    httpStatic: "C://Users/OCM/.node-red/projects",

```

inside this directory (projects) I created others to serve images, http files, fonts, etc

Users/OCM/.node-red/projects/nrhttp  
Users/OCM/.node-red/projects/nrimages  
Users/OCM/.node-red/projects/nrfonts

Inside my Node-RED flow i use relative paths from httpstatic (in settings.js) to where my files are stored. For instance, to reach the file f1.html (a test html Hello world) that is inside projects/nrhttp folder I would use:

```auto
<td>BANC1</td>
    <td> <button type="button" class = "eb1" onClick="parent.location='http://127.0.0.1:1880/nrhttp/f1.html'" ></button> </td>

```

I tested with your template and it worked fine.

![f1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/570dfff233c4a7c4363a20bfd2aaedb850066a23.PNG)

Notes:

1- When changing the settings.js file you need to restart node.red

2- Check if the httpstatic file is shown in the initialization of Node-RED

```auto
18 Jun 10:01:06 - [info] Settings file : \Users\OCM\.node-red\settings.js
18 Jun 10:01:06 - [info] HTTP Static : C:\Users\OCM\.node-red\projects

```

---

<div class="post-metadata">

### Author: ![imadouino](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/imadouino/32/487_2.png) [@imadouino](https://discourse.nodered.org/u/imadouino)
#### Post date: [18 June 2018 13:51 UTC](https://discourse.nodered.org/t/make-a-button-link-to-another-page-html/880/3 "2018-06-18T13:51:03Z")

</div>

Hi Andrei,

I’m in linux, that i will searsh to find this file in linux and i will try this solution.  
Thank youuuuu.

---

<div class="post-metadata">

### Author: ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [18 June 2018 15:13 UTC](https://discourse.nodered.org/t/make-a-button-link-to-another-page-html/880/4 "2018-06-18T15:13:07Z")

</div>

In Linux it should be the one under ~/.node-red

---

<div class="post-metadata">

### Author: ![imadouino](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/imadouino/32/487_2.png) [@imadouino](https://discourse.nodered.org/u/imadouino)
#### Post date: [28 June 2018 08:09 UTC](https://discourse.nodered.org/t/make-a-button-link-to-another-page-html/880/5 "2018-06-28T08:09:44Z")

</div>

> [@Andrei](#):
>
> ```auto
> <td> <button type="button" class = "eb1" onClick="parent.location='http://127.0.0.1:1880/nrhttp/f1.html'" ></button> </td>
> 
> ```

Hi Andrei,  
Thank you for your response, but my link is it not .php or .html, my link it is like that for example:  
" [http://localhost:1880/ui/#/4](http://localhost:1880/ui/#/4)"  
the method you sent me did not work ☹ .  
Thank yoouuuu for your help.

---

<div class="post-metadata">

### Author: ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)
#### Post date: [28 June 2018 13:41 UTC](https://discourse.nodered.org/t/make-a-button-link-to-another-page-html/880/6 "2018-06-28T13:41:52Z")

</div>

Hello imadouino,

The title of the post suggests that you were trying to open an html file. Could you please recap what is the expected behavior when you click the buttom ? Perhaps you want to move to another page (tab) of a local dashboard ? or perhaps something else ?

---

<div class="post-metadata">

### Author: ![imadouino](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/imadouino/32/487_2.png) [@imadouino](https://discourse.nodered.org/u/imadouino)
#### Post date: [28 June 2018 14:11 UTC](https://discourse.nodered.org/t/make-a-button-link-to-another-page-html/880/7 "2018-06-28T14:11:00Z")

</div>

Hi ANDREI,  
thank you for your attention; my question was, how i can make button link(for an auther tab in node-red) with html button,I explained that on the pictures above, and not to trying to open an html file ou html page.  
I hope you have understood my situation.  
Thank you for your help.

---

<div class="post-metadata">

### Author: ![shrickus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/shrickus/32/517_2.png) [@shrickus](https://discourse.nodered.org/u/shrickus)
#### Post date: [28 June 2018 14:30 UTC](https://discourse.nodered.org/t/make-a-button-link-to-another-page-html/880/8 "2018-06-28T14:30:08Z")

</div>

The easiest way to switch to another "page" of your existing dashboard is to pass a msg to the `ui_control` node. From the node's information sidebar:

> Allows dynamic control of the Dashboard.
> 
> The default function is to change the currently displayed tab. msg.payload should either be an object of the form {tab:"my\_tab\_name"}, or just be the tab name or numeric index (from 0) of the tab or link to be displayed.
> 
> Sending a blank tab name "" will refresh the current page. You can also send "+1" for next tab and "-1" for previous tab.

So all you need in the first page is a button or other html element that can send a msg with a payload containing the tab name or index number. You could use the `ui_button` node set to send the other tab name, or embed some angular html in a `ui_template` node -- something like this:

```html
<md-button class="eb2" ng-click="send({payload: 1})">
</md-button>

```

Wire the output of your button or template node into the `ui_control` node, and it should just work for you. For some other examples and cautions, you can check [this discussion](https://discourse.nodered.org/t/orchestrating-dashboard-page-flow-via-ui-control/1103/3) that was started recently...

---

<div class="post-metadata">

### Author: ![imadouino](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/imadouino/32/487_2.png) [@imadouino](https://discourse.nodered.org/u/imadouino)
#### Post date: [28 June 2018 14:37 UTC](https://discourse.nodered.org/t/make-a-button-link-to-another-page-html/880/9 "2018-06-28T14:37:42Z")

</div>

> [@shrickus](#):
>
> ng-click="send({payload: 1})"

thank you that's exactly what was looking for and it works  
Thank youuu

---

<div class="post-metadata">

### Author: ![imadouino](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/imadouino/32/487_2.png) [@imadouino](https://discourse.nodered.org/u/imadouino)
#### Post date: [28 June 2018 14:42 UTC](https://discourse.nodered.org/t/make-a-button-link-to-another-page-html/880/10 "2018-06-28T14:42:08Z")

</div>

it work too for the hypertext in html ?  
Thank you

---

<div class="post-metadata">

### Author: ![shrickus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/shrickus/32/517_2.png) [@shrickus](https://discourse.nodered.org/u/shrickus)
#### Post date: [28 June 2018 17:15 UTC](https://discourse.nodered.org/t/make-a-button-link-to-another-page-html/880/11 "2018-06-28T17:15:25Z")

</div>

If you mean the href on an html `<a href="...">link</a>` element, then you will have to invoke a javascript function inside the angular `scope` – something like this (untested):

```auto
<a href="javascript:gotoPage(4);">Details</a>

<script>
var $scope;
function gotoPage(page) {
    $scope.send({payload: page});
};

(function(scope) {
    $scope = scope;
})(scope);
</script>

```

---

<div class="post-metadata">

### Author: ![imadouino](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/imadouino/32/487_2.png) [@imadouino](https://discourse.nodered.org/u/imadouino)
#### Post date: [2 July 2018 08:30 UTC](https://discourse.nodered.org/t/make-a-button-link-to-another-page-html/880/12 "2018-07-02T08:30:38Z")

</div>

Thank youuuuuu very much shrickus,  
My last question is, when i change tab with UI CONTROL, it also changes to another device, who is also connected to the site, how can to avoid that.  
Thank you for your attention.

---

<div class="post-metadata">

### Author: ![ukmoose](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ukmoose/32/13_2.png) [@ukmoose](https://discourse.nodered.org/u/ukmoose)
#### Post date: [2 July 2018 08:37 UTC](https://discourse.nodered.org/t/make-a-button-link-to-another-page-html/880/13 "2018-07-02T08:37:40Z")

</div>

Copied from the ReadMe of the dashboard nodes

> **[node-red-dashboard](https://flows.nodered.org/node/node-red-dashboard)**
>
> A set of dashboard nodes for Node-RED

> Multiple Users
> 
> This Dashboard does NOT support multiple individual users. It is a view of the status of the underlying Node-RED flow, which itself is single user. If the state of the flow changes then all clients will get notified of that change.

---

<div class="post-metadata">

### Author: ![imadouino](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/imadouino/32/487_2.png) [@imadouino](https://discourse.nodered.org/u/imadouino)
#### Post date: [2 July 2018 08:43 UTC](https://discourse.nodered.org/t/make-a-button-link-to-another-page-html/880/14 "2018-07-02T08:43:18Z")

</div>

Thank you UKMOOSE,  
there is no other way to change the tab automatically without going through the UI CONTROL then.

---

<div class="post-metadata">

### Author: ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [2 July 2018 09:01 UTC](https://discourse.nodered.org/t/make-a-button-link-to-another-page-html/880/15 "2018-07-02T09:01:34Z")

</div>

> [@ukmoose](#):
>
> This Dashboard does NOT support multiple individual users. It is a view of the status of the underlying Node-RED flow, which itself is single user. If the state of the flow changes then all clients will get notified of that change.

Multiple users can, of course, view different tabs at the same time. The problem with switching tabs using ui-control is that it is done via the server so all users will be switched. To only switch tabs for the current user then I think it would have to be done within the browser. I don't know if there is a way of doing that.

---

<div class="post-metadata">

### Author: ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [2 July 2018 11:21 UTC](https://discourse.nodered.org/t/make-a-button-link-to-another-page-html/880/16 "2018-07-02T11:21:08Z")

</div>

when you send a command from the dashboard it has a `msg.socketid` property set… if you set that correctly then the ui\_control message will only go to the corresponding socket/screen… Obviously the tricky part is associating the correct socketid if the command isn’t coming from a user in the first place.

---

<div class="post-metadata">

### Author: ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [23 September 2020 07:02 UTC](https://discourse.nodered.org/t/make-a-button-link-to-another-page-html/880/18 "2020-09-23T07:02:18Z")

</div>


