RLE

Creating a "Terms &

Conditions" page
Problem
Before filling up a form, you want to enforce the user to "Accept" a terms and conditions
page. You want a popup terms & conditions window to show when you access the form.

Solution
Setting up the sample:
1. Create an app, and inside this app, create a simple form with a few fields

2. Edit the Application Settings (as shown below)

3. In the next page, under "Resources" click on "Files (Upload stylesheets,

javascript files, etc)"
4. Attach the general.css and popup.js files separately. This is the stylesheet used
for the sample, and jquery sample used for the popup terms and conditions. You
should now have this:

5. Now click on your form to edit its properties. Choose to edit the page settings.
2

6. Under the Page Header section, switch the mode to HTML mode, and paste in
the following:
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
<script
src="http://jqueryjs.googlecode.com/files/jquery1.2.6.min.js" type="text/javascript"></script>
<link rel="stylesheet"
href="[$Filerespath:general.css]" type="text/css"
media="screen">

<script src="[$Filerespath:popup.js]"
type="text/javascript"></script>
<link href="[$AppCSS]" rel="stylesheet"
type="text/css">
You should now have the following screen:

7. Now, scroll down to the "Body" section. Switch the mode to HTML also. Paste
in the following HTML (Take note that the terms and conditions window is in
bold below). You are free to change the text to anything you wish:
<div id="popupContact">
<h1>Terms and Conditions</h1>
<p id="contactArea">
I here by accept to these terms, yada yada yada
<br>
4

<br>
I hereby understand that Satan can have my soul....
<br>
<br>
Please indicate that you have read the terms and conditions
before proceeding
<br>
<br>
<a href="#" onclick="disablePopup(); return false;">I
accept!</a><br>
<a href="http://www.google.com">I do not accept</a>
</p>
</div>
<div id="backgroundPopup"></div>
<table border="0" width="100%" cellspacing="0" cellpadding="0"
height="100%">
<tbody>
<tr>
<td valign="top">
<table border="0" width="100%" cellspacing="0"
cellpadding="0" height="100%">
<tbody>
<tr>
<td style="height: 60px;">
<table border="0" width="100%"
cellspacing="0" cellpadding="0" height="60">
<tbody>
<tr>
<td rowspan="2"
style="background-color: #018dc8; width: 200px;">
<table border="0" width="100%"
cellspacing="0" cellpadding="0" height="100%">
<tbody>
<tr>

<td
style="background-color: #ffffff;">
<table border="0"
width="100%" cellspacing="0" cellpadding="6" height="100%">
<tbody>
<tr>
<td
style="width: 50px;">
<a
href="[$HomeLink]">
<img
alt="" src="[$AppIconPath]" width="48" height="48" style="borderwidth: 0px;border-style: solid;"></a></td>
<td
style="white-space: nowrap;"><span
class="app_Title">[$ApplicationName]</span></td>
</tr>
</tbody>
</table>
</td>
<td style="width:
24px;">
<img alt=""
src="images/icoappheaderLogoRight.png" width="24" height="60"
style="border-width: 0px;border-style: solid;"></td>
</tr>
</tbody>
</table>
</td>
<td style="background-image:
url(images/icouppershadow.png); height: 31px;">
<table border="0" width="100%"
cellspacing="0" cellpadding="3" height="100%">
<tbody>
<tr>
<td align="right">
<table border="0"
cellspacing="0" cellpadding="0">
6

<tbody>
<tr>
<td
align="right" style="white-space: nowrap;">
<span
class="hyperlink_whitebold">[$CurrentUser.Fullname]&nbsp;&nbsp;</s
pan>
</td>
<td
align="right" style="white-space: nowrap;">
<a
href="[$EditProfileLink]" class="hyperlink_whitebold">Edit
Profile</a><span class="hyperlink_whitebold">&nbsp;.&nbsp;</span>
</td>
<td
align="right" style="white-space: nowrap;">
<a
href="[$LogoutLink]" class="hyperlink_whitebold">Logout</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="background-color:
#018dc8; height: 29px;">[$AppTab]</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
7

<td valign="top" colspan="2"

