hi all
I need updat my tabulator with Uibuilder but I cant
please any ids
var tabledata = [
{id:1, name:"Oli Bob", age:"12", col:"red", dob:""},
{id:2, name:"Mary May", age:"1", col:"blue", dob:"14/05/1982"},
{id:3, name:"Christine Lobowski", age:"42", col:"green", dob:"22/05/1982"},
{id:4, name:"Brendon Philips", age:"125", col:"orange", dob:"01/08/1980"},
{id:5, name:"Margret Marmajuke", age:"16", col:"yellow", dob:"31/01/1999"},
];
i changed to
var myVar = {
get a() {
return app1.TableData
}
}
//define some sample data
var tabledata = myVar.a
but not work
this my demo
[{"id":"ac0f61dd.69e26","type":"tab","label":"Flow 2","disabled":false,"info":""},{"id":"f08129f6.4ada58","type":"comment","z":"ac0f61dd.69e26","name":"uibuilder/jQuery Example","info":"[Front-End](/jq)\n\n## Configuration\n\nInstall jQuery via the nodes configuration panel.\n\nThen update the files:\n\n* `index.html`\n* `index.js`\n* `index.css`\n\nAccording to the jQuery example(s) in the \n[WIKI](https://github.com/TotallyInformation/node-red-contrib-uibuilder/wiki/Example:-JQuery)\nwhich are also included in the 3 other comment nodes in this example.","x":210,"y":80,"wires":[]},{"id":"c30edc95.8f826","type":"comment","z":"ac0f61dd.69e26","name":"index.html","info":"<!doctype html>\n<html lang=\"en\"><head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes\">\n\n <title>uibuilder jQuery example</title>\n <meta name=\"description\" content=\"Node-RED uibuilder - Example using jQuery\">\n\n <link rel=\"icon\" href=\"./images/node-blue.ico\">\n\n <!-- OPTIONAL: Normalize is used to make things the same across browsers. Index is for your styles -->\n <link type=\"text/css\" rel=\"stylesheet\" href=\"../uibuilder/vendor/normalize.css/normalize.css\">\n <link type=\"text/css\" rel=\"stylesheet\" href=\"./index.css\" media=\"all\">\n\n</head><body>\n <!-- The \"app\" element is where the code for dynamic updates is attached -->\n <div id=\"app\">\n <h1>\n Welcome to UIbuilder for Node-RED\n </h1>\n <p>\n This is an example of using uibuilder with jQuery. If you open the developer console, you will see some debug output.\n You can also see some dynamic data updating below, thanks to JQuery.\n Additional information may be available in the\n <a href=\"https://github.com/TotallyInformation/node-red-contrib-uibuilder/wiki/Example:-JQuery\">WIKI</a>\n </p>\n <p>\n Please see the README for the\n <a href=\"https://github.com/TotallyInformation/node-red-contrib-uibuilder\">node-red-contrib-uibuilder</a>\n node for details on how to use uibuilder.\n </p>\n <h2>Dynamic Data (via JQuery)</h2>\n <p>UIBuilder Front-End Version: <span id=\"feVersion\"></span></p>\n <p>Websocket State: <span id=\"socketConnectedState\"></span></p>\n <p>Messages Received: <span id=\"msgsReceived\"></span></p>\n <p>Control Messages Received: <span id=\"msgsControl\"></span></p>\n <p>Messages Sent: <span id=\"msgsSent\"></span></p>\n <p>Last Message Received:</p>\n <code id=\"showMsg\"></code>\n <p>Last Control Message Received:</p>\n <code id=\"showCtrlMsg\"></code>\n <p>Last Message Sent:</p>\n <code id=\"showMsgSent\"></code>\n </div>\n <!-- These MUST be in the right order. Note no leading / -->\n <!-- REQUIRED: Socket.IO is loaded only once for all instances\n Without this, you don't get a websocket connection -->\n <script src=\"../uibuilder/vendor/socket.io/socket.io.js\"></script>\n\n <!-- --- Vendor Libraries - Load in the right order --- -->\n <script src=\"../uibuilder/vendor/jquery/dist/jquery.min.js\"></script>\n\n <!-- REQUIRED: Sets up Socket listeners and the msg object -->\n <!-- <script src=\"./uibuilderfe.js\"></script> //dev version -->\n <script src=\"./uibuilderfe.min.js\"></script> <!-- //prod version -->\n <!-- OPTIONAL: Put your custom code in here -->\n <script src=\"./index.js\"></script>\n\n</body></html>\n","x":400,"y":80,"wires":[],"icon":"node-red/parser-html.svg"},{"id":"8bd07771.336748","type":"comment","z":"ac0f61dd.69e26","name":"index.js","info":"/* jshint browser: true, esversion: 5, asi: true */\n/*globals $, uibuilder */\n// @ts-nocheck\n/*\n Copyright (c) 2019 Julian Knight (Totally Information)\n\n Licensed under the Apache License, Version 2.0 (the \"License\");\n you may not use this file except in compliance with the License.\n You may obtain a copy of the License at\n\n http://www.apache.org/licenses/LICENSE-2.0\n\n Unless required by applicable law or agreed to in writing, software\n distributed under the License is distributed on an \"AS IS\" BASIS,\n WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n See the License for the specific language governing permissions and\n limitations under the License.\n*/\n'use strict'\n\n/** @see https://github.com/TotallyInformation/node-red-contrib-uibuilder/wiki/Front-End-Library---available-properties-and-methods */\n\n// When JQuery is ready, update\n$( document ).ready(function() {\n /** **REQUIRED** Start uibuilder comms with Node-RED @since v2.0.0-dev3\n * Pass the namespace and ioPath variables if hosting page is not in the instance root folder\n * e.g. If you get continual `uibuilderfe:ioSetup: SOCKET CONNECT ERROR` error messages.\n * e.g. uibuilder.start('/nr/uib', '/nr/uibuilder/vendor/socket.io') // change to use your paths/names\n */\n uibuilder.start()\n\n // Initial set\n $('#msgsReceived').text( uibuilder.get('msgsReceived') )\n $('#msgsControl').text( uibuilder.get('msgsCtrl') )\n $('#msgsSent').text( uibuilder.get('msgsSent') )\n $('#socketConnectedState').text( uibuilder.get('ioConnected') )\n $('#feVersion').text( uibuilder.get('version') )\n\n // Turn on debugging (default is off)\n //uibuilder.debug(true)\n\n // If msg changes - msg is updated when a standard msg is received from Node-RED over Socket.IO\n // Note that you can also listen for 'msgsReceived' as they are updated at the same time\n // but newVal relates to the attribute being listened to.\n uibuilder.onChange('msg', function(newVal){\n console.info('property msg changed!')\n console.dir(newVal)\n $('#showMsg').text(JSON.stringify(newVal))\n //uibuilder.set('msgCopy', newVal)\n })\n\n // You can get attributes manually. Non-existent attributes return 'undefined'\n //console.dir(uibuilder.get('msg'))\n\n // You can also set things manually. See the list of attributes top of page.\n // You can add arbitrary attributes to the object, you cannot overwrite internal attributes\n\n // Try setting a restricted, internal attribute - see the warning in the browser console\n uibuilder.set('msg', 'You tried but failed!')\n\n // Remember that onChange functions don't trigger if you haven't set them\n // up BEFORE an attribute change.\n uibuilder.onChange('msgCopy', function(newVal){\n console.info('msgCopy changed. New value: ', newVal)\n })\n\n // Now try setting a new attribute - this will be an empty object because\n // msg won't yet have been received\n uibuilder.set('msgCopy', uibuilder.msg)\n // Hint: Try putting this set into the onChange for 'msg'\n\n // As noted, we could get the msg here too\n uibuilder.onChange('msgsReceived', function(newVal){\n console.info('New msg sent to us from Node-RED over Socket.IO. Total Count: ', newVal)\n $('#msgsReceived').text(newVal)\n // uibuilder.msg is a shortcut for uibuilder.get('msg')\n //$('#showMsg').text(JSON.stringify(uibuilder.msg))\n })\n\n // If Socket.IO connects/disconnects\n uibuilder.onChange('ioConnected', function(newVal){\n console.info('Socket.IO Connection Status Changed: ', newVal)\n $('#socketConnectedState').text(newVal)\n })\n\n // If a message is sent back to Node-RED\n uibuilder.onChange('msgsSent', function(newVal){\n console.info('New msg sent to Node-RED over Socket.IO. Total Count: ', newVal)\n $('#msgsSent').text(newVal)\n $('#showMsgSent').text(JSON.stringify(uibuilder.get('sentMsg')))\n })\n\n // If we receive a control message from Node-RED\n uibuilder.onChange('msgsCtrl', function(newVal){\n console.info('New control msg sent to us from Node-RED over Socket.IO. Total Count: ', newVal)\n $('#msgsControl').text(newVal)\n $('#showCtrlMsg').text(JSON.stringify(uibuilder.get('ctrlMsg')))\n })\n\n //Manually send a message back to Node-RED after 2 seconds\n window.setTimeout(function(){\n console.info('Sending a message back to Node-RED - after 2s delay')\n uibuilder.send( { 'topic':'uibuilderfe', 'payload':'I am a message sent from the uibuilder front end' } )\n }, 2000)\n\n}) // --- End of JQuery Ready --- //\n\n// EOF\n","x":530,"y":80,"wires":[],"icon":"font-awesome/fa-code"},{"id":"9b587d6d.a6fb","type":"comment","z":"ac0f61dd.69e26","name":"index.css","info":"body {font-family: sans-serif;}\ndiv, p, code { margin:0.3em; padding: 0.3em;}","x":660,"y":80,"wires":[],"icon":"node-red/hash.svg"},{"id":"d559204.2a02fe","type":"uibuilder","z":"ac0f61dd.69e26","name":"","topic":"","url":"demo","fwdInMessages":false,"allowScripts":false,"allowStyles":false,"copyIndex":true,"showfolder":false,"useSecurity":false,"sessionLength":432000,"tokenAutoExtend":false,"x":460,"y":320,"wires":[["f47d534a.e407f"],["820a7d9c.a3af3"]]},{"id":"fcde0509.fb0bb8","type":"inject","z":"ac0f61dd.69e26","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":150,"y":320,"wires":[["8f905f04.6c10a"]]},{"id":"8f905f04.6c10a","type":"function","z":"ac0f61dd.69e26","name":"","func":"msg.payload = [\n \t{id:1, name:\"demo\", age:\"12\", col:\"red\", dob:\"\"},\n \t{id:2, name:\"test\", age:\"1\", col:\"blue\", dob:\"14/05/1982\"},\n \t{id:3, name:\"caller\", age:\"42\", col:\"green\", dob:\"22/05/1982\"},\n \t{id:4, name:\"alfa\", age:\"125\", col:\"orange\", dob:\"01/08/1980\"},\n \t{id:5, name:\"beta\", age:\"16\", col:\"yellow\", dob:\"31/01/1999\"},\n ];\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":300,"y":320,"wires":[["d559204.2a02fe"]]},{"id":"f47d534a.e407f","type":"debug","z":"ac0f61dd.69e26","name":"jquery-debug","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":650,"y":300,"wires":[]},{"id":"820a7d9c.a3af3","type":"debug","z":"ac0f61dd.69e26","name":"uib controls","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":650,"y":340,"wires":[]}]
)