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