Tutorial: Comments with moderation
In this tutorial we'll create a comment section for an article, and use the approval system in Form Editor to let the editors moderate the comments. Since it's all built into Form Editor, you won't have to write a single line of custom code to make this happen.
We'll also utilize the Content Templates feature introduced in Umbraco 7.7 to create a hassle-free workflow for the editors.
Let's get to it, shall we?
Creating the document type
Create a document type called Article and add:
- A tab named Content. This tab will contain the article content.
- A property named Heading of type Textstring on the Content tab.
- A property named Body text of type Richtext editor on the Content tab.
- A tab named Comments. This tab will contain the comments form.
- A property named Form of type Form Editor on the Comments tab.
The final result should look something like this:
Creating the content template
Once the document type is done, create a content template for it and name it Article with comments. We'll use this to ensure that all our Article pages are created with a correctly configured comments form.
On the Comments tab of the content template, create the form layout you'd like for the comments form. You can add all the rows and fields you want, but for the sake of this tutorial, make sure you at least add:
- A Name field (of type Textbox).
- A Comment field (of type Text area).
Now go to the Receipt tab of the Form property and enter a suitable receipt message.
Configuring and locking down Form Editor
We need to make a few changes to the Form Editor data type. First and foremost we need to enable the option Use submission approval - this activates the approval system:
Using the content template we'll have a correctly configured comments form with each new article that's created. We really don't want the editors messing around with it - they should only be concerned with writing articles and moderating the submitted comments. Fortunately we can lock down Form Editor, so only the Submissions tab is shown to the editors. This is done by configuring the Tab order and availability on the data type:
Note: This also influences the tabs available when editing the content template. If you need to change the form configuration in the content template later on, you'll have to enable the tabs temporarily until you're done changing things.
Creating an article
Go to the content section and create an Article page using the Article with comments content template:
Fill out the article content on the Content tab and then switch to the Comments tab. As expected, only the Submissions tab is visible:
Behind the scenes, the content template has created the correct form layout and configuration for us. In other words: The editors don't have to do a thing! When they create an article, they need only focus on the content, and of course the subsequent comments moderation.
That's awesome! Content templates rock!
Rendering the article
We're going to render the pieces of the article page in the following order:
- The article content.
- The article comments (if there are any).
- The comments form.
We don't want a page reload and subsequent scroll-to-top when the comments form is submitted, so we'll use the Async rendering to render the form. This way the comments form will be replaced by the receipt message you just entered when the form is submitted.
The following code listing contains the entire template for the Article page. Have a look at the documentation for working with form submissions if you want to learn more about fetching and rendering the form submissions.
Paste this code into your Article template, and then go have a look at the article you created.
Approving the comments
When you have submitted some comments to the article, they'll need approving before they're shown alongside the article.
Go back to the Comments tab and approve the submissions by clicking the checkmarks. When they turn green, the submissions are approved.
Now go back and view the article. The approved comments should appear between the article content and the comments form:
This tutorial has shown one way of using the approval system in Form Editor. Hopefully you'll find other clever ways to put it to good use.
By now you should also have an idea of just how awesome content templates are, and how they introduce a whole new way of utilizing forms.