Comments

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

See also the Embedded Forms documentation.

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

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

$(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; to the data at submission by javascript, you tell OpenContent to add an "approved" field to the comment initialised to false. Thus making the item unapproved.

Modify the detail template in the manifest to include comments in model if you want to use them for template rendering

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

Notice in the query section of the above example 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 name it submissions-schema.json and submissions-options.json.
In this schema and options files add 3 new fields : approved, itemTitle, itemId.

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

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

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

.........
   "comments": {
      "type": "multiple",
      "title": "comments",
      "collection": "Submissions",
      "main": {
        "template": "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 publicly accessible. And need to have as source of content the Articles template on a other page.