Material Design Icon on Data Table List

[jan]

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.

[jyoung]

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
endroutine

end_com

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"
endif

* Menu
#lIcon <= #ColumnMGSAPPP012.CurrentItem.Part *As #MGSIconListDesignPanel
#lIcon.Icon := "menu"
endif

This gives me this

Capture.PNG (11.42 KiB) Viewed 5096 times

Might be a better way to do this.

Hope this helps,
Joe

[jan]

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.

[jan]

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?

[jyoung]

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
enduntil
endroutine

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


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

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

end_com

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,
Joe

[jan]

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.

[dannyoorburg]

Hi,

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)

Endroutine

End_Com

Cheers,
Danny

[MarcusLancaster]

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.

Marcus.