---
agentTools:
  projectIndex: https://opencontent.readme.io/llms.txt
---

# 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.

[block:api-header]
{
  "title": "1. Adding Embedded Form in your template"
}
[/block]

More info on the Embedded Forms documentation page.

[block:code]
{
  "codes": [
    {
      "code": "<div id=\"obs-comments\"></div>\n<button type=\"button\" class=\"btn btn-primary\" id=\"submit-{{Context.ModuleId}}\">Submit</button>",
      "language": "html",
      "name": "Comment submission form"
    },
    {
      "code": "{{#each Collections.Submissions.Items}}\n <p>{{Name}} : {{Message}}</p>\n{{/each}}",
      "language": "text",
      "name": "Comments rendering"
    },
    {
      "code": "$(document).ready(function () {\n    var moduleId = {{Context.ModuleId}};\n    var itemId = \"{{Context.Id}}\";\n    var itemTitle = \"{{Title}}\";\n\n    var sf = $.ServicesFramework(moduleId);\n\n    var form = $(\"#obs-comments\").openContentForm({\n      servicesFramework: sf,\n      onSubmit: function (data) {\n        // execute some code before submit\n              data.itemId = itemId;\n              data.itemTitle = itemTitle;\n              data.approvalEnabled = true;\n      },\n      onSubmited: function (data) {\n              // execute some code after submit\n        form.destroy();\n        alert(data.message);\n        $submitButton.hide();\n      }\n    });\n\n    var $submitButton = $('#submit-' + moduleId);\n    $submitButton.click(function () {\n        form.submit(itemId);\n    });\n\n});\n",
      "language": "javascript",
      "name": "Comment submission javascript"
    }
  ]
}
[/block]

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

[block:code]
{
  "codes": [
    {
      "code": " \"detail\": {\n        \"template\": \"detail.hbs\",\n        \"schemaInTemplate\": true,\n        \"optionsInTemplate\": true,\n        \"additionalDataInTemplate\": true,\n        \"model\": {\n          \"Submissions\": {\n            \"query\": {\n              \"RelatedField\": \"itemId\",\n              \"Filter\": {\n                \"approved\": \"true\"\n              },\n              \"Sort\": [\n                {\n                  \"Field\": \"$timestamp\",\n                  \"Order\": \"desc\"\n                }\n              ]\n            }\n          }\n        }\n        \n      }",
      "language": "haml"
    }
  ]
}
[/block]

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

[block:api-header]
{
  "title": "2. Create a submissions template"
}
[/block]

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.

[block:code]
{
  "codes": [
    {
      "code": "{\n  \"type\": \"object\",\n  \"properties\": {\n    \"Name\": {\n      \"type\": \"string\",\n      \"title\": \"Name\"\n    },\n    \"Email\": {\n      \"type\": \"string\",\n      \"title\": \"Email\"\n    },\n    \"Phone\": {\n      \"type\": \"string\",\n      \"title\": \"Phone\"\n    },\n    \"Message\": {\n      \"type\": \"string\",\n      \"title\": \"Message\"\n    },\n    \"itemId\": {\n      \"type\": \"string\",\n      \"title\": \"itemId\"\n    },\n    \"itemTitle\": {\n      \"type\": \"string\",\n      \"title\": \"itemTitle\"\n    },\n    \"approved\": {\n      \"type\": \"boolean\",\n      \"title\": \"approved\"\n    }\n  }\n}",
      "language": "json",
      "name": "submissions-schema.json"
    },
    {
      "code": "{\n  \"fields\": {\n    \"Name\": {\n      \"type\": \"text\"\n    },\n    \"Email\": {\n      \"type\": \"email\"\n    },\n    \"Phone\": {\n      \"type\": \"text\"\n    },\n    \"Message\": {\n      \"type\": \"textarea\"\n    }\n  }\n}",
      "language": "json",
      "name": "submissions-options.json"
    }
  ]
}
[/block]

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

[block:code]
{
  "codes": [
    {
      "code": ".........\n\n\"comments\": {\n      \"type\": \"multiple\",\n      \"title\": \"comments\",\n      \"collection\": \"Submissions\",\n      \"main\": {\n        \"template\": \"comments.hbs\"\n\n      }\n    }\n.........",
      "language": "json",
      "name": "manifest.json"
    },
    {
      "code": "<p>submissions</p>\n\n{{#each Items}}\n<p>{{Name}} : {{Message}} <a href=\"{{Context.EditUrl}}\">edit</a></p>\n{{/each}}",
      "language": "html",
      "name": "comments.hbs"
    }
  ]
}
[/block]

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.