I have reached a road bump that I have no idea how to solve.
I have created a web page using the HTTP endpoint node with the get option, so someone can type localhost:1880/webpage-name to activate that flow, then template node to load a webpage. Once on the webpage, the user has two options. That I do not have any idea on how to process.
The user can fill in a vehicle license plate then hit retrieve, that will then populate the lower portion of the screen after searching a database, I have no idea how to get the data into the fields, nor how to go from one page to the next. The user can then make any changes required to the live data in the lower portion of the screen, then hit submit to commit the data.
Or the user can complete the lower portion of the screen for a vehicle not in the database, which has place holders, ie the data is filled in with a sample of what the user needs to input, so an email field they would see PersonsEmail@gmail.com, allowing them to know what type of data to enter into that field. From here they can enter a vehicle and associated details hit submit and it will be entered into the database.
I am not sure how to do this and would appreciate some help on what I need to research. Although I am prepared to do the research.
I am ok with the database searches in javascript, using the function node, I would classify my javascript between basic and intermediate, I am ok with very basic HTML, have not used PHP or CSS, and ok with Sqlite.
To continue working with the http-in/out nodes, you will need to expand the in side so that you can pass in data not just have a simple GET request. There are various approaches we can go through if you decide to follow this approach.
An alternate approach would be to switch to uibuilder and use message passing to control everything. This is a very Node-RED approach that uses websockets to pass messages between Node-RED and your browser. By default, uibuilder also gives you the features of VueJS and bootstrap-vue which will help enormously as you build an interactive web app. You can, of course, use any other framework you like or indeed code everything up yourself, uibuilder doesn't care.
In your case, you would add a form with a text input field to your index.html page in uibuilder - in fact, the default template already has one that you can tweak.
You would then add an onChange function that did uibuilder.send(...) to send the license plate back to Node-RED where the data would appear at the 1st output port of uibuilder's node. That would be used to format a db query and the returned query output would be sent back to the input port of uibuilder and would be picked up in your index.js file in the uibuilder.onChange('msg', function(newmsg){...}) section of the code. There you would check for valid data and update a Vue variable which would automatically update the interface.
You will see that the default uibuilder template is already doing most of this (though not the db query of course). So you should be able to adapt that fairly readily.
I will have a look at the Uibuilder. Don't know anything about VueJS or bootstrap-vue, but willing to learn as I go. Will play with this when I get back to work on Monday, after looking for some samples of how others have used it, for inspiration, read adapting their code to fit my needs.
No problem, some of the examples on the WIKI are now out of date unfortunately, they need updating to v2 though you can follow the upgrade instructions and they should work fine.
If you don't like/want Vue, you can of course use any front-end framework, uibuilder was specifically designed to facilitate that. Vue just seems to be pretty easy to get going with but is also very well supported and is the fastest growing framework.
There are a number of threads here on the forum that may also help so just search for uibuilder.
And if there is anything we can do to help, just should out. I'm on hols at the mo so it might take a day or 2 to respond.
Just need to get the database result to display in HTML.
Continued to use the Get request, managed to get the details to do the database search, it comes back with one record, moved the output to msg.test1.CarPlate1, as msg.payload get overwritten. However, I am unable to populate the HTML page with those values. The HTML page does not seem to want to use variables, just static data in quotes, must be something I am missing.
ie,
tried different inputs as below, even removed placeholder, could force an HTML display, it continues to display CarPlate1, not the GLAX0, nor what the database brought back. The debug node verifies that I am using the correct fields and that it has the value I am looking for.
Sorry, I lost track - which nodes are you using now?
If using uibuilder with the default template, you need to define the data in index.js (in the data section, add a variable called carplate1 with an empty string) and assign to it using the uibuilder.onChange function. Then in your HTML, you can simply add <div>{{carplate1}}</div>
If using http-inout nodes, add an html template node (not a Dashboard template node) between in and out. Then you can add something like <div>{{test1[0].CarPlate1}}</div>
Sorry but your code is unreadable. Please surround code with back-ticks or triple back-ticks and try again.
You can use variables with the http-in node. So instead of settings the url to a fixed string, you can do something like: /mypage/:vreg. With that, you've changed your fixed url /mypage into an API and the vreg part will be passed along as a variable that you can pick up and work with.
