{"id":31095,"date":"2018-11-06T11:13:58","date_gmt":"2018-11-06T03:13:58","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=31095"},"modified":"2024-10-09T12:54:35","modified_gmt":"2024-10-09T04:54:35","slug":"comments","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/comments\/","title":{"rendered":"Comments"},"content":{"rendered":"<p class=\"page-subheading\"><\/p>\n<p class=\"left-bar\">This article applies to versions 4.6.2 and later of IFS OI Explorer. For more, see <a href=\"#Release_History\">Release History<\/a>.<\/p>\n<h2 class=\"page-subheading\">Overview<\/h2>\n<p class=\"intro-text\">The Comments component displays a list of comments on an Explorer page, rather than in the <strong>Explore<\/strong> panel.<\/p>\n<p class=\"intro-text\">Unlike the Comments button component, where the user clicks an icon to open the comments in the <strong>Explore<\/strong> panel, comments from a Comments component are always on the page: there are no icons to click, and the list is always visible, with vertical scrollbars if the comments don't fit.<\/p>\n<p class=\"intro-text\">The comments list on a page is very similar to that in the <strong>Explore<\/strong> panel; the main difference is that a user cannot change the comments time range on the Comments component.<\/p>\n<p class=\"note\">To enable changing the dates for a comments list on a page, a separate date\/time control (such as a <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/time-menu\/\">Date\/Time Range Picker<\/a>) can be added to the page.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/08\/All-TWell-6.png\" rel=\"lightbox-0\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-40616 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/08\/All-TWell-6.png\" alt=\"\" width=\"448\" height=\"398\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/08\/All-TWell-6.png 448w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/08\/All-TWell-6-150x133.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/08\/All-TWell-6-24x21.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/08\/All-TWell-6-36x32.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/08\/All-TWell-6-48x43.png 48w\" sizes=\"auto, (max-width: 448px) 100vw, 448px\" \/><\/a><\/p>\n<table>\n<tbody>\n<tr>\n<td><em>The Comments list on an Explorer page<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\">Users can add comments for data and comment context, for a timestamp specified by the page designer (defaulted to the page variable <em>endTime<\/em>) and can search for comments within the configured time range.<\/p>\n<p class=\"intro-text\">Comments are stored in IFS OI Server and can be viewed in Explorer trends, and in Explorer pages that have been configured for comments. For example, a comment that is added for <em>entity ABC<\/em> on Explorer <strong>Page 1<\/strong> can be viewed and replied to on Explorer <strong>Page 2<\/strong> if the page has been configured for comments for that entity, and from <strong>Trend 1<\/strong> if that trend uses the same entity - provided the time ranges overlap.<\/p>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-primers\/comments-in-explorer\/\">Comments in Explorer<\/a>, <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/using-the-page-controls\/formatting-text\/\">Formatting Text<\/a><\/p>\n<h3>Finding the Component<\/h3>\n<p class=\"intro-text\">The Comments component is in the Display <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1844 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/display.png\" alt=\"Display group icon\" width=\"22\" height=\"13\" \/> group of the Components Toolbox.<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Finding-comment-component.png\" rel=\"lightbox-1\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-41182 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Finding-comment-component.png\" alt=\"\" width=\"614\" height=\"404\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Finding-comment-component.png 614w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Finding-comment-component-150x99.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Finding-comment-component-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Finding-comment-component-36x24.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Finding-comment-component-48x32.png 48w\" sizes=\"auto, (max-width: 614px) 100vw, 614px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<hr \/>\n<h2 class=\"page-subheading\">Quick Start<\/h2>\n<p class=\"intro-text\">You can very quickly configure a Comments component, by giving it a fixed <em>Entity<\/em> property.<\/p>\n<p class=\"intro-text\">In the <strong>Comments<\/strong> component editor, assign a fixed value to the Entity property, then save and finish the page.<\/p>\n<p class=\"intro-text\">1. For the <strong>Entity<\/strong> property, select <em>Entity<\/em> from the drop-down (for a fixed value), and type <em>Abes.Flowrate<\/em> in the text box (this is a tag name in the Sample Data).<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Quickstart-1.png\" rel=\"lightbox-2\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-41178 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Quickstart-1.png\" alt=\"\" width=\"368\" height=\"508\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Quickstart-1.png 368w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Quickstart-1-109x150.png 109w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Quickstart-1-17x24.png 17w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Quickstart-1-26x36.png 26w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Quickstart-1-35x48.png 35w\" sizes=\"auto, (max-width: 368px) 100vw, 368px\" \/><\/a><\/p>\n<p class=\"intro-text\">2. Click <strong>Finish and Open<\/strong> on the Studio toolbar.<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Quickstart-2.png\" rel=\"lightbox-3\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-41179 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Quickstart-2.png\" alt=\"\" width=\"592\" height=\"202\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Quickstart-2.png 592w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Quickstart-2-150x51.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Quickstart-2-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Quickstart-2-36x12.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Quickstart-2-48x16.png 48w\" sizes=\"auto, (max-width: 592px) 100vw, 592px\" \/><\/a><\/p>\n<p class=\"intro-text\">3. In Display Mode, type a comment in the edit box, then click <strong>Save<\/strong> or press <strong>Enter<\/strong>.<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Quickstart-3.png\" rel=\"lightbox-4\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-41180 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Quickstart-3.png\" alt=\"\" width=\"804\" height=\"489\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Quickstart-3.png 804w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Quickstart-3-768x467.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Quickstart-3-150x91.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Quickstart-3-24x15.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Quickstart-3-36x22.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Quickstart-3-48x29.png 48w\" sizes=\"auto, (max-width: 804px) 100vw, 804px\" \/><\/a><\/p>\n<p class=\"note\">Note: Live Preview only applies to version 4.6.2. In later versions, mentions are supported natively and a <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/using-the-page-controls\/formatting-text\/\">text format toolbar<\/a> is available.<\/p>\n<p class=\"intro-text\">Your new comment appears in the list.<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Quickstart-4.png\" rel=\"lightbox-5\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-41181 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Quickstart-4.png\" alt=\"\" width=\"805\" height=\"478\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Quickstart-4.png 805w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Quickstart-4-768x456.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Quickstart-4-150x89.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Quickstart-4-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Quickstart-4-36x21.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Quickstart-4-48x29.png 48w\" sizes=\"auto, (max-width: 805px) 100vw, 805px\" \/><\/a><\/p>\n<p class=\"intro-text\">You can <strong>add, reply, edit<\/strong>*, and <strong>delete<\/strong>* comments in the comments list (no comments shown in this example). See <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/using-the-page-controls\/comments\/#Working_with_Comments\">Working with Comments<\/a>. (*Editing and Deleting options depend on role privileges.)<\/p>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/using-the-page-controls\/comments\/\">Using Comments for collaboration<\/a> in display mode.<\/p>\n<p>&nbsp;<\/p>\n<hr \/>\n<h2 class=\"page-subheading\">Configuration<\/h2>\n<p class=\"intro-text\">The Comments component and the Comments Button component have a very similar configuration.<\/p>\n<p class=\"intro-text\">The following diagram shows a configured Comments component:<\/p>\n<table>\n<tbody>\n<tr>\n<td width=\"1000\">\n<table>\n<tbody>\n<tr>\n<td width=\"160\"><strong>1. Timestamp<\/strong><\/td>\n<td width=\"700\">The comment's timestamp. The default is the page variable: <em>endTime<\/em>. Comments that are added using this Comments component have this as their timestamp, and relate to the comment's data for this timestamp.<\/td>\n<\/tr>\n<tr>\n<td><strong>2. Show From<\/strong> and <strong>Show To<\/strong><\/td>\n<td>The date\/time range for which to display comments. Only comments with a timestamp within this range appear in the Comments list. The default values are the page variables: <em>startTime<\/em> and <em>endTime<\/em>.<\/td>\n<\/tr>\n<tr>\n<td><strong>3. Entity<\/strong><\/td>\n<td>Choose <em>Variable<\/em> from the drop-down list to use a variable for this property, otherwise <em>Entity<\/em>. This is the comment's data, and can be a tag, an entity, or an attribute. Comments that are added using this comments component will be for this data.<\/td>\n<\/tr>\n<tr>\n<td><strong>4. Hierarchy<\/strong><\/td>\n<td>If you choose to use a hierarchy (choose <em>Variable<\/em> from the drop-down list to use a variable for this property, otherwise <em>Hierarchy<\/em>), then comments for the component's specified entity, as well as all of its descendent entities in the specified hierarchy, are shown in the comments list. <em>This should only be used if the <strong>Entity<\/strong> property is an entity (not a tag or an attribute).<\/em><\/td>\n<\/tr>\n<tr>\n<td><strong>5. Comment Context<\/strong><\/td>\n<td>Optionally type a <em>Comment Context<\/em> to apply a filter to the comments that are added using this comments component. Read more about <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-primers\/comments-in-explorer\/#Comment_Context\">Comment Context<\/a>.<\/td>\n<\/tr>\n<tr>\n<td><strong>6. Style<\/strong><\/td>\n<td>Select a suitable style from the drop-down list.<\/td>\n<\/tr>\n<tr>\n<td><strong>7. Position<\/strong><\/td>\n<td>Select a position in <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/precision-layout\">Precision Layout<\/a> or <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/grid-layout\/\">Grid Layout<\/a> (depending on where the component is placed).<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<td width=\"250\">\n<table>\n<tbody>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Comments-Configuration.png\" rel=\"lightbox-6\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-41189 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Comments-Configuration.png\" alt=\"\" width=\"408\" height=\"681\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Comments-Configuration.png 408w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Comments-Configuration-90x150.png 90w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Comments-Configuration-14x24.png 14w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Comments-Configuration-22x36.png 22w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Comments-Configuration-29x48.png 29w\" sizes=\"auto, (max-width: 408px) 100vw, 408px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/comments-button\/\">Comments Button<\/a><\/p>\n<p>&nbsp;<\/p>\n<hr \/>\n<h2 class=\"page-subheading\"><span id=\"Tutorial\">Tutorial: Configuring Various Comments components<\/span><\/h2>\n<p class=\"note\">If you're unfamiliar with the process of building pages, read the article <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'll add several Comments components, as well as a Breadcrumb component. We'll also add some Text Labels to label the different configurations used in our Comments components.<\/p>\n<p class=\"note\">For all of the tutorials, we will keep the default values for: <em>Timestamp, Show From<\/em> and <em>Show To<\/em> properties.<\/p>\n<p class=\"intro-text\">At the end of the tutorial, your page should look something like this:<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tutorial-overview-screenshot.png\" rel=\"lightbox-7\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-41192 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tutorial-overview-screenshot.png\" alt=\"\" width=\"1046\" height=\"715\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tutorial-overview-screenshot.png 1046w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tutorial-overview-screenshot-768x525.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tutorial-overview-screenshot-150x103.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tutorial-overview-screenshot-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tutorial-overview-screenshot-36x25.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tutorial-overview-screenshot-48x33.png 48w\" sizes=\"auto, (max-width: 1046px) 100vw, 1046px\" \/><\/a><\/p>\n<p class=\"intro-text\">If you'd prefer to do just a part of the tutorial, then choose from the list here:<\/p>\n<ul class=\"intro-text\">\n<li><a href=\"#Prepare_a_New_Explorer_Page\">Prepare a New Explorer Page<\/a> (do this section, regardless)<\/li>\n<li><a href=\"#Comments_for_an_Attribute\">Comments for an Attribute<\/a><\/li>\n<li><a href=\"#Comments_with_Comment_Context\">Comments with Comment Context<\/a><\/li>\n<li><a href=\"#Comments_for_a_Hierarchy_Section\">Comments for a Hierarchy Section<\/a><\/li>\n<\/ul>\n<p class=\"intro-text\">As you finish each section, try it out in preview mode:<\/p>\n<p class=\"instruct\">Click the preview <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2896 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/preview.png\" alt=\"preview\" width=\"13\" height=\"14\" \/> button on the Studio toolbar to see what your page will look like in display mode.<\/p>\n<p class=\"left-bar\"><strong>Note<\/strong>: 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<h3>Prepare a New Explorer Page<\/h3>\n<p class=\"intro-text\">In this section, we're going to add a new Explorer page in Precision Layout, then add two grids, for organising our page.<\/p>\n<p class=\"intro-text\"><strong>Step 1. Prepare a Studio Page<\/strong><\/p>\n<p class=\"intro-text\">Before you start, click the <strong>New Page<\/strong> button on the Home tab of the ribbon. Choose the Precision layout.<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Step-1-add-a-page.png\" rel=\"lightbox-8\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-36024 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Step-1-add-a-page.png\" alt=\"\" width=\"553\" height=\"113\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Step-1-add-a-page.png 553w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Step-1-add-a-page-150x31.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Step-1-add-a-page-24x5.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Step-1-add-a-page-36x7.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Step-1-add-a-page-48x10.png 48w\" sizes=\"auto, (max-width: 553px) 100vw, 553px\" \/><\/a><\/p>\n<p class=\"intro-text\"><strong>Step 2. Add Two Grid Layouts<\/strong><\/p>\n<p class=\"intro-text\">We're going to add two grid layouts to the page: each will have a row of headers (Text Labels), and a row of Comments components- just so we can organise the different comments components in the tutorial sections.<\/p>\n<p class=\"intro-text\">Drag and drop a grid layout onto the top half of the page, and configure it:<\/p>\n<ul class=\"intro-text\">\n<li>Add two Columns and one Row.<\/li>\n<li>Set the Column Spacing to 20.<\/li>\n<li>Resize the Rows Height: 10* for the first row, 90* for the second.<\/li>\n<li>Resize the container to give each cell more space.<\/li>\n<\/ul>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Configure-grid.png\" rel=\"lightbox-9\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-41196 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Configure-grid.png\" alt=\"\" width=\"369\" height=\"524\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Configure-grid.png 369w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Configure-grid-106x150.png 106w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Configure-grid-17x24.png 17w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Configure-grid-25x36.png 25w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Configure-grid-34x48.png 34w\" sizes=\"auto, (max-width: 369px) 100vw, 369px\" \/><\/a><\/p>\n<p class=\"intro-text\">Now drag and drop a second grid layout onto the bottom half of the page, and configure it in the same way (alternatively, copy the first grid, paste it, then drag it to the bottom half of the page: see <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-resources\/shortcuts-and-tips\/#Shortcut_Keys\">Shortcuts and Tips<\/a>).<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Grid-layout.png\" rel=\"lightbox-10\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-41200 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Grid-layout.png\" alt=\"\" width=\"1095\" height=\"758\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Grid-layout.png 1095w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Grid-layout-768x532.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Grid-layout-150x104.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Grid-layout-24x17.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Grid-layout-36x25.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Grid-layout-48x33.png 48w\" sizes=\"auto, (max-width: 1095px) 100vw, 1095px\" \/><\/a><\/p>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/grid-layout\/\">Grid Layout<\/a><\/p>\n<h3>Comments for an Attribute<\/h3>\n<p class=\"overview\">The most basic configuration for a Comments component is when only the <em>Entity<\/em> property is specified. This is the time series data that the comment is about, and can be a Tag, an Attribute, or an Entity.<\/p>\n<p class=\"intro-text\"><strong>Step 1. Add Text Label and Comments component<\/strong><\/p>\n<p class=\"intro-text\">In this step, we're going to add a Text Label and a Comments component configured for an <em>attribute<\/em>.<\/p>\n<p class=\"intro-text\">1. Drag and drop a Text Label into the top left cell of the first Grid Layout. Configure the Text Label: type 'Comments for an Attribute' in the <em>Content<\/em> text box.<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-1.1-1.png\" rel=\"lightbox-11\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-41204 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-1.1-1.png\" alt=\"\" width=\"897\" height=\"560\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-1.1-1.png 897w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-1.1-1-768x479.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-1.1-1-150x94.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-1.1-1-24x15.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-1.1-1-36x22.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-1.1-1-48x30.png 48w\" sizes=\"auto, (max-width: 897px) 100vw, 897px\" \/><\/a><\/p>\n<p class=\"intro-text\">2. Drag and drop a Comments component into the cell below the Text Label.<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-1.2.png\" rel=\"lightbox-12\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-41203 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-1.2.png\" alt=\"\" width=\"918\" height=\"563\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-1.2.png 918w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-1.2-768x471.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-1.2-150x92.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-1.2-24x15.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-1.2-36x22.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-1.2-48x29.png 48w\" sizes=\"auto, (max-width: 918px) 100vw, 918px\" \/><\/a><\/p>\n<p class=\"intro-text\">3. Configure the Comments component as follows, keeping the default values for all other properties of the component:<\/p>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"width: 130px; padding-left: 5px;\"><strong>Entity<\/strong><\/td>\n<td style=\"width: 190px;\">Select <em>Entity<\/em> from the drop-down list<\/td>\n<td>Type <em>Beardy[Oil Producing Well]:THP!Actual<\/em> in the text box<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-1.3.png\" rel=\"lightbox-13\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-41206 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-1.3.png\" alt=\"\" width=\"370\" height=\"547\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-1.3.png 370w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-1.3-101x150.png 101w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-1.3-16x24.png 16w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-1.3-24x36.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-1.3-32x48.png 32w\" sizes=\"auto, (max-width: 370px) 100vw, 370px\" \/><\/a><\/p>\n<p class=\"intro-text\"><strong>Step 2. Preview the Changes<\/strong><\/p>\n<p class=\"intro-text\">In Preview mode:<\/p>\n<p class=\"instruct\">Type a comment in the edit box, then click <strong>Save<\/strong> or press <strong>Enter<\/strong>.<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-1-preview.png\" rel=\"lightbox-14\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-41209 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-1-preview.png\" alt=\"\" width=\"473\" height=\"451\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-1-preview.png 473w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-1-preview-150x143.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-1-preview-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-1-preview-36x34.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-1-preview-48x46.png 48w\" sizes=\"auto, (max-width: 473px) 100vw, 473px\" \/><\/a><\/p>\n<p class=\"intro-text\">The new comment is saved and appears in the Comments list. If you hover over the comment's data name, you can see the full name in a tooltip.<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-1-preview-2.png\" rel=\"lightbox-15\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-41208 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-1-preview-2.png\" alt=\"\" width=\"470\" height=\"522\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-1-preview-2.png 470w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-1-preview-2-135x150.png 135w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-1-preview-2-22x24.png 22w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-1-preview-2-32x36.png 32w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-1-preview-2-43x48.png 43w\" sizes=\"auto, (max-width: 470px) 100vw, 470px\" \/><\/a><\/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><\/p>\n<h3>Comments with Comment Context<\/h3>\n<p class=\"overview\">You can specify a <em>Comment Context<\/em> to apply a filter to the comments that are added to this comments component, and returned in the comments list. Read more about <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-primers\/comments-in-explorer\/#Comment_Context\">Comment Context<\/a>.<\/p>\n<p class=\"intro-text\"><strong>Step 1. Add Text Labels and Comments components<\/strong><\/p>\n<p class=\"intro-text\">In this section, we're going to add three Text Labels and three Comments components, each with the same tag. We'll configure the comments components to filter for context, using <em>Comment Context<\/em> in three different ways.<\/p>\n<p class=\"intro-text\">1. Drag and drop a Text Label into each of the cells in the first row of the second grid. Configure the three Text Labels as follows:<\/p>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"width: 190px; padding-left: 5px;\"><strong>Text Label 1<\/strong><\/td>\n<td style=\"width: 190px;\"><em>Content<\/em><\/td>\n<td>Comments for Tag Abes.ChokePos, with context comment context 'High Values'<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"width: 190px; padding-left: 5px;\"><strong>Text Label 2<\/strong><\/td>\n<td style=\"width: 190px;\"><em>Content<\/em><\/td>\n<td>Comments for Tag Abes.ChokePos, with comment context 'Low Values'<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"width: 190px; padding-left: 5px;\"><strong>Text Label 3<\/strong><\/td>\n<td style=\"width: 190px;\"><em>Content<\/em><\/td>\n<td>Comments for Tag Abes.ChokePos, with NO comment context<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-2.1.png\" rel=\"lightbox-16\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-41215\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-2.1.png\" alt=\"\" width=\"1000\" height=\"679\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-2.1.png 1100w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-2.1-768x522.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-2.1-150x102.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-2.1-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-2.1-36x24.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-2.1-48x33.png 48w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/a><\/p>\n<p class=\"intro-text\">2. Drag and drop a Comments components into each of the cells below the Text Labels.<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-2.2.png\" rel=\"lightbox-17\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-41216\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-2.2.png\" alt=\"\" width=\"1000\" height=\"696\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-2.2.png 1273w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-2.2-768x535.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-2.2-150x104.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-2.2-24x17.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-2.2-36x25.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-2.2-48x33.png 48w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/a><\/p>\n<p class=\"intro-text\">3. Configure the three Comments components as follows:<\/p>\n<table>\n<tbody>\n<tr style=\"border-top: 1px solid #cccccc; border-left: 1px solid #cccccc; border-right: 1px solid #cccccc;\">\n<td style=\"width: 190px; padding-left: 5px;\"><strong>Comments component 1<\/strong><\/td>\n<td style=\"width: 190px;\"><em>Entity<\/em><\/td>\n<td>Abes.ChokePos<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr style=\"border-bottom: 1px solid #cccccc; border-left: 1px solid #cccccc; border-right: 1px solid #cccccc;\">\n<td style=\"width: 190px; padding-left: 5px;\">\u00a0<\/td>\n<td style=\"width: 190px;\"><em>Comment Context<\/em><\/td>\n<td>High Values<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr style=\"border-top: 1px solid #cccccc; border-left: 1px solid #cccccc; border-right: 1px solid #cccccc;\">\n<td style=\"width: 190px; padding-left: 5px;\"><strong>Comments component 2<\/strong><\/td>\n<td style=\"width: 190px;\"><em>Entity<\/em><\/td>\n<td>Abes.ChokePos<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr style=\"border-bottom: 1px solid #cccccc; border-left: 1px solid #cccccc; border-right: 1px solid #cccccc;\">\n<td style=\"width: 130px; padding-left: 5px;\">\u00a0<\/td>\n<td style=\"width: 190px;\"><em>Comment Context<\/em><\/td>\n<td>Low Values<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr style=\"border-top: 1px solid #cccccc; border-left: 1px solid #cccccc; border-right: 1px solid #cccccc;\">\n<td style=\"width: 190px; padding-left: 5px;\"><strong>Comments component 3<\/strong><\/td>\n<td style=\"width: 190px;\"><em>Entity<\/em><\/td>\n<td>Abes.ChokePos<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr style=\"border-bottom: 1px solid #cccccc; border-left: 1px solid #cccccc; border-right: 1px solid #cccccc;\">\n<td style=\"width: 190px; padding-left: 5px;\">\u00a0<\/td>\n<td style=\"width: 190px;\"><em>Comment Context<\/em><\/td>\n<td><em>(leave blank)<\/em><\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-2.3.png\" rel=\"lightbox-18\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-41217 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-2.3.png\" alt=\"\" width=\"372\" height=\"574\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-2.3.png 372w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-2.3-97x150.png 97w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-2.3-16x24.png 16w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-2.3-23x36.png 23w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-2.3-31x48.png 31w\" sizes=\"auto, (max-width: 372px) 100vw, 372px\" \/><\/a><\/p>\n<table>\n<tbody>\n<tr>\n<td><em>Defining the Entity and Comment Context for the first Comments component in this group<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\"><strong>Step 2. Preview the Changes<\/strong><\/p>\n<p class=\"intro-text\">In Preview mode:<\/p>\n<p class=\"intro-text\">1. Type a comment in the edit box for the first of the new comments components, then click <strong>Save<\/strong> or press <strong>Enter<\/strong>.<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-2-preview-1.png\" rel=\"lightbox-19\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-41219 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-2-preview-1.png\" alt=\"\" width=\"722\" height=\"752\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-2-preview-1.png 722w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-2-preview-1-144x150.png 144w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-2-preview-1-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-2-preview-1-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-2-preview-1-46x48.png 46w\" sizes=\"auto, (max-width: 722px) 100vw, 722px\" \/><\/a><\/p>\n<p class=\"intro-text\">2. Type a comment in the edit box for the second of the new comments components, then click <strong>Save<\/strong> or press <strong>Enter<\/strong>.<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-2-preview-2.png\" rel=\"lightbox-20\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-41220 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-2-preview-2.png\" alt=\"\" width=\"938\" height=\"671\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-2-preview-2.png 938w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-2-preview-2-768x549.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-2-preview-2-150x107.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-2-preview-2-24x17.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-2-preview-2-36x26.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-2-preview-2-48x34.png 48w\" sizes=\"auto, (max-width: 938px) 100vw, 938px\" \/><\/a><\/p>\n<p class=\"intro-text\">The comments in the first two are filtered by their Comments Context. The third comments component has no comment context filter, so all of the comments against this tag (and for this time range) appear in the comments list.<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-2-preview-results.png\" rel=\"lightbox-21\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-41221 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-2-preview-results.png\" alt=\"\" width=\"1378\" height=\"781\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-2-preview-results.png 1378w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-2-preview-results-768x435.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-2-preview-results-150x85.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-2-preview-results-1280x725.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-2-preview-results-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-2-preview-results-36x20.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-2-preview-results-48x27.png 48w\" sizes=\"auto, (max-width: 1378px) 100vw, 1378px\" \/><\/a><\/p>\n<p class=\"note\"><strong>Note<\/strong> how the comments context appears next to the data name, separated by a comma.<\/p>\n<h3>Comments for a Hierarchy Section<\/h3>\n<p class=\"overview\">If you choose to specify the <em>Hierarchy<\/em> property, then comments for the component's specified entity, as well as all of its descendent entities in the specified hierarchy, are shown in the comments list.<\/p>\n<p class=\"note\">This should only be used if the Comments component's <strong>Entity<\/strong> property is an entity.<\/p>\n<p class=\"intro-text\">In this section, we're going to add two Text Labels, as well as two Comments components that are each configured for a variable entity, <em>selectedEntity<\/em>, while one also has a hierarchy. We're going to add a Breadcrumb component for changing the <em>selectedEntity<\/em> variable at different levels. Finally, we'll set a default for <em>selectedEntity<\/em>.<\/p>\n<p class=\"intro-text\"><strong>Step 1. Add Text Labels and Comments components<\/strong><\/p>\n<p class=\"intro-text\">1. Drag and drop a Text Label into the top 2nd and 3rd cells of the first Grid Layout. Configure the two Text Labels as follows:<\/p>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"width: 190px; padding-left: 5px;\"><strong>Text Label 1<\/strong><\/td>\n<td style=\"width: 190px;\"><em>Content<\/em><\/td>\n<td>Comments for Entity<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"width: 190px; padding-left: 5px;\"><strong>Text Label 2<\/strong><\/td>\n<td style=\"width: 190px;\"><em>Content<\/em><\/td>\n<td>Comments for Hierarchy Section<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3.1-1.png\" rel=\"lightbox-22\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-41234 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3.1-1.png\" alt=\"\" width=\"1045\" height=\"750\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3.1-1.png 1045w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3.1-1-768x551.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3.1-1-150x108.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3.1-1-24x17.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3.1-1-36x26.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3.1-1-48x34.png 48w\" sizes=\"auto, (max-width: 1045px) 100vw, 1045px\" \/><\/a><\/p>\n<p class=\"intro-text\">2. Drag and drop a Comments component into each of the cells below the new Text Labels.<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3.2-1.png\" rel=\"lightbox-23\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-41235 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3.2-1.png\" alt=\"\" width=\"1243\" height=\"644\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3.2-1.png 1243w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3.2-1-768x398.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3.2-1-150x78.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3.2-1-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3.2-1-36x19.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3.2-1-48x25.png 48w\" sizes=\"auto, (max-width: 1243px) 100vw, 1243px\" \/><\/a><\/p>\n<p class=\"intro-text\">3. Configure the two Comments components as follows (keeping the default values for the remaining properties):<\/p>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"width: 190px; padding-left: 5px;\"><strong>Comments component 1<\/strong><\/td>\n<td style=\"width: 120px;\"><em>Entity<\/em><\/td>\n<td>Select <em>Variable<\/em> from the drop-down list; select <em>selectedEntity<\/em> from the drop-down list (<em>this is the default<\/em>)<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr style=\"border-top: 1px solid #cccccc; border-left: 1px solid #cccccc; border-right: 1px solid #cccccc;\">\n<td style=\"width: 190px; padding-left: 5px;\"><strong>Comments component 2<\/strong><\/td>\n<td style=\"width: 120px;\"><em>Entity<\/em><\/td>\n<td>Select<em> Variable<\/em> from the drop-down list; select <em>selectedEntity<\/em> from the drop-down list (<em>this is the default<\/em>)<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr style=\"border-bottom: 1px solid #cccccc; border-left: 1px solid #cccccc; border-right: 1px solid #cccccc;\">\n<td style=\"width: 190px; padding-left: 5px;\">\u00a0<\/td>\n<td style=\"width: 120px;\"><em>Hierarchy<\/em><\/td>\n<td>Select <em>Hierarchy<\/em> from the drop-down list; type <em>P2 Corporate<\/em> in the text box<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3.3-3.png\" rel=\"lightbox-24\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-41238 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3.3-3.png\" alt=\"\" width=\"801\" height=\"546\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3.3-3.png 801w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3.3-3-768x524.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3.3-3-150x102.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3.3-3-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3.3-3-36x25.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3.3-3-48x33.png 48w\" sizes=\"auto, (max-width: 801px) 100vw, 801px\" \/><\/a><\/p>\n<table>\n<tbody>\n<tr>\n<td><em>Defining the Entity and Hierarchy for the second Comment component in this group<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\"><strong>Step 2. Add a Breadcrumb<\/strong><\/p>\n<p class=\"intro-text\">1. Drag and drop a Breadcrumb component onto the top left of the page, and resize to fit about half of the page (horizontally).<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/add-a-breadcrumb-1.png\" rel=\"lightbox-25\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-41239 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/add-a-breadcrumb-1.png\" alt=\"\" width=\"707\" height=\"161\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/add-a-breadcrumb-1.png 707w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/add-a-breadcrumb-1-150x34.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/add-a-breadcrumb-1-24x5.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/add-a-breadcrumb-1-36x8.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/add-a-breadcrumb-1-48x11.png 48w\" sizes=\"auto, (max-width: 707px) 100vw, 707px\" \/><\/a><\/p>\n<p class=\"intro-text\">2. Configure the Breadcrumb as follows, keeping the default values for all other properties of the component:<\/p>\n<table>\n<tbody>\n<tr style=\"border-top: 1px solid #cccccc; border-left: 1px solid #cccccc; border-right: 1px solid #cccccc;\">\n<td style=\"width: 190px; padding-left: 5px;\"><em>Entity Name<\/em><\/td>\n<td>Select<em> Variable<\/em> from the drop-down list; select <em>selectedEntity<\/em> from the drop-down list (<em>this is the default<\/em>)<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr style=\"border-bottom: 1px solid #cccccc; border-left: 1px solid #cccccc; border-right: 1px solid #cccccc;\">\n<td style=\"width: 190px; padding-left: 5px;\"><em>Hierarchy Name<\/em><\/td>\n<td>Select<em> P2 Corporate<\/em> from the drop-down list<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3.3-1.png\" rel=\"lightbox-26\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-41236 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3.3-1.png\" alt=\"\" width=\"375\" height=\"581\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3.3-1.png 375w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3.3-1-97x150.png 97w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3.3-1-15x24.png 15w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3.3-1-23x36.png 23w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3.3-1-31x48.png 31w\" sizes=\"auto, (max-width: 375px) 100vw, 375px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p class=\"intro-text\"><strong>Step 3. Set the Default Values<\/strong><\/p>\n<p class=\"intro-text\">We are going to set a default for the <strong>selectedEntity<\/strong> variable.<\/p>\n<ul class=\"intro-text\">\n<li>Click the <strong>Default Values<\/strong> <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/defaults-icon.png\" rel=\"lightbox-27\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-34380\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/defaults-icon.png\" alt=\"\" width=\"14\" height=\"23\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/defaults-icon.png 18w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/defaults-icon-14x24.png 14w\" sizes=\"auto, (max-width: 14px) 100vw, 14px\" \/><\/a> button on the Studio toolbar.<\/li>\n<li>For the <strong>selectedEntity<\/strong> variable, update it to specify <em>New South Wales<\/em> (this is in the P2 Corporate hierarchy).<\/li>\n<\/ul>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3-default-values.png\" rel=\"lightbox-28\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-41242 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3-default-values.png\" alt=\"\" width=\"890\" height=\"587\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3-default-values.png 890w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3-default-values-768x507.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3-default-values-150x99.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3-default-values-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3-default-values-36x24.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3-default-values-48x32.png 48w\" sizes=\"auto, (max-width: 890px) 100vw, 890px\" \/><\/a><\/p>\n<p class=\"intro-text\"><strong>Step 4. Preview the Changes<\/strong><\/p>\n<p class=\"intro-text\">We're going to start by adding comments to various entities selected using the Breadcrumb component, and then we'll finish by seeing how those comments appear for the Comments Button with a Hierarchy specified.<\/p>\n<p class=\"intro-text\">In Preview mode:<\/p>\n<p class=\"intro-text\">1. Select <em>Glen Innes<\/em> in the breadcrumb.<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3-preview-1.png\" rel=\"lightbox-29\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-41249 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3-preview-1.png\" alt=\"\" width=\"675\" height=\"270\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3-preview-1.png 675w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3-preview-1-150x60.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3-preview-1-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3-preview-1-36x14.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3-preview-1-48x19.png 48w\" sizes=\"auto, (max-width: 675px) 100vw, 675px\" \/><\/a><\/p>\n<p class=\"intro-text\">2. Type a comment in the edit box for the Comments component under the label <em>Comments for Entity<\/em>, then click <strong>Save<\/strong> or press <strong>Enter<\/strong>.<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3-preview-2.png\" rel=\"lightbox-30\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-41248 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3-preview-2.png\" alt=\"\" width=\"1001\" height=\"413\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3-preview-2.png 1001w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3-preview-2-768x317.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3-preview-2-150x62.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3-preview-2-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3-preview-2-36x15.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3-preview-2-48x20.png 48w\" sizes=\"auto, (max-width: 1001px) 100vw, 1001px\" \/><\/a><\/p>\n<p class=\"intro-text\">3. Select <em>Beardy<\/em> in the breadcrumb.<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3-preview-3.png\" rel=\"lightbox-31\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-41247 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3-preview-3.png\" alt=\"\" width=\"783\" height=\"303\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3-preview-3.png 783w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3-preview-3-768x297.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3-preview-3-150x58.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3-preview-3-24x9.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3-preview-3-36x14.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3-preview-3-48x19.png 48w\" sizes=\"auto, (max-width: 783px) 100vw, 783px\" \/><\/a><\/p>\n<p class=\"intro-text\">4. Type a comment in the edit box for the Comments component under the label <em>Comments for Entity<\/em>, then click <strong>Save<\/strong> or press <strong>Enter<\/strong>.<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3-preview-4.png\" rel=\"lightbox-32\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-41246 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3-preview-4.png\" alt=\"\" width=\"1005\" height=\"406\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3-preview-4.png 1005w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3-preview-4-768x310.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3-preview-4-150x61.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3-preview-4-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3-preview-4-36x15.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3-preview-4-48x19.png 48w\" sizes=\"auto, (max-width: 1005px) 100vw, 1005px\" \/><\/a><\/p>\n<p class=\"intro-text\">5. Select <em>New South Wales<\/em> in the breadcrumb.<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3-preview-5.png\" rel=\"lightbox-33\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-41245 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3-preview-5.png\" alt=\"\" width=\"734\" height=\"256\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3-preview-5.png 734w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3-preview-5-150x52.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3-preview-5-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3-preview-5-36x13.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3-preview-5-48x17.png 48w\" sizes=\"auto, (max-width: 734px) 100vw, 734px\" \/><\/a><\/p>\n<p class=\"intro-text\">6. Type a comment in the edit box for the Comments component under the label <em>Comments for Entity<\/em>, then click <strong>Save<\/strong> or press <strong>Enter<\/strong>.<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3-preview-6.png\" rel=\"lightbox-34\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-41244 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3-preview-6.png\" alt=\"\" width=\"903\" height=\"380\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3-preview-6.png 903w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3-preview-6-768x323.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3-preview-6-150x63.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3-preview-6-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3-preview-6-36x15.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3-preview-6-48x20.png 48w\" sizes=\"auto, (max-width: 903px) 100vw, 903px\" \/><\/a><\/p>\n<p class=\"intro-text\">7. In the Comments component under the label <em>Comments for Hierarchy Section<\/em>, note how all of the comments that we added for the entities and attributes in this sub-section of the hierarchy are in the comments list. This is because the <em>Hierarchy<\/em> is specified in the Comments component.<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3-preview-7.png\" rel=\"lightbox-35\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-41243 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3-preview-7.png\" alt=\"\" width=\"1081\" height=\"554\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3-preview-7.png 1081w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3-preview-7-768x394.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3-preview-7-150x77.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3-preview-7-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3-preview-7-36x18.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tut-3-preview-7-48x25.png 48w\" sizes=\"auto, (max-width: 1081px) 100vw, 1081px\" \/><\/a><\/p>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/breadcrumb\/\">Breadcrumb tutorial<\/a>, <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<p>&nbsp;<\/p>\n<hr \/>\n<h2 class=\"page-subheading\">Release History<\/h2>\n<ul class=\"intro-text\">\n<li class=\"overview\">Comments Button 4.6.2 (this release)\n<ul class=\"overview\">\n<li>Comments can now include <strong>hashtags #<\/strong> in the content, for creating an entity 'pill'<\/li>\n<li>Comments can now include <strong>mentions @<\/strong> in the content, for sending a notification to another user<\/li>\n<li>'Live Preview' tab when adding or editing comments or replies.\u00a0Note that Live Preview only applies to version 4.6.2, in later versions mentions are supported natively.<\/li>\n<li>In version 4.6.4, a <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/using-the-page-controls\/formatting-text\/\">text format toolbar<\/a>\u00a0was added<\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/comments\/comments-4-4\/\">Comments Button 4.4<\/a><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Comments component displays a list of comments on an Explorer page. See how to configure the Comments component for time series data, such as a tag, entity, or attribute.<\/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\/\">Read more<i class=\"crycon-right-dir\"><\/i><\/a><\/p>\n","protected":false},"author":1,"featured_media":40415,"parent":1407,"menu_order":118,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":"","_members_access_role":[],"_members_access_error":""},"categories":[11],"tags":[663],"class_list":["post-31095","page","type-page","status-publish","has-post-thumbnail","hentry","category-tutorial","tag-comment","Version-4-6-2","Version-4-6-4","Product-ex"],"_links":{"self":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/31095","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=31095"}],"version-history":[{"count":2,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/31095\/revisions"}],"predecessor-version":[{"id":67011,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/31095\/revisions\/67011"}],"up":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/1407"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media\/40415"}],"wp:attachment":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media?parent=31095"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/categories?post=31095"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/tags?post=31095"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}