Creating Quick Tables in Ubot From REST API Data

SourceUltra · January 5

I've used Ubot sporadically, bouncing around from different automation tools like actiona, ui.vision, and autoit, but I always come back to ubot because it is easier to build user interfaces. One of the best integrations I've come across with ubot is Tabulator. Tabulator is a javascript library that helps you build interactive tables and grids. I honestly love it and use it in all of my projects where I need spreadsheet-like control over my data. Heck, I prefer using it over google sheets!

Most of all, I love it because it makes viewing API data easy!

In this example, we can GET all of the blog posts on the Ubot dev blog and display in one table. Tabulator does its best to display the data. Of course, some of the data is nested and shows as an [object Object] which is expected. We could if we wanted to, have the table show only the elements we wanted, which the Tabulator documentation shows you how.

comment("Table from a wordpress site\'s rest api, autocreated out of JSON!")
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 Selected</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\">

//define table
var table = new Tabulator(\"#myTable\", \{
ajaxURL: (\"https://network.ubotstudio.com/wp-json/wp/v2/posts/\"),
    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();
\});
//copy to clipboard
$(\"#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>")

You can also of course parse and filter the data as much as you want within your bot as well, and format the table to your taste by telling it what JSON to load.

Sometimes with scraping bots, you want to scrape elements from a page and add them to the table row by row dynamically.

In these cases, all we have to do is use:

run javascript(" table.addRow(\{\});")

This function adds a new row to the table. Of course, you will need to add parameters to this function to add data to the table. Tabulator also has a table.deleteRow(); function and so much more. Basically everything you need to manage your data.

All you gotta do is read the documentation https://tabulator.info/examples/6.3#adddel. It's extensive and covers everything. You can also have ChatGPT build tables for you by asking it to create a table with tabulator. If you go this route, you'll likely have to update the code as it will use older versions of tabulator that aren't as well supported in browsers today.

Here's an example that uses your own json data:

comment("using your own local json data (the json array is set to var tabledata in the code below)")
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>")
run javascript("   table.addRow(\{\});")

Hope this helps someone. It's a great library to use in ubot for sure. I mostly use it for displaying and interacting with the Wordpress REST API. I know at one point I used a datagrid plugin for tables but prefer this as it is easier and more customizable.

Also. You might think you could just set that JSON in the previous example as a variable in ubot, and use that in the load html --and you should absolutely believe that is possible, but it's not. Loading variables in the "load html" command doesn't work for some dumb reason. You have to create the html as a FILE, then edit that file to possess the JSON, THEN load that into the load html. Kinda dumb, but that's how botting tools work.

shekhar007 · January 7

its good, need to try, i was using another jquery table plugin

Sign In

Creating Quick Tables in Ubot From REST API Data

Recommended Posts

SourceUltra 10

Link to post

Share on other sites

shekhar007 0

Link to post

Share on other sites

Join the conversation

Browse

Activity