Icon in List Control

I have 2 List controls. I fill the corresponding Queues with fixed amount of records. I want to conditionally display an Icon but can not find any example of this. There is no SetQueueRecord and I feel myself lost in the Docs. I don’t want to use browse. I use the second List as a second column of the same list /with nxt 20 records/ or as a different filter list from the same file.
Any ideas about the Icon ?

Tosho Tonchev

myQ       queue,pre(myQ) 
column1       string(50) 
column1icon   long
column2       string(50) 

In the listbox formatter for ?MyList (which is ‘from’ myQ) mark column 1 as having an icon.

  ! after window has opened:
  ?MyList{PROP:IconList, 1} = 'icon1.ico'  ! from disk
  ?MyList{PROP:IconList, 2} = '~icon2.ico' ! or if already linked-in
  ! then when priming myQ

  myQ.column1icon = 1 ! (or 2), zero means no icon

I did it that way but ?List1{PROP:IconList,1} = ‘~D:\C10\Images\Icons\Careful16.ico’
doesn’t work in List control. in other application /which I renamed and create a new one/ the same in Browse is Ok.I changed it to ?List1{PROP:IconList,1} = ‘~…..\Images\Icons\Careful16.ICO’ and now it is Ok.

You should be able to just use the file name: ?List1{PROP:IconList,1} = '~Careful16.ICO'.

IMO you do NOT want to use an absolute Path to Images (icons) in your code like D:\xxx because it makes it hard to move the code to a different machine. The simplest thing to do is to copy the file into the project folder. Or setup so the Icon to be found via the RED. Or better they can be in a subfolder of the project accessible by a relative path (.\Icons or ..\Icons) so the project can be easily moved/copied. That also makes it easier to change all the icons for a new look since they are in 1 folder.

The LibMaker example has an Icon in the List. This repeats most of what Simon said…

List From Queue needs Icon Number after field. Normally a LONG. The label “Icon” is a bit short and messy to search as you’ll find many references to substring “Icon”. I would use anything longer: e.g. IconNo, IconSymbol or Symbol_Icon.


LIST has Icon specified for Column which is “I” in Format, or “J” for transparent. The “T” is Tree.



LIST properties are used to specify PROP:IconList with Icon names for each number.


The Queue Icon field is used to set the Icon displayed:



Tip: You can include Icons in the project with code PRAGMA ('link (careful16.ico)')

I always use “Libraries, Objects and Resource Files” to include everithing I need inside app.
There were no errors during compile /external resource/. I suppose the problem arise because I saved existing app to another name and change what needed. When I re-enter the icon in “Libraries, Objects and Resource Files” the problem solved. Everithing was done properly.

I really like to use Equates for the Icons
I feel it greatly improves the readability and maintainability of the code

The following a small part of some production code
There are even more

WallList:Icon      ITEMIZE(),PRE
GABLE                EQUATE
                   END  ! and another dozen removed for brevitiy

 ! The actual values here do not matter 
 !    (as long as they fit in the variable they are being stored in)
 ! Remember the values are not being saved / restore
 ! We just care that each one is unique
gtWallBrowse      GROUP,TYPE
Shape                STRING(6) 
Shape:Icon             SHORT                                
  ! and many more removed for brevity
qtWallBrowse      QUEUE(gtWallBrowse),TYPE
  SELF.FEQ:List{PROP:IconList,WallList:Icon:RECTANGULAR   } = '~RECT_SML.ICO'                      
  SELF.FEQ:List{PROP:IconList,WallList:Icon:GABLE         } = '~GABLE_SM.ICO'                      
  SELF.FEQ:List{PROP:IconList,WallList:Icon:SLOPE_LEFT    } = '~slpl_SML.ico'                      
  SELF.FEQ:List{PROP:IconList,WallList:Icon:SLOPE_RIGHT   } = '~slpr_SML.ico'                      

ctQ_UI_Walls.GetShapeIcon          PROCEDURE(CONST *gtRec_Wal xWall)!,LONG
Answer        LONG,AUTO
   CASE FmWal.EffectiveWallShape( xWall )
     OF WallShape:Rect   ; Answer = WallList:Icon:RECTANGULAR   
     OF WallShape:Gable  ; Answer = WallList:Icon:GABLE         
     OF WallShape:SlopeL ; Answer = WallList:Icon:SLOPE_LEFT    
     OF WallShape:SlopeR ; Answer = WallList:Icon:SLOPE_RIGHT
     ! and more removed for brevity
   RETURN Answer
ctQ_UI_Walls.FileToBuffer               PROCEDURE(CONST *gtRec_Wal xWall, *gtWallBrowse xBuf)
  ! many lines removed for brevity
  xBuf.Shape:Icon = SELF.GetShapeIcon( xWall )
SELF.FileToBuffer( xWall, SELF.Q )
SELF.Put()  ! calls PUT( SELF.Q )

What it the limit of the array? 255?

On the other thread they mentioned images can be displayed in list boxes using this property.

You have Clarion so test it.

The LibMaker is an easy example to try. Change ,1 ,2 to higher numbers like 32000 and 64000 to test for SHORT and USHORT.

Edit: Below ALSO noted max Icon List index theoretical limit is a LONG so 2.147 billion.

Though LIST controls do use not many images usually, if any, the theoretical limit is 2^31-1.

I’m saying an alternative is source code like below so there is no need to add in the Project because the PRAGMA('link()') will do it at compile time.

 ?List1{PROP:iconlist, 1} = '~Opened.ico' ; PRAGMA('link(Opened.ico)') 
 ?List1{PROP:iconlist, 2} = '~Closed.ico' ; PRAGMA('link(Closed.ico)')

This code can be pasted between Apps and the icons will work with no Project changes required.

The PRAGMA will error if the file is not found so if you copy it to a APP that does not have that Icon file findable by the RED you’ll know.


Using Project is not so bad until I saved one App to another name. The Icon in Project is visible but not linked.

Thanks to Carl and Alexi… changed the libmaker icons in the project to PNG from the shipped glyphicons and indeed the list displayed the PNG…

have not tried this with other image types and sizes yet but will continue testing this as time allows…

Many thanks. :sunglasses:

There are some examples here:

1 Like