Custom Usage Portal

From WirelessOrbit

Example Custom Usage Portal

The usage page consists of two parts. The first part is a login form. The customer enters their username and password to view the usage information for their account. The second part of the page is the usage information.

When the customer first accesses the usage page the login form is displayed and the usage information part of the page is removed. After they have logged in the login form is removed and the usage information is displayed. This is done by displaying or hiding the content inside the HTML elements with the IDs wo_portal_usage_form_custom (the login form) and wo_portal_usage_list (the usage information) as appropriate. The construction of both parts is discussed below.

The FORM Element

The HTML document for the usage page must contain a FORM element with the ID wo_portal_usage_form_custom. The FORM element will be rewritten to have the correct ACTION and METHOD attributes.

Form INPUTs

In addition to the FORM element you should define the form inputs. There are two inputs, one for the username and one for the password. In addition, the form contains a submit button. The IDs for the inputs are:

wo_portal_usage_password: The password blank
wo_portal_usage_submit: The submit button
wo_portal_usage_username: The username blank

Login Error Element

In addition to the FORM and its inputs you should define an element to hold the error to be displayed if the username or password is incorrect. This element should be given the id wo_portal_usage_login_error and should contain whatever message you want displayed for login errors.

The Usage Information Element

In addition to the form described above your custom usage page should contain an element to hold the customer's usage information. This element should be given the id wo_portal_usage_list. It can be any kind of HTML tag, but it makes the most sense for it to be a DIV or TABLE or some similar sort of container. This element serves as a wrapper around all the other elements related to the usage information.

Inside the element with the id wo_portal_usage_list you should create different element with the ID wo_portal_usage_row. This element serves as a template for displaying the session information for the customer's account. It in turn contains a set of elements with specific IDs which will be automatically re-written with the actual usage information.

The IDs and their meanings are:

wo_portal_usage_download: The amount of data downloaded in the session
wo_portal_usage_gateway_name: The name of the gateway where the session was logged
wo_portal_usage_session_duration: The session length
wo_portal_usage_session_start: The timestamp of the start of the session
wo_portal_usage_session_stop: The timestamp of the end of the session
wo_portal_usage_terminate_cause: The reason for the end of the session
wo_portal_usage_upload: The amount of data uploaded in the session

Here's an example using a tables:

     <TR ID="wo_portal_usage_row">
           <TD ID="wo_portal_usage_session_start"></TD>
           <TD ID="wo_portal_usage_session_stop"></TD>
           <TD ID="wo_portal_usage_upload"></TD>
           <TD ID="wo_portal_usage_download"></TD>
     </TR>

In this example the portal interface will create a new TR (table row) element for each session. Each TR will contain four TD (table cell) elements. The first TD will contain the timestamp of the start of the session, the second TD will contain the timestamp of the end of the session, and so on.

Note that any attributes assigned to the elements in the template will be copied to each element created to hold the usage data. For example if we added a class to the first TD in the above example:

     <TR ID="wo_portal_usage_row">
           <TD CLASS="bold" ID="wo_portal_usage_session_start"></TD>
           <TD ID="wo_portal_usage_session_stop"></TD>
           <TD ID="wo_portal_usage_upload"></TD>
           <TD ID="wo_portal_usage_download"></TD>
     </TR>

then each TD containing the session start time data would also have the "bold" class.

A Complete Example

Below is a complete usage page. Note that the TABLE is included to help organize the data. It is not necessary. You could instead do the layout using DIVs, lists (ULs or OLs) or any other valid HTML elements.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
        <LINK HREF="custom.css" REL="stylesheet" TYPE="text/css"/>
</HEAD>
<BODY>
<IMG SRC="logo.gif"/>
<TABLE>
        <TR>
                <TD>Time remaining:</TD>
                <TD ID="wo_portal_usage_time_remaining"></TD>
        </TR>
        <TR>
                <TD>Bandwidth remaining:</TD>
                <TD ID="wo_portal_usage_bandwidth_remaining"></TD>
        </TR>
        <TR>
                <TD>Logins remaining:</TD>
                <TD ID="wo_portal_usage_logins_remaining"></TD>
        </TR>
</TABLE>
<P>
        This is a list of the sessions logged for your account.
</P>
<DIV ID="wo_portal_usage_list">
        <TABLE>
                <TR>
                        <TD>Start</TD>
                        <TD>End</TD>
                        <TD>Length</TD>
                        <TD>Location</TD>
                        <TD>Upload</TD>
                        <TD>Download</TD>
                        <TD>Logout type</TD>
                </TR>
                <TR ID="wo_portal_usage_row">
                        <TD ID="wo_portal_usage_session_start"></TD>
                        <TD ID="wo_portal_usage_session_stop"></TD>
                        <TD ID="wo_portal_usage_session_duration"></TD>
                        <TD ID="wo_portal_usage_gateway_name"></TD>
                        <TD ID="wo_portal_usage_upload"></TD>
                        <TD ID="wo_portal_usage_download"></TD>
                        <TD ID="wo_portal_usage_terminate_cause"></TD>
                </TR>
        </TABLE>
</DIV>
<UL>
        <LI><A ID="wo_portal_link_login">Log In</A></LI>
        <LI><A ID="wo_portal_link_add_time">Renew</A></LI>
        <LI><A ID="wo_portal_link_ticket">Report Problems</A></LI>
</UL>
</BODY>
</HTML>

Navigation