Page 1 of 1

Slide out popup using tiles

Posted: Sat Apr 26, 2025 2:23 am
by pravin0457432
Hi All,

I am trying to create a slide out popup window that will contain icons. I have tried to replicate the example from
xDemoWebGoogleIcons

Code: Select all

Begin_Com Role(*EXTENDS #PRIM_WEB) Layoutmanager(#Layout1) Theme(#SYS_THEME<2015Blue>) Height(473) Width(1201)
...
Define_Com Class(#PRIM_TILE<#XDEMO_65>) Name(#Tile) Displayposition(2) Left(8) Parent(#COM_OWNER) Tabposition(1) Top(114) Height(359) Width(1185) Showpartialitem(True)

Mthroutine Name(LoadIcons) Access(*PRIVATE)
	Define_Map For(*INPUT) Class(#Prim_Str) Name(#CodePoints)

	For Each(#Line) In(#Utilities.SplitString( #CodePoints (10).AsUnicodeString ))

		Add_Entry To_List(#Tile)

	Endfor

Endroutine 
And in
xDemoWebGoogleIconTileDesign

Code: Select all

Begin_Com Role(*EXTENDS #PRIM_PANL *implements #Prim_tile.iTileDesign *Listfields #listFields) Displayposition(1) Height(129) Left(0) Tabposition(1) Top(0) Width(185) Layoutmanager(#Layout1) Themedrawstyle('ToolbarButton')

Group_By Name(#listFields) Fields(#xDemoUnicode128)
This is what my code looks like:
The panel

Code: Select all

Function Options(*DIRECT)
Begin_Com Role(*EXTENDS #PRIM_PANL) Height(529) Left(0) Top(0) Width(401) Displayposition(1) Tabposition(1)

Define_Com Class(#PRIM_TILE<#MNUTI>) Name(#MenuTile) Displayposition(1) Left(8) Parent(#COM_OWNER) Tabposition(1) Height(495) Width(425) Showpartialitem(True)

Mthroutine Name(Show)
Define_Map For(*INPUT) Class(#PRIM_LIST.ListItem) Name(#ParentListItem) Pass(*BY_REFERENCE)
Define_Com Class(#MenuTreeDataObject) Name(#ChildItem) Reference(*DYNAMIC)

	#STD_TEXTL := "test 1"
	#SHTX62 := "icon 2"

	Add_Entry To_List(#MenuTile)

Endroutine

And the tile panel

Code: Select all

Function Options(*DIRECT)
Begin_Com Role(*EXTENDS #PRIM_PANL *implements #Prim_tile.iTileDesign *Listfields #MenuListFields) Displayposition(1) Height(129) Left(0) Tabposition(1) Top(0) Width(185) Layoutmanager(#Layout1) Themedrawstyle('ToolbarButton')

Group_By Name(#MenuListFields) Fields(#STD_TEXTL #SHTX62)
When I execute I get a fatal error when trying to add the entry to the #Menutile
Add_Entry To_List(#MenuTile)
Any suggestions on what I could be missing?

Thanks,

Re: Slide out popup using tiles

Posted: Mon Apr 28, 2025 10:32 pm
by pravin0457432
Okay, I've tried a few more options and I've copied pasted entire code snippets in the hope that someone will be able to run it on their side and see my issue.

I created a dummy test page, then a rup panel that contains the icontiles. In the first example I linked to the demo icon tiles rup, just to eliminate any fault in my code. And that worked. I then copied the demo rup sideways and just renamed it. Made zero changes. I pointed the rup panel to this new copy and I got the same error.
Test webpage:

Code: Select all

Begin_Com Role(*EXTENDS #PRIM_WEB) Height(608) Width(864)

Define_Com Class(#PRIM_PHBN) Name(#Centered) Displayposition(1) Left(344) Parent(#COM_OWNER) Tabposition(1) Top(232) Width(161) Caption('Open Tile Panel') Height(57) Themedrawstyle('Heading2') Wordwrap(True)

Define_Com Class(#rupPopupPanel) Name(#PopupPaneltest)

Evtroutine Handling(#Centered.Click)

#PopupPaneltest.ShowPopup

Endroutine

End_Com
Panel that will popup with the tiled icons:

Code: Select all

Function Options(*DIRECT)
Begin_Com Role(*EXTENDS #PRIM_PPNL) Caption('Caption') Closebutton(True) Left(0) Height(300) Titlebar(True) Top(0) Width(400)

Define_Com Class(#PRIM_TILE<#xDemoWebGoogleIconTileDesign>) Name(#Tile) Displayposition(1) Left(8) Parent(#COM_OWNER) Tabposition(1) Top(114) Height(359) Width(1185) Showpartialitem(True)

Define_Com Class(#xDemoWebUtilities) Name(#Utilities)


Evtroutine Handling(#Com_owner.CreateInstance)

#COM_OWNER.LoadIcons Codepoints("3d_rotation ac_unit access_alarm access_alarms access_time accessibility")
Endroutine

Mthroutine Name(LoadIcons) Access(*PRIVATE)
Define_Map For(*INPUT) Class(#Prim_Str) Name(#CodePoints)
For Each(#Line) In(#Utilities.SplitString( #CodePoints " " ))

Continue If(#Line = "")

#xDemoUnicode128 := (#Utilities.SplitString( #Line ' ' ))<1>.Value

Add_Entry To_List(#Tile)

Endfor


Endroutine

End_Com
In this example I am using the demo reusable part #xDemoWebGoogleIconTileDesign.
The result works as expected:

https://ibb.co/RkvXMfGB
Image

I copied xDemoWebGoogleIconTileDesign sideways and just renamed it to pnWebGoogleIcontileDesign

Code: Select all

Function Options(*DIRECT)
Begin_Com Role(*EXTENDS #PRIM_PANL *implements #Prim_tile.iTileDesign *Listfields #listFields) Displayposition(1) Height(129) Left(0) Tabposition(1) Top(0) Width(185) Layoutmanager(#Layout1) Themedrawstyle('ToolbarButton')

Group_By Name(#listFields) Fields(#xDemoUnicode128)


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(1.23)
Define_Com Class(#PRIM_TBLO.Row) Name(#Row2) Displayposition(2) Parent(#Layout1) Height(0.77)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutItem1) Column(#Column1) Manage(#gIconName) Parent(#Layout1) Row(#Row2)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutItem2) Column(#Column1) Manage(#GoogleIcon) Parent(#Layout1) Row(#Row1)

Define_Com Class(#PRIM_LABL) Name(#gIconName) Caption('Icon Name') Displayposition(1) Ellipses(Word) Height(49) Left(0) Parent(#COM_OWNER) Tabposition(1) Tabstop(False) Top(80) Verticalalignment(Center) Width(185) Marginleft(2) Alignment(Center) Themedrawstyle('AlternateItem') Selectable(True)
Define_Com Class(#xDemoWebGoogleIcon) Name(#GoogleIcon) Displayposition(2) Height(80) Left(0) Parent(#COM_OWNER) Tabposition(2) Tabstop(False) Top(0) Width(185)

Define_Com Class(#prim_tile.Tileitem) Name(#gTileItem) Reference(*DYNAMIC)

Define_Pty Name(IconStyle) Set(SetIconStyle)

Ptyroutine Name(SetIconStyle)
Define_Map For(*INPUT) Class(#Prim_vs.Style) Name(#Property) Pass(*BY_REFERENCE)

#GoogleIcon.Style <= #Property

Endroutine

Mthroutine Name(OnAdd) Options(*REDEFINE)

#gTileItem <= #TileItem

#gIconName #gIconName.Hint #GoogleIcon.IconName := #xDemoUnicode128

Endroutine

Mthroutine Name(OnDelete) Options(*REDEFINE)

#gTileItem <= *null

Endroutine

Mthroutine Name(OnFind) Options(*REDEFINE)

Define_Com Class(#Prim_Str) Name(#SearchKey)

#SearchKey := #Key

#gTileItem.Visible := (#Key = "") Or (#gIconName.Caption.LowerCase.Contains( #SearchKey.LowerCase ))

Endroutine

End_Com

I then edit the rup panel from above and use the sideways copy instead:

Code: Select all

Function Options(*DIRECT)
Begin_Com Role(*EXTENDS #PRIM_PPNL) Caption('Caption') Closebutton(True) Left(0) Height(300) Titlebar(True) Top(0) Width(400)

Define_Com Class(#PRIM_TILE<#pnWebGoogleIcontileDesign>) Name(#Tile) Displayposition(1) Left(8) Parent(#COM_OWNER) Tabposition(1) Top(114) Height(359) Width(1185) Showpartialitem(True)

Define_Com Class(#xDemoWebUtilities) Name(#Utilities)


Evtroutine Handling(#Com_owner.CreateInstance)

#COM_OWNER.LoadIcons Codepoints("3d_rotation ac_unit access_alarm access_alarms access_time accessibility")
Endroutine

Mthroutine Name(LoadIcons) Access(*PRIVATE)
Define_Map For(*INPUT) Class(#Prim_Str) Name(#CodePoints)
For Each(#Line) In(#Utilities.SplitString( #CodePoints " " ))

Continue If(#Line = "")

#xDemoUnicode128 := (#Utilities.SplitString( #Line ' ' ))<1>.Value

Add_Entry To_List(#Tile)

Endfor


Endroutine

End_Com
But executing the website returns this error:

Code: Select all

Fatal Error:

Failed to load /lansa15-v15/tst/pnwebgoo.js?lcb=1745842970_dev
Location:

Reusable Part: rupPopupPanel, line 22
Call Stack:

1. Evtroutine Handling(#Com_owner.CreateInstance): rupPopupPanel, line 11
2. Mthroutine Name(LoadIcons): rupPopupPanel, line 22
Appreciate any thoughts or opinions on this.

Thanks,
Pravin

Re: Slide out popup using tiles

Posted: Mon Apr 28, 2025 10:54 pm
by pravin0457432
Okay looks like I managed to resolve the issue. Weekend rest maybe :mrgreen:

I previously tried renaming the list and that didn't work. It just seems like I needed to rename the tileitem to make it unique.

Code: Select all

Function Options(*DIRECT)
Begin_Com Role(*EXTENDS #PRIM_PANL *implements #Prim_tile.iTileDesign *Listfields #listFields) Displayposition(1) Height(129) Left(0) Tabposition(1) Top(0) Width(185) Layoutmanager(#Layout1) Themedrawstyle('ToolbarButton')

Group_By Name(#listFields) Fields(#xDemoUnicode128)


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(1.23)
Define_Com Class(#PRIM_TBLO.Row) Name(#Row2) Displayposition(2) Parent(#Layout1) Height(0.77)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutItem1) Column(#Column1) Manage(#gIconName) Parent(#Layout1) Row(#Row2)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutItem2) Column(#Column1) Manage(#GoogleIcon) Parent(#Layout1) Row(#Row1)

Define_Com Class(#PRIM_LABL) Name(#gIconName) Caption('Icon Name') Displayposition(1) Ellipses(Word) Height(49) Left(0) Parent(#COM_OWNER) Tabposition(1) Tabstop(False) Top(80) Verticalalignment(Center) Width(185) Marginleft(2) Alignment(Center) Themedrawstyle('AlternateItem') Selectable(True)
Define_Com Class(#xDemoWebGoogleIcon) Name(#GoogleIcon) Displayposition(2) Height(80) Left(0) Parent(#COM_OWNER) Tabposition(2) Tabstop(False) Top(0) Width(185)

Define_Com Class(#prim_tile.Tileitem) Name(#pnTileItem) Reference(*DYNAMIC)

Define_Pty Name(IconStyle) Set(SetIconStyle)

Ptyroutine Name(SetIconStyle)
Define_Map For(*INPUT) Class(#Prim_vs.Style) Name(#Property) Pass(*BY_REFERENCE)

#GoogleIcon.Style <= #Property

Endroutine

Mthroutine Name(OnAdd) Options(*REDEFINE)

#pnTileItem <= #TileItem

#gIconName #gIconName.Hint #GoogleIcon.IconName := #xDemoUnicode128

Endroutine

Mthroutine Name(OnDelete) Options(*REDEFINE)

#pnTileItem <= *null

Endroutine

Mthroutine Name(OnFind) Options(*REDEFINE)

Define_Com Class(#Prim_Str) Name(#SearchKey)

#SearchKey := #Key

#pnTileItem.Visible := (#Key = "") Or (#gIconName.Caption.LowerCase.Contains( #SearchKey.LowerCase ))

Endroutine

End_Com