next »

[Sean H.]

I was wondering if it is possible to get pointed in the right direction of handling a data structure like this with a Form Table.

Code

data dynamic array of record
   idno integer,
   duration integer,
   dates dynamic array of date
end record
 

The dates data column can have an unknown number of dates depending on the duration, like for example

Code

[{
    "idno":1,
    "duration":3,
    "dates":["2023/04/11","2023/04/12","2023/04/13"]
},{
    "idno":2,
    "duration":2,
    "dates":["2023/04/11","2023/04/12"]
},{
    "idno":3,
    "duration":5,
    "dates":["2023/04/11","2023/04/12","2023/04/13","2023/04/14","2023/04/15"]
}]
 

Ideally it would be great to show it in a Form Table like the below

Code

| IDNO | DURATION | DATE 01     | DATE 02     | DATE 03     | DATE 04     | DATE 05     | ...
| 0001 |     0003 | 2023/04/11  | 2023/04/12  | 2023/04/13  |             |             | ...
| 0002 |     0002 | 2023/04/11  | 2023/04/12  |             |             |             | ...
| 0003 |     0005 | 2023/04/11  | 2023/04/12  | 2023/04/13  | 2023/04/14  | 2023/04/15  | ...
 

[Reuben B.]

Before I offer solutions, I'll just direct readers to https://4js.com/ask-reuben/ig-28/ and the beginning of this presentation https://4js.com/files/documents/wwdc21/plenary/A6_Table_vNext.pdf which help illustrate the architecture of Form Tables and give insight as to why you can do certain things and why you can't do certain things.

For the need described, I would ask the following questions -
what is the expected number of rows in the array
what is the expected number of entries in the dynamic array of date
with the proposed DATE 01, DATE02 columns, is there any expected functionality associated with those columns.  For instance if you clicked on DATE 03 column header, would you expect a sort on DATE 03 etc
is it possible for the number of date columns to increate during the display of the form

Based on those responses, then you might consider

1. Turn the array of dates into a string that contains a list of dates

Code

data dynamic array of record
  idno integer,
  duration integer,
  date_list string
end record

Code

| IDNO | DURATION | DATES
| 0001 |     0003 | 2023/04/11, 2023/04/12,  2023/04/13
| 0002 |     0002 | 2023/04/11, 2023/04/12
| 0003 |     0005 | 2023/04/11, 2023/04/12, 2023/04/13, 2023/04/14, 2023/04/15

2. Display a count of the dates in a BUTTONEDIT field, and make the list of dates available in a popup

Code

data dynamic array of record
  idno integer,
  duration integer,
  date_count integer
end record

Code

| IDNO | DURATION | DATES
| 0001 |     0003 | 3 ^
| 0002 |     0002 | 2 ^
| 0003 |     0005 | 5 ^

3. A solution you might have considered already is to hardcode the maximum number date columns, and hide the date columns that aren't used
e.g. hard coded maximum 20 dates.

Code

data dynamic array of record
  idno integer,
  duration integer,
  date01 date,
  date02 date,
...
   date20 date
end record

4. If the number of rows or dates is not excessive, you could consider using a WebComponent to display the data as you'd like https://github.com/FourjsGenero/wc_2darray.  I make the disclaimer for number of rows not being excessive because if you are getting into the hundreds and thousands then you start needing to think of ways to not send every row to the front-end

5. Dynamic dialogs is also an option and will give you a UI that is closest to what you want.  You will need to parse the data beforehand to determine the maximum number of columns and hence determine your fields array http://4js.com/online_documentation/fjs-fgl-manual-html/#fgl-topics/c_fgl_ClassDialog_dd_field_definition.html which would be something like ...

Code

LET max_date_count = 0
FOR i = 1 TO data.getLength()
   IF data[i].dates.getLength() > max_date_count THEN
       LET max_date_count = data[i].dates.getLength()
   END IF
END FOR
 
LET fields[1].name = "idno"
LET fields[1].type = "INTEGER"
 
LET fields[2].name = "duration"
LET fields[2].type = "INTEGER"
 
LET max_date_count = 
FOR i = 1 TO max_date_count
   LET fields[i+2].name = "date", i USING "&&"
   LET fields[i+2].type = "DATE"
END FOR
...
LET d = ui.Dialog.createDisplayArrayTo(fields, "scr")
 

In creating your form dynamically http://4js.com/online_documentation/fjs-fgl-manual-html/#fgl-topics/c_fgl_dynamic_dialogs_forms.html then you would be creating a form with max_date_count date columns

In setting the array values http://4js.com/online_documentation/fjs-fgl-manual-html/#fgl-topics/c_fgl_dynamic_dialogs_fields.html, you'd have two loops

Code

FOR i = 1 TO data.getLength()
    CALL d.setCurrentRow("scr", i)
    CALL d.setFieldValue( "idno", data[i].idno)
    CALL d,setFieldValue("duration", data[i].duration)
    FOR j = 1 TO data[i].dates.getLength()
        CALL d.setFieldValue(SFMT("date%1", j USING "&&"), data[i].dates[j])
    END FOR
END FOR

The downside with this approach is that you need to consider what happens if a date is added during the lifetime of the dialog, if this exceeds the maximum then you need to exit and reinstantiate the dialog.  If the list is static then not an issue.

Personally I'd favour approach 1 or 2 or a combination thereof e.g. BUTTONEDIT that displays a STRING that if 1-n dates lists them, if more than n dates displays a string "X dates from MIN to MAX" and the user clicks the BUTTONEDIT to see them

Code

| IDNO | DURATION | DATES
| 0001 |     0003 | 2023/04/11, 2023/04/12,  2023/04/13   ^
| 0002 |     0002 | 2023/04/11, 2023/04/12                 ^ 
| 0003 |     0005 | 5 dates from 2023/04/11 to 2023/04/15 ^

Hope this helps,

Reuben