Skip to content

Open Lowcode Editable Tree Table

Jump to bottom
Open Lowcode edited this page May 17, 2020 · 8 revisions

The story

The Editable Tree table widget has been introduced with Open Lowcode Release 1.7. It is the most powerful widget to date on the path to provide spreadsheet-like ergonomics. Spreadsheets are the preferred tool in enterprises, and rightly so. They provide a quick way to read, analyze and modify data sets of hundreds or thousands of rows, which represent 90% of the daily office work.

This component incorporates the following great features of spreadsheets:

  • easy edition in a table. You can modify dozens or hundreds of data rows in one action without parasite clicks and actions (search objects, open first object...)
  • provide totals for amounts entered while edition is made (without any roundtrip to a server)

It also improves on what the spreadsheet can offer:

  • each cell is a data object with its full history and business rules
  • data can be organized by more than 2 dimensions. One Dimension is used for columns, and several dimensions can be put in the hierarchical tree for rows.

Editable Tree Table concept

As any feature in Open Lowcode, it is completely agnostic to the business process it is used in. You may want to use it to enter grades for a school, financial data or anything else.

The component

The editable tree table component is available as a standalone component.

The component takes as input an array of objects, each object representing a cell. It orders and displays them by assigning attributes of objects to lines or columns and displaying the payload in the corresponding cell.

Here is an actual example

EditableTreeTable<TestObject1> mockupgrid = new EditableTreeTable<TestObject1>(objects);
mockupgrid.setLineGrouping((a) -> (a.getChoice1()),
	(a) -> (a.getKey()), (a) -> (a.getLabel()));
mockupgrid.setLineGrouping((a) -> (a.getChoice2()),
	(a) -> (a.getKey()), (a) -> (a.getLabel()));
mockupgrid.setColumnReadOnlyField("Status",(a)->(a.getStatus()), (a)->(a.getKey()),(a)->
	(a.getLabel()),EditableTreeTable.GROUPING_SAME);
mockupgrid.setColumnGrouping((a) -> (a.getTimeperiod()), 
	(a) -> (a.encode()), 
	(a) -> (a.toString()),(a)-> (a.getBigdecimal()),
	(a,b)-> a.setBigdecimal(b),"EAC",
        EditableTreeTable.GROUPING_SUM,EditableTreeTable.BIGDECIMAL_OPERATOR,
	new BigDecimalFormatValidator(7,2));

In this example, we declare two levels of line-grouping for choice1 (country) and choice2 (CAPEX/OPEX). The tree will display elements split first by country and second by type of financing. Then, one column is shown agregating the field status, providing it is the same for the whole line.

Then, we declare a ColumnGrouping using the TimePeriod field as criteria for column, and using the BigDecimal field as payload. All data will be considated by sum (it could be also average...).

The component will display consolidated information whether there is a unique object for the 3 criteria (choice1, choice2, TimePeriod), but will only allow update if there is a single object corresponding to the 3 criteria.

Here is how the widget looks like.

Actual Component

Integration in Open Lowcode framework

In Open Lowcode, applications are built by assembling data objects from properties (check the 10 minutes tutorial for a reminder of Open Lowcode basics. An editable tree table can be configured in the object model through the LinkedToParent property.

LinkedToParent allocatedtoparent = new LinkedToParent(
	"ACTBUD", // name of the link
	project,  // parent object, the editable tree table will display 
		  // all allocatedbudget elements fora project
	null,     // not used
	"YEARALLOCATED", // column criteria
	"DIRECTORATE",   // major line criteria
	"ENTITY",        // minor line criteria
	"AMOUNT",        // payload field
	new String[] {"STATE"},      // read-only columns
	new String[] {"OBSOLETE"});  // exception value to consolidation
Clone this wiki locally