web page- column heading manipulation

This Q&A forum allows users to post and respond to "How Do I Do ....." questions. Please do not use to report (suspected) errors - you must use your regional help desk for this. The information contained in this forum has not been validated by LANSA and, as such, LANSA cannot guarantee the accuracy of the information.
Post Reply
atsypin
Posts: 2
Joined: Fri Jun 10, 2016 1:14 am

web page- column heading manipulation

Post by atsypin » Fri Jun 10, 2016 1:34 am

Hello,

This might be trivial (I'm relatively new to vl) but anyway..

situation: I have a web page, with a dropdown component of search-by options and a resulting list component with column headings.
goal: to be able to display the resulting list, with appropriate search-by column heading in different color.
example: search-by option - by Author, when resulting list is displayed, I would like to have column Author to be displayed in red

Is this possible? if yes how? (btw. textcolor attribute does not work)

Thank you.

User avatar
Stewart Marshall
Posts: 417
Joined: Thu Nov 05, 2015 5:25 pm

Re: web page- column heading manipulation

Post by Stewart Marshall » Fri Jun 10, 2016 9:21 am

The behaviour and appearance of the column header area can be modified using the ColumnXxxxStyle properties.

In the sample below, a specific style is applied to a column header when a button is clicked. I've added the column to a collection for easier handling.

The Style applied uses Theme colours, but you could of course use whatever colours you like. I've defined it locally for the purposes of this example, but it should be part of a Theme.

Ideally you should use the ThemeDrawStyle property instead of a locally defined style, but there seems to be an issue with the background colour not being shown correctly, although the text colour works as expected.

Code: Select all

Begin_Com Role(*EXTENDS #PRIM_WEB) Height(513) Width(969) Layoutmanager(#Layout1) Theme(#SYS_THEME<2015Blue>)

Define_Com Class(#PRIM_VS.Style) Name(#Style1) Backgroundbrush(#Brush1) Foregroundbrush(#Brush2)
Define_Com Class(#PRIM_VS.SolidBrush) Name(#Brush2) Color(Theme700)
Define_Com Class(#PRIM_VS.SolidBrush) Name(#Brush1) Color(Theme100)

Define_Com Class(#PRIM_TBLO) Name(#Layout1)
Define_Com Class(#PRIM_TBLO.Column) Name(#Column1) Displayposition(1) Parent(#Layout1)
Define_Com Class(#PRIM_TBLO.Row) Name(#Row1) Displayposition(1) Parent(#Layout1) Height(70) Units(Pixels)
Define_Com Class(#PRIM_TBLO.Row) Name(#Row2) Displayposition(2) Parent(#Layout1) Height(1.73)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutItem1) Column(#Column1) Manage(#Button2) Parent(#Layout1) Row(#Row1) Sizing(None) Flow(Right) Alignment(CenterLeft) Marginleft(4)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutItem2) Column(#Column1) Manage(#Button3) Parent(#Layout1) Row(#Row1) Sizing(None) Flow(Right) Alignment(CenterLeft) Marginleft(4)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutItem3) Column(#Column1) Manage(#Button1) Parent(#Layout1) Row(#Row1) Sizing(None) Flow(Right) Alignment(CenterLeft) Marginleft(4)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutItem4) Column(#Column1) Manage(#List1) Parent(#Layout1) Row(#Row2)

Define_Com Class(#PRIM_PHBN) Name(#Button1) Caption('Column A') Displayposition(1) Left(4) Parent(#COM_OWNER) Tabposition(1) Top(23)
Define_Com Class(#PRIM_PHBN) Name(#Button2) Caption('Column B') Displayposition(2) Left(88) Parent(#COM_OWNER) Tabposition(2) Top(23)
Define_Com Class(#PRIM_PHBN) Name(#Button3) Caption('Column C') Displayposition(3) Left(172) Parent(#COM_OWNER) Tabposition(3) Top(23)
Define_Com Class(#PRIM_LIST) Name(#List1) Displayposition(4) Left(0) Parent(#COM_OWNER) Tabposition(4) Top(70) Height(443) Width(969)
Define_Com Class(#PRIM_LIST.String) Name(#ColumnA) Displayposition(1) Parent(#List1) Columnwidth(288) Columncaption('Column A') Columncaptiontype(Caption)
Define_Com Class(#PRIM_LIST.String) Name(#ColumnB) Displayposition(2) Parent(#List1) Columnwidth(288) Columncaption('Column B') Columncaptiontype(Caption)
Define_Com Class(#PRIM_LIST.String) Name(#ColumnC) Displayposition(3) Parent(#List1) Columnwidth(288) Columncaptiontype(Caption) Columncaption('Column C')

Define_Com Class(#prim_acol<#Prim_List.Column>) Name(#Columns)

Evtroutine Handling(#Com_owner.CreateInstance)

#Columns.insert( #ColumnA )
#Columns.insert( #ColumnB )
#Columns.insert( #ColumnC )

Inz_List Named(#List1) Num_Entrys(10)

Endroutine

Evtroutine Handling(#Button1.Click)

#Com_owner.HighlightColumn( 1 )

Endroutine

Evtroutine Handling(#Button2.Click)

#Com_owner.HighlightColumn( 2 )

Endroutine

Evtroutine Handling(#Button3.Click)

#Com_owner.HighlightColumn( 3 )

Endroutine

Mthroutine Name(HighlightColumn)
Define_Map For(*Input) Class(#Prim_nmbr) Name(#Column)

#Columns<>.ColumnStyle <= *null
#Columns<#Column>.ColumnStyle <= #Style1

Endroutine

End_Com
Stewart Marshall

Independent IT Consultant
www.marshallfloyd.com.au

atsypin
Posts: 2
Joined: Fri Jun 10, 2016 1:14 am

Re: web page- column heading manipulation

Post by atsypin » Sat Jun 11, 2016 1:12 am

Thank you. It worked.

Just a follow up question. Why this "<=" assign needed and not this ":=" ?

Thanks again

User avatar
Stewart Marshall
Posts: 417
Joined: Thu Nov 05, 2015 5:25 pm

Re: web page- column heading manipulation

Post by Stewart Marshall » Sat Jun 11, 2016 10:00 am

:= Assigns a value from one variable to another

<= Is a reference assignment dealing with an object

RDMLX could probably have worked with just the first, but having a different operator makes for more understandable syntax.
Stewart Marshall

Independent IT Consultant
www.marshallfloyd.com.au

dannyoorburg
Posts: 156
Joined: Mon Jan 04, 2016 9:50 am
Location: Australia

Re: web page- column heading manipulation

Post by dannyoorburg » Tue Jun 14, 2016 11:25 am

Hi,

just in case anyone is interested (other than me, syntax and semantics of different programming languages are a bit of a hobby of mine :) )

There are situations where RDMLX allows both a value- AND a reference-assignment, as in the example below. They mean different things, and it's only because of RDMLX having 2 different operators that they can BOTH be allowed.

Danny

Code: Select all

Begin_Com Role(*EXTENDS #PRIM_FORM) Clientwidth(941) Clientheight(623) Left(909) Top(247) Width(957) Height(662)
Define_Com Class(#PRIM_PHBN) Name(#ButtonValueAssignment) Caption('Value Assignment') Displayposition(1) Parent(#COM_OWNER) Tabposition(1) Top(19) Width(300)
Define_Com Class(#PRIM_PHBN) Name(#ButtonReferenceAssignment) Caption('Reference Assignment') Displayposition(2) Parent(#COM_OWNER) Tabposition(2) Top(68) Width(300)

Evtroutine Handling(#ButtonValueAssignment.Click)
Define_Com Class(#PRIM_ALPH) Name(#AlphaRef1) Reference(*DYNAMIC)
Define_Com Class(#PRIM_ALPH) Name(#AlphaRef2) Reference(*DYNAMIC)

#AlphaRef1 <= *New #PRIM_ALPH
#AlphaRef2 <= *New #PRIM_ALPH

#AlphaRef1 := "Value "

* VALUE ASSIGNMENT, COPIES THE VALUE OF REF1 TO REF2
#AlphaRef2 := #AlphaRef1

#AlphaRef1 += "1"
#AlphaRef2 += "2"

#ButtonValueAssignment.Caption := #AlphaRef1 + "," + #AlphaRef2

Endroutine

Evtroutine Handling(#ButtonReferenceAssignment.Click)
Define_Com Class(#PRIM_ALPH) Name(#AlphaRef1) Reference(*DYNAMIC)
Define_Com Class(#PRIM_ALPH) Name(#AlphaRef2) Reference(*DYNAMIC)

#AlphaRef1 <= *New #PRIM_ALPH
#AlphaRef2 <= *New #PRIM_ALPH

#AlphaRef1 := "Value "

* REFERENCE ASSIGNMENT, BOTH REFERENCES NOW REFER TO THE SAME (STRING-) OBJECT
#AlphaRef2 <= #AlphaRef1

#AlphaRef1 += "1"
#AlphaRef2 += "2"

#ButtonReferenceAssignment.Caption := #AlphaRef1 + "," + #AlphaRef2

Endroutine

End_Com

Post Reply