A Clarion Template to Change Browse Colors

Changing the colors of each cell in a Clarion browse procedure can be a bit of a pain, and if you want to change the colors in an application which has hundreds of browse procedures, you'd look for an efficient way to do it.

Since it's Clarion, there are templates available to aid the task.

Surprise, surprise Capesoft has a template for that!


Mike Duglas, thinking outside of the square, has also developed a tool that can handle this task.

Script Player

For simply changing the colors of the selected row in a browse however, these solutions might be overkill, and maybe we can do it ourselves, with a template.

How to change the color of a browse row

The first thing to figure out, is how to change the color of a row in a browse. Consulting the Clarion online help we can find some property settings that will do it for us...


An array property that sets or returns the default background color for the text in the column number specifed as the array element. This coloring can be overridden on a per-cell basis by the standard cell coloring mechanism.


An array property that sets or returns the default selected background color for the text in the column number specifed as the array element. This coloring can be overridden on a per-cell basis by the standard cell coloring mechanism.

Furthermore, the help even has an example that does exactly what we want...

LOOP X# = 1 TO 255
          IF ?List{PROPLIST:Exists,X#} = 1       !If there is a column with this number
                    ?List{PROPLIST:TextColor,X#} = COLOR:Red
                    ?List{PROPLIST:BackColor,X#} = COLOR:White
                    ?List{PROPLIST:TextSelected,X#} = COLOR:Yellow
                    ?List{PROPLIST:BackSelected,X#} = COLOR:Blue

So, all we have to do is turn this code into a template.

The Clarion Template File

We want to apply code to every browse procedure in our app, and we do that by creating a Global template, which as the name implies, acts globally on our application.

#!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! #TEMPLATE (GWBChangeBrowseRowColorsTemplate, 'GWB Change Browse Row Colors - Template'),FAMILY('ABC') #!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! #! MAINTENANCE #!Template created April, 2018 #!G W Bomford #!

This code creates our template, and must be saved in a .tpl file. The description appears against the template when we register the template in the Clarion Template Registry.

The Global Extension

We want to create a Global template that applies to all procedures in our application, and this is how we declare it...

#EXTENSION (GWBChangeBrowseRowColors_Global, 'GWB Change Browse Row Colors - Global Level'), APPLICATION(GWBChangeBrowseRowColors_ProcedureCode(GWBChangeBrowseRowColorsTemplate)), LAST

We create an EXTENSION template, to add code that extends the standard Clarion code, giving it a name and description that will appear when we add the Global Extension to our Application...

We use APPLICATION to signify it is a GLOBAL extension, and we name the child template extension linked to this global extension GWBChangeBrowseRowColors_ProcedureCode and also the name of the parent template GWBChangeBrowseRowColorsTemplate they are all related to.

Global Template Variables

  #TAB ('GWB Change Browse Row Colors Globally')
    #DISPLAY('Change browse row colors')
    #PROMPT('Unselected Background',COLOR),%GWBUBColor,AT(100),DEFAULT(color:white)
    #PROMPT('Unselected Foreground',COLOR),%GWBUFColor,AT(100),DEFAULT(color:Navy)
    #PROMPT('Selected Background',COLOR),%GWBSBColor,AT(100),DEFAULT(color:Navy)
    #PROMPT('Selected Foreground',COLOR),%GWBSFColor,AT(100),DEFAULT(color:Yellow)
    #PROMPT('Set browse row height',@n2),%GWBBrowseRowHeight,AT(100),DEFAULT(12)
    #PROMPT('Adjust browse height',CHECK),%GWBAdjustBrowseHeight,AT(100),DEFAULT(1)

Our Global extension is used to specify Template Variables that will be available to the child extension templates.

In this case we've created variables for the 4 colors we want to specify. We use the COLOR attribute for our #PROMPT which means the developer will see Clarion's color selector to choose colors.

Since we're working with List Boxes we thought we might as well tidy them up a bit by also specifying a global row height, and by adjusting the size of the list box so it always displays a full row at the bottom, rather than a partial row. All these variables and values are saved in our .APP file so we only need to declare them once in each app.

And that's it for our Global Extension! As soon as we add our Global Extension to our app any code we specify at the procedure level is added to every procedure in our app.

The Procedure Level Extension

Now we want to declare the Extension Template that will be added to every procedure in our application.

#EXTENSION (GWBChangeBrowseRowColors_ProcedureCode,'GWBChangeBrowseRowColors - Procedure Level'),PROCEDURE

We've named our procedure level extension GWBChangeBrowseRowColors_ProcedureCode and used a description that will be visible in the procedure where this code appears, and we've specified it will be a PROCEDURE level extension. We've already linked it to our GLOBAL Extension and template file when we declared our Global Extension.

Our procedure level extension

Procedure Level Extension Code

    #BOXED('Change Browse Row Colors in this procedure')
      #DISPLAY('Uncheck the box if you DO NOT want')
      #DISPLAY('to change the browse colors')
      #DISPLAY('in this procedure' )
      #PROMPT('Change Browse Colors?',CHECK),%GWBBrowseColorsEnabled,AT(10),DEFAULT(1)

We create a SHEET and TAB and enter a description of what this template does. In this case, we've also provided a means to disable the procedure level code for this particular procedure.

We could also provide some procedure level Template Variables if we wanted to specify properties for our row colors, just for this procedure.

Procedure level template properties

Restrict the Extension

The next section of code RESTRICTs this procedure from appearing in selected procedures.

  #IF(UPPER(%ProcedureTemplate) = 'WINDOW')

In this case we only want it to be generated if this procedure uses the WINDOW procedure template.

The Procedure Code

    #FOR(%Control),WHERE(%ControlType = 'LIST')

        #! Based on Clarion help example for PropList
        LOOP X# = 1 TO 255  #             IF %FieldEquate{PROPLIST:Exists,X#} = 1               #!If there is a column with this number
                %FieldEquate{PROPLIST:BackColor,X#} = %GWBUBColor   
                %FieldEquate{PROPLIST:TextColor,X#} = %GWBUFColor
                %FieldEquate{PROPLIST:BackSelected,X#} = %GWBSBColor
                %FieldEquate{PROPLIST:TextSelected,X#} = %GWBSFColor
        #! Make some other changes to tidy the browses
        #IF(%GWBBrowseRowHeight > 0)
            %FieldEquate{Prop:LineHeight} = %GWBBrowseRowHeight #         #ENDIF
        #! Adjust the browse height so it matches the number of rows
        #IF(%GWBAdjustBrowseHeight = 1)
            %FieldEquate{Prop:Items} = %FieldEquate{Prop:Items} #         #ENDIF    

We specify where in our proedure we want this code to be generated using #AT, and naming one of the built in Clarion embed points. We've placed it at the procedure init embed with a priority of 8450, which is just after the Resizer resizes the window, which is important because we want to adjust the list box size after the window is resized.

Then we loop though all the controls on our window to find any LIST controls. We save the USE variable for this control and apply the Clarion Help code, but now we are using our Template Variable values from our Global Extension.

Once we've changed our colors, we apply our Global Extension options to tidy up the browse.

This is what our code looks like in our source code for a browse procedure, you can find the code by searching for GWB...

! Resize window to INI saved size
Resizer.Resize                                           ! Reset required after window size altered by INI manager
! [Priority 8410]
LOOP X# = 1 TO 255                               ! GWB ChangeBrowseRowColors
     IF ?Browse:1{PROPLIST:Exists,X#} = 1
        ?Browse:1{PROPLIST:BackColor,X#} = 14804223   
        ?Browse:1{PROPLIST:TextColor,X#} = 49152
        ?Browse:1{PROPLIST:BackSelected,X#} = 4194304
        ?Browse:1{PROPLIST:TextSelected,X#} = 16777152
?Browse:1{Prop:LineHeight} = 14              ! GWB ChangeBrowseRowColors Set browse row height
?Browse:1{Prop:Items} = ?Browse:1{Prop:Items} ! GWB ChangeBrowseRowColors AdjustBrowseHeight
  ! [Priority 8480]

Our New Browse Colors

Some creative colors

Some creative colors

Applied to all browse procedures

Applied to all browse procedures

Procedure level template disabled

Procedure level template disabled

Improving the Template

Here are some ideas for improving the template...

  1. Create a CLASS to apply the changes to our browse, to reduce procedure level code.
  2. Add some extra properties to change at runtime - e.g. Header Colors, Fonts
  3. Fine tune the template for DropLists and Combos

Download the Template and Example App

Unzip the download file, register the template (.tpl file) and you're ready to run the demo app - Clarion 10 ABC only.

Get the File

A valid email address is required

Please agree to these terms

  • Template is provided "as is"
  • No warranty is expressed or implied
  • No liability will be accepted for any damage, or loss, caused by the use of this template.
  • The file and code is the copyright of Comformark Pty Ltd
  • The file is not to be distributed to any other party
You must agree to our terms*

<< Go back to the previous page