Hy all,
in the past I made it possible to implement a few great things in NodeRed. Thanks to the forum and a few very kind people here.
Nevertheless I got stuck again with the following example:
Example from 2021
Due that the post is from 2021 and closed I asumed it is the best option to open a new topic.
Anyways, what I am trying to do is the same as in the post:
- fetch data payload from ms sql database
[{"name":"D-5909","type":"Arcus","manufacturer":"Schempp-Hirth Flugzeugbau"},{"name":"OE-9513","type":"DG-1001M","manufacturer":"DG Flugzeugbau"},{"name":"D-5809","type":"Duo Discus","manufacturer":"Schempp-Hirth Flugzeugbau"},{"name":"OE-5663","type":"FOX","manufacturer":"MDM-1"},{"name":"OE-5280","type":"ASK 21","manufacturer":"Alexander Schleicher Flugzeugbau"},{"name":"OE-5664","type":"LS8","manufacturer":"Rolladen-Schneider"},{"name":"D-6521","type":"LS1","manufacturer":"Rolladen-Schneider"},{"name":"D-3578","type":"LS4","manufacturer":"Rolladen-Schneider"},{"name":"OE-5338","type":"LS4","manufacturer":"Rolladen-Schneider"},{"name":"OE-5563","type":"LS4","manufacturer":"Rolladen-Schneider"},{"name":"OE-5211","type":"ASK 13","manufacturer":"Alexander Schleicher Flugzeugbau"},{"name":"D-3987","type":"ASK 13","manufacturer":"Alexander Schleicher Flugzeugbau"},{"name":"D-8525","type":"Ka 8","manufacturer":"Alexander Schleicher Flugzeugbau"},{"name":"OE-5287","type":"Ka 8","manufacturer":"Alexander Schleicher Flugzeugbau"},{"name":"OE-5295","type":"Ka 8","manufacturer":"Alexander Schleicher Flugzeugbau"},{"name":"OE-0772","type":"Ka 8","manufacturer":"Alexander Schleicher Flugzeugbau"},{"name":"D-KNAM","type":"SF-25C Falke","manufacturer":"Scheibe"},{"name":"OE-ARD","type":"Husky","manufacturer":"Aviat Aircraft"}]
- rap it in a bootstrap table using uibuilder
I am just wondering if the example from post back from 2021 is not working anymore (due to changes) or I cant see the woods in front of hundred trees ^^
Is somebody getting the example to work?
Flow:
[{"id":"4c55571eab755af4","type":"uibuilder","z":"affcf244.5a4cd","name":"","topic":"","url":"table","fwdInMessages":false,"allowScripts":false,"allowStyles":false,"copyIndex":true,"showfolder":false,"useSecurity":false,"sessionLength":432000,"tokenAutoExtend":false,"oldUrl":"uibuilder","reload":false,"credentials":{},"x":460,"y":560,"wires":[["eeafe87409b1a331"],[]]},{"id":"33f5b55cb3bf51a0","type":"inject","z":"affcf244.5a4cd","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"ROWID\":11,\"EXACTTIME\":\"Friday_June11th2021_5:22:42pm\",\"TIMESTAMP\":\"Friday, June 11th 2021, 5:22 pm\",\"FIRSTNAME\":\"Wells\",\"LASTNAME\":\"Fargo\"},{\"ROWID\":10,\"EXACTTIME\":\"Friday_June11th2021_5:17:46pm\",\"TIMESTAMP\":\"Friday, June 11th 2021, 5:17 pm\",\"FIRSTNAME\":\"advance\",\"LASTNAME\":\"auto\"},{\"ROWID\":9,\"EXACTTIME\":\"Friday_June11th2021_4:55:48pm\",\"TIMESTAMP\":\"Friday, June 11th 2021, 4:55 pm\",\"FIRSTNAME\":\"test\",\"LASTNAME\":\"user\"},{\"ROWID\":8,\"EXACTTIME\":\"Friday_June11th2021_4:55:32pm\",\"TIMESTAMP\":\"Friday, June 11th 2021, 4:55 pm\",\"FIRSTNAME\":\"advance\",\"LASTNAME\":\"auto\"},{\"ROWID\":7,\"EXACTTIME\":\"Friday_June11th2021_4:55:23pm\",\"TIMESTAMP\":\"Friday, June 11th 2021, 4:55 pm\",\"FIRSTNAME\":\"Wells\",\"LASTNAME\":\"Fargo\"},{\"ROWID\":6,\"EXACTTIME\":\"Friday_June11th2021_4:48:24pm\",\"TIMESTAMP\":\"Friday, June 11th 2021, 4:48 pm\",\"FIRSTNAME\":\"Wells\",\"LASTNAME\":\"Fargo\"},{\"ROWID\":5,\"EXACTTIME\":\"Friday_June11th2021_4:48:15pm\",\"TIMESTAMP\":\"Friday, June 11th 2021, 4:48 pm\",\"FIRSTNAME\":\"advance\",\"LASTNAME\":\"auto\"},{\"ROWID\":4,\"EXACTTIME\":\"Friday_June11th2021_4:48:05pm\",\"TIMESTAMP\":\"Friday, June 11th 2021, 4:48 pm\",\"FIRSTNAME\":\"test\",\"LASTNAME\":\"user\"}]","payloadType":"json","x":200,"y":560,"wires":[["4c55571eab755af4"]]},{"id":"eeafe87409b1a331","type":"debug","z":"affcf244.5a4cd","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":640,"y":560,"wires":[]}]
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Node-RED UI Builder - VueJS + bootstrap-vue default template</title>
<meta name="description" content="Node-RED UI Builder - VueJS + bootstrap-vue default template" />
<link rel="icon" href="./images/node-blue.ico" />
<link type="text/css" rel="stylesheet" href="../uibuilder/vendor/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="../uibuilder/vendor/bootstrap-vue/dist/bootstrap-vue.css" />
<!-- Your own CSS -->
<link type="text/css" rel="stylesheet" href="./index.css" media="all" />
</head>
<body>
<div id="app" v-cloak>
<b-container id="app_container" class="mt-5">
<h1>UIbuilder + Vue.js + bootstrap-vue table for Node-RED</h1>
<div class="mt-5">
<b-table striped hover small :items="items" sort-by="ROWID"></b-table>
</div>
</b-container>
</div>
<!-- These MUST be in the right order. Note no leading / -->
<!-- REQUIRED: Socket.IO is loaded only once for all instances. Without this, you don't get a websocket connection -->
<script src="../uibuilder/vendor/socket.io/socket.io.js"></script>
<!-- Vendor Libraries - Load in the right order, use minified, production versions for speed -->
<script src="../uibuilder/vendor/vue/dist/vue.js"></script>
<!-- dev version with component compiler -->
<!-- <script src="../uibuilder/vendor/vue/dist/vue.min.js"></script> prod version with component compiler -->
<!-- <script src="../uibuilder/vendor/vue/dist/vue.runtime.min.js"></script> prod version without component compiler -->
<script src="../uibuilder/vendor/bootstrap-vue/dist/bootstrap-vue.js"></script>
<!-- Dev version -->
<!-- <script src="../uibuilder/vendor/bootstrap-vue/dist/bootstrap-vue.min.js"></script> Prod version -->
<!-- REQUIRED: Sets up Socket listeners and the msg object -->
<script src="./uibuilderfe.js"></script>
<!-- dev version -->
<!-- <script src="./uibuilderfe.min.js"></script> prod version -->
<!-- OPTIONAL: You probably want this. Put your custom code here -->
<script src="./index.js"></script>
</body>
</html>
index.js
/* jshint browser: true, esversion: 5, asi: true */
/*globals Vue, uibuilder */
// @ts-nocheck
/*
Copyright (c) 2021 Julian Knight (Totally Information)
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
"use strict";
/** @see https://totallyinformation.github.io/node-red-contrib-uibuilder/#/front-end-library */
// eslint-disable-next-line no-unused-vars
const app = new Vue({
el: "#app",
data() {
return {
items: [] // table data
};
}, // --- End of data --- //
computed: {}, // --- End of computed --- //
methods: {}, // --- End of methods --- //
// Available hooks: beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeDestroy,destroyed, activated,deactivated, errorCaptured
/** Called after the Vue app has been created. A good place to put startup code */
created: function() {
// Example of retrieving data from uibuilder
this.feVersion = uibuilder.get("version");
uibuilder.start();
}, // --- End of created hook --- //
/** Called once all Vue component instances have been loaded and the virtual DOM built */
mounted: function() {
//console.debug('[indexjs:Vue.mounted] app mounted - setting up uibuilder watchers')
var app = this; // Reference to `this` in case we need it for more complex functions
// If msg changes - msg is updated when a standard msg is received from Node-RED over Socket.IO
uibuilder.onChange("msg", function(msg) {
console.info('[indexjs:uibuilder.onChange] msg received from Node-RED server:', msg)
app.items = msg.payload; // save new table data from node-red in vue data items
});
}, // --- End of mounted hook --- //
}); // --- End of app1 --- //
// EOF
THX for guiding
: