# UIBuilder Using URL variables

**URL:** <https://discourse.nodered.org/t/uibuilder-using-url-variables/49625>\
**Category:** General\
**Tags:** uibuilder\
**Created:** [11 August 2021 17:27 UTC](https://discourse.nodered.org/t/uibuilder-using-url-variables/49625 "2021-08-11T17:27:08Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ashfaak](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ashfaak/32/34409_2.png) [@Ashfaak](https://discourse.nodered.org/u/Ashfaak)\
**Post date:** [11 August 2021 17:27 UTC](https://discourse.nodered.org/t/uibuilder-using-url-variables/49625/1 "2021-08-11T17:27:08Z")

</div>

Hi. Is it possible to use variables of this form when using UIBuilder?  
`https://example.com/uibuilder/?site=abc`  
I would like to create QR codes at a few different locations and would like the location 'auto-filled' without having to make a new UIBuilder node for each site.

I can think of a work around using redirects within NR, but the URL variable would be simpler.

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [11 August 2021 18:05 UTC](https://discourse.nodered.org/t/uibuilder-using-url-variables/49625/2 "2021-08-11T18:05:18Z")

</div>

> [@Ashfaak](#):
>
> Is it possible to use variables of this form when using UIBuilder?

Most probably. uibuilder just serves your html and js files and hadles the back and forth of messages between NR and your front end code ... its up to you to handle with your code any url parameters.  
Read this article that describes how to get the [URL parameters](https://www.sitepoint.com/get-url-parameters-with-javascript/).

```auto
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const site = urlParams.get('site') // 'abc'

```

---

<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:** [12 August 2021 01:25 UTC](https://discourse.nodered.org/t/uibuilder-using-url-variables/49625/3 "2021-08-12T01:25:57Z")

</div>

If you are using VueJS, here is some information on using Vue to handle passed URL query parameters:

[javascript - How can I get query parameters from a URL in Vue.js? - Stack Overflow](https://stackoverflow.com/questions/35914069/how-can-i-get-query-parameters-from-a-url-in-vue-js)

uibuilder doesn't care whether you pass parameters or not, that is handled purely by your front-end code. So grab the query parameters and send them back to Node-RED if you need to using `uibuilder.send()`.

---

<div class="post-metadata">

**Author:** ![Ashfaak](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ashfaak/32/34409_2.png) [@Ashfaak](https://discourse.nodered.org/u/Ashfaak)\
**Post date:** [19 August 2021 10:11 UTC](https://discourse.nodered.org/t/uibuilder-using-url-variables/49625/4 "2021-08-19T10:11:56Z")

</div>

Thank you both. I managed to get it working and learnt a lot in the process.  
😀

---

<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:** [2 September 2021 10:12 UTC](https://discourse.nodered.org/t/uibuilder-using-url-variables/49625/5 "2021-09-02T10:12:40Z")

</div>

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