Detail Screen with LOTS of line items

I have a Web App I need to build that will require a header/detail relationship (order header with detail lines). I have used a WebListBox before but the “customer” would rather be able to enter directly into the text fields. Previous I used a dialog box to “edit” one line in the WebListBox.

The lines are limited to a maximum of 25 but there are 8 fields for each line item.

The “customer” is thinking like paper and would accept just a VERY long Web Page with blocks of fields for each of the line items but that would make a form with nearly 300 fields. Building the screen with that many fields is only part of the problem. Since most of the line item fields need some type of editing or other logic this gets “ugly” pretty fast.

I have thought about using fields as a control set and accessing them like an array. This would allow me to write the code for the logic once and specify the “Line Item Number” in the field reference. Could I put all of the line item fields on a canvas or a container and make that scrollable so it appears as a scrollable “window” on the bottom of the Web Page?

Does anybody have experience in making a Web App work similar to a ListBox on a desktop app with “in place” field editing?

I am just looking for a strategy rather than build out something and discover after lots of work that I have a “disaster” that I have to rewrite.


Yes. We like to create a Container list for situations like this. A web container that contains rows of other web containers. What you put in your ‘row’ is up to you but this can be very flexible.

The drawback is that it can get kind of slow. All of those controls have to get rendered in HTML and javascript and pushed to the browser and then reassembled. 300 fields seems like it might be pushing it but only doing it would tell for sure.

[quote=198856:@Mark Strickland]The lines are limited to a maximum of 25 but there are 8 fields for each line item.

With 25 rows, you do not need to scroll.

If you do not need to scroll the WebListBox, and no row is multiline or contains larger font size, you can easily place a TextField exactly on top of a cell, since you have the top of the cell with Row*RowHeight. You may need to calculate the left based on your columns setting, but it is not very difficult.

Then you can have pretty much the same as a Desktop ListBox EditCell : in mouseDown you make the textField visible over the cell, make its Text the cell one. When editing is over and the TextField loses focus, update the cell and make the TextField invisible. Do that for any cell.

With 8 fields per ITEM row it looks like to me that I end up with two maybe three rows of fields per item so a WebListbox does not exactly work. If I don’t stack them the column widths get pretty narrow to keep them in a single line. I know that a single field can horizontally scroll as it fills up with data but needing 8 columns wide is a cosmetic not technical problem and I cannot depend on a wide display with lots of pixels.

BUT — According to the XOJO docs a DESKTOP Container Control cannot be part of a control set. It does NOT say the same about a WebContainer. A quick test shows that you can create a WebContainer Control Set.

It appears that this is possible:

If this works then I do NOT have to duplicate all of the logic and editing. I just add the Individual Item Container to a Group container 25 times. I can make the outer Group Container control show 2-3 item containers and make it scrollable.

OK ---- I guess I am off to do some R&D and build some sample screens.