UI-Table: how to use commands to add / update table content dynamically

Good afternoon guys.
I have a question and I'm going to the forum for sure someone will know the answer.
I'll try to explain.
I'm using for learning and ready example of the ui table node( node-red-node-ui-table). In the example it is possible to add, remove, update. Node red version V1.0.3.
Doing a test I moved the button in example(add one row @ end) to another flow.
And with a button in another flow it is not possible to add even one row in the table.
Only if it is in the same flow it is possible to add.
Sorry for my lack of experience, if anyone can take this doubt I thank you very much.

Hi,

Are you using the in/out nodes? Place a debug node (full msg object) at the in node and see if you get the same results as when you place a debug node on the button of the example flow.

Hi, first thank you very much for your help.
First test with button in the same flow as the table. I used the button (addRow @ end)
Debug in output function addRow @ end:
These were the lines

{"command":"addRow","arguments":[[{"id":25,"timestamp":1584472307272,"text":"addRow @ end (#25)"}],true],"returnPromise":true}

{"topic":"success","ui_control":{"callback":"addRow"},"return":{"command":"addRow","arguments":[[{"id":25,"timestamp":1584472307272,"text":"addRow @ end (#25)"}],true],"returnPromise":true},"socketid":"EUomhZLgmGfXXFjMAAAD","_msgid":"ff6c7e4f.b4783"}

["findIndex",{"id":25,"timestamp":1584472307272,"text":"addRow @ end (#25)"}]

The second test with button in another flow:
Only this line appears:

{"command":"addRow","arguments":[[{"id":26,"timestamp":1584472835732,"text":"addRow @ end (#26)"}],true],"returnPromise":true}

Thanks

Hi, please use the "code" function to paste code / json or flows
2. please switch the debug node to complete msg.object

image

{"command":"addRow","arguments":[[{"id":25,"timestamp":1584472307272,"text":"addRow @ end (#25)"}],true],"returnPromise":true}

When you say

Do you perhaps actually mean that you place the button to another dashboard tab?

Hi, the debug node is in complete msg.object:

{"payload":{"command":"addRow","arguments":[[{"id":1,"timestamp":1584474451025,"text":"addRow @ end (#1)"}],true],"returnPromise":true},"socketid":"aH--JAU5LuhBGJVEAAAE","_msgid":"4038a904.967818"}
{"topic":"success","ui_control":{"callback":"addRow"},"return":{"command":"addRow","arguments":[[{"id":1,"timestamp":1584474451025,"text":"addRow @ end (#1)"}],true],"returnPromise":true},"socketid":"aH--JAU5LuhBGJVEAAAE","_msgid":"3cc62244.8b237e"}
["findIndex",{"id":1,"timestamp":1584474451025,"text":"addRow @ end (#1)"}]

The first test button in same flow at ui table

The second test button another flow:

{"payload":{"command":"addRow","arguments":[[{"id":2,"timestamp":1584474798251,"text":"addRow @ end (#2)"}],true],"returnPromise":true},"socketid":"aH--JAU5LuhBGJVEAAAE","_msgid":"ab4bcfe6.e1023"}

Before the second test I clear the table and pressed the button on the other flow but didn't add it to the table

Again the question. You mean the button is on another TAB not flow?

like here?
image

So I assume you press the button on the other tab, switch the tab with the "burger" menu on the upper left corner and then the table is empty.

Yes you are correct sorry for my mistake - Is TAB not Flow.

image

Pressing the same button(addRow @ end) on another TAB does not add a row to the table. I can't understand why the same logic just moved.
I'm using default example I didn't change anything.
Thanks

So you basically took the original example and moved the button from to another dashboard tab.
That’s something I can work with. Give me some time to figure it out.

Dear. Yes I used the example and moved the button from to another dashboard tab.
Thanks for your help.

OK I looked into it. This problem is more general for more complex widgets (witches which not only display a single value as text or gauge)

If a widget is not on the actual tab the dashboard stores the last message to replay it as soon the widget gets visible again. because the widget does not exists on the client side when you are on a different tab and click on the button this fails.

But this "simple" general purpose approach is not working for more complex widgets like ui-table with commands. They will simply never reach the table.

That's why my flow design has always a "helper" node in fornt of the table. Processing all updates and replays the complete table when the tab connects or a new client logs in.


you see the data comes in from the in node passes through the helper node and then to the table. Se

Example uses a simpler method:
image
Data goes into the table first and to the recorder node on the output. which then restores the table when ui-control triggers. But when the table widget does not extist nothing is passed and nothing will be recorded.

You can find the ui_table handler (subflow) here:

It is quite universal and I use it for several table with completely different purpose, look and feel.
It even can handle table edits, layout changes, hiding and revealing columns and in a new version I add row sorting. The documentation of the helper node is a little bit old but covers the basics.

Sorry no easy fix.

Dear.
Thanks a lot for the help.
Then are if I understood the solution would be use a flow "helper" node in front of the table?
Sorry for my ignorance or relatively new on node red. How I create the "helper" flow in front the table?

Thanks.

I call the subflow node ui-table helper. But it is not an easy task for beginners.
It basically:

  • handle ui_control
  • table buffer
  • table edit buffer
  • table refreshing
  • some commands (like hiding columns)

It expect one table data down to cell level. Rows must have a index column with the unique data to identify each row (a row counter for example)

It can handle results from callback functions.

All this is used in the remote-device-table flow.

Yes what you like to do is possible with this subflow.

Dear.

Please one more doubt.
How do I leave the ui-table with fixed size?

Thanks

Dear
I still have some difficulties I'm trying to learn. Please be able to share the example of the figure:

I thank you for your help.

Is I said, this is part of a bigger flow You can find everything here:

the key node (actually it is a subflow) for you is `ui-table handler´ placed in fornt of ui-table:

I took the afford to write some docs in the info panlel: More docs on my github repro

  • Replace the in node with your data source
  • the messges must have a topic and a row property in this case ´state´
    example:
    msg={"topic":1,state={"col1":1,"col2":5,"col3":3.23}
    where topic is the index (sting or number)
  • one column must be a unique index field. This gives you the ability to update rows instead. if a value in the index column is new a new row will be added, is it is existing this row is updated. Define the index field in the tabulator json too.
  • define the tabulator json as you need. There are many callbacks defined. It is not convenient to edit them in the json editor. So copy paste them in a function node and past them back. But you can leave them in they should not do any harm. The tabulator json gives a lot of different formatted columns definitions ... you will perhaps find what you need.
  • the copy paste example in ui-table gives you a good start how to use callbacks (as there is only one and a function node explaining how to do this)

As I said before, not suitable for beginners but "willing to learn" triggers "willing to help" @ my side. I always want more than I'm capable but grow with the challange.

Hi i didn’t recognized your first question:

A) use a decend widget size and not auto
B) use the customHight property in the tabulator json
C) use the latest version of ui-table - there is a fix for what might be your problem

And last but Not least a simpler flow as an example showing the use of ui-table helper

Even if you don’t have a device or software sending syslog messages you can use the inject node to simulate the data input.

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.