{"id":13069,"date":"2017-02-21T11:24:25","date_gmt":"2017-02-21T03:24:25","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=13069"},"modified":"2018-11-05T11:28:10","modified_gmt":"2018-11-05T03:28:10","slug":"comments-4-4","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/comments\/comments-4-4\/","title":{"rendered":"Comments (4.4)"},"content":{"rendered":"<p class=\"page-subheading\"><\/p>\n<p class=\"left-bar\">This article applies to versions 4.4 and later of P2 Explorer.\u00a0For the latest help, see <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/comments\/\">Comments<\/a><\/p>\n<h2 class=\"page-subheading\">Overview<\/h2>\n<p class=\"overview\">Both the Comments and Comments Button\u00a0components are designed to provide a way for users to capture comments related to a specific entity, within a specified context.<\/p>\n<ul class=\"intro-text\">\n<li>The <strong>Comments<\/strong> component displays a box that shows the comments related to an entity and context, and also allows users to add further comments.<\/li>\n<li>The <strong>Comments Button<\/strong> displays a small icon which, when clicked, launches a window that allows users to enter and view comments.<\/li>\n<\/ul>\n<p class=\"intro-text\">The comments are stored in P2 Server and can be viewed anywhere in Explorer where the same entity and context are used.<\/p>\n<p class=\"left-bar-p2blue\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/using-the-page-controls\/comments\/\">Using comments for collaboration<\/a> in display mode,  <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-server\/primers\/comments\/\">Comments: Communicating with Context<\/a>,\u00a0<a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/comments-button\/\">Comments Button<\/a>\u00a0tutorial<\/p>\n<p class=\"intro-text\">\u00a0<\/p>\n<hr \/>\n<h2 class=\"page-subheading\">Comments<\/h2>\n<p class=\"intro-text\">The Comments component displays a box that allows users to add and view comments for an entity and context, within a specified time range. Users cannot change that time range.<\/p>\n<p class=\"intro-text\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14410\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/commentbox.png\" alt=\"Comments 4.4\" width=\"453\" height=\"333\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/commentbox.png 453w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/commentbox-150x110.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/commentbox-24x18.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/commentbox-36x26.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/commentbox-48x35.png 48w\" sizes=\"auto, (max-width: 453px) 100vw, 453px\" \/><\/p>\n<hr \/>\n<h2 class=\"page-subheading\">Comments Button<\/h2>\n<p class=\"intro-text\">The Comments Button component allows you to position a small icon (<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8141\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/commenticonempty.png\" alt=\"commenticonempty\" width=\"15\" height=\"12\" \/>\u00a0or\u00a0<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4884\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/08\/image024.png\" alt=\"image024\" width=\"12\" height=\"10\" \/>) that users can click to see and add comments for an entity and context.<\/p>\n<div class=\"best-prac\"><i class=\"fa fa-star fa-2x fa-pull-left\"><\/i><span class=\"best-prac-text\">TOP TIP<\/span><\/p>\n<p class=\"intro-text\">If\u00a0you want to position the comments button very close to another component, you need to use the <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/precision-layout\/\">Precision Layout<\/a>. If you drag a Precision Layout onto a grid cell, then you will be able to move the 'set' of components easily, by moving the grid cell around.<\/p>\n<\/div>\n<p class=\"intro-text\">\u00a0<\/p>\n<p class=\"intro-text\">The white icon indicates that no comments have yet been made for that entity and context, whereas the black icon indicates that comments have already been made. When the button is clicked, a floating comments window appears.\u00a0<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14411\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/commentsbuttonbox.png\" alt=\"Comments 4.4\" width=\"462\" height=\"498\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/commentsbuttonbox.png 462w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/commentsbuttonbox-139x150.png 139w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/commentsbuttonbox-22x24.png 22w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/commentsbuttonbox-33x36.png 33w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/commentsbuttonbox-45x48.png 45w\" sizes=\"auto, (max-width: 462px) 100vw, 462px\" \/><\/p>\n<p class=\"intro-text\">Users can add and view comments for an entity and context, within a specified time range. Users cannot change that time range. However, users can search for additional comments within other time ranges, but cannot add comments against those other time ranges.<\/p>\n<p class=\"intro-text\">\u00a0<\/p>\n<hr \/>\n<h2 class=\"page-subheading\">Configuring Comments\u00a0<\/h2>\n<p class=\"intro-text\">Both the Comments and Comments Button components have the same configuration options. There are 2 configuration modes. Basic mode (shown below) shows the options most commonly used. Advanced mode allows you to change the type of properties used.<\/p>\n<h3>Basic Mode<\/h3>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/commentsconfig2.png\" rel=\"lightbox-0\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-14449 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/commentsconfig2.png\" alt=\"Comments 4.4\" width=\"957\" height=\"311\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/commentsconfig2.png 957w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/commentsconfig2-768x250.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/commentsconfig2-150x49.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/commentsconfig2-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/commentsconfig2-36x12.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/commentsconfig2-48x16.png 48w\" sizes=\"auto, (max-width: 957px) 100vw, 957px\" \/><\/a><\/p>\n<table>\n<tbody>\n<tr>\n<td width=\"130\"><strong>Start Date\/Time<\/strong>:<\/td>\n<td>The\u00a0date\/time from which to display comments. This will be entered as the start of the search date range.<\/td>\n<\/tr>\n<tr>\n<td><strong>End Date\/Time<\/strong>:<\/td>\n<td>The date\/time at which to stop displaying comments.\u00a0This will be entered as the end\u00a0of the search date range.<\/td>\n<\/tr>\n<tr>\n<td><strong>Entity:<\/strong><\/td>\n<td>The\u00a0entity that all these comments apply to. All comments entered in this box will apply to this entity.<\/td>\n<\/tr>\n<tr>\n<td><strong>Context:<\/strong><\/td>\n<td>The situation in which these comments apply. All comments will have this context. If another comment box is placed on another page, with this same context and for the same entity, the comments for both will appear in both comment boxes. If the entity is the same but the context is different, the comments will be shown independently.<\/td>\n<\/tr>\n<tr>\n<td><strong>Style:<\/strong><\/td>\n<td>The style you want to apply to the Comments component. There are no predefined styles available.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3>Advanced Mode<\/h3>\n<p class=\"intro-text\">In Advanced mode, you have the option of switching between variable and text fields. The first 3 fields are set to variables initially, and have default values associated with them.<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/commentsconfigadv.png\" rel=\"attachment wp-att-14450 lightbox-1\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14450\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/commentsconfigadv.png\" alt=\"Comments 4.4\" width=\"476\" height=\"292\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/commentsconfigadv.png 476w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/commentsconfigadv-150x92.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/commentsconfigadv-24x15.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/commentsconfigadv-36x22.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/commentsconfigadv-48x29.png 48w\" sizes=\"auto, (max-width: 476px) 100vw, 476px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-primers\/variables\/\">Variables<\/a>, <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/default-value\/\">Default Values<\/a><\/p>\n<hr \/>\n<h2 class=\"page-subheading\">What is Context?<\/h2>\n<p class=\"intro-text\">Context is the\u00a0mechanism by which P2 Explorer exposes all comments related to a specific entity, and this is something that the page designer does when creating a page.<\/p>\n<p class=\"intro-text\">A comment\u2019s context is some extra information that is added to the comment, and is used to associate comments with other comments for that entity that use the same context.<\/p>\n<p class=\"intro-text\">As an entity can be used on lots of different pages, adding context to a comment means that you can see \u00a0all of the comments that have been made for that entity with that context, every time you open the comments box, no matter which page you are looking at.<\/p>\n<p class=\"intro-text\">All comments have the context that is specified by the page designer for that component. For example, if the comments all have the context of \u201cReport\u201d, Explorer can apply filtering to all the comments in the system to only show comments for an entity with the \"Report\" context.\u00a0<\/p>\n<p class=\"intro-text\">Taking this a step further, a page designer can use the same context for the same entity on a completely different page. When a comment is applied to that entity, users will see all comments for that entity and\u00a0context (e.g. Report), even though they are displayed on different pages.<\/p>\n<p class=\"left-bar-blue\"><i class=\"fa fa-eye fa-2x fa-pull-left\"><\/i>\u00a0SEE IT IN ACTION! Watch this video to see how comments with context work on a page.<\/p>\n\r\n\t<!-- Begin Video.js -->\r\n\t<video id=\"example_video_id_1170942475\" class=\"video-js vjs-default-skin\" width=\"1000\" height=\"734\" controls preload=\"none\" data-setup='[]'>\r\n\t\t<source src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/videos\/Commentcontext.mp4\" type='video\/mp4' \/>\r\n\t\t\r\n\t\t\r\n\t<\/video>\r\n\t<!-- End Video.js -->\r\n\n<hr \/>\n<h2 class=\"page-subheading\"><span id=\"Tutorial\">Tutorial: How Context Works with Comments<\/span><\/h2>\n<p class=\"note\">If you're unfamiliar with the process of building pages, read the article\u00a0<a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-create-your-first-page\/building-an-explorer-page\/\">Building an Explorer Page<\/a>.<\/p>\n<p class=\"intro-text\">In this tutorial, we\u2019ll look at adding some Comments to a page, along with an Entity Selector that can change the entity that comments apply to. You will be able to enter comments and see how the context affects what is displayed.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/commentstut.png\" rel=\"attachment wp-att-14419 lightbox-2\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14419\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/commentstut.png\" alt=\"Comments 4.4\" width=\"1590\" height=\"638\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/commentstut.png 1590w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/commentstut-768x308.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/commentstut-150x60.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/commentstut-1280x514.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/commentstut-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/commentstut-36x14.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/commentstut-48x19.png 48w\" sizes=\"auto, (max-width: 1590px) 100vw, 1590px\" \/><\/a><\/p>\n<p class=\"intro-text\">Let\u2019s go through this process, step-by-step.<\/p>\n<p class=\"left-bar\">Note: This configuration uses the <em>Sample Data<\/em> table and datasets that can be optionally made available during initial installation and setup. If you don't have access to this data, you will need to adjust the configuration to suit your data at your site.<\/p>\n<hr \/>\n<p class=\"intro-text\"><strong>Step 1. Prepare a Studio Page<\/strong><\/p>\n<p class=\"intro-text\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14281\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/newpage.png\" sizes=\"auto, (max-width: 438px) 100vw, 438px\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/newpage-400x100.png 400w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/newpage-250x62.png 250w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/newpage-24x6.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/newpage-36x9.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/newpage-48x12.png 48w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/newpage.png 438w\" alt=\"New Page button on ribbon\" width=\"438\" height=\"109\" \/><\/p>\n<p class=\"intro-text\">Before you start, click the <strong>New Page<\/strong>\u00a0button on the Home tab of the ribbon. Choose the Grid layout.<\/p>\n<p class=\"intro-text\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14282\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/gridlayoutchoose.png\" sizes=\"auto, (max-width: 863px) 100vw, 863px\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/gridlayoutchoose-150x93.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/gridlayoutchoose-400x248.png 400w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/gridlayoutchoose-768x475.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/gridlayoutchoose-800x495.png 800w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/gridlayoutchoose-242x150.png 242w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/gridlayoutchoose.png 863w\" alt=\"Grid Layout 4.4\" width=\"863\" height=\"534\" \/><\/p>\n<p class=\"intro-text\">Let's set up the page in this format:\u00a0<\/p>\n<ul class=\"intro-text\">\n<li>Create 4 columns.<\/li>\n<li>Create 3 rows.<\/li>\n<li>Set the heights of the first 2 rows to 50.<\/li>\n<\/ul>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/grid-layout\/\" data-slimstat-clicked=\"false\" data-slimstat-type=\"2\" data-slimstat-tracking=\"false\" data-slimstat-callback=\"false\" data-slimstat-async=\"false\">Grid Layout tutorial<\/a><\/p>\n<p class=\"intro-text\">\u00a0<\/p>\n<p class=\"intro-text\"><strong>Step 2. Add and Configure an Entity Selector<\/strong><\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/comments-tut-2.png\" rel=\"attachment wp-att-14425 lightbox-3\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14425\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/comments-tut-2.png\" alt=\"Comments 4.4\" width=\"1590\" height=\"613\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/comments-tut-2.png 1590w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/comments-tut-2-768x296.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/comments-tut-2-150x58.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/comments-tut-2-1280x493.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/comments-tut-2-24x9.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/comments-tut-2-36x14.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/comments-tut-2-48x19.png 48w\" sizes=\"auto, (max-width: 1590px) 100vw, 1590px\" \/><\/a><\/p>\n<p class=\"intro-text\">The entity that the user selects from here will determine the entity that the comments apply to.<\/p>\n<p class=\"intro-text\">Drag and drop an Entity Selector to the bottom-left cell. Configure it as follows:\u00a0<\/p>\n<ul class=\"intro-text\">\n<li>Select Mode: Single<\/li>\n<li>Selected Entity: selectedEntity<\/li>\n<li>Hierarchy Name: (Text) P2 Energy Solutions<br \/>\n Note: You will need to adjust the configuration to suit your data at your site.<\/li>\n<\/ul>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/entity-selector\/\">Entity Selector tutorial<\/a>\u00a0<\/p>\n<p class=\"intro-text\">\u00a0<\/p>\n<p class=\"intro-text\"><strong>Step 3. \u00a0Add and Configure\u00a03 Comments<\/strong><\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/comments-tut-3b.png\" rel=\"attachment wp-att-14427 lightbox-4\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-14430 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/comments-tut-3b.png\" alt=\"Comments 4.4\" width=\"1590\" height=\"615\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/comments-tut-3b.png 1590w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/comments-tut-3b-768x297.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/comments-tut-3b-150x58.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/comments-tut-3b-1280x495.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/comments-tut-3b-24x9.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/comments-tut-3b-36x14.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/comments-tut-3b-48x19.png 48w\" sizes=\"auto, (max-width: 1590px) 100vw, 1590px\" \/><\/a><\/p>\n<p class=\"intro-text\">Drag and drop 3 Comments\u00a0components onto the remaining cells in the bottom row.\u00a0The Comments component is in the Display <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/display.png\" rel=\"lightbox[1429] lightbox-5\" data-slimstat-clicked=\"false\" data-slimstat-type=\"2\" data-slimstat-tracking=\"false\" data-slimstat-async=\"false\" data-slimstat-callback=\"false\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1844\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/display.png\" alt=\"Display group icon\" width=\"22\" height=\"13\" \/><\/a>\u00a0group.<\/p>\n<p class=\"intro-text\">Notice that the Entity field is already configured to be driven from the Entity Selector, so you only need to configure the Context field for each one.<\/p>\n<ul class=\"intro-text\">\n<li>Configure the left-most Comments as follows:\n<ul class=\"intro-text\">\n<li>Context: (leave this blank)<br \/>\n Leaving this blank will show all of the comments regardless of context.<\/li>\n<\/ul>\n<\/li>\n<li>Configure the Comments in the middle as follows:\n<ul class=\"intro-text\">\n<li>Context: 1<\/li>\n<\/ul>\n<\/li>\n<li>Configure the right-most Comments as follows:\n<ul class=\"intro-text\">\n<li>Context: 2<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p class=\"intro-text\">\u00a0<\/p>\n<p class=\"intro-text\"><strong>Step 4. Add and Configure 3 Comments Buttons<\/strong><\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/comments-tut-4.png\" rel=\"attachment wp-att-14429 lightbox-6\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14429\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/comments-tut-4.png\" alt=\"Comments 4.4\" width=\"1590\" height=\"612\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/comments-tut-4.png 1590w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/comments-tut-4-768x296.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/comments-tut-4-150x58.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/comments-tut-4-1280x493.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/comments-tut-4-24x9.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/comments-tut-4-36x14.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/comments-tut-4-48x18.png 48w\" sizes=\"auto, (max-width: 1590px) 100vw, 1590px\" \/><\/a>\u00a0<\/p>\n<p class=\"intro-text\">Drag and drop 3 Comments Button\u00a0components onto the cells above the Comments components.<\/p>\n<p class=\"intro-text\">Notice that the Entity is already configured to be driven from the Entity Selector, so you only need to configure the Context field for each one.<\/p>\n<ul class=\"intro-text\">\n<li>Configure the left-most Comments Button as follows:\n<ul class=\"intro-text\">\n<li>Context: (leave this blank)<\/li>\n<\/ul>\n<\/li>\n<li>Configure the Comments Button in the middle as follows:\n<ul class=\"intro-text\">\n<li>Context: 1<\/li>\n<\/ul>\n<\/li>\n<li>Configure the right-most Comments Button as follows:\n<ul class=\"intro-text\">\n<li>Context: 2<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p class=\"intro-text\">\u00a0<\/p>\n<p class=\"intro-text\"><strong>Step 5. Add and Configure 3 Text Labels<\/strong><\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/comments-tut-5.png\" rel=\"attachment wp-att-14432 lightbox-7\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14432\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/comments-tut-5.png\" alt=\"Comments 4.4\" width=\"1590\" height=\"613\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/comments-tut-5.png 1590w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/comments-tut-5-768x296.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/comments-tut-5-150x58.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/comments-tut-5-1280x493.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/comments-tut-5-24x9.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/comments-tut-5-36x14.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/comments-tut-5-48x19.png 48w\" sizes=\"auto, (max-width: 1590px) 100vw, 1590px\" \/><\/a><\/p>\n<p class=\"intro-text\">This step is just to make it easier to remember what's what when you practice using the page at the end. We want to add a text label that displays the name of the entity and the context.<\/p>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/text-label\/\">Text Label tutorial<\/a>, <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/\">Data Selector<\/a><\/p>\n<p class=\"intro-text\">Drag and drop 3 Text Label\u00a0components onto the cells above the Comments Buttons. Configure the first Text Label as follows:<\/p>\n<ul class=\"intro-text\">\n<li>In the Content area for the buttons, type <strong>Entity:<\/strong><\/li>\n<li>Click <strong>Add Data<\/strong>. We're going to add the <em>selectedEntity<\/em> variable here.\n<ul class=\"intro-text\">\n<li>For the <strong>Type<\/strong>, choose <strong>Entity<\/strong>.<\/li>\n<li>For <strong>Data<\/strong>, click the field to use\u00a0the Data Selector. Staying on the <strong>Value<\/strong> <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/02\/Value-Icon.png\" rel=\"attachment wp-att-9572 lightbox-8\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9572\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/02\/Value-Icon.png\" alt=\"Data Selector 4.4\" width=\"20\" height=\"20\" \/><\/a>\u00a0tab, click the <strong>Variable<\/strong> <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/variableicon.png\" rel=\"attachment wp-att-14462 lightbox-9\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14462\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/variableicon.png\" alt=\"Variable 4.4\" width=\"14\" height=\"21\" \/><\/a>\u00a0button, and choose <strong>selectedEntity<\/strong> from the drop-down list. Click out of the Data Selector and click <strong>Add.<\/strong><br \/>\n <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/comments-tut-52.png\" rel=\"attachment wp-att-14433 lightbox-10\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-14434 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/comments-tut-52.png\" alt=\"Text Label 4.4\" width=\"339\" height=\"295\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/comments-tut-52.png 339w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/comments-tut-52-150x131.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/comments-tut-52-24x21.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/comments-tut-52-36x31.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/comments-tut-52-48x42.png 48w\" sizes=\"auto, (max-width: 339px) 100vw, 339px\" \/><\/a><\/li>\n<\/ul>\n<\/li>\n<li>Staying\u00a0in the Content area, after the entity variable, type:\u00a0<strong>, Context: null<\/strong><\/li>\n<li>Your content should now look like this:\u00a0<strong>Entity: {{1:entity:displayName}}, Context: null<br \/>\n Note<\/strong>: You cannot type\u00a0<em>{{1:entity:displayName}}<\/em> directly into the field as the database will not understand which data item to connect to. This must be done through the Data Selector.<\/li>\n<\/ul>\n<p class=\"intro-text\">Configure the remaining text labels as above, but specifying 1 and 2 for the context, corresponding to the context for that column.<\/p>\n<p class=\"intro-text\">\u00a0<\/p>\n<p class=\"intro-text\"><strong>Step 6. Configure Default Values<\/strong><\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/comments-tut-6.png\" rel=\"attachment wp-att-14435 lightbox-11\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14435\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/comments-tut-6.png\" alt=\"Comments 4.4\" width=\"361\" height=\"632\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/comments-tut-6.png 361w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/comments-tut-6-86x150.png 86w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/comments-tut-6-14x24.png 14w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/comments-tut-6-21x36.png 21w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/comments-tut-6-27x48.png 27w\" sizes=\"auto, (max-width: 361px) 100vw, 361px\" \/><\/a><\/p>\n<p class=\"intro-text\">In this step, we want to configure a default value for the entity, so that the page makes sense when it's first loaded.\u00a0<\/p>\n<ul class=\"intro-text\">\n<li>Click the <strong>Default Values<\/strong> button above the component editor (top right).<\/li>\n<li>For <em>selectedEntity<\/em>, type the name of a relevant entity from the\u00a0hierarchy configured through your Entity Selector (e.g. Bossier 11).<\/li>\n<\/ul>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/default-value\/\">Default Values<\/a><\/p>\n<p class=\"intro-text\">\u00a0<\/p>\n<p class=\"intro-text\"><strong>Step 7. All done! \u00a0<\/strong><\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/comments-tut-7.png\" rel=\"attachment wp-att-14437 lightbox-12\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14437\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/comments-tut-7.png\" alt=\"Comments 4.4\" width=\"1590\" height=\"638\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/comments-tut-7.png 1590w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/comments-tut-7-768x308.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/comments-tut-7-150x60.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/comments-tut-7-1280x514.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/comments-tut-7-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/comments-tut-7-36x14.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/comments-tut-7-48x19.png 48w\" sizes=\"auto, (max-width: 1590px) 100vw, 1590px\" \/><\/a><\/p>\n<p class=\"intro-text\">Congratulations! You now have a page with an entity selector that chooses an entity, and Comments and Comments Buttons where you can add and view comments for that entity.<\/p>\n<ul class=\"intro-text\">\n<li>Click the <strong>Finish and Open<\/strong> <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/livemode1.png\" rel=\"lightbox-13\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2978\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/livemode1.png\" alt=\"livemode\" width=\"14\" height=\"16\" \/><\/a>\u00a0button on the Studio toolbar to <a title=\"Saving Your Page\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-create-your-first-page\/saving-your-page\/\">save your page<\/a> and open it in run-time.<\/li>\n<li>Add some comments, using both the Comments Buttons and the Comments.\u00a0<\/li>\n<li>Observe where the comments appear.<\/li>\n<\/ul>\n<p class=\"intro-text\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1348\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/save.png\" alt=\"save\" width=\"48\" height=\"53\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/save.png 48w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/save-22x24.png 22w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/save-33x36.png 33w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/save-43x48.png 43w\" sizes=\"auto, (max-width: 48px) 100vw, 48px\" \/>\u00a0Don\u2019t forget to <a title=\"Saving Your Page\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-create-your-first-page\/saving-your-page\/\">save your page<\/a>!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Comments component displays a box that shows the comments related to an entity and context, and also allows users to add further comments. The comments are stored in P2 Server and can be viewed anywhere in Explorer where the same entity and context are used. This article describes how to configure a Comments component, and applies to version 4.4 and later of P2 Explorer.<\/p>\n<p class=\"continue-reading-button\"> <a class=\"continue-reading-link\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/comments\/comments-4-4\/\">Read more<i class=\"crycon-right-dir\"><\/i><\/a><\/p>\n","protected":false},"author":1,"featured_media":4482,"parent":31095,"menu_order":1,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":"","_members_access_role":[],"_members_access_error":""},"categories":[11],"tags":[663],"class_list":["post-13069","page","type-page","status-publish","has-post-thumbnail","hentry","category-tutorial","tag-comment","Product-ex"],"_links":{"self":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/13069","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/comments?post=13069"}],"version-history":[{"count":0,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/13069\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/31095"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media\/4482"}],"wp:attachment":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media?parent=13069"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/categories?post=13069"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/tags?post=13069"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}