{"id":31096,"date":"2017-09-05T10:39:46","date_gmt":"2017-09-05T02:39:46","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=31096"},"modified":"2018-11-05T11:28:28","modified_gmt":"2018-11-05T03:28:28","slug":"comments-button-4-4","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/comments-button\/comments-button-4-4\/","title":{"rendered":"Comments Button (4.4)"},"content":{"rendered":"

<\/p>\n

This article applies to versions 4.4.0-4.4.6 of P2 Explorer. For the latest, see Comments Button<\/a>.<\/p>\n

Overview<\/h2>\n

The Comments Button displays a small icon (\"commenticonempty\"\u00a0or\u00a0\"image024\") which, when clicked, launches a window that allows users to enter and view comments relating to a specific entity and context.<\/p>\n

The comments are stored in P2 Server and can be viewed anywhere in Explorer where the same context is used.<\/p>\n

The white icon indicates that no comments have yet been made for that entity and context, whereas the black icon indicates that comments have already been made. When the button is clicked, a floating comments window appears.\u00a0<\/p>\n

\"Comments<\/p>\n

Users can add and view comments for an entity and context, within a specified time range. Users cannot change that time range. However, users can search for additional comments within other time ranges, but cannot add comments against those other time ranges.<\/p>\n

<\/i>TOP TIP<\/span><\/p>\n

If\u00a0you want to position the comments button very close to another component, you need to use Precision Layout<\/a>. If you drag a Precision Layout onto a grid cell, then you will be able to move the 'set' of components easily, by moving the grid cell around.<\/p>\n<\/div>\n

Related: Using Comments for collaboration<\/a> in display mode, Adding a new Comments Button style<\/a>, Comments: Communicating with Context<\/a><\/p>\n

\u00a0<\/p>\n

\n

Configuring the Comments Button\u00a0<\/h2>\n

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

Basic Mode<\/h3>\n

\"Comments<\/a><\/p>\n

\u00a0<\/p>\n\n\n\n\n\n\n\n
Start Date\/Time<\/strong>:<\/td>\nThe\u00a0date\/time from which to display comments. This will be entered as the default start of the search date range.<\/td>\n<\/tr>\n
End Date\/Time<\/strong>:<\/td>\nThe 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
Entity:<\/strong><\/td>\nThe\u00a0entity that all these comments apply to. All comments entered in this box will apply to this entity.<\/td>\n<\/tr>\n
Context:<\/strong><\/td>\nThe situation in which these comments apply. All comments entered in this box will have this context. If another comment box is placed on another page, with this same context and for the same entity, the comments for both will appear in both comment boxes. If the entity is the same but the context is different, the comments will be shown independently.<\/td>\n<\/tr>\n
Style:<\/strong><\/td>\nThe style you want to apply to the Comments Button. If you are a Style Administrator,\u00a0you can\u00a0add a new Comments Button\u00a0style<\/a>.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Advanced Mode<\/h3>\n

In Advanced mode, you have the option of switching between variable and text fields. The first 3 fields are set to variables initially, and have default values associated with them.<\/p>\n

\"Comments<\/p>\n

Related: Variables<\/a>, Default Values<\/a><\/p>\n

 <\/p>\n

\n

What is Context?<\/h2>\n

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

A comment\u2019s context is some extra information that is added to the comment, and is used to associate comments with other comments for that entity that use the same context.<\/p>\n

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

All comments entered via a Comments Button\u00a0component on a page has 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 an entity with the \"Report\" context.\u00a0<\/p>\n

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

<\/i> \u00a0SEE IT IN ACTION! Watch this video to see how comments with context work on a page.<\/p>\n\r\n\t\r\n\t

 <\/p>\n

\n

Tutorial: Adding\u00a0Comments Buttons to an Image<\/span><\/h2>\n

If you're unfamiliar with the process of building pages, read the article\u00a0Building an Explorer Page<\/a>.<\/p>\n

In this tutorial, we\u2019ll look at adding two Comment Buttons to an image, for displaying comments on Tubing Head Pressure and Tubing Head Temperature. We'll then create another page to show how the context allows the comments to appear on different displays in P2 Explorer.<\/p>\n

\"commentsdisplay\"<\/a><\/p>\n

Let\u2019s go through this process, step-by-step.<\/p>\n

Note: This configuration uses the 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

\n

Step 1. Prepare a Studio Page<\/strong><\/p>\n

\"New<\/p>\n

Before you start, click the New Page<\/strong>\u00a0button on the Home tab of the ribbon. Choose the Precision\u00a0layout.<\/p>\n

\"Precision<\/a><\/p>\n

Related: Precision Layout<\/a> tutorial<\/p>\n

Note: We need to spend a bit of time setting up so you can see the comments in context.<\/p>\n

 <\/p>\n

Step 2. Add a Background Image<\/strong><\/p>\n

\"Image<\/p>\n

A background image is often used in schematic-style pages. Let's use the Image component to do this.<\/p>\n