Inline edit (similar to cells in Editable Table)

Hi community,


I'm trying to get to the underlying controls for the Editable Table. The Editable Table displays information in an Expression, and when clicking on it turns into a normal input. When hitting ENTER it accepts the input and returns into the read-only Expression.

It seems odd that the behaviour is there but not available as a stand-alone control. Yes, I could implement this with an IF widget etc - but passing through everything from StyleClass to underlying data type and validation seems to be quite a mission.


Am I missing something?


Best

Eduard

Hello Eduard, 

Sorry, but I couldn't grasp what you're trying to accomplish... 

The Editable Table works out of the box, and it is a System component, like the Table Records. 

What's exactly the problem? 

Cheers. 

Hi Eduard,

Nope you are not missing anything. That behaviour is implemented client side by the Editable Table widget, and there's no other built-in widget that mimics it, so you would need to implement it yourself if you need it. I can tell you, in the past I have implemented a similar (albeit uglier) behaviour on regular table records, it wasn't that much of a mission, even though it was annoying to reinvent the wheel.

Ah... Now I see the question... 

By experience I can say that I also implemented the functionality in a normal TableRecords. 

With some creativity you can even create something more generic, even if not as easy to use as Editable Table offers. 

This can be useful in situations where the table is comes (like it was the case). 

In general I try to avoid the Editable Table. 

Cheers 

Eduardo Jauch wrote:

Hello Eduard, 

Sorry, but I couldn't grasp what you're trying to accomplish... 

The Editable Table works out of the box, and it is a System component, like the Table Records. 

What's exactly the problem? 

Cheers. 

Apologies, I only need a single input - not a table. 

In the example above it's a title, that I'd like to be able to edit (when clicked on it). The Editable Table has this out-of-the-box and also reacts nicely to ENTER and ESC. I figured the control used in there could also be used stand alone. 


Does that make sense Eduardo?


Hi, yes. 

But it is a bed idea... As the Editable Table has controls to add lines, styles, etc. 

In this case I would just put an expression inside a container with the OnClick event calling an screen action to show the input instead (trough an if). 

If the input is inside a Web block, you can have a default button for it that will work for the Enter part. 

The Esc you will need JavaScript... 

Cheers 

Why is it a bad idea? It's a very common UX pattern in modern websites.


I have gone down that path of creating a custom web block with an IF etc - but to my original point i would lose all of the normal INPUT properties (like data type, Style Class etc) - or expose them all manually. Seems like a messy undertaking.

Jorge Martins wrote:

Hi Eduard,

Nope you are not missing anything. That behaviour is implemented client side by the Editable Table widget, and there's no other built-in widget that mimics it, so you would need to implement it yourself if you need it. I can tell you, in the past I have implemented a similar (albeit uglier) behaviour on regular table records, it wasn't that much of a mission, even though it was annoying to reinvent the wheel.

Gotcha. So best to use the chrome dev tools and grab the javascript etc from a browser rendering an editable table?