Is there a way to show some kind of progress bar/indicator? Or even just the ability to popup a message somewhere during the query process; basically what I want to do is in some scenarios let the user know that their data is being retrieved.

I have a couple of grids showing large volumes of data that is auto-queried on entry to the panel, I want to display a message (or progress indicator) that says "Retrieving data. Please wait..." or something similar while the querying is running.

Any ideas?



asked 11 May '13, 11:40

Craig's gravatar image

accept rate: 6%

Hi Craig,

Unfortunately, there is not a built-in progressbar/indicator component in Formspider yet. However, you can achieve this request using Formspider "external method"s. An external method is a Formspider object that executes javascript methods on client computer. You can find more details about externak method in the tutorial below: http://theformspider.com/learningcenter/how-to-use-external-method/

So basically, you can show an html dialog (<div>) using a javascript call through Formspider external method. When this external method is completed (the html dialog is showed) it will tigger a Formspider action where your background process (datasource query) will be executed. And finally at the end of this background process procedure you will call another external method, this time which hides the html dialog. Let's do this step by step:

  • First thing to do is creating the html dialog and javascipt methods which will be used in our external methods. To do this:

1- Open [Tomcat]\webapps\formspider folder, in this folder you will see a file named "main.jsp"
2- Open "main.jsp" and just before </head> tag insert;

<style> #overlay { visibility: hidden; width:300px; position: absolute; top: 50%; left: 50%; margin-left: -150px; background-color: #fff; border:1px solid #000; padding:15px; text-align:center; z-index: 100000; } </style>

then just after <body...> tag insert;

<div id="overlay"/>

These two compose the html dialog. Finally just before </body> tag please insert the codes of the javascipt methods displaying/hiding the html dialog;

<script type="text/javascript"> function show_splash(value) { el = document.getElementById("overlay"); el.style.visibility = "visible"; document.getElementById("overlay").innerHTML = value; } </script> <script type="text/javascript"> function hide_splash() { el = document.getElementById("overlay"); el.style.visibility = "hidden"; } </script>

  • Save "main.jsp" and open Formspider IDE.
  • Create a procedure which simply executes your background process;

    procedure backgroundProcess is begin api_datasource.executequery('yourDatasource'); end;

  • Uncheck the "Query on Initialize" checkBox for "yourDatasource" datasource definition.

  • Create a Formspider action which is also named "backgroundProcess" calling the "backgroundProcess" procedure.
  • Expand Miscellaneous accordion. Right-click to "External Methods" node a create a new external method.
  • This first external method will display the html dialog. Enter a name ("showSplash" for example), then enter show_splash(string) into the "JavaScript Signature" field. It means that when this external method is invoked it will call javasciript method with signature show_splash(string). Finally select "backgroundProcess" action from "Post method completed" combobox. It means that when execution of this javascript code is done the action named "backgroundProcess" will be fired by the Formspider.
  • Create another external method. Enter a name ("hideSplash" for example), then enter hide_splash() in the "JavaScript Signature" field. This extarnal method will hide our html dialog.
  • Create a procedure which invokes the "showSplash" external method:

    procedure showSplash is v_params_t api_externalMethod.tt_params; begin -- show splash screen, when showSplash is invoked it will trigger backgroundProcess action -- set message displayed on splash screen v_params_t('0').value_tx := 'Retrieving data. Please wait...'; -- show splash screen(call the js code referenced by "showSplash" external method) api_externalMethod.invoke('showSplash', v_params_t); end;

  • Create a Formspider action named "showSplash" and calling the "showSplash" procedure. Use this action at the postInitialize event of your panel containing your grid.

  • Remember that when "showSplash" is invoked it will fire your "backgroundProcess" action, so the "backgroundProcess" procedure. Thus, at the end of the "backgroundProcess" procedure we have to invoke the external method hiding the html dialog:

    procedure backgroundProcess is v_params_t api_externalMethod.tt_params; begin api_datasource.executequery('yourDatasource'); api_externalMethod.invoke('hideSplash',v_params_t); end;

I hope it's clear enough :)

For example, if you query this datasource later again(after entering into the screen, when a button is pressed for example), you can replace api_datasource.executeQuery code called under this button with the showSplash procedure to show your splash screen.

Hope this helps,


answered 11 May '13, 13:56

Ibrahim%20Sandalli's gravatar image

Ibrahim Sand... ♦♦
accept rate: 25%

Hi Ibrahim,

Thanks for the comprehensive response, I shall give your suggestion a try.



(11 May '13, 14:56) Craig
Your answer
toggle preview

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here



Answers and Comments

Markdown Basics

  • *italic* or _italic_
  • **bold** or __bold__
  • link:[text](http://url.com/ "title")
  • image?![alt text](/path/img.jpg "title")
  • numbered list: 1. Foo 2. Bar
  • to add a line break simply add two spaces to where you would like the new line to be.
  • basic HTML tags are also supported



Asked: 11 May '13, 11:40

Seen: 2,498 times

Last updated: 11 May '13, 14:56

© Copyright Gerger 2017