# Help with how to update form NR 1.0.3 to 4.x and all other stuff
**URL:** https://discourse.nodered.org/t/help-with-how-to-update-form-nr-1-0-3-to-4-x-and-all-other-stuff/89026
**Category:** General
**Created:** [28 June 2024 06:23 UTC](https://discourse.nodered.org/t/help-with-how-to-update-form-nr-1-0-3-to-4-x-and-all-other-stuff/89026 "2024-06-28T06:23:27Z")
**Posts on this page:** 20
**Page:** 2
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [28 June 2024 12:14 UTC](https://discourse.nodered.org/t/help-with-how-to-update-form-nr-1-0-3-to-4-x-and-all-other-stuff/89026/21 "2024-06-28T12:14:51Z")
> [@Trying\_to\_learn](#):
>
> I've made that directory
You don't need to make any directories, uibuilder will do all that for you.
---
### Author:  [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [28 June 2024 12:15 UTC](https://discourse.nodered.org/t/help-with-how-to-update-form-nr-1-0-3-to-4-x-and-all-other-stuff/89026/22 "2024-06-28T12:15:53Z")
Ok, that is good.
I kind of thought it should anyway.
But I'm still stuck with the URL bit.
We seem to be tripping on each other's replies, so I'll wait for you to answer/help me with that.
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [28 June 2024 12:17 UTC](https://discourse.nodered.org/t/help-with-how-to-update-form-nr-1-0-3-to-4-x-and-all-other-stuff/89026/23 "2024-06-28T12:17:05Z")
Your settings should look like this:
If you get stuck, just delete the node, say yes if it asks if you want to delete the folder, deploy and then start again.
---
### Author:  [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [28 June 2024 12:18 UTC](https://discourse.nodered.org/t/help-with-how-to-update-form-nr-1-0-3-to-4-x-and-all-other-stuff/89026/24 "2024-06-28T12:18:51Z")
# Ah!
Stupid me.
Yeah.... Ok.
That's now clearer. URL entered. Slight complaint the directory already existed, but....
So sorry - again - how do I then access that from the GUI side of things?
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [28 June 2024 12:19 UTC](https://discourse.nodered.org/t/help-with-how-to-update-form-nr-1-0-3-to-4-x-and-all-other-stuff/89026/25 "2024-06-28T12:19:14Z")
Once you have entered a valid url name and clicked Done, then deployed. Re-opening the node should show this:
Note the yellow info box. You can click on either of the buttons that say "Open" to see the resulting page.
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [28 June 2024 12:20 UTC](https://discourse.nodered.org/t/help-with-how-to-update-form-nr-1-0-3-to-4-x-and-all-other-stuff/89026/26 "2024-06-28T12:20:29Z")
> [@Trying\_to\_learn](#):
>
> Slight complaint the directory already existed, but....
It will cope with that, it is just a warning.
> [@Trying\_to\_learn](#):
>
> So sorry - again - how do I then access that from the GUI side of things?
Do you mean the web page? Shown in the last post, click one of the "Open" buttons.
---
### Author:  [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [28 June 2024 12:23 UTC](https://discourse.nodered.org/t/help-with-how-to-update-form-nr-1-0-3-to-4-x-and-all-other-stuff/89026/27 "2024-06-28T12:23:09Z")
> [@TotallyInformation](#):
>
> Do you mean the web page? Shown in the last post, click one of the "Open" buttons.
Ok, I loaded the `quote of the day` one also.
That sort of looked _nicer_ to get my head around.
But neither have an `open` button.
I seem to be missing something serious.
From that URL:
```auto
We are continually faced by great opportunities brilliantly disguised as insoluble problems.
```
Gee! How are they so accurate!
🤣
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [28 June 2024 12:24 UTC](https://discourse.nodered.org/t/help-with-how-to-update-form-nr-1-0-3-to-4-x-and-all-other-stuff/89026/28 "2024-06-28T12:24:23Z")
> [@Trying\_to\_learn](#):
>
> But neither have an `open` button.
>
> I seem to be missing something serious.
See the last screenshot I posted, there are 2 open buttons, one on the same line as the cancel & done buttons and one on the line below the URL.
---
### Author:  [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [28 June 2024 12:25 UTC](https://discourse.nodered.org/t/help-with-how-to-update-form-nr-1-0-3-to-4-x-and-all-other-stuff/89026/29 "2024-06-28T12:25:35Z")
Ah, ok.
Yeah, I didn't see the forest for the trees.
Hang on.
Ok, `test` is maybe not the best _test_ name as it is the `fallback` for `uibuilder`.
But despite a few restarts of NR, all I'm getting is the default message:
```auto
This is the fallback master page for uibuilder. If you are seeing it, you have an error in your configuration.
If you have just deleted dist/index.html from your local uibuilder folder, please restart Node-RED so that the src folder is used.
If you don't have a local src/index.html, please add one. The easiest way is to choose one of the built-in templates and click the "Load & Overwrite Files" button and accept the warning.
Please see the Documentation for details on how to use uibuilder.
```
I am using the `quote of the day` flow.
So shouldn't I see the quote of the day?
Only for the sake of making myself look even more dumb, I changed it from `test` to `qotd` (quote of the day).
Deployed and all that. AFAIK, all the needed stuff.
Pressed the `open` button.
Different _path_ (from `test` to `qotd` - so that part works) but the text/display doesn't.
No real page loaded.
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [28 June 2024 12:36 UTC](https://discourse.nodered.org/t/help-with-how-to-update-form-nr-1-0-3-to-4-x-and-all-other-stuff/89026/30 "2024-06-28T12:36:05Z")
> [@Trying\_to\_learn](#):
>
> But despite a few restarts of NR
You don't need to restart Node-RED for uibuilder changes. They are dynamic. You only need to deploy.
> the fallback master page
You get that error if you have deleted something in the filing system that uibuilder wants.
Open the uibuilder node again and go to the "Files" tab. You should see:
Notice that the sub-folder is `src` that is the folder that, by default, serves up your files.
There should be just 3 files in there, as shown. And they should all contain some default code.
The resulting page at this point looks like this:
If you don't have this, delete the whole group, Deploy. Let uibuilder delete the folder (see the warning message that pops up). Then re-import, give the uibuilder a name, and re-deploy. Then you should be back to what I've shown above.
---
### Author:  [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [28 June 2024 12:41 UTC](https://discourse.nodered.org/t/help-with-how-to-update-form-nr-1-0-3-to-4-x-and-all-other-stuff/89026/31 "2024-06-28T12:41:52Z")
Sorry, but not quite.
This is what I see when I open the node and go where you said:
No filename. 😕
But:
Check on the `sub-folder` part.
No `3 files in there`
Sorry, you lost me on the meaning of `delete the whole group` part.
As in the node (`uibuilder`)?
Or the whole example flow?
And the original `example` flow?
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [28 June 2024 12:42 UTC](https://discourse.nodered.org/t/help-with-how-to-update-form-nr-1-0-3-to-4-x-and-all-other-stuff/89026/32 "2024-06-28T12:42:35Z")
> [@Trying\_to\_learn](#):
>
> Or the whole example flow?
This. The example flow is wrapped in a Node-RED "group".
---
### Author:  [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [28 June 2024 12:43 UTC](https://discourse.nodered.org/t/help-with-how-to-update-form-nr-1-0-3-to-4-x-and-all-other-stuff/89026/33 "2024-06-28T12:43:27Z")
Ok, PROGRESS!
Hang on.
(Just letting you know)
BRB 😉
Ok, slight progress.
Now I get to see:
```auto
uibuilder Blank Template
Using the IIFE library.
```
Press the `inject` node to get a quote of the day.
No change to screen.
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [28 June 2024 12:52 UTC](https://discourse.nodered.org/t/help-with-how-to-update-form-nr-1-0-3-to-4-x-and-all-other-stuff/89026/34 "2024-06-28T12:52:38Z")
> [@Trying\_to\_learn](#):
>
> Press the `inject` node to get a quote of the day.
> No change to screen.
OK, we are at the next stage now.
You will see 3 comment nodes which carry the names of the 3 files your uibuilder node has created for you. In older versions of uibuilder, there was no way to automatically update the default template code (you are currently seeing the results of the "Blank" template) with something more specific. I will eventually get to updating this example but it hasn't been yet.
So we now need to transfer the _contents_ of each of the comment nodes over to the appropriate _file_.
Open the html comment, click in the comment text, do a ctrl-a to selected everything and then copy to the clipboard. Close that node, open the uibuilder node, go to the files tab, make sure that the html file is open, select all its text, delete it and replace with the code in your clipboard.
Then click "Save", then Done. now repeat for the other 2 files with the code in the other comment nodes.
Once completed, simply reload the web page to see something different:
Then you can click on the getQuote button to get something like this:
If you've got to this now - congratulations, you have created a fully working web application driven by data from the Internet via Node-RED!
---
### Author:  [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [28 June 2024 13:00 UTC](https://discourse.nodered.org/t/help-with-how-to-update-form-nr-1-0-3-to-4-x-and-all-other-stuff/89026/35 "2024-06-28T13:00:20Z")
Yes, we are getting there.
Ok, did what you said. (Spoiler, _Huston, we have a problem_)
So, I open the `index.html` file, copy the code.
Open the `uibuilder` node.
Click on `Files`.
Delete that (now worked out I may have not done that the right way.)
Ok, maybe not.
I did a `ctl a` and deleted it.
The node _locked up_.
Try 2, saw the `delete` button. Clicked that. Ok.
But now can't get a place to put the code.
Really sorry I am not getting this as quickly as others.
# EDIT
Sorry, just to clarify:
(screen shots coming)
Deleted, re-imported and starting again.
So I get to this point.
I've deleted the existing stuff and pasted the code from the node you said.
When I move up to the `DONE` button, I can't click on it. I get the `ban` icon appear rather than the mouse.
So I seem to have missed something in how I put the code there.
# SORRY
Missed the `SAVE` button.
All working to this point.
# Well, oops.
Not quite.
Nothing is coming out the other end.
I press the `get quote` and I see stuff _going in_ but nothing _coming out_.
Refresh the GUI page.
Still says NO QUOTE RECEIVED.
---
### Author:  [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [28 June 2024 13:09 UTC](https://discourse.nodered.org/t/help-with-how-to-update-form-nr-1-0-3-to-4-x-and-all-other-stuff/89026/36 "2024-06-28T13:09:57Z")
Don't I have to do anything/something with the other two nodes also?
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [28 June 2024 13:11 UTC](https://discourse.nodered.org/t/help-with-how-to-update-form-nr-1-0-3-to-4-x-and-all-other-stuff/89026/37 "2024-06-28T13:11:11Z")
> [@Trying\_to\_learn](#):
>
> Really sorry I am not getting this as quickly as others.
Hey, not to worry. Take your time.
By the way, because we are keeping things nicely segmented by using different uibuilder nodes and flows for different web apps and examples, you don't have to worry about messing up. If it all goes horribly wrong, simply delete the flow, re-deploy and start again.
The only thing to think about is if you've made a load of changes to the files. If you have and you want to keep them, simply copy the whole instance folder to somewhere. Then it won't matter if you delete it.
* * *
OK, so it sounds like you might have got things in the wrong order. So delete the flow, lets start again.
When you have confirmed that you have this page:
1. Go back to your flow and open the comment node that says "index.html".
2. Copy all the text inside that node.
3. close that node, open the uibuilder node
4. Go to the files tab and make sure that the `src` folder is selected and that the `index.html` file is selected.
5. Click inside the file and make sure you are at the very top-left of the file's content.
6. Paste the contents of your clipboard.
7. Delete everything after the FIRST `