Using Caspio DataPages, you can create a system where highly rated records appear on top of less popular records. This technique gives active web users a chance to rate your content, and helps organize your content so that the most trusted responses appear first.

In this example, you create a commenting system, but this same self-organizing system could be applied to other scenarios, including documents, product reviews, event descriptions, company profiles, etc.

This technique uses three DataPages and requires some external JavaScript. It is recommended for advanced users and may require some JavaScript knowledge to customize.

Prerequisite:

  • First create a table to hold all of the comments submitted. Be sure to include a unique Comment_ID field with an AutoNumber data type. In this example, the following table design is used:

How_to_create_vote_up_and_vote_down_for_individual_records_1

The Popularity field is used to keep track of the current number of up votes minus down votes for each record.

The Active (Yes/No) field allows us to create an approval process for new comments. For more information on how to set up this feature see: Create an Approval Process for New Records

Create a new comment Submission Form

The first step is to create a Submission Form to allow your users to leave new comments.

  1. In the Caspio Bridge homepage, click DataPages on the sidebar menu and click New DataPage. Select Submission Form as the first DataPage type.
  2. On the DataPage DataSource screen, select the new Comments table as the data source and set the Style and Localization.
  3. On the Select Fields screen, include all of the fields you would like the user to fill out. The Active field is not included in the selected fields (so it is set to “unchecked” when a new record is created).
  4. On the Configure Fields screen, configure the Title, Author, and Comment fields for the user to fill out. The Popularity field is set to Hidden and includes a default value of 0.

The Topic_ID is filled by receiving a parameter passed using a query string. Select the Topic_ID field from the DataPage Elements Panel and click the Advanced tab. To receive a parameter in a field, enable the On load option by checking the Receive value or parameter.

5. This form also has enabled notification email to notify the site admin when new comments are submitted so that they can review them and check Active using a separate DataPage in their Admin interface. Click Finish.

Create the comment viewer Report DataPage

Now that users can submit new comments, you can create a List Report DataPage to view the comments in order of popularity.

  1. Create a List Report DataPage using the Comments table as your data source.
  2. The first step is to create a filter for this DataPage using the data located in the URL query string. Select Filter data based on your pre-defined criteria and allow both Bridge and external parameters.
    How_to_create_vote_up_and_vote_down_for_individual_records_3
  3. On the Select Filtering Fields screen, select both the Topic_ID and the Active fields to be included in the filter.
    How_to_create_vote_up_and_vote_down_for_individual_records_4
  4. On the Configure Filtering Fields screen, select the Topic_ID element and click the Advanced tab. Enter the parameter name that matches the name of the query string in your URL exactly in the Value space. Be sure the Active (Yes/No) is set to display only “checked” records.
    How_to_create_vote_up_and_vote_down_for_individual_records_5

Format your results page

  1. The results page can include any data you would like. Select fields you wish to use in the results page on the Select Results Page Fields screen. Click Next.
  2. On the Configure Results Page Fields, add an HTML block to display the comment information and create the voting controls. Insert field parameters in the HTML block using the picker button and format them using the rich text editor or insert HTML code in the Source mode as seen below.
    How_to_create_vote_up_and_vote_down_for_individual_records_6
  3. Now you add the voting controls. The voting controls consist of two links, one to vote a comment up, and one to vote a comment down. You create the vote submission DataPage in the next step. The secret here is that both the up and the down control will open a popup to the same DataPage. The comment will be voted up or down depending on the extra data we pass via query string. For now, create placeholder links. Go to the Source mode of your HTML block and insert the following code. You will change the URL later.
    <a onclick="window.open('URL','popup','width=10,height=10, scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=50,top=50'); return false"> UP </a>
    extra space 
    <a onclick="window.open('URL','popup','width=10,height=10, scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=50,top=50'); return false"> DOWN </a>
  4. Continue to the Details screen and select the No Details Page. Click Finish to save your DataPage.

Create the Vote Submission Form

Next, you create the vote submission form using a Single Record Update Form.

  1. Create a new DataPage and select Single Record Update Form from the Forms type.
  2. Select the Comments table as the data source.
  3. This Single Record Update Form will locate the appropriate comment using the Comment_ID parameter.
    How_to_create_vote_up_and_vote_down_for_individual_records_7

