Tables are a core feature in data driven applications. Ubot Studio already helps you create html tables from csv files, but this requires constant refreshing of the Ubot browser to update the tables data. Do this a thousand times and you will annoy your users with a constantly refreshing browser window.
So how CAN we add data to a table without having to refresh the browser constantly? The answer is we use AJAX. But the problem is many of us bought Ubot Studio so we wouldn’t have to write code, so that doesn’t really help. There’s really no no-code solution to building bots. At some point you will have to dive into code, so we’ll have to compromise and find a solution that helps us without requiring you to become a full-blown coder. Since we CAN read tutorials and follow along with them, maybe there’s an AJAX script available that is well documented and easy to use…
And there is! It’s called Tabulator and I’ve mentioned it a few times here already, providing a basic example bot of it in action and a small application that browses a wordpress site’s rest api for all published content. It’s one of the best javascript libraries out there for creating and editing tables. There are basic admin functions for removing and adding entire tables, rows, and cells of data on the fly dynamically. Javascript runs to change the data that is displayed on the browser page. It’s a fancy way of updating data on a website WTHOUT having to reload.
This is accomplished by running one simple function with the Run Javascript command in Ubot. You can go ahead and paste this into your test bot to see it in action. But before that we need to initialize the Tabulator script into our Ubot browser; we do this by using load html command:
load html("<html>
<title>Rest Explorer</title>
<body>
<link href=\"https://unpkg.com/tabulator-tables@4.6.3/dist/css/tabulator.min.css\" rel=\"stylesheet\">
<script type=\"text/javascript\" src=\"https://unpkg.com/tabulator-tables@4.6.3/dist/js/tabulator.min.js\"></script>
<script src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js\" type=\"text/javascript\"></script>
<h1>Table</h1>
<div class=\"table-controls\">
<button id=\"select-row\">Select \"Oli Bob\"</button>
<button id=\"deselect-row\">Deselect \"Oli Bob\"</button>
<button id=\"select-all\">Select All</button>
<button id=\"deselect-all\">Deselect All</button>
<button id=\"copy-selected\">Copy Selection</button>
<span id=\"select-stats\" style=\"margin:20px 20px 0 20px; font-size: 1em;\"><strong>Selected: <span class=\"highlight\">0</span></strong></span>
</div>
<div id=\"myTable\"></div>
<script type=\"text/javascript\">
//we can define our own json data to use in the table
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\"\},
];
//define table
var table = new Tabulator(\"#myTable\", \{
data:tabledata,
autoColumns:true,
selectable:true,
clipboard:true,
rowSelectionChanged:function(data, rows)\{
//update selected row counter on selection change
$(\"#select-stats span\").text(data.length);
\},
\});
//select row on \"select\" button click
$(\"#select-row\").click(function()\{
table.selectRow(1);
\});
//deselect row on \"deselect\" button click
$(\"#deselect-row\").click(function()\{
table.deselectRow(1);
\});
//select row on \"select all\" button click
$(\"#select-all\").click(function()\{
table.selectRow();
\});
//deselect row on \"deselect all\" button click
$(\"#deselect-all\").click(function()\{
table.deselectRow();
\});
//deselect row on \"deselect all\" button click
$(\"#deselect-all\").click(function()\{
table.deselectRow();
\});
//copy selected
$(\"#copy-selected\").click(function()\{
table.copyToClipboard(\"selected\");
\});
var pageRows = table.getRows(true);
var selectedRows = table.getSelectedRows();
var rows = selectedRows.filter(value => -1 !== pageRows.indexOf(value));
</script>
</body>
</html>")This is an example I pulled from the example bot I mentioned above.
The load html command has to be ran before we can add data dynamically to the table. To add data we use Run Javascript:
run javascript("table.addData([{doge:\"4\",eth:\"3\",btc:\"2\",zec:\"1\"}]);")This is a javascript function in the Tabulator library that lets you add entire rows of data on the fly without having to refresh the browser. There are functions in tabulator that let you use helpful features like clipboard, delete, replace and much more.
If you put that inside a loop and run it 1000 times you will likely crash the Ubot browser, so be aware. It works fine with a small wait of .1 seconds, but you may need more or less depending on your computer.
One Custom Command to Rule Them All
So far I’ve used Tabulator to build simple crypto price trackers, pricing tables and table tables. I made enough tables to get started on a custom command for creating tables easily. Now I can include one Ubot bot in other projects to get the table functionality bots so desperately need.
I do this by using the Include command and pasting the path to the .ubot file I’ve called Tabulator-Total.ubot. In my bots the include looks like this:
include("C:\Users\MyComputer\Desktop\Tabulator-Total.ubot")That Tabulator-Total.ubot project has all the custom commands and functions I need to easily build tables. With the include command I don’t have to clutter my bots with repetitive commands and functions, instead I leave them in a bot to then “include” in the bots I want it in.
This custom command is far from perfect, but it DOES let you add data on the fly. There’s still a lot to add to it. Tabulator is a large script, with lots of functions available that takes time to learn. Each function would ideally have it’s own function in the Tabulator-Total.ubot project… but it will take a lot of time to finish.
Here’s the parameters I have created in the Tabulator Total command:
- tableData – doesn’t work yet but will let you add load an entire table that you already have data for.
- tableColumns – define the column headers, separating column with a | (pipe).
- ColumnsWithDefinitions – this isn’t finished.
- ColumnsDefinitions – not finished.
- setGroupBy – lets you group by values. You can have table data show in presorted groups where each row in the group has a specific value.
- setGroupValues – not finished.
- setGroupStartOpen – set to true it will automatically start the table with all groups expanded. Set to false all groups will be collapsed.
- CRUDData – when set to add then data will be added to the table. Eventually I want to have it a remove parameter that will let you DELETE the row that you set in CRUDRow. The Pipes seperate the values for each cell, and they go in exactly the order they are in. There must be as many cells as their are columns, so empty cells would be || , which means the cell has nothing.
- CRUDDuplicates – set to true you can allow duplicate rows to be added. set to false then only unique rows will be added. VERY helpful!
With these customizable parameters the idea is to be able to quickly and easily create a table with the features you need. The end result will be a table that updates without having to refresh the browser.
Hopefully it gives you an idea of how you can integrate Tabulator into your bots!
The next steps for this project will be to flesh out the parameters to be more customizable.
When you open the Tabulator-Total.ubot project up you’ll find there is 1 main command called Tabulator Total and a couple functions that are used within that command. It’s sort of a mess but it works, and that’s all that matters right now.
Plugins Used
- JSONpath.dll
Warning: Invalid argument supplied for foreach() in /home/actionreed/public_html/su/wp-content/themes/thrive-theme/inc/classes/class-thrive-theme-comments.php on line 463