Using Styles in Browses, How to create & Use "Style Numbers"

uncategorized
1

When using the Style tab in a Browse Box Behaviour procedure, there is the option of selecting a Style Type of List or of Style Number. I am presuming that Style Number indicates that there can be a number of pre-defined Styles made available to be used over & over within an application.
Can anyone suggest somewhere I can read about or find an example of Style Numbers that I might learn something about them, please?
I am using Clarion 9.0

2

I hope this is correct :slight_smile:

In Clarion, ListBox Styles allow you to dynamically alter fonts, text colors, background colors, selection colors, and display pictures for individual cells or entire columns in a LIST or Browse control [IDEReference.pdf, LanguageReference.pdf].

A Style Number is a 1-based integer index that points to an array of defined style attributes (PROPSTYLE:*) associated with the LIST control [LanguageReference.pdf].

How Styles Work: Cell-Level vs. Column-Level

  1. Cell-Level (Dynamic/Conditional): A LONG field in the display QUEUE holds a Style Number for that specific row/cell [LanguageReference.pdf]. As Clarion populates the row, it reads the Style Number and applies the corresponding PROPSTYLE attributes [IDEReference.pdf, LanguageReference.pdf].
  2. Column-Level (Static): A Style Number is assigned to an entire column via PROPLIST:ColStyle, applying uniform styling across all rows in that column without needing a style field in the QUEUE [LanguageReference.pdf].

Step-by-Step: Creating and Using Style Numbers

Step 1: Enable Style Support on the LIST Column

To use cell-level styles, the column's FORMAT string must include the Y modifier (which sets PROPLIST:CellStyle) [LanguageReference.pdf, TemplateGuide.pdf].

  • In the List Box Formatter (IDE): Select the target column, locate the Flags property group, and set Style to True [IDEReference.pdf, TemplateGuide.pdf].
  • In Code (FORMAT string): Ensure the Y flag is present on the column specifier (e.g., '80L(2)|M*ITY~Customer Name~@S30@') [LanguageReference.pdf].

:warning: Crucial Queue Field Sequence Rule:
When the Y modifier is present, Clarion expects formatting fields to appear in a strict order immediately following the data field in the QUEUE [LanguageReference.pdf]:

  1. Data Field (e.g., CUST:Balance)
  2. Color Fields (4 LONGs, if * is present)
  3. Icon Field (LONG, if I or J is present)
  4. Tree Level Field (LONG, if T is present)
  5. Style Field (LONG) \(\leftarrow\) Store your Style Number here [LanguageReference.pdf]

Step 2: Define Style Numbers (PROPSTYLE)

Each Style Number (1, 2, 3...) is initialized with specific font, color, and picture properties using the PROPSTYLE array properties on the LIST control [LanguageReference.pdf]:

! Define Style #1: Normal / Positive values (Black text on White background)
?List{PROPSTYLE:FontName, 1}     = 'Arial' [LanguageReference.pdf]
?List{PROPSTYLE:FontSize, 1}     = 10 [LanguageReference.pdf]
?List{PROPSTYLE:FontStyle, 1}    = FONT:Regular [LanguageReference.pdf]
?List{PROPSTYLE:TextColor, 1}    = COLOR:Black [LanguageReference.pdf]
?List{PROPSTYLE:BackColor, 1}    = COLOR:White [LanguageReference.pdf]
?List{PROPSTYLE:TextSelected, 1} = COLOR:White [LanguageReference.pdf]
?List{PROPSTYLE:BackSelected, 1} = COLOR:Blue [LanguageReference.pdf]
?List{PROPSTYLE:Picture, 1}      = '@N$11.2' [LanguageReference.pdf]

! Define Style #2: Overdue / Negative values (Bold Red text on Light Yellow)
?List{PROPSTYLE:FontName, 2}     = 'Arial' [LanguageReference.pdf]
?List{PROPSTYLE:FontSize, 2}     = 10 [LanguageReference.pdf]
?List{PROPSTYLE:FontStyle, 2}    = FONT:Bold [LanguageReference.pdf]
?List{PROPSTYLE:TextColor, 2}    = COLOR:Red [LanguageReference.pdf]
?List{PROPSTYLE:BackColor, 2}    = 0E0FFFFH [LanguageReference.pdf]  ! Soft yellow
?List{PROPSTYLE:TextSelected, 2} = COLOR:Red [LanguageReference.pdf]
?List{PROPSTYLE:BackSelected, 2} = COLOR:Yellow [LanguageReference.pdf]
?List{PROPSTYLE:Picture, 2}      = '@N($11.2)' [LanguageReference.pdf]

Note: In template-generated applications, you can also define these styles visually via Procedure Properties > Listbox Styles or in the BrowseBox Control Template's Styles tab [IDEReference.pdf, TemplateGuide.pdf].

Step 3: Assign Style Numbers at Runtime

Option A: Conditional Cell-Level Styling (ABC Browse)

In ABC Browse procedures, assign the Style Number to the Queue field inside the SetQueueRecord virtual method (or BRW1.SetQueueRecord embed point) [FAQsTipsTricks.pdf]:

BRW1.SetQueueRecord PROCEDURE

CODE
  PARENT.SetQueueRecord()

  ! Conditionally set Style Number based on record data
  IF CUST:Balance < 0 OR CUST:IsOverdue
      BRW1.Q.CUST_Balance_Style = 2  ! Apply Style #2 (Red / Bold)
  ELSE
      BRW1.Q.CUST_Balance_Style = 1  ! Apply Style #1 (Standard)
  END
Option B: Whole-Column Styling (PROPLIST:ColStyle)

If an entire column should use a single style without requiring a queue field, assign the Style Number directly to the column index [LanguageReference.pdf]:

! Set Column 3 to always use Style #2
?List{PROPLIST:ColStyle, 3} = 2 [LanguageReference.pdf]

Summary Checklist

  • Declare styles: Initialize properties for PROPSTYLE:FontName, PROPSTYLE:TextColor, PROPSTYLE:BackColor, etc., for each style number 1..N [LanguageReference.pdf].
  • Format column: Ensure the column has the Y flag enabled in the List Box Formatter or FORMAT string [LanguageReference.pdf, TemplateGuide.pdf].
  • Position field: Place a LONG field in the display QUEUE in the correct sequence position for the Y modifier [LanguageReference.pdf].
  • Populate: Assign the target integer (e.g., 1 or 2) to the queue's style field prior to ADD or inside SetQueueRecord [FAQsTipsTricks.pdf, LanguageReference.pdf].