{"id":1423,"date":"2015-02-12T16:23:51","date_gmt":"2015-02-12T08:23:51","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=1423"},"modified":"2018-11-05T11:28:22","modified_gmt":"2018-11-05T03:28:22","slug":"comments-button-4-5-0","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/comments-button\/comments-button-4-5-0\/","title":{"rendered":"Comments Button (4.5.0)"},"content":{"rendered":"<p class=\"page-subheading\"><\/p>\n<p class=\"left-bar\">This article applies to versions 4.5.0 and later of P2 Explorer. For more, see <a href=\"#Release_History\">Release History<\/a>. For the latest, see <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/comments-button\/\">Comments Button<\/a>.<\/p>\n<h2 class=\"page-subheading\">Overview<\/h2>\n<p class=\"overview\">The Comments Button displays 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\" data-pin-nopin=\"true\" \/>\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\" data-pin-nopin=\"true\" \/>) which, when clicked, launches a window that allows users to enter and view comments relating to a specific entity, attribute value, or tag (including calculation tags) and context.<\/p>\n<p class=\"note\">Note: In this article, we use <em>entity<\/em> to mean entity, attribute value, tag, or calculation tag. We use <em>Entity<\/em> to specifically mean entity only.\u00a0<\/p>\n<p class=\"intro-text\">The comments are stored in P2 Server and can be viewed anywhere in Explorer where the same context is used.<\/p>\n<p class=\"intro-text\">The white icon indicates that no comments have yet been made for that entity and context within the page's default start and end times, whereas the black icon indicates that comments have already been made. When the button is clicked, a floating comments window appears on the page.\u00a0<\/p>\n<p class=\"note\">Note: The colour of the icon may change depending on the style used.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-window-450.png\" rel=\"lightbox-0\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-31102\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-window-450.png\" alt=\"\" width=\"468\" height=\"247\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-window-450.png 468w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-window-450-150x79.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-window-450-24x13.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-window-450-36x19.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-window-450-48x25.png 48w\" sizes=\"auto, (max-width: 468px) 100vw, 468px\" \/><\/a><\/p>\n<p class=\"intro-text\">Users can add and view comments for an entity and context, within a time range specified by the page designer. Users cannot enter comments outside that time range. However, users can search for and view additional comments within other time ranges.<\/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, Adding a new <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/styling-displays\/\">Comments Button style<\/a>, <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-server\/primers\/comments\/\">Comments: Communicating with Context<\/a><\/p>\n<p class=\"intro-text\">\u00a0<\/p>\n<hr \/>\n<h2 class=\"page-subheading\">Configuring the Comments Button\u00a0<\/h2>\n<p class=\"intro-text\">There are 2 configuration modes for the Comments Button. Basic mode (shown below) shows the options most commonly used. Advanced mode (which we will use in the tutorial) allows you to change the type of properties used.<\/p>\n<h3>Basic Mode<\/h3>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-450-basic-1.png\" rel=\"lightbox-1\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-31104 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-450-basic-1.png\" alt=\"\" width=\"998\" height=\"521\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-450-basic-1.png 998w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-450-basic-1-768x401.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-450-basic-1-150x78.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-450-basic-1-24x13.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-450-basic-1-36x19.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-450-basic-1-48x25.png 48w\" sizes=\"auto, (max-width: 998px) 100vw, 998px\" \/><\/a><\/p>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"140\"><strong>Start Date\/Time<\/strong>:<\/td>\n<td>The\u00a0date\/time from which to display comments. This will be entered as the default start of the search date range.<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>End Date\/Time<\/strong>:<\/td>\n<td>The date\/time at which to stop displaying comments.\u00a0This will be entered as the default end\u00a0of the search date range.<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Comment Start Time<\/strong>:<\/td>\n<td>The start of the time range for which a comment applies. Users will still be able to search for comments outside this time (according to the start and end date\/time fields), but they will not be able to enter comments that start before this time.<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Comment End Time<\/strong>:<\/td>\n<td>The end of the time range for which a comment applies. Users will still be able to search for comments outside this time (according to the start and end date\/time fields), but they will not be able to enter comments that end after this time. To make the comment apply for a single day, make the Comment End Time the same as the Comment Start Time.<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Entity<\/strong>:<\/td>\n<td>The\u00a0entity, attribute value, tag, or calculation tag that all these comments apply to. If an Entity is specified here and a hierarchy is also specified in the next field, comments will be fetched for the Entity plus its child Entities in the hierarchy.\u00a0<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Hierarchy<\/strong>:<\/td>\n<td>The hierarchy for which to get comments. This only applies when an Entity is specified above, and the Entity is part of this hierarchy.\u00a0<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Context<\/strong>:<\/td>\n<td>The situation in which these comments apply. All comments entered in this box will have this context. If another comment button is placed on another page, with this same context and for the same entity, the comments for both will appear in both comment windows. If the entity is the same but the context is different, the comments will be shown independently.<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Style<\/strong>:<\/td>\n<td>The style you want to apply to the Comments Button. If you are a Style Administrator,\u00a0you can\u00a0add a new <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/styling-displays\/\">Comments Button\u00a0style<\/a>.<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Alignment<\/strong>:<\/td>\n<td>If the alignment in the selected style is not appropriate, you can override the alignment here by clicking one of the boxes. \u00a0<\/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 for many of the component's properties. Initially, they are set to variables, and have default values associated with them. For the date and time fields, you can supply a specific date\/time. For the <em>Entity<\/em> field, you can supply a specific entity.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-450-advanced.png\" rel=\"lightbox-2\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-31105\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-450-advanced.png\" alt=\"\" width=\"459\" height=\"392\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-450-advanced.png 459w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-450-advanced-150x128.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-450-advanced-24x20.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-450-advanced-36x31.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-450-advanced-48x41.png 48w\" sizes=\"auto, (max-width: 459px) 100vw, 459px\" \/><\/a><\/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 made for the same entity and 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 entered via a Comments Button\u00a0component on a page have the context that is specified by the page designer. For example, if the comments on a page all have the context of \u201cReport\u201d, Explorer can apply filtering to all the comments in the system to only show comments for that 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=\"intro-text\">We will explore context in more detail in <a href=\"#Part_2_Adding_Context\">Part 2<\/a> of the tutorial below.<\/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_208894992\" class=\"video-js vjs-default-skin\" width=\"1000\" height=\"660\" controls preload=\"auto\" data-setup='[]'>\r\n\t\t<source src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/videos\/CommentsButtonTutorial.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\">Start Time and End Time<\/h2>\n<p class=\"intro-text\">The Comments Button allows the page designer to specify two types of time ranges for the user:<\/p>\n<ul class=\"intro-text\">\n<li>A time range for the search<\/li>\n<li>A time range for entering comments<\/li>\n<\/ul>\n<h3>Search Time Range<\/h3>\n<p class=\"intro-text\">The <strong>Start Date\/Time<\/strong> and <strong>End Time<\/strong>\u00a0settings determine the dates displayed for <em>Search times<\/em> in the comments window.\u00a0<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-search-times.png\" rel=\"lightbox-3\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-31355\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-search-times.png\" alt=\"\" width=\"471\" height=\"244\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-search-times.png 471w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-search-times-150x78.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-search-times-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-search-times-36x19.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-search-times-48x25.png 48w\" sizes=\"auto, (max-width: 471px) 100vw, 471px\" \/><\/a><\/p>\n<p class=\"intro-text\">Users can change these times to search for comments made at different times.<\/p>\n<p class=\"intro-text\">When these times are changed, comments will appear in the window if the comment time or time range falls completely or partially within the search time range.<\/p>\n<h3>Comment Time Range<\/h3>\n<p class=\"intro-text\">When users enter comments, the start and end time of the comment is determined by the <strong>Comment Start Time<\/strong> and <strong>Comment End Time<\/strong> settings.\u00a0<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-comment-times.png\" rel=\"lightbox-4\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-31356\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-comment-times.png\" alt=\"\" width=\"471\" height=\"244\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-comment-times.png 471w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-comment-times-150x78.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-comment-times-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-comment-times-36x19.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-comment-times-48x25.png 48w\" sizes=\"auto, (max-width: 471px) 100vw, 471px\" \/><\/a><\/p>\n<p class=\"intro-text\">All comments entered will have these comment times, and users cannot use the search times in the comments window to change this.<\/p>\n<div class=\"best-prac\"><i class=\"fa fa-trophy fa-2x fa-pull-left\"><\/i><span class=\"best-prac-text\">BEST PRACTICE<\/span><\/p>\n<p class=\"best-prac-desc\">To avoid confusion, we recommend that page designers clearly indicate the comment times on a page. One way of doing this is to use a <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/#time\">time picker<\/a> that drives a variable for\u00a0the <strong>Comment Start Time<\/strong> and <strong>Comment End Time<\/strong> settings.<\/p>\n<\/div>\n<p>&nbsp;<\/p>\n<hr \/>\n<h2 class=\"page-subheading\">Tutorial: Adding\u00a0<span id=\"Step_by_Step_Creating_an_Event_ControlledCombo_Box\">Comments Buttons for a Schematic Page<\/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\">This tutorial in is 3 parts, and we will create 2 pages. In part 1, we\u2019ll add some Comments Buttons to an image of a well head. In part 2, we'll create another page to show how the context allows the comments to appear on different displays in P2 Explorer, and in Part 3 we'll explore rolling up comments within a hierarchy. At the end of the tutorial, your pages should look like this:<\/p>\n<table>\n<tbody>\n<tr>\n<td><em>Page 1:<\/em><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-page1.png\" rel=\"lightbox-5\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-31186\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-page1.png\" alt=\"\" width=\"811\" height=\"549\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-page1.png 811w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-page1-768x520.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-page1-150x102.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-page1-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-page1-36x24.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-page1-48x32.png 48w\" sizes=\"auto, (max-width: 811px) 100vw, 811px\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td><em>Page 2:<\/em><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-page2.png\" rel=\"lightbox-6\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-31187\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-page2.png\" alt=\"\" width=\"1290\" height=\"276\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-page2.png 1290w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-page2-768x164.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-page2-150x32.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-page2-1280x274.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-page2-24x5.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-page2-36x8.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-page2-48x10.png 48w\" sizes=\"auto, (max-width: 1290px) 100vw, 1290px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\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<h3>Part 1. Displaying Comments<\/h3>\n<p class=\"intro-text\">In this part, we\u2019ll create a simple schematic page, and add an attribute value and some Comments Buttons to it.\u00a0<\/p>\n<p class=\"intro-text\"><strong>Step 1. Prepare a Studio Page<\/strong><\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/ribbon-new-page.png\" rel=\"lightbox-7\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-30441\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/ribbon-new-page.png\" alt=\"\" width=\"596\" height=\"110\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/ribbon-new-page.png 596w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/ribbon-new-page-150x28.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/ribbon-new-page-24x4.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/ribbon-new-page-36x7.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/ribbon-new-page-48x9.png 48w\" sizes=\"auto, (max-width: 596px) 100vw, 596px\" \/><\/a><\/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 <strong>Precision\u00a0<\/strong>layout.<\/p>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/precision-layout\/\">Precision Layout<\/a> tutorial<\/p>\n<p class=\"note\">Note: We need to spend a bit of time setting up so you can see the comments in context.<\/p>\n<p>&nbsp;<\/p>\n<p class=\"intro-text\"><strong>Step 2. Add a Background Image<\/strong><\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-2.png\" rel=\"lightbox-8\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-31109\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-2.png\" alt=\"\" width=\"1379\" height=\"697\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-2.png 1379w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-2-768x388.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-2-150x76.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-2-1280x647.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-2-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-2-36x18.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-2-48x24.png 48w\" sizes=\"auto, (max-width: 1379px) 100vw, 1379px\" \/><\/a><\/p>\n<p class=\"intro-text\">A background image is often used in schematic-style pages, and we use the Image component to do this. Drag the Image component onto the canvas, and resize it so that it fits the page.<\/p>\n<p class=\"intro-text\">Configure the image as follows:<\/p>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Display<\/strong><\/td>\n<td width=\"100\">Center<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Default Image<\/strong><\/td>\n<td>GasLift<\/td>\n<td>Click the\u00a0<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-31110\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/ellipsis-icon.png\" alt=\"\" width=\"24\" height=\"20\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/ellipsis-icon.png 31w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/ellipsis-icon-24x20.png 24w\" sizes=\"auto, (max-width: 24px) 100vw, 24px\" \/>\u00a0ellipsis button to add the image from the image gallery. If the image is not in your image gallery, you can enter the following URL:\u00a0<br \/>\n <em>https:\/\/oihelp.corporate.ifs.com\/help\/Images\/gaslift.png<\/em> or change it to one that is available at your site.<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Position in Precision Layout<\/strong><\/td>\n<td>X: 0<br \/>\n Y: 0<br \/>\n Width: 805<br \/>\n Height: 568<\/td>\n<td>Tip:\u00a0Manually adjusting the size and location of the line using the drag handles can get a bit tricky, and it's often easier to use the arrow keys and move the other components on the page so they are correctly lined up with the line, rather than the other way around.\u00a0<\/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\/image\/\">Image<\/a>\u00a0tutorial<\/p>\n<p>&nbsp;<\/p>\n<p class=\"intro-text\"><strong>Step 3. Add an Attribute to the Page<\/strong><\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-3-1.png\" rel=\"lightbox-9\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-31188 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-3-1.png\" alt=\"\" width=\"1475\" height=\"729\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-3-1.png 1475w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-3-1-768x380.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-3-1-150x74.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-3-1-1280x633.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-3-1-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-3-1-36x18.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-3-1-48x24.png 48w\" sizes=\"auto, (max-width: 1475px) 100vw, 1475px\" \/><\/a><\/p>\n<p class=\"intro-text\">In this step, we will drag and drop an attribute value onto the canvas, and position it near the diagram. This will become a data label.<\/p>\n<ol class=\"intro-text\">\n<li>Open the <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-getting-started\/tag-search-and-hierarchy-navigation\/#Hierarchy_Navigator\">Hierarchy Navigator<\/a>.<\/li>\n<li>Search for the entity: <strong>Archer<\/strong>.<\/li>\n<li><em>Archer<\/em> will be revealed in the hierarchy, click on it.<\/li>\n<li>Open the <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-getting-started\/tag-search-and-hierarchy-navigation\/#Attribute_Panel_and_Table_of_Contents\">attributes panel<\/a>.<\/li>\n<li>Drag the <strong>THP Actual<\/strong> attribute onto the canvas.<\/li>\n<\/ol>\n<p class=\"intro-text\">Click on the attribute value, and in the Data Label component editor on the right, ensure the following configuration:<\/p>\n<ul class=\"intro-text\">\n<li>Decimals: 0<\/li>\n<li>Units Location: Suffix<\/li>\n<\/ul>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/data-label\/\">Data Label<\/a>\u00a0tutorial,\u00a0<a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/\">Data Selector<\/a>\u00a0<\/p>\n<p class=\"intro-text\">\u00a0<\/p>\n<p class=\"intro-text\"><strong>Step 4. Add the Comments Buttons<\/strong><\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-4-1.png\" rel=\"lightbox-10\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-31189\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-4-1.png\" alt=\"\" width=\"1359\" height=\"568\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-4-1.png 1359w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-4-1-768x321.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-4-1-150x63.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-4-1-1280x535.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-4-1-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-4-1-36x15.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-4-1-48x20.png 48w\" sizes=\"auto, (max-width: 1359px) 100vw, 1359px\" \/><\/a><\/p>\n<p class=\"intro-text\">Close the Hierarchy Navigator and drag and drop 3 Comments Button\u00a0components onto the canvas, positioning them near the Data Label on the diagram.\u00a0The Comments Button 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\" \/>\u00a0group.<\/p>\n<p class=\"intro-text\">Keep the default values for the first 4 fields, and configure the rest of the fields as follows.<\/p>\n<p class=\"note\">Note: The startTime and endTime variables are specified on the page's <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/default-value\/\">Default Values<\/a>. You may change these if you wish.<\/p>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px; width: 150px;\">\u00a0<\/td>\n<td><strong>Button 1<\/strong><\/td>\n<td><strong>Button 2<\/strong><\/td>\n<td><strong>Button 3<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Entity<\/strong><\/td>\n<td>Archer[Oil Producing Well]:THP!Actual<\/td>\n<td>Archer[Oil Producing Well]:THP!Actual<\/td>\n<td>Archer[Oil Producing Well]:THP!Actual<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Comment Context<\/strong><\/td>\n<td>\u00a0THP1<\/td>\n<td>\u00a0THP2<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\">These configurations allow you to add comments for the THP Actual attribute value for the Archer well. They will also be used to show you how comments work with context, which we will investigate further in the rest of this tutorial.<\/p>\n<p>&nbsp;<\/p>\n<p class=\"intro-text\"><strong><span id=\"step5\">Step 5. Add Some Comments<\/span><\/strong><\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-5-1.png\" rel=\"lightbox-11\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-31190\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-5-1.png\" alt=\"\" width=\"1369\" height=\"566\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-5-1.png 1369w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-5-1-768x318.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-5-1-150x62.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-5-1-1280x529.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-5-1-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-5-1-36x15.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-5-1-48x20.png 48w\" sizes=\"auto, (max-width: 1369px) 100vw, 1369px\" \/><\/a>\u00a0<\/p>\n<p class=\"intro-text\">Now we're going to add some comments against the THP, for each of the buttons, so we can see how it works.<\/p>\n<ul class=\"intro-text\">\n<li>Click the <strong>Finish and Open<\/strong> <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2978 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/livemode1.png\" alt=\"livemode\" width=\"14\" height=\"16\" \/>\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>\u00a0(with the name <em>Comments Button Tutorial Page 1<\/em>) and open it in display mode.<\/li>\n<li>Click the first Comments Button (the one with context <em>THP1).<\/em><\/li>\n<li>Type a comment in the comment box and press Enter. Remember this comment because we will refer to it later in <a href=\"#step8\">Step 8<\/a>.\n<ul class=\"intro-text\">\n<li>Notice that the comments button now turns black - this indicates that there are comments for this attribute.<\/li>\n<li>Notice that the date for the comment is different to that in the search range. This is because the Comment Start Time and Comment End Time are different to the search range dates. When the Comment Start Time is the same as the Comment End Time, all comments will be entered for that point in time.<\/li>\n<\/ul>\n<\/li>\n<li>Enter comments for the other Comments Buttons, so we have some comments for later. Try some different date ranges and observe what happens.<\/li>\n<\/ul>\n<hr \/>\n<h3>Part 2. Adding Context<\/h3>\n<p class=\"intro-text\">In this part, we'll create another page to show how the context allows the comments to appear on different pages in P2 Explorer.<\/p>\n<p class=\"intro-text\"><strong>Step 6. Create a New Page with Text Labels<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-6-2.png\" rel=\"lightbox-12\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-31192\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-6-2.png\" alt=\"\" width=\"1377\" height=\"567\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-6-2.png 1377w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-6-2-768x316.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-6-2-150x62.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-6-2-1280x527.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-6-2-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-6-2-36x15.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-6-2-48x20.png 48w\" sizes=\"auto, (max-width: 1377px) 100vw, 1377px\" \/><\/a><\/p>\n<p class=\"intro-text\">Click the <strong>New Page<\/strong>\u00a0button on the Home tab of the ribbon. Choose the <a title=\"Grid Layout\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/grid-layout\/\">Grid<\/a>\u00a0layout, and create 3 columns and 5 rows. We will add 3 Text Labels to help us remember how the Comments Buttons (which we will add in the next step) have been configured. \u00a0\u00a0<\/p>\n<ul class=\"intro-text\">\n<li>Drag a Text Label to each cell in the first row.<\/li>\n<li>Configure the content for the Text Labels as follows:\n<ul class=\"intro-text\">\n<li>1st column: <em>THP1 for Archer[Oil Producing Well]:THP!Actual<\/em><\/li>\n<li>2nd column: <em>THP2 for Archer[Oil Producing Well]:THP!Actual<\/em><\/li>\n<li>3rd column: <em>No Context for Archer[Oil Producing Well]:THP!Actual<\/em><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/text-label\/\">Text Label<\/a> tutorial<\/p>\n<p>&nbsp;<\/p>\n<p class=\"intro-text\"><strong>Step 7.\u00a0Add Comments Buttons<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-7-1.png\" rel=\"lightbox-13\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-31193\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-7-1.png\" alt=\"\" width=\"1377\" height=\"568\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-7-1.png 1377w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-7-1-768x317.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-7-1-150x62.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-7-1-1280x528.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-7-1-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-7-1-36x15.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-7-1-48x20.png 48w\" sizes=\"auto, (max-width: 1377px) 100vw, 1377px\" \/><\/a><\/p>\n<ul class=\"intro-text\">\n<li>Drag a Comments Button to each cell in the second row.<\/li>\n<li>Configure the Comments Buttons as follows:<\/li>\n<\/ul>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\u00a0<\/td>\n<td><span style=\"color: #000000;\"><b>THP1<\/b><\/span><\/td>\n<td><strong>THP2<\/strong><\/td>\n<td><strong>No Context<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Entity<\/strong><\/td>\n<td>Archer[Oil Producing Well]:THP!Actual<\/td>\n<td>Archer[Oil Producing Well]:THP!Actual<\/td>\n<td>Archer[Oil Producing Well]:THP!Actual<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Comment Context<\/strong><\/td>\n<td>\u00a0THP1<\/td>\n<td>\u00a0THP2<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<p class=\"intro-text\"><strong><span id=\"step8\">Step 8. Review the results<\/span><\/strong><\/p>\n<ul class=\"intro-text\">\n<li>Click the <strong>Finish and Open<\/strong> <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2978 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/livemode1.png\" alt=\"livemode\" width=\"14\" height=\"16\" \/>\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> (with the name <em>Comments Button Tutorial Page 2<\/em>) and open it in display mode.<\/li>\n<li>Click the <em>THP1<\/em> Comments Button. You should see the first comment that you entered in <a href=\"#step5\">Step 5<\/a>.<\/li>\n<li>Click the <em>THP2<\/em>\u00a0Comments Button. You should NOT see the first comment that you entered in Step 5, despite the entity being the same. This is because the context is different.<\/li>\n<li>Click the <em>No Context<\/em> Comments Button. You should see the first comment that you entered in Step 5, and any other comments for\u00a0Archer[Oil Producing Well]:THP!Actual that you entered in Step 5, regardless of context.<\/li>\n<li>Try changing up the configuration and adding more comments, to get a feel for how context works.<\/li>\n<\/ul>\n<hr \/>\n<h3>Part 3. Hierarchy Roll-up<\/h3>\n<p class=\"intro-text\">In this part, we'll explore how to roll up comments within a hierarchy. We will roll up comments for attributes of an Entity, and also roll up all Entities to a higher level in the hierarchy. Remember that hierarchical comments only apply to Entities within a hierarchy, and their attributes. Tags and calculation tags cannot be directly added to a hierarchy.<\/p>\n<p class=\"intro-text\"><strong>Step 9. Add Another Attribute<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-9.png\" rel=\"lightbox-14\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-31194\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-9.png\" alt=\"\" width=\"1377\" height=\"729\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-9.png 1377w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-9-768x407.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-9-150x79.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-9-1280x678.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-9-24x13.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-9-36x19.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-9-48x25.png 48w\" sizes=\"auto, (max-width: 1377px) 100vw, 1377px\" \/><\/a><\/p>\n<p class=\"intro-text\">Open the page <em>Comments Button Tutorial Page 1<\/em> in Studio. We will add another attribute to this page, as we did back in Step 3.<\/p>\n<ol class=\"intro-text\">\n<li>Open the Hierarchy Navigator.<\/li>\n<li>Search for the entity: <strong>Brumby<\/strong>.<\/li>\n<li><em>Brumby<\/em> will be revealed in the hierarchy, click on it.<\/li>\n<li>Open the attributes panel.<\/li>\n<li>Drag the <strong>THT Actual<\/strong> attribute onto the canvas, and position it below the THP attribute we added earlier.<\/li>\n<\/ol>\n<p class=\"intro-text\">Click on the attribute value, and in the Data Label component editor on the right, ensure the following configuration:<\/p>\n<ul class=\"intro-text\">\n<li>Decimals: 0<\/li>\n<li>Units Location: Suffix<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p class=\"intro-text\"><strong>Step 10. Add Another Comments Button<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-10.png\" rel=\"lightbox-15\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-31195\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-10.png\" alt=\"\" width=\"1360\" height=\"568\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-10.png 1360w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-10-768x321.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-10-150x63.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-10-1280x535.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-10-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-10-36x15.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-10-48x20.png 48w\" sizes=\"auto, (max-width: 1360px) 100vw, 1360px\" \/><\/a><\/p>\n<p class=\"intro-text\">Close the Hierarchy Navigator and drag and drop another Comments Button\u00a0component onto the canvas, positioning it near the THT Data Label on the diagram.\u00a0<\/p>\n<p class=\"intro-text\">Keep the default values for the first 4 fields, and configure the rest of the fields as follows.<\/p>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Entity<\/strong><\/td>\n<td>Brumby[Oil Producing Well]:THT!Actual<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Comment Context<\/strong><\/td>\n<td>\u00a0THT<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\">This configuration allows you to add comments for the THT Actual attribute value for the <em>Brumby<\/em> well. This will be used to show you how comments work with a hierarchy, which we will investigate in the rest of this tutorial.<\/p>\n<p>&nbsp;<\/p>\n<p class=\"intro-text\"><strong>Step 11. Add Text Labels<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-11.png\" rel=\"lightbox-16\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-31196\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-11.png\" alt=\"\" width=\"1377\" height=\"568\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-11.png 1377w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-11-768x317.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-11-150x62.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-11-1280x528.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-11-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-11-36x15.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-11-48x20.png 48w\" sizes=\"auto, (max-width: 1377px) 100vw, 1377px\" \/><\/a><\/p>\n<p class=\"intro-text\">Open the Comments Button Tutorial Page 2\u00a0in Studio. We will add more text labels to this page, as we did back in step 6.\u00a0<\/p>\n<ul class=\"intro-text\">\n<li>Drag a Text Label to each cell in the 4th row.<\/li>\n<li>Configure the content for the Text Labels as follows:\n<ul class=\"intro-text\">\n<li>1st column:\u00a0<em>Archer - Comments for attributes of Archer, rolled up to the entity<\/em><\/li>\n<li>2nd column:<em>\u00a0Queensland - All comments for all child entities of Queensland<\/em><\/li>\n<li>3rd column:<em>\u00a0Queensland - Comments that have context of THP1, for all child entities of Queensland<\/em><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p class=\"intro-text\"><strong>Step 12. Add Comments Buttons<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-12.png\" rel=\"lightbox-17\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-31197\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-12.png\" alt=\"\" width=\"1360\" height=\"567\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-12.png 1360w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-12-768x320.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-12-150x63.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-12-1280x534.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-12-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-12-36x15.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-button-tut-12-48x20.png 48w\" sizes=\"auto, (max-width: 1360px) 100vw, 1360px\" \/><\/a><\/p>\n<ul class=\"intro-text\">\n<li>Drag a Comments Button to each cell in the 5th row.<\/li>\n<li>Configure the Comments Buttons as follows:<\/li>\n<\/ul>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px; width: 150px;\">\u00a0<\/td>\n<td><b>Archer<\/b><\/td>\n<td><strong>Queensland 1<\/strong><\/td>\n<td><strong>Queensland 2<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Entity<\/strong><\/td>\n<td>Archer<\/td>\n<td>Queensland<\/td>\n<td>Queensland<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Hierarchy<\/strong><\/td>\n<td>P2 Corporate<\/td>\n<td>P2 Corporate<\/td>\n<td>P2 Corporate<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Comment Context<\/strong><\/td>\n<td>&nbsp;<\/td>\n<td>&nbsp;<\/td>\n<td>THP1\u00a0<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\"><strong>Step 13. Review the results<\/strong><\/p>\n<ul class=\"intro-text\">\n<li>Click the <strong>Finish and Open<\/strong> <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2978 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/livemode1.png\" alt=\"livemode\" width=\"14\" height=\"16\" \/>\u00a0button on the Studio toolbar to open the page in display mode.<\/li>\n<li>Click the <i>Archer\u00a0<\/i>Comments Button. You should see comments for Archer as well as comments for any of Archer's attributes.<\/li>\n<li>Click the <i>Queensland 1\u00a0<\/i>Comments Button. You should see comments for both Brumby and Archer, and any of their attributes, as well as any other Entities in the Queensland hierarchy.<\/li>\n<li>Click the <em>Queensland 2<\/em> Comments Button. You should only see comments for Entities in the Queensland hierarchy, that have a context of THP1.<\/li>\n<li>Try adding more comments on both pages and see how these are reflected Page 2.<\/li>\n<\/ul>\n<p class=\"intro-text\">Here are some examples of the comments that could have been entered:<\/p>\n<table>\n<tbody>\n<tr>\n<td><em>Comments for attributes of Archer, rolled up to the entity<\/em><\/td>\n<td><em>All comments for all child Entities of Queensland<\/em><\/td>\n<td><em>Comments that have context of THP1, for all child Entities of Queensland<\/em><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-archer.png\" rel=\"lightbox-18\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-31198\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-archer.png\" alt=\"\" width=\"350\" height=\"508\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-archer.png 466w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-archer-103x150.png 103w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-archer-17x24.png 17w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-archer-25x36.png 25w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-archer-33x48.png 33w\" sizes=\"auto, (max-width: 350px) 100vw, 350px\" \/><\/a><\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-qld.png\" rel=\"lightbox-19\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-31199\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-qld.png\" alt=\"\" width=\"350\" height=\"671\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-qld.png 470w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-qld-78x150.png 78w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-qld-13x24.png 13w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-qld-19x36.png 19w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-qld-25x48.png 25w\" sizes=\"auto, (max-width: 350px) 100vw, 350px\" \/><\/a><\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-qld-2.png\" rel=\"lightbox-20\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-31200\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-qld-2.png\" alt=\"\" width=\"350\" height=\"275\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-qld-2.png 465w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-qld-2-150x118.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-qld-2-24x19.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-qld-2-36x28.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/comments-qld-2-48x38.png 48w\" sizes=\"auto, (max-width: 350px) 100vw, 350px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\"><strong>Step 14. All done! \u00a0<\/strong><\/p>\n<p class=\"intro-text\">Congratulations! You now have two pages with labels and Comments Buttons. You can enter comments against the Entities and attributes that they have been configured for. You can also view the comments made against the Entities on another page. Try changing the configuration, and see what happens when you change the Entity names or contexts.<\/p>\n<hr \/>\n<h2 class=\"page-subheading\">Release History<\/h2>\n<ul class=\"intro-text\">\n<li class=\"overview\">Comments Button 4.5.0 (this release)\n<ul class=\"overview\">\n<li>Removed the 'Add' button from the comments window<\/li>\n<li>Start and end times now only apply to searches within the comments window<\/li>\n<li>Configure start and end times for comments separately from search times<\/li>\n<li>Configure comments for an Entity rolled up by hierarchy, and also comments for attributes, rolled up to the Entity<\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/comments-button\/comments-button-4-4\/\">Comments Button 4.4.0<\/a><\/li>\n<li><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/comments-button\/comments-button-4-3-2\/\">Comments Button 4.3.2<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>The Comments Button displays a small icon which, when clicked, launches a floating window that allows the user to enter and view comments relating to a specific entity and context. The comments are stored in P2 Server and can be viewed anywhere in Explorer where the same context is used. This article describes how to configure a Comments Button in versions 4.5.0 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-button\/comments-button-4-5-0\/\">Read more<i class=\"crycon-right-dir\"><\/i><\/a><\/p>\n","protected":false},"author":1,"featured_media":4482,"parent":37650,"menu_order":1,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":"","_members_access_role":[],"_members_access_error":""},"categories":[11],"tags":[689,663],"class_list":["post-1423","page","type-page","status-publish","has-post-thumbnail","hentry","category-tutorial","tag-button","tag-comment","Version-4-5-0","Product-ex"],"_links":{"self":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/1423","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=1423"}],"version-history":[{"count":0,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/1423\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/37650"}],"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=1423"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/categories?post=1423"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/tags?post=1423"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}