Eclipse Community Forums
Forum Search:

Search      Help    Register    Login    Home
Home » Eclipse Projects » scout » UI Design: Best way to implement handling 1:n relations
UI Design: Best way to implement handling 1:n relations [message #1748425] Wed, 23 November 2016 05:21 Go to next message
Peter Pfeifer is currently offline Peter PfeiferFriend
Messages: 187
Registered: November 2014
Senior Member

nni there,

just wondering if any of you has experience in designing a UI that has a 1:n relation.

Let's say I have got an invoice with a lot of invoice positions.

What would be the less cumbersome way for the end user to add/edit/delete invoice position (preferably in an inline editable table)?

Since you'll never know if an invoice will have 1,2 or 30 invoice positions how would present the the editable table in the UI?

How should it be possible to add new lines if needed? E.g. a button which says "Add 10 more lines..." or could there be some magic, which adds a new table row, when TAB is pressed in the last column of the last line?

How are you dealing with such a use case?

Any experience?

Thx,

Peter

[Updated on: Wed, 23 November 2016 05:23]

Report message to a moderator

Re: UI Design: Best way to implement handling 1:n relations [message #1748436 is a reply to message #1748425] Wed, 23 November 2016 08:31 Go to previous messageGo to next message
Matthias Zimmermann is currently offline Matthias ZimmermannFriend
Messages: 199
Registered: June 2015
Senior Member
there are two standard ui patterns in scout to deal with 1:n relations

option a) create a page for the main entity having the n sub-elements in a child table page. in that case use table page menus on the child-page to add/change/remove sub-elements. you can find an example for something this in the scout contacts application [1,2]: look at how employees are handled below organisations (the example shows how to use a nod page, this is what you would use if you have several 1:n sets below the main entity.

option b) in the form of the main entity you may add a table field to manage sub entities. for a non-editable table you may want to look at the event form in the participants tab. you can find a second example with an editable table in the scout widgets application [3,4].
go to outline "Advanced Widgets" and click on the TableField node. you will find the editable table example in the lower part of the form.

> How should it be possible to add new lines if needed? E.g. a button which says "Add 10 more lines..." or could there be some magic, which adds a new table row, when TAB is pressed in the last column of the last line?

so far, there is not TAB magic, just add menus that are doing what you need (you may add a keyboard shortcut to improve usability)

hope this helps

[1] https://www.eclipse.org/scout/ (click on the Try "Contacts" button)
[2] https://github.com/BSI-Business-Systems-Integration-AG/org.eclipse.scout.docs/tree/releases/6.1.x/code/contacts
[3] https://www.eclipse.org/scout/ (click on the Scout Widgets button)
[4] https://github.com/BSI-Business-Systems-Integration-AG/org.eclipse.scout.docs/blob/releases/6.0.x/code/widgets/org.eclipse.scout.widgets.client/src/main/java/org/eclipse/scout/widgets/client/ui/forms/TableFieldForm.java
Re: UI Design: Best way to implement handling 1:n relations [message #1748442 is a reply to message #1748436] Wed, 23 November 2016 09:02 Go to previous messageGo to next message
Peter Pfeifer is currently offline Peter PfeiferFriend
Messages: 187
Registered: November 2014
Senior Member

Hi,
thanks for the elaborate answer. I'll think it will be option (b), somehow.

As I know the target audience quite well, I will have to convince them, that an full fledged Excel input behavior is not possible Smile

Peter
Re: UI Design: Best way to implement handling 1:n relations [message #1748443 is a reply to message #1748442] Wed, 23 November 2016 09:05 Go to previous messageGo to next message
Matthias Zimmermann is currently offline Matthias ZimmermannFriend
Messages: 199
Registered: June 2015
Senior Member
a while ago we were thinking around more excel like behavior for data entry. however, for us this currently has low prio. options to change this situation are either via contribution or sponsored development Wink

best regards
matthias
Re: UI Design: Best way to implement handling 1:n relations [message #1748444 is a reply to message #1748443] Wed, 23 November 2016 09:09 Go to previous messageGo to next message
Peter Pfeifer is currently offline Peter PfeiferFriend
Messages: 187
Registered: November 2014
Senior Member

Well, since I'm not that skilled developer contribution is not an option Smile

What would this feature be worth?

Peter
Re: UI Design: Best way to implement handling 1:n relations [message #1748445 is a reply to message #1748444] Wed, 23 November 2016 09:19 Go to previous message
Matthias Zimmermann is currently offline Matthias ZimmermannFriend
Messages: 199
Registered: June 2015
Senior Member
as this is our open source forum we should separate commercial things from non-commercial topics. could you please ping us on scout (a) bsi-software.com?
Previous Topic:Forms and PropertyListeners
Next Topic:scoutjs
Goto Forum:
  


Current Time: Fri Jun 23 05:25:40 GMT 2017

Powered by FUDForum. Page generated in 0.02966 seconds
.:: Contact :: Home ::.

Powered by: FUDforum 3.0.2.
Copyright ©2001-2010 FUDforum Bulletin Board Software