Now this form is ready to receive the Comment_ID from our comment viewer Report DataPage. Click Next.

  1. Move the Popularity field to the right hand panel using the arrow button.
  2. On the Configure Fields screen, be sure to set the Popularity field from “Display Only” to “Text Field” using the form element dropdown.
  3. This step includes a JavaScript to limit the number of votes a user can make to five. This prevents users from voting overwhelmingly for their own comments.

Using the Insert button at the lower right hand corner of the DataPage elements panel, insert one virtual field, one HTML block, and Header and Footer elements.

How_to_create_vote_up_and_vote_down_for_individual_records_8

Select the Virtual field and click the Advanced tab. Select External Parameter from the On load assign default value or parameter dropdown and enter the parameter:

[@cbVoted]

In the On exit for the pass field value as paramter space, again enter the parameter as [@cbVoted]

In the DataPage Header, disable the HTML editor in the Advanced tab and add the following div tag:

<div style="display:none">

This will hide the DataPage from the end user so they cannot affect their vote being submitted.

Now, add two scripts to the DataPage, one in the HTML block, and one in the DataPage Footer.

In your HTML block, go to the Source mode and insert this script:

<script>
var vote = "[@cbVote]";
if(vote == "")
vote = "0";
if(parseInt(voted) < 5){
document.getElementById('EditRecordPopularity').value = parseInt(document.getElementById('EditRecordPopularity').value) + parseInt(vote);
document.getElementById('cbParamVirtual1').value = parseInt(voted) + 1;}
</script>

This script checks to see if the user has cast more than 5 votes. If the user hasn’t then this script will add or subtract from the popularity depending on whether the user was “voting up” the comment or “voting down”. The table after the script will hide the submission button.

Now in the DataPage Footer, go to the Source mode and add this script:

</div>
<span id="error_message"> </span>
<script>
	var voted = "[@cbVoted]";
	if(voted == "") 
	voted = "0";
	if(parseInt(voted) < 5){
	document.getElementById("caspioform").submit(); }
	else{
	document.getElementById("error_message").innerHTML = "<h2>I'm sorry!</h2><p>You have reached the maximum amount of votes allowed for this period.</p>" ; }
</script>

This script will either submit the Caspio Form or display a message if the user has exceeded their number of votes.

Click Next.

On the Destination and Triggers screen, Select Close window in the dropdown.

Click Finish.

Deployment

The comment submission form and the comment rating form can be embedded directly to the same webpage.

The vote Submission Form must also be embedded to a webpage at the same domain. For example, if you embed your www.samplesite.com, you will also need to embed your vote submission form to another page at www.samplesite.com.

If you use the URL Caspio deployment method, the parent page – holding the comment Report and Submission Form – will not automatically refresh. This is due to a security concept in JavaScript called the Same Origin Policy. Basically, the popup window will not be able to ask the parent window to refresh.

URL in the Report page

Once you’ve embedded the vote Submission Form we can now complete the place holder voting controls in the comment viewer Report. Select your comment viewer Report DataPage and click the Edit button. Navigate to the Configure Results Fields screen and locate the “Up” and “Down” links that were added in a previous step.

Now you can replace the temporary URL in these links with the URL of your vote submission webpage. We also need to add two query strings to transmit the comment, and whether the vote is positive or negative.

The comment_ID query string will be passed using a parameter. After the URL add the following:

?Comment_ID=[@field:Comment_ID]

The actual vote will be different for the “vote up” and the “vote down” links:

Up:

&cbVote=1

Down:

&cbVote=-1

Note that the cbVote query string is preceded by an “&” (and symbol) and not a “?” (question mark) because it is the second query string.

Sample:

http://www.samplesite.com?Comment_ID=[@field:Comment_ID]&cbVote=1

Testing

At this point you should be able to submit and arrange the comments by voting them up or down. Also after your user has submitted more than 5 votes they should receive an error message saying they have exceeded their maximum votes.

Note Please note: This article references external HTML codes, JavaScript, or third-party solutions which are not built-in features of Caspio Bridge, and as such are provided “as is” without any warranties, support or guarantees. These tips are provided as samples to assist you in the customization of your applications, and you will need a basic understanding of these languages in order to implement successfully.