Merge pull request #1447 from cgjgh/External-Link-Target

Allow specifying target in ui-control
FlowFuse · Nov 11, 2024 · 9071d2d · 9071d2d
2 parents b64dbf6 + 59311ab
commit 9071d2d
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 4 deletions.
diff --git a/docs/nodes/widgets/ui-control.md b/docs/nodes/widgets/ui-control.md
@@ -94,6 +94,15 @@ If you want to trigger navigation to an external resource or website, you can do
 msg.payload = {
     url: 'https://nodered.org'
 }
+```
+
+ You can also specify a `target` property to open the website in a new browser window or tab.
+
+```js
+msg.payload = {
+    url: 'https://nodered.org',
+    target: '_blank'
+}
 ```
 
 ### Show/Hide

diff --git a/nodes/widgets/locales/en-US/ui_control.html b/nodes/widgets/locales/en-US/ui_control.html
@@ -48,6 +48,11 @@ <h4>External URL</h4>
     <p>It is possible to trigger navigation to an external site, away from your Dashboard by passing in a URL string.</p>
     <pre>msg.payload = {
     url: 'https://url.goes.here'
+}</pre>
+    <p>You can also specify a target to open the link in a new browser window or tab.</p>
+    <pre>msg.payload = {
+    url: 'https://url.goes.here',
+    target: '_blank'
 }</pre>
     <h3>Events List</h3>
     <p>When any browser client connects or loses connection, changes tab, or expands or collapses a group this node will emit a <code>msg</code> containing:</p>

diff --git a/nodes/widgets/ui_control.html b/nodes/widgets/ui_control.html
@@ -36,8 +36,8 @@
 
 <script type="text/html" data-template-name="ui-control">
     <div class="form-row">
-        <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="ui-control.label.name"></span></label>
-        <input type="text" id="node-input-name" data-i18n="[placeholder]ui-control.placeholder.name">
+        <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="node-red:common.label.name"></span></label>
+        <input type="text" id="node-input-name" data-i18n="[placeholder]node-red:common.label.name">
     </div>
     <div class="form-row">
         <label for="node-input-ui"><i class="fa fa-bookmark"></i> UI</label>

diff --git a/ui/src/widgets/ui-control/UIControl.vue b/ui/src/widgets/ui-control/UIControl.vue
@@ -216,8 +216,13 @@ export default {
             }
 
             if ('url' in payload) {
-                // we are setting the url
-                window.location.href = payload.url
+                if ('target' in payload) {
+                    // Open the link in a new browser window or tab
+                    window.open(payload.url, payload.target)
+                } else {
+                    // Open the link in the same window
+                    window.location.href = payload.url
+                }
             }
         })
     },