4D View Pro: Display your Collections as Tables

Automatically translated from English

You know it already; 4D View Pro allows you to easily load and display data in spreadsheets.
4D v19 R6 brings exciting news. This blog post will show you the new table feature that enables you to do much more and benefit from additional properties like headers, table resize, summary row, column sorting, filters, and more. You’ll also discover how to quickly load data from data classes and collections. And don’t miss out on the demo, which provides a complete example and some visual charts as a bonus.

HDI: 4DVP Create Table

There are two ways to create a table:

  • Create an empty table and populate it cell by cell with the existing commands like VP SET VALUES or VP SET VALUE
  • Create a table automatically from a collection contained in the data context.

 

Say hello to VP CREATE TABLE

populate manually a table

First, you need to create a table with no source. Use the new VP CREATE TABLE command and pass it as a parameter the range where the table should appear:

VP CREATE TABLE(VP Cells("ViewProArea"; 1; 1; 3; 4); "EmptyTable")

It creates an empty table with default name columns:

Now we just have to fill in our table with the help of the VP SET VALUES command:

$data:=New collection
// Titles 
$data.push(New collection("First Name"; "Last Name"; "Score"))
// Data
$data.push(New collection("Andrea"; "Butterfield"; "70"))
$data.push(New collection("Faye"; "Back"; "100"))
$data.push(New collection("Shane"; "Frazier"; "50"))

VP SET VALUES(VP Cell("ViewProArea"; 1; 1); $data)

The table is now populated with the values present in the collection:

You can now filter or sort the table easily:

Populate a table from the data context

To display an entity selection as a table:

you need to convert your entity selection into a collection and add it to your sheet data context, define the columns, and create your table.

First, you must create a data context containing a collection of the data you need to show. In the example below, we read data from a database and convert it into a collection, then we encapsulate it in an object:

$p:=ds.People.all().toCollection()

$data:=New object
$data.people:=$p

VP SET DATA CONTEXT("ViewProArea"; $data)

Now that the data context is created, we define which columns to show:

$parameter:=New object
$parameter.tableColumns:=New collection
$parameter.tableColumns.push(New object("name"; "First name"; "dataField"; "Firstname"))
$parameter.tableColumns.push(New object("name"; "Last name"; "dataField"; "Lastname"))
$parameter.tableColumns.push(New object("name"; "Email"; "dataField"; "email"))
$parameter.tableColumns.push(New object("name"; "Birthday"; "dataField"; "Birthday"; "formatter"; "dddd dd MMMM yyyy"))
$parameter.tableColumns.push(New object("name"; "Country"; "dataField"; "Country"))

All that remains is to use the VP CREATE TABLE command, indicating that we want to show the collection contained in the attribute people of the data context:

// Table creation
VP CREATE TABLE(VP Cells("ViewProArea"; 1; 1; $parameter.tableColumns.length; 1); "ContextTable"; "people"; $parameter)
// Automatic column sizing
VP COLUMN AUTOFIT(VP Column($area; 0; 4))

Check out the HDI above to see these commands in action. Also, make sure to read the documentation for more details!

Fabrice Mainguené

• Product Owner •

Fabrice Mainguené joined 4D Program team in November, 2016. As a Product Owner, he is in charge of writing the user stories then translating it to functional specifications. His role is also to make sure that the feature implementation delivered is meeting the customer need.

After obtaining a Bachelor degree in Computer Science at CNAM, Fabrice joined a small software publishing company as a Windev developer. Then he worked for different companies in industry and trade areas as a Windev and web developer as well as technical advisor on new features.