Comments

Adding comments to a articles templates

I will explain how to add comments to a detail page of articles template by using Embedded Forms.

1. Adding Embedded Form in your template

More info on the Embedded Forms documentation page.

Comment submission form

<div id="obs-comments"></div>
<button type="button" class="btn btn-primary" id="submit-{{Context.ModuleId}}">Submit</button>

Comments rendering

{{#each Collections.Submissions.Items}}
 <p>{{Name}} : {{Message}}</p>
{{/each}}

Comment submission javascript

$(document).ready(function () {
    var moduleId = {{Context.ModuleId}};
    var itemId = "{{Context.Id}}";
    var itemTitle = "{{Title}}";

    var sf = $.ServicesFramework(moduleId);

    var form = $("#obs-comments").openContentForm({
      servicesFramework: sf,
      onSubmit: function (data) {
        // execute some code before submit
              data.itemId = itemId;
              data.itemTitle = itemTitle;
              data.approvalEnabled = true;
      },
      onSubmited: function (data) {
              // execute some code after submit
        form.destroy();
        alert(data.message);
        $submitButton.hide();
      }
    });

    var $submitButton = $('#submit-' + moduleId);
    $submitButton.click(function () {
        form.submit(itemId);
    });

});

By adding data.approvalEnabled = true; in the data by javascript it tell opencontent to add a "approved" field to the comment initialised to false.

Modify manifst detail template for include comments in model for template rendering

HAML

"detail": {
        "template": "detail.hbs",
        "schemaInTemplate": true,
        "optionsInTemplate": true,
        "additionalDataInTemplate": true,
        "model": {
          "Submissions": {
            "query": {
              "RelatedField": "itemId",
              "Filter": {
                "approved": "true"
              },
              "Sort": [
                {
                  "Field": "$timestamp",
                  "Order": "desc"
                }
              ]
            }
          }
        }
        
      }

You can see in the query section that you can define filtering and sorting of the comments on the detail page of a article.

2. Create a submissions template

Create a copy of form-schema.json and form-options.json (created by the form builder) and nam it submissions-schema.json and submissions-options.json.
In this schema and options files add 3 new fields : approved, itemTitle, itemId.

submissions-schema.json

{
  "type": "object",
  "properties": {
    "Name": {
      "type": "string",
      "title": "Name"
    },
    "Email": {
      "type": "string",
      "title": "Email"
    },
    "Phone": {
      "type": "string",
      "title": "Phone"
    },
    "Message": {
      "type": "string",
      "title": "Message"
    },
    "itemId": {
      "type": "string",
      "title": "itemId"
    },
    "itemTitle": {
      "type": "string",
      "title": "itemTitle"
    },
    "approved": {
      "type": "boolean",
      "title": "approved"
    }
  }
}

submissions-options.json

{
  "fields": {
    "Name": {
      "type": "text"
    },
    "Email": {
      "type": "email"
    },
    "Phone": {
      "type": "text"
    },
    "Message": {
      "type": "textarea"
    }
  }
}

Add submissions template to manifest.json and create comments.hbs template file.

manifest.json

.........

"comments": {
      "type": "multiple",
      "title": "comments",
      "collection": "Submissions",
      "main": {
        "template": "comments.hbs"

      }
    }
.........

comments.hbs

<p>submissions</p>

{{#each Items}}
<p>{{Name}} : {{Message}} <a href="{{Context.EditUrl}}">edit</a></p>
{{/each}}

The template need to be placed on a page not publically accessible. And need to have as source of content the Articles template on a other page.