Hey Lena,
Not that I know. And I don't think my old partner @Steve-Mcl has added something like that...
Hi Paul,
Can you please share how you did the burger menu button. That would help me a lot.
Thank you.
It's just a ui-button with fa-navicon fa-2x added to the Icon property in the node's config.
The Label is left blank.
[{"id":"11664387.63fb8c","type":"ui_button","z":"c9c4eeb8.bad8e","name":"","group":"f93124ac.7c74c8","order":1,"width":2,"height":1,"passthru":false,"label":"","tooltip":"","color":"","bgcolor":"#2A2A2A","icon":"fa-navicon fa-2x","payload":"","payloadType":"str","topic":"","x":140,"y":280,"wires":[["9698471f.961b68"]]},{"id":"f93124ac.7c74c8","type":"ui_group","z":"","name":"Chart","tab":"6cb7ce21.162a1","order":1,"disp":true,"width":"22","collapse":false},{"id":"6cb7ce21.162a1","type":"ui_tab","z":"","name":"Realtime Power","icon":"dashboard","order":9,"disabled":false,"hidden":false}]
Thanks, I thought you found a way to determine the x and y coordinates for that button to feed into the context menu. That is what I`m desperately looking for:
A way to anchor a position on the dashboard (like a button, but could be a dummy too, which can deliver the coordinates. It would be perfect if the ui-button node issues the x,y, of the mouse and x1,y1,x2,y2 coordinates of the button area on every press somewhere hidden (msg.ui_control.x1) for example. Or a general upgrade to the ui-control node to emit x.y coordinates on every mouse press ("Output: mouse events") perhaps here:
Than would be "universal" solution and only there if needed.
To hum it may concern: "Is this an idea that could be realized? Sometimes?"
I know I'll get abuse from @BartButenaers & @Steve-Mcl for suggesting this, but...
It would be great if a specific new node was created that combined the button and context menu, so instead of providing coordinates, the menu would always fall gracefully from the node itself.
Currently using coordinates, the menu appears at slightly different positions relative to the ui- button, depending upon the browser (laptop v phone v tablet).
3 Likes
Will try to implement it as soon a I am retired, which is in about 21 years. So please be a bit patient ....
But instead of creating combinations of nodes, "perhaps" a UI node could send:
- The clicked coordinates (like we currently do)
- The bounding box (minX, minY, maxX, maxY) of the element that has been clicked.
Then you can calculate in your flow where you want to show the contextmenu. E.g. when you want to have the contextmenu to appear in the center of a button, then you just calculate the center of the button yourself. (ButtonNode --> FunctionNode (calculate the location) --> ContextMenuNode).
Just a wild idea... Not sure whether this is possible, and no time at the moment to try something...
As I wrote before .... If I would use the existing ui-control node with one extra option.
I expect it already sits on the correct position to catch these events ...
But I have
- so many other things to do
- not enough knowledge of HTML and framework stuff
- need somebody to slow down the earth, 24h are not enough.
Oeps, completely overlooked your sentence in the flood of feedback I get from all over the place at the moment. But then at least we are the same wavelength 
But never used the ui-control node myself, so hopefully someone else (reading this) has some time to experiment with it. Otherwise our proposal will die a slow dead here and now ...
slowing trend is about 2.3 milliseconds per century ...
It's your own fault Bart, you shouldn't share such interesting & useful nodes 
(But I'm grateful that you have)
Than I have to live a little bit longer, a few centuries perhaps ?
No problem, happening myself from time to time.
Thank you for this node help to keep the dashboard clean from rarely used but sometimes useful options.
Still desperately seeking for an anchor on the dashboard to use it more often.
Version 1.0.10 is now available:
With this version, @Paul-Reed has confirmed that the contextmenu is always drawn on top.
1 Like
Hi ! I know it;s kinda late. But may I know how you set the X and Y in your ui-Table?
I can't see properties of X and Y when I clicked my table.
Thank you.
Hi, no problem to be late.
What you need is one or more callbacks injected into ui-table via msg.ui_control i.e.
{
"customHeight": 18,
"tabulator": {
"columns": [
{
"field": "expand",
"headerTooltip": "click to expand more details",
"headerContext": "function(e,column){ this.send({ui_control:{callback:'headerContext'},position:{\"x\":e.x,\"y\":e.y},payload:column.getFieled()}); e.preventDefault(); }"
}
]
}
}
The function in a more readable format you can define for every column, cell or row ... (this one only reacts on context (right) clicks on the header
var headerContext= function (e, column) {
this.send(
{ui_control: { callback: 'headerContext' },
position: { "x":e.x,"y":e.y},
payload:column.getField()
}
);
e.preventDefault();
}
there is a cellContext or rowContext too with slightly different parameters
Hi Christian,
I posted question regarding row context Menu not working on the table.
I hope you can help me.
