Material Design Icon on Data Table List

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
Posts: 19
Joined: Thu Sep 06, 2018 12:36 pm

Material Design Icon on Data Table List

Post by jan » Thu Oct 18, 2018 6:46 pm

I have been trying to add a Material Design Icon to a Data Table but it does not seem to be allowed. The Data Table that can be dragged from the Material Design Controls looks to be the older version List View.

EDIT: Figured out some things after some more tests and am now down to two options.
  • Create multiple RPs that contain just a Material Design Icon
  • Stick to using Bitmaps
If anyone has any other ideas on how to implement this please let me know. I am inclined towards Option 1 if there is no other alternatives available.

Thanks in advance.

Posts: 687
Joined: Thu Jan 21, 2016 6:43 am
Location: Oklahoma City, OK USA

Re: Material Design Icon on Data Table List

Post by jyoung » Fri Oct 19, 2018 12:39 am

Hey Jan,

I do with a custom RP that implements the IListCellDesign.

Code: Select all

function options(*DIRECT)
begin_com role(*EXTENDS #PRIM_PANL *implements #Prim_List.iListCellDesign) displayposition(1) left(0) tabposition(1) top(0) layoutmanager(#Layout1)

define_com class(#PRIM_TBLO) name(#Layout1)
define_com class(#PRIM_TBLO.Row) name(#Layout1Row1) displayposition(1) parent(#Layout1)
define_com class(#PRIM_TBLO.Column) name(#Layout1Column1) displayposition(1) parent(#Layout1)
define_com class(#PRIM_TBLO.Item) name(#Layout1Item1) column(#Layout1Column1) manage(#Icon) parent(#Layout1) row(#Layout1Row1) sizing(None)

define_com class(#PRIM_MD.Icon) name(#Icon) displayposition(1) left(1) parent(#COM_OWNER) tabposition(1) top(1) themedrawstyle('ForegroundSecondary')

define_pty name(Icon) set(SetIcon)

* Fields mapped in when the entry is added to the list

ptyroutine name(SetIcon)
define_map for(*INPUT) class(#PRIM_ALPH) name(#pIcon)
#Icon.Icon := #pIcon

Then to use it, you reference the column after you add the item to the list.

Code: Select all

define_com class(#MGSIconListDesignPanel) name(#lIcon) reference(*DYNAMIC)

* ......

add_entry to_list(#DataList)

* these have to come AFTER the data is added to the list because we can only get to them through the CURRENTITEM property
#DataList.CurrentItem.RelatedReference <= #DataItem

* Companionated
if (#lItem.CompanionNumber <> 0)
#lIcon <= #ColumnMGSAPPP011.CurrentItem.Part *As #MGSIconListDesignPanel
#lIcon.Icon := "copyright"

* Menu
#lIcon <= #ColumnMGSAPPP012.CurrentItem.Part *As #MGSIconListDesignPanel
#lIcon.Icon := "menu"
This gives me this
Capture.PNG (11.42 KiB) Viewed 5795 times
Might be a better way to do this.

Hope this helps,

Posts: 19
Joined: Thu Sep 06, 2018 12:36 pm

Re: Material Design Icon on Data Table List

Post by jan » Fri Oct 19, 2018 10:46 am

This worked perfectly. Thanks a lot.

I had tried to implement it similarly yesterday but the problem was I was using *ListFields on the RP. Dragging it to the list for multiple columns ended up with the compile getting an error which makes sense as it was like dragging the same field over the list multiple times.

Posts: 19
Joined: Thu Sep 06, 2018 12:36 pm

Re: Material Design Icon on Data Table List

Post by jan » Wed Oct 31, 2018 8:27 pm

Ran into some troubles with this after a while.

I am now trying to open separate Dialogs when each of the Material Design Icon RPs are clicked. The icons are defined in the same way as @jyoung suggested (many thanks for that).

This RP column however, only has a "ColumnClick" Event. What would be the best way to be able to differentiate through these icons' click events without making it too complicated?

Posts: 687
Joined: Thu Jan 21, 2016 6:43 am
Location: Oklahoma City, OK USA

Re: Material Design Icon on Data Table List

Post by jyoung » Thu Nov 01, 2018 12:50 am

Hey Jan,

Once again, there may be better way to handle this, but this seems to work.

You are right, the problem, is that Part Columns do not have a click event, however the part itself does. This of course means we have to get a reference to the part. You do this by grabbing the part when the item gets focus in the list. Dealing with multiple parts is simply a matter of having another reference. Then handling the click event is a simple event handler.

Code: Select all

begin_com role(*EXTENDS #PRIM_WEB) LayoutManager(#LayoutMain) Theme(#SYS_THEME<MaterialDesignBlue>)

define_com class(#PRIM_TBLO) name(#LayoutMain)
define_com class(#PRIM_TBLO.Column) name(#LayoutMainColumn2) DisplayPosition(1) Parent(#LayoutMain)
define_com class(#PRIM_TBLO.Row) name(#LayoutMainRow2) DisplayPosition(1) Parent(#LayoutMain)

define_com class(#PRIM_LIST) name(#List) ColumnHeaderHeight(48) ColumnMarginLeft(24) ColumnMarginRight(24) DisplayPosition(1) Height(300) Left(296) Parent(#COM_OWNER) RowHeight(48) TabPosition(1) Top(80) Width(500)
define_com class(#PRIM_LIST.String) name(#ColumnSTD_TEXTS1) ColumnWidth(246) DisplayPosition(1) Parent(#List) Source(#STD_TEXTS)
define_com class(#PRIM_LIST.Part) name(#ColumnMDICONCE1) ColumnWidth(50) Design(#MDIconCellDesign) DisplayPosition(2) Parent(#List)
define_com class(#PRIM_LIST.Part) name(#ColumnMDICONCE2) ColumnWidth(50) Design(#MDIconCellDesign) DisplayPosition(3) Parent(#List)

define_com class(#MDIconCellDesign) name(#CallIcon) reference(*DYNAMIC)
define_com class(#MDIconCellDesign) name(#DvrIcon) reference(*DYNAMIC)

evtroutine handling(#COM_OWNER.Initialize)
define_com class(#PRIM_NMBR) name(#lIndex)
define_com class(#MDIconCellDesign) name(#lIcon) reference(*DYNAMIC)

#lIndex := 1
dountil (#lIndex = 10)

#STD_TEXTS := #lIndex.AsString
add_entry to_list(#List)

#lIcon <= #ColumnMDICONCE1.CurrentItem.Part *As #MDIconCellDesign
#lIcon.Icon := "call"

#lIcon <= #ColumnMDICONCE2.CurrentItem.Part *As #MDIconCellDesign
#lIcon.Icon := "dvr"

#lIndex += 1

evtroutine handling(#List.ItemGotFocus)
#CallIcon <= #ColumnMDICONCE1.CurrentItem.Part *As #MDIconCellDesign
#DvrIcon <= #ColumnMDICONCE2.CurrentItem.Part *As #MDIconCellDesign

evtroutine handling(#CallIcon.Click)
#SYS_WEB.Alert( ("&1 - Call Icon Clicked").Substitute( #STD_TEXTS ) )

evtroutine handling(#DvrIcon.Click)
#SYS_WEB.Alert( ("&1 - DVR Icon Clicked").Substitute( #STD_TEXTS ) )

Again, there may be a better way to do this, but this way seems to be working well for me so far.

Hope this helps,

Posts: 19
Joined: Thu Sep 06, 2018 12:36 pm

Re: Material Design Icon on Data Table List

Post by jan » Tue Nov 06, 2018 12:53 pm

Thanks @jyoung. Sorry for the late response as I haven't been able to get back to working on this yet.

Anyway, I will try this out but it looks to me that it will work as intended.

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

Re: Material Design Icon on Data Table List

Post by dannyoorburg » Wed Dec 05, 2018 5:02 pm


just a quick update on this one.

EPC140230 introduces two new column classes on PRIM_LIST, PRIM_LIST.Icon / #PRIM_LIST.Label, which are basically the list-version of PRIM_MD.Icon/PRIM_MD.Label.

So now you don't have to introduce a reusable part for the Material Design icon anymore... copy the code below into a Web Page for a sample:

Code: Select all

Begin_Com Role(*EXTENDS #PRIM_WEB) Theme(#SYS_THEME<MaterialDesignBlue>) LayoutManager(#Layout1)

Define_Com Class(#PRIM_TBLO) Name(#Layout1)
Define_Com Class(#PRIM_TBLO.Row) Name(#Layout1Row1) DisplayPosition(1) Parent(#Layout1)
Define_Com Class(#PRIM_TBLO.Column) Name(#Layout1Column1) DisplayPosition(1) Parent(#Layout1)
Define_Com Class(#PRIM_TBLO.Item) Name(#Layout1Item1) Alignment(TopCenter) Column(#Layout1Column1) Manage(#List) Parent(#Layout1) Row(#Layout1Row1) MarginBottom(24) MarginLeft(24) MarginRight(24) MarginTop(24)

Define_Com Class(#PRIM_LIST) Name(#List) ColumnHeaderHeight(48) DisplayPosition(1) Height(752) Left(24) Parent(#COM_OWNER) RowHeight(48) TabPosition(1) Top(24) Width(1152) ThemeDrawStyle('Card')
Define_Com Class(#PRIM_LIST.Icon) Name(#ListColumn1) ColumnWidth(74) DisplayPosition(1) Parent(#List) CellSizing(None) CellWidth(40) CellHeight(40) Icon('person') ColumnResize(False) CellThemeDrawStyle('MediumTitle+Rounded')
Define_Com Class(#PRIM_LIST.Label) Name(#ListColumn2) Caption('Veronica Brown') ColumnUnits(Proportion) ColumnWidth(1) DisplayPosition(2) Parent(#List)

Evtroutine Handling(#COM_OWNER.Initialize)

Inz_List Num_Entrys(10)



User avatar
Posts: 28
Joined: Tue Nov 24, 2015 9:20 pm

Re: Material Design Icon on Data Table List

Post by MarcusLancaster » Thu Jan 03, 2019 8:52 pm

Hi all.

As a another alternative to this - I created a PRIM_OBJT component to act as a generic conduit for any extra, custom events which a cell design column component in a list might generate. I had a situation where the row design was visually complex and where the cell design needed to fire multiple events up to the parent in different situations.

The conduit component contained a method with 2 parms (event type and a key) and an event, passing out the same 2 parms.

The conduit component was then included in the parent view/dialog/panel and after a row was ADD_ENTRY'd to the list I set the relatedreference of currentitem to be the conduit component. Then in the cell design I picked up and retained the related reference in the OnItemGotReference method.

With the infrastructure defined, when I wanted to fire a custom event from the cell design component I simply ran the conduit's method passing the event name and the key of the item effected. The conduit component receives this and immediately fires its event to the parent where a normal EVTROUTINE picks up the conduit's generic "custom event has been fired" event and then grabs the specific custom event name and key from the parms and then performs any logic as required.

Obviously this only applies if you're not already using relatedreference for some other reason, but I just thought I'd post this as an alternative that I've used.

Cheers for now.


Post Reply