Nibble

Adding comment functionality to your Umbraco v5 site with Contour

Contour v2.0 for Umbraco v5 ships with a couple of methods that makes it really easy to fetch and output Contour records on your site as a quick example here is how you would add a comment form and a list of comments to your Umbraco v5 site with Contour.

Step 1: Creating the form

Go to the Contour section (of course you’ll need to install Contour first) and bring up the create page for Forms.

image

Give the form a name and select Comment Form as a template, this will already populate your form with the necessary fields.

image

After hitting the next button you should end up with a comment form

image

Step 2: Placing the form on your template

Navigate to the settings section and select the template where you want to place the comment form (I’m using the v5 starter kit and placing it on the textpage template).

image

Hit the insert macro button on the template editor toolbar

image

Select the ‘insert form from umbraco contour’ macro

image

Then select the Comment form and hit ok

image

You should now end up with an extra line in your template similar to:

@Umbraco.RenderMacro("contourForm", new { formId = "b32ef480-003f-4e93-9641-f60042a0bc33" })

After saving the template you should have a comment form on the pages that use the template with the macro on it.

image

And you can submit new comments…

Step 3: Adding the code that will output the comments

To output we’ll add some additional logic to the template

First a using statement

@using Umbraco.Forms.Core.DynamicObjects;

This is the namespace that contains the dynamic object we’ll be using to make it easy to output our Contour records.

Now to fetch the records we’ll use the method GetApprovedRecordsFromPage feeding it the current page id.

This methods returns a dynamic record list, so it’s easy to access fields on those records simply by using the dot notation like .Comment, .Name, … (depending on your field captions)

Here is the full snippet:

<ul id="comments">
@foreach (dynamic record in Library
           .GetApprovedRecordsFromPage(DynamicModel.Id))
  {
     <li>
          @record.Created.ToString("dd MMMM yyy")
          @if(string.IsNullOrEmpty(record.Website)){
             <strong>@record.Name</strong>
          }
          else{
             <strong>
               <a href="@record.Website" target="_blank">@record.Name</a>
             </strong>
          }
         <span>said</span>
        <p>@record.Comment</p>
     </li>
  }
</ul>

The end result:

image

Want to give this a try, go download Contour RC

1 Comment so far

  1. cake toppers on April 26th, 2014

    I loved as much as you will receive carried out right here.
    The sketch is attractive, your authored subject matter
    stylish. nonetheless, you command get bought an nervousness over that you wish be delivering the following.
    unwell unquestionably come more formerly again since exactly the
    same nearly very often inside case you shield this increase.

Leave a Reply