style="background-color: #1b4353; height: 1px;"></td>
</tr>
<tr>
<td valign="top">
<table border="0" width="100%"
cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top"
style="background-color: #e9e9e9; width: 200px;">
<table border="0" width="100%"
cellspacing="0" cellpadding="6" height="300">
<tbody>
<tr>
<td valign="top"
style="background-color: #1b4353; height: 10px;">
<span
class="label_boldwhite">App Bar</span></td>
</tr>
<tr>
<td valign="top"
style="background-color: #e9e9e9; height: 10px;"><span
class="app_GeneralTitle">Create</span><br>
[$CreateNewDropdown]</td>
</tr>
<tr>
<td valign="top"
style="background-color: #e9e9e9; height: 60px;">
<table border="0"
width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td
align="center" style="width: 20px;">

<img
alt="" src="images/icoinbox.gif" width="16" height="16"
style="border-width: 0px;border-style: solid;"></td>
<td>[$TaskInboxLink]</td>
</tr>
<tr>
<td
align="center" style="width: 20px;">
<img
alt="" src="images/submission.gif" width="16" height="16"
style="border-width: 0px;border-style: solid;"></td>
<td>[$MySubmissionsLink]</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td valign="top"
style="background-color: #d6d6d6; height: 10px;">
<table border="0"
width="100%" cellspacing="0" cellpadding="0" height="100%">
<tbody>
<tr>
<td
align="center" style="width: 20px;">
<img
alt="" src="images/icoenquiry.gif" width="16" height="16"
style="border-width: 0px;border-style: solid;"></td>
<td>
<span
class="label_boldblack">Advanced Search</span></td>
</tr>
</tbody>
</table>
</td>
9

</tr>
<tr>
<td valign="top"
style="background-color: #e9e9e9; height: 30px;">
[$FormSearchDropdown]</td>
</tr>
<tr>
<td valign="top"
style="background-color: #d6d6d6; height: 10px;">
<table border="0"
width="100%" cellspacing="0" cellpadding="0" height="100%">
<tbody>
<tr>
<td
align="center" style="width: 20px;">
<img
alt="" src="images/icoViewSmall.gif" width="16" height="16"
style="border-width: 0px;border-style: solid;"></td>
<td>
<span
class="label_boldblack">Views</span></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td valign="top"
style="background-color: #e9e9e9; height: 30px;">
[$ViewsTable]</td>
</tr>
<tr>
<td valign="top"
style="background-color: #e9e9e9;">&nbsp;</td>
</tr>
</tbody>
10

</table>
<span
class="app_GeneralTitle"><br>
&nbsp;</span></td>
<td valign="top"
style="background-color: #404040; width: 1024px;">
<table border="0" width="1024"
cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="width:
532px;">[$formerrormsg][$form]</td>
<td
style="background-color: #404040; width: 27px; background-image:
url(images/formright_shadow.png);"><img alt=""
src="images/formright_shadow.png" style="border-width: 0px;borderstyle: solid;"></td>
<td></td>
</tr>
<tr>
<td
style="background-color: #404040; background-image:
url(images/formbottom_shadow.png); width: 532px;"><img alt=""
src="images/formbottom_shadow.png" style="border-width:
0px;border-style: solid;"></td>
<td style="width:
27px;"></td>
<td>&nbsp;</td>
</tr>
</tbody>
</table>
&nbsp;</td>
<td valign="top"
style="background-color: #404040;">&nbsp;</td>
</tr>
</tbody>
</table>
</td>
11

</tr>
<tr>
<td style="background-color: #b2b2b2;
height: 1px;">
</td>
</tr>
<tr>
<td align="center"><span
class="footer_text">
<br>
[$ApplicationName] . Powered by
Rapidflows. All
Rights Reserved<br>
</span>
<a href="http://www.rapidflows.com"
class="footer_link">www.rapidflows.com</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

12

Now you should see the following

screenshot:

8. Save your changes

Testing your solution:

1. Run the application & launch the app/form
2. When you first try to create a new form, you will see the screen darken and the
terms & conditions window popup

3. You will notice that you cannot quit/close the window until you click "accept" or
"do not accept"
13