Tech Tip: How to create alternate color rows in an output form

PRODUCT: 4D | VERSION: 11.4 | PLATFORM: Mac & Win

Published On: September 3, 2009

Alternate row colors in a list of records has become the norm in modern user interfaces. It makes reading data displayed in row and column format a lot easier. Here's an example:

First, we store an alternate row color in an interprocess variable that gets its value from a Preferences table. Our table is called Projects and the interprocess variable is called <>AltRowColorProject. We are going to use the SET RGB COLORS command, so we need the color in RGB. Here's where it's set in code:

<>AltRowColorProject:=14213880 `Light Blue

Now on our Output form we place a couple of rectangles between the H (header) and D (detail) Markers. One is a base white and one on top of it, also white, that will change and alternate colors. The base rectangle object name is RowBackground and the changing one on top of it is RowBackgroundProject. Here's a picture of where they go on the form (the fields in the Projects table are on top of the two rectangles):

This is the Property List of the colored row rectangles. Note that they are set as visible only if the record is not selected. That way the background will be white if the record is selected, and the negative colors used automatically by 4D for highlighting will come out looking good.

Now in the form method of the Output Form we place the following:

Case of

:(Form event=On Display Detail )
  If (Displayed line number%2=0) `even line number
     If (Record number([Projects])>-1) `record exists on this line
      SET RGB COLORS(*;"RowBackgroundProject";0;<>AltRowColorProject)
     Else `record does not exist on this line make it white
      SET RGB COLORS(*;"RowBackgroundProject";0;0x00FFFFFF)
    End if
  Else `odd line number white
     If (Record number([Projects])>-1)
      SET RGB COLORS(*;"RowBackgroundProject";0;0x00FFFFFF)
    Else
      SET RGB COLORS(*;"RowBackgroundProject";0;0x00FFFFFF)
     End if
  End if
End case

One way to make it a bit more flexible is to allow the users to select their own colors for the alternate rows. This is easy since we are using an interprocess variable for row color. Just make sure you provide a way for your users to select the color they want and save the choice.

Commented by Jesse Pina on September 11, 2009 at 9:21 AM

Various other patterns can be created using this process, by making a few simple modifications to the method above. Some examples are: adding a third or fourth color, alternate many different colors, alternating blocks of row colors.