Dynamically add user interface

tables
guidelines
design
ui

#1

Hi guys, i sprent a lot of time doing software behavior on front end that need to satisfy a one to many relation, imagine that you have a table that you need to append rows on that dynamically, whats the best approach for that? do you guys have some lib in js that works well ?


#2

Hey augusto! I’m having a bit of a hard time understanding your question. Can you clarify it a bit? Maybe provide some visuals as well?


#3

Sure, something like that:

the idea is use less code possible, i know that a better path is not add a row and let user input data in that row, instead use a modal to show a form and then append this data to the table, but i fell a lack of libraries in js for doing that integratin with bootstrap for example, im trying to find a good point between a good user experience and a reliable code, i found this Thread:

http://community.uxmastery.com/t/another-pattern-for-dynamic-expanding-forms/3073

but the guy is having the same problem than me, i would like to know a better way to do that, thanks :slight_smile:


#4

hi @augusto !
First idea I’ve in mind is to always keep an empty line at the end of your table and set each row of it (or only those you want the user can fill) as editable.
When you create your line in JS, just add an event launched when you want (for example : when 1 row is filled, when all of them are filled, whatever you want)
If number of line is a problem, juste use a navigation to your table (i.e 25, 50 or 100 entries per page) and add dynamically the editable row at the end (no matter on the page index you are)

I think this is the best for the user!
Maybe not regarding performance but, honnestly, the process is not so heavy :smiley:

And for bootstrap integration, no probleme, your table keep the bootstrap style :wink:

But if you really want a modal dialog to create new line (which is very heavy when user needs to add many line I think), take a look at Bootbox, personnaly I really like it and it is very simple to use :smiley: