HTML DataPages, when used as Stand Alone Login Screens, can be a great asset for authenticated apps. Not only can they be placed directly on the homepage providing a single point of login, but you can also customize where the user will be directed based on data stored in their user profile. This article shows some examples of popular redirection techniques using an HTML DataPage, authentication parameters and sample JavaScript.

Redirect based on user type

The most common redirect is based on user type. For example, if the user is an administrator the user is directed to the admin dashboard/portal/interface. If the user is a manager, then the user is directed to the manager dashboard/portal/interface.

In this example, we have users table which is used in authentication. The users table has two Yes/No fields, Admin and Manager which stores Yes or No values based on the user’s permission in this application. Note that we do not need an additional checkbox for Employees. They’re going to be routed to their account if they’re active inside the users table.

Once we identify how many users groups our application will have, we’ll need to create that many views to filter our data. In this example we have three user levels, so we’ll need to create three separate views that filter based on user type and status checkbox.

Now that we have the three views created, we also need to set up three authentications that are based on these views. Make sure to include the “logout destination” and “time out & redirection” links in the “advanced settings” section. Also, make sure to enable “Enable auto-login” checkbox. Creating authentications and advanced settings are explained in details here.

Next step is to create an HTML DataPage and restrict access to the DataPage via authentication. Make sure that advanced features and parameters are enabled. Copy and paste the following JavaScript sample into your HTML DataPage.

<script>
if("[@authfield:Admin]" == "Yes"){
window.location = "http://www.mysite.com/admin.html";
}
else if ("[@authfield:Manager]" == "Yes"){
window.location = "http://www.mysite.com/manager.html";
}
else{
window.location = "http://www.mysite.com/employee.html";
}
</script>

Replace the parameter name and values to match your app. You can duplicate the “else if” section as many times as necessary to accommodate the number of user groups in your app.

In this example we see there are three user group types: Admin, Manager and Employee. If user type is admin, user will be redirected to admin.html page and if user type is manager, user will be redirected to manager.html page. Lastly, if user is neither the Admin nor the Manager, he will be redirected to the employee.html site.

Redirect based on subscription date

You can also redirect users based on their subscription date or date of last confirmed payment. Using this method, past due users can be automatically directed away from protected areas of your app and towards payment information.

In this scenario, your users table should contain a Last_Payment field which stores the last payment date for each user. Create an HTML DataPage similar to the one explained above, then copy the following JavaScript sample into your HTML DataPage.

<script>
var today =new Date();
var signup = new Date( "[@authfield:Last_Payment]" );
var valid = new Date();
valid.setDate(today.getDate()-30);
if (valid<signup)
{
/*Valid*/
document.location = "http://www.mysite.com/menu.html";
}
else
{
/*Not Valid*/
window.location = "http://www.mysite.com/payment.html"
}
</script>

In this example, if the user’s last confirmed payment was received more than 30 days ago, the user will be directed to a payment page. This same basic system can also be used to direct users who haven’t logged in for extended periods of time, or who are logging in for the first time after the site has undergone functional changes.

Redirect the first time a user logs in

It is sometimes helpful to direct first-time users to a special orientation or training page. For this method, your user profile (table) must contain a Yes/No field. In this example, the Yes/No field is Finished_Training.

Using a Single Record Update Form with this Yes/No type field will allow you to display important information to new users and allow them to skip this screen when they become more comfortable.

<script> if("[@authfield:Finished_Training]" == "No") { window.location = "http://www.mysite.com/training.html"; } else{ window.location = "http://www.mysite.com/menu.html"; } </script>

In this example new users are directed to “training.html” where they are presented with training information and checkbox saying “Don’t show this screen again”. This training page will appear every time they login until they click the check box.

Note Please note: This article uses external HTML, JavaScript, or third-party solutions to add functionality outside of Caspio Bridge’s standard feature set. These solutions are provided “as is” without warranty, support or guarantee. The code within this article is provided as a sample to assist you in the customization of your web applications. You may need a basic understanding of HTML and JavaScript to implement successfully.