Dynamic Table
INTRO
Inspired by Ken's Tableview extension, and following the arrival of version 3 of KevinKun's DCLite extension (now known as CompCreator), and given that several folks were needing more functionality, I have put together an example/demo (whatever) of how you can generate an editable dynamic table using blocks. The developer can change various colours, fontsizes, and set individual column widths. In this example data is loaded from a simple "built" table and the edited data is saved to a tinydb.
Although to do this requires some 700 blocks (70% of which are used to generate and format the table), its intended use is as a part of an app to display and edit data, from any source the developer chooses. I would recommend to not fiddle about with the code/blocks too much, the text box resizing routines can be very temperamental!
This example was tested using App Inventor 2 on Android 10 and Android 11 devices in companion (2.62u) and compiled
HOW DOES IT WORK?
A table of data with headers (plain columns and rows) is loaded into an AI2 list (a list of lists...)
The number of columns and rows are extracted from the list
The headers are separated out.
Various property settings are made (e.g. colours - odd/even rows, font sizes, column widths)
A dynamic table is generated using CompCreator
The table is built with multi-line text boxes which allow for editing
After editing, the user simply selects another text box to complete and save
The table can fit the screen (width, vertical scroll only)), or overflow and scroll in both directions, headers are fixed
Various routines provide for the resizing of the text boxes after editing and saving of edited/updated data to persistent storage
Gotchas...
Headers can be edited and saved in V3, but are not multi-line.
When used in portrait mode, the text boxes do not expand vertically when editing, e.g when a new line is added
You may get a different behaviour in landscape mode, requiring a "Done" then select another text box
Don't think it makes any difference, but ensure that the "ShowListsAsJson" box is ticked in Screen1.properties
For a table with a large number of columns, it may be necessary to edit the width sizing (see further down)
On initialise, the saved updated data is loaded, if there is none, then the default table data is loaded
Many variables are set for the various settings and lists required (this is just a few of them)
The procedure for individual column width settings. note that for "fit" the width settings are percentage values. You will also see that some of the width values have a -1 or -2, this is to ensure a border on the right. This may need adjustment for a table with many columns for an appropriate view.
The column width procedures. by removing all the setCol procedures you will use the default column width setting. You can set none, one, more or all widths for all columns.
The settings procedure. You can safely edit these values to your liking. Setting the odd/even colours the same will present a single colour table...
The Load Data button click. Here we set the list, apply all the settings, reset most of the variables, clear any previous table, set the required horizontal arrangement for display, and run the loadData procedure (next up)
The big horrible one! This procedure generates the table and applies the data. The header is separated out from the data itself so that it can be fixed. Spacers are inserted at various points to help with the formatting of the table. Various lists of components are also created. Towards the end a list of lists of all the data textboxes (component names) is generated.
This should demonstrate the power and flexibility of the CompCreator extension, a mighty thing, in a tiny package!
The last five sets of blocks and procedures I will cover together. Here we handle the text box editing and resizing. Text box selection is handled by the GotFocus and LostFocus events. The tricky part is to hand off the newly selected text box after the previous text box has been edited, to ensure that the correct row in the table is selected for resizing. The procedures ensure that a check is made as to whether the resizing is for a page/table load, or follows a text box edit. Simple (not). When the clock is run, I also handle the updating of data to the tinydb, and run the procedures for setting individual column widths.
VIDEO
First shows the tables in standard format and then in fit format, and demonstrates the table editing. Then individual column widths are applied to both views. Also shows how to unset the saved data to restore the default table