Progress bar

nftfi · #1

I have a process which takes a while to complete and I want to add a progress bar to the page to show the user that something is happening.

Has anybody already done this? and if so how did you go about it?

Many Thanks

ehmd · #2

I've achieved something similar before using JSP's as follows :-

Create a JSP file as ufs/shared/jsps/Form_Submitted.jsp with the following content :-

Code: Select all

<div align="left" valign="top">
	<iframe name="Progress_Bar" width="100%" height="40" scrolling="no" frameborder="1" src="shared/jsps/Form_Submitted_Progress.jsp">
        </iframe>
</div>

Create a second JSP file in ufs/shared/jsps/Form_Submitted_Progress.jsp with the following content :-

Code: Select all

<%@ page language="java" import="com.ebasetech.ufs.kernel.*, java.util.*, java.text.*; " %>
<% UFSFormInterface form = &#40;UFSFormInterface&#41; session.getAttribute&#40;"FormInterface"&#41;;
   String eform_submitted = form.getFieldValue&#40; "EFORM_SUBMITTED" &#41;;
   String refresh_period = "2"; 

   if&#40;eform_submitted.equals&#40;"Y"&#41;&#41; &#123;
	refresh_period = "5";
   &#125;
%>
<html>
<head>
<title>Form_Submitted_Tracker.jsp</title>
<META HTTP-EQUIV="Content-Type" content="text/html; charset=ISO-8859-1">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="0">
<META HTTP-EQUIV="REFRESH" CONTENT="<%= refresh_period %>">
<style type='text/css'>
.submitted &#123;font-family&#58;"Verdana","Arial","Helvetica";font-size&#58;0.8em;color&#58;red;background-color&#58;#ffffff;text-align&#58;left;font-weight&#58;bold;font-style&#58;normal;&#125;
.not_submitted &#123;font-family&#58;"Verdana","Arial","Helvetica";font-size&#58;0.8em;color&#58;green;background-color&#58;#ffffff;text-align&#58;left;font-weight&#58;bold;font-style&#58;normal;&#125;
</style>
</head>
<body>
<div <% 
String progress_message = "null";
if&#40;eform_submitted.equals&#40;"Y"&#41;&#41; &#123; 
		progress_message = "&nbsp;FORM SUBMITTED - PLEASE WAIT "; %>
 		class="submitted"
<% &#125; else &#123;
		progress_message = "&nbsp;FORM NOT SUBMITTED"; %>
 		class="not_submitted"
<% &#125; %> align="center" valign="top">
<%
Date now = new Date&#40;&#41;;
out.println&#40;DateFormat.getTimeInstance&#40;&#41;.format&#40;now&#41;&#41;;
%>-<%= progress_message %>
</div>
</body>
</html>

On your Form :-

1) create a field EFORM_SUBMITTED with a Default Value of 'N'
2) set the TOP_JSP on the form to shared/jsps/Form_Submitted.jsp
3) On your 'Submit' button script add set EFORM_SUBMITTED = 'Y';

Basically the JSP in the IFrame will refresh every 'x' seconds until the EFORM_SUBMITTED field has a value of 'Y', then change message and colour.

Hope this helps,

Mark

Community Forum

Progress bar

Progress bar

Who is online