Double click on list can't show loading image

[atostaine]

When a user double clicks on a list I want to show my loading image and run a server function. Showing the image doesn't work.

Here is some sample code. Any ideas?

Code: Select all

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

Define_Com Class(#PRIM_LIST) Name(#List1) Displayposition(1) Left(47) Parent(#COM_OWNER) Tabposition(1) Top(99) Width(434)
Define_Com Class(#PRIM_LIST.Number) Name(#List1Column1) Columnunits(Proportion) Columnwidth(1) Displayposition(1) Parent(#List1) Sortonclick(True) Source(#STD_NUM)
Define_Com Class(#PRIM_IMAG) Name(#LoadingImage) Displayposition(2) Left(192) Parent(#COM_OWNER) Tabposition(2) Tabstop(False) Top(30) Visible(False)

evtroutine handling(#Com_owner.Initialize)
begin_Loop From(1) to(20) Using(#std_Num)
add_entry #list1
end_Loop

#LoadingImage.Image <= #SYS_WEB.LoadingImage
endroutine


EVTROUTINE HANDLING(#List1.ItemDoubleClick)
#loadingImage.visible := true

begin_Loop From(1) to(200000) Using(#std_Num)
add_entry #list1
end_Loop

#loadingImage.visible := false
ENDROUTINE
end_com

[dannyoorburg]

Hi Art,

your sample code shows some synchronous processing, that won't work. The browser doesn't update the UI while a script is running.

If it was a real server call though you can show the loading image while the ASYNC call is happening.

I think all you have to do is run one of the simple CRUD templates to see this in action.

Cheers,
Danny

[jyoung]

Are you using Execute or ExecuteAsync in your call to the Server Module?

If you are doing it synchronously (using Execute) then the browser will lockup and you will not see the image.
Your example with the large loop, is simulating a synchronous execution.

If you are using an async solution (ExecuteAsync) you should be able to show the loading image, execute the request and when the request completes, hide the image.

You can make your example asynchronous using a Timer and the image will show up.

Code: Select all

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

define_com class(#PRIM_LIST) name(#List1) DisplayPosition(1) Left(47) Parent(#COM_OWNER) TabPosition(1) Top(99) Width(434)
define_com class(#PRIM_LIST.Number) name(#List1Column1) ColumnUnits(Proportion) ColumnWidth(1) DisplayPosition(1) Parent(#List1) SortOnClick(True) Source(#STD_NUM)
define_com class(#PRIM_IMAG) name(#LoadingImage) DisplayPosition(2) Left(192) Parent(#COM_OWNER) TabPosition(2) TabStop(False) Top(30) Visible(False)

define_com class(#PRIM_TIMR) name(#Timer) Interval(300) Startup(Manual)

evtroutine handling(#Com_owner.Initialize)
begin_loop using(#std_Num) to(20)
add_entry to_list(#List1)
end_loop

#LoadingImage.Image <= #SYS_WEB.LoadingImage
endroutine


evtroutine handling(#List1.ItemDoubleClick)
#LoadingImage.Visible := True
#Timer.Start
* begin_loop using(#std_Num) to(200000)
* add_entry to_list(#List1)
* end_loop
*
* #LoadingImage.Visible := False
endroutine

evtroutine handling(#Timer.Tick)
#Timer.Stop

begin_loop using(#std_Num) to(200000)
add_entry to_list(#List1)
end_loop

#LoadingImage.Visible := False
endroutine
end_com

---
Danny beat me to it.

[dannyoorburg]

only just

[JamesDuignan]

Hi Art,
To expand on what Danny was saying, if your list is not directly defined on the web page i.e. in a view, panel or dialog. you should consider using the image property of the view/dialog/panel. This is what is happening in the SCRUDS.

Also, as it has to be an ASYNC call to the server, you may have to consider enabling/disabling user inputs while the server calls are made.

Using your code I made an example to show the loading images in a panel and a view:

Code: Select all

Begin_Com Role(*EXTENDS #PRIM_WEB) Theme(#SYS_THEME<MaterialDesignBlue>) Layoutmanager(#LayoutMain)

Define_Com Class(#PRIM_TBLO) Name(#LayoutMain)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutMainColumn1) Displayposition(1) Parent(#LayoutMain)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutMainColumn2) Displayposition(2) Parent(#LayoutMain)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutMainRow1) Displayposition(1) Parent(#LayoutMain) Height(60) Units(Pixels)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutMainRow2) Displayposition(2) Parent(#LayoutMain) Height(1.85)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem1) Alignment(TopCenter) Column(#LayoutMainColumn1) Manage(#ViewContainer) Parent(#LayoutMain) Row(#LayoutMainRow2)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem2) Alignment(TopCenter) Column(#LayoutMainColumn2) Manage(#Panel) Parent(#LayoutMain) Row(#LayoutMainRow2)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem3) Alignment(TopLeft) Column(#LayoutMainColumn1) Manage(#Text) Parent(#LayoutMain) Row(#LayoutMainRow1)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem4) Alignment(TopLeft) Column(#LayoutMainColumn2) Manage(#Text1) Parent(#LayoutMain) Row(#LayoutMainRow1)

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(#List2) Parent(#Layout1) Row(#Layout1Row1)

Define_Com Class(#PRIM_MD.Label) Name(#Text) Caption('View') Displayposition(3) Left(0) Parent(#COM_OWNER) Tabposition(3) Top(0) Height(60) Width(600)
Define_Com Class(#PRIM_MD.Label) Name(#Text1) Caption('Panel') Displayposition(4) Left(600) Parent(#COM_OWNER) Tabposition(4) Top(0) Height(60) Width(600)



* View With Loading Image
Define_Com Class(#prim_md.ViewContainer) Name(#ViewContainer) Parent(#COM_OWNER) Displayposition(1) Tabposition(1) Height(740) Width(600) Top(60)
Define_Com Class(#PRIM_VIEW) Name(#VIEW) Displayposition(1) Parent(#ViewContainer) Height(740) Left(200) Tabposition(1) Width(600)
Define_Com Class(#PRIM_LIST) Name(#List1) Displayposition(1) Left(47) Parent(#VIEW) Tabposition(1) Top(99) Width(434)
Define_Com Class(#PRIM_LIST.Number) Name(#List1Column1) Columnunits(Proportion) Columnwidth(1) Displayposition(1) Parent(#List1) Sortonclick(True) Source(#STD_NUM)

* Panel With Loading Image
Define_Com Class(#PRIM_PANL) Name(#Panel) Parent(#COM_OWNER) Displayposition(2) Tabposition(2) Left(600) Top(60) Height(740) Width(600) Layoutmanager(#Layout1)
Define_Com Class(#PRIM_LIST) Name(#List2) Displayposition(1) Left(0) Parent(#Panel) Tabposition(1) Top(0) Width(600) Height(740)
Define_Com Class(#PRIM_LIST.Number) Name(#List2Column1) Columnunits(Proportion) Columnwidth(1) Displayposition(1) Parent(#List2) Sortonclick(True) Source(#STD_NUM)

Evtroutine Handling(#Com_owner.Initialize)

#VIEW.Show

Begin_Loop Using(#std_Num) To(40)

Add_Entry To_List(#list1)
Add_Entry To_List(#list2)

End_Loop

Endroutine


Evtroutine Handling(#List1.ItemDoubleClick)

#Panel.Image #VIEW.Image <= #sys_web.LoadingImage

Begin_Loop Using(#std_Num) To(200000)

Add_Entry To_List(#list1)
Add_Entry To_List(#list2)

End_Loop

#Panel.Image #VIEW.Image <= #sys_web.LoadingImage


Endroutine
End_Com

Regards,
James

[atostaine]

I’m doing a selectlist to find other related items, then an exfcuteasync multiple times. I never see the image. I will try these suggestions out and post again. Thanks

Edit my list is in an RP contained in a web page.

[atostaine]

Hi Art,
To expand on what Danny was saying, if your list is not directly defined on the web page i.e. in a view, panel or dialog. you should consider using the image property of the view/dialog/panel. This is what is happening in the SCRUDS.

Also, as it has to be an ASYNC call to the server, you may have to consider enabling/disabling user inputs while the server calls are made.

Using your code I made an example to show the loading images in a panel and a view:


Regards,
James

James: You don't set the image to *null at any point. If I set the image to *Null later it never shows. Should I just use a timer to turn off the image or something?

[JamesDuignan]

Hi Art,

That was my bad, The second '#Panel.Image #VIEW.Image <= #sys_web.LoadingImage' should actually be #Panel.Image #VIEW.Image <= *null
Regards,
James

[atostaine]

Did you try it like that? My test as *null didn’t show the image at all