This article applies to versions 4.6.2 and later of P2 Explorer. For more, see Release History.
Overview
The Comments Button is a component that a page designer can position on a section of a page, or over an image (such as a schematic) so that a user can add and view comments for data that would most likely relate to that section or image (depending on configuration).
When a user clicks the configured Comments Button in Display Mode, the Explore panel opens to show comments relating to the Comments button's data.
The Comments appears in the Explore panel
The Comments button is filled in if there are comments for the comment's time period, and just shows an outline if there are none.
Note: The Comments button icon appearance on a page may vary, depending on styling.
Users can add comments for data and comment context, for a timestamp specified by the page designer (defaulted to the page variable endTime) and can search for comments within the configured or selected time range. Comments are stored in P2 Server and can be viewed anywhere in Explorer trends, and in Explorer pages that have been configured for comments.
The Comments Button is in the Display group of the Components Toolbox.
Quick Start
You can very quickly configure a Comments Button, by giving it a fixed Entity property.
In the Comments Button component editor, assign a fixed value to the Entity property, then save and finish the page and click the comments button.
1. For the Entity property, select Entity from the drop-down (for a fixed value), and type Silver in the text box (this is a tag name in the Sample Data).
2. Click Finish and Open on the Studio toolbar.
3. In Display Mode, click the Comments Button. The Comments list (empty for this period) appears in the Explore panel, with the Title: "Comments for Silver".
4. From here, you can add, reply, edit*, and delete* comments, or search for comments in a different time range. See Working with Comments. (*Editing and Deleting options depend on role privileges.)
Usually, your comments button would be positioned next to the data it is describing, as in this page where the comments button for tag Silver is positioned next to a data label for Silver:
The Comments Button component and the Comments component have a very similar configuration.
The following diagram shows a configured Comments Button component:
1. Timestamp
The comment's timestamp. The default is the page variable: endTime. Comments that are added using this Comments Button have this as their timestamp, and relate to the comment's data for this timestamp.
2. Show From and Show To
The date/time range for which to display comments. Only comments with a timestamp within this range appear in the Comments list. This date range can be changed in Display mode, using Date/Time Pickers. The default values are the page variables: startTime and endTime.
3. Entity
Choose Variable from the drop-down list to use a variable for this property, otherwise Entity. This is the comment's data, and can be a tag, an entity, or an attribute. Comments that are added using this comments button will be for this data.
4. Hierarchy
If you choose to use a hierarchy (choose Variable from the drop-down list to use a variable for this property, otherwise Hierarchy), 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. This should only be used if the Entity property is an entity (not a tag or an attribute).
5. Comment Context
Optionally type a Comment Context to apply a filter to the comments that are added to this comments button. Read more about Comment Context.
6. Style
Select a suitable style from the drop-down list (no styles are available in the example).
7. Alignment
Click on one of the boxes to override the selected style's alignment.
If you're unfamiliar with the process of building pages, read the article Building an Explorer Page.
In this tutorial, we'll add several Comments Button components, as well as a Breadcrumb component. We'll also add some Text Labels to label the different configurations used in our Comments Buttons.
For all of the tutorials, we will keep the default values for: Timestamp, Show From and Show To properties.
At the end of the tutorial, your page should look something like this:
If you'd prefer to do just a part of the tutorial, then choose from the list here:
As you finish each section, try it out in preview mode:
Click the preview button on the Studio toolbar to see what your page will look like in display mode.
Note: This configuration uses the Sample Data 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.
Prepare a New Explorer Page
In this section, we're going to add a new Explorer page in Precision Layout, then add two grids, for organising our page.
Step 1. Prepare a Studio Page
Before you start, click the New Page button on the Home tab of the ribbon. Choose the Precision layout.
Step 2. Add Two Grid Layouts
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 Buttons - just so we can organise the different comments buttons in the tutorial sections.
Drag and drop a grid layout to the top right quadrant of the page.
Add two columns and one row, then resize to give each cell more space.
Drag and drop a second grid layout to the bottom right quadrant of the page.
Add two columns and one row, then resize to give each cell more space.
The most basic configuration for a Comments Button is when only the Entity property is specified. This is the time series data that the comment is about, and can be a Tag, an Attribute, or an Entity.
Step 1. Add Text Labels and Comments Buttons
In this step, we're going to add a Text Label and a Comments Button configured for an attribute.
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 Content text box.
2. Drag and drop a Comments Button into the cell below the Text Label.
3. Configure the Comments Button as follows, keeping the default values for all other properties of the component:
Entity
Select Entity from the drop-down list
Type Beardy[Oil Producing Well]:THP!Actual in the text box
Step 2. Preview the Changes
In Preview mode:
1. Click the new comments button, under the text label Comments for an Attribute.
2. In the Explore panel, type a comment in the edit box, and click Save or press Enter.
Note: Live Preview only applies to version 4.6.2. In later versions, mentions are supported natively and a text format toolbar is available.
The new comment is saved and appears in the Comments list.
Hover over the comment's data name to see the full name in a tooltip.
Note how the Comments Button on the page is filled in to indicate that there is a comment for the time range.
Hover over the Comments button to see the number of comments.
You can specify a Comment Context to apply a filter to the comments that are added to this comments button, and returned in the comments list. Read more about Comment Context.
Step 1. Add Text Labels and Comments Buttons
In this section, we're going to add Text Labels and three Comments Button, each with the same tag. We'll configure the comments button to filter for context, using Comment Context in three different ways.
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:
Text Label 1
Content
Comments for Tag Silver, with context comment context 'High Values'
Text Label 2
Content
Comments for Tag Silver, with comment context 'Low Values'
Text Label 3
Content
Comments for Tag Silver, with NO comment context
2. Drag and drop a Comments Button into each of the cells below the Text Labels.
3. Configure the three Comments Buttons as follows:
Comments Button 1
Entity
Silver
Comment Context
High Values
Comments Button 2
Entity
Silver
Comment Context
Low Values
Comments Button 3
Entity
Silver
Comment Context
(leave blank)
Defining the Entity and Comment Context for the first Comments Button in this group
Step 2. Preview the Changes
In Preview mode:
1. Click the new comments button, under the label, Comments for Tag Silver, with Comment Context 'High Values'.
2. In the Explore panel, type a comment in the edit box, and click Save or press Enter.
The new comment is saved and appears in the Comments list.
3. Click the new comments button, under the label, Comments for Tag Silver, with Comment Context 'Low Values'.
4. In the Explore panel, type a comment in the edit box, and click Save or press Enter.
The new comment is saved and appears in the Comments list.
5. Click the new comments button, under the label, Comments for Tag Silver, with NO Comment Context.
6. In the Explore panel, type a comment in the edit box, and click Save or press Enter.
The new comment is saved and appears in the Comments list, along with the comments added for the other comments buttons.
Because this Comments Button has no comment context filter, all of the comments against this tag (and for this time range) appear in the comments list.
Hover over the comment's data name to see the full name in a tooltip.
Note how the Comments Button on the page is filled in to indicate that there is a comment for the time range.
Hover over the Comments button to see the number of comments.
Comments Button for a Hierarchy Section
If you choose to specify the Hierarchy 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.
This should only be used if the Comments Button's Entity property is an entity.
In this section, we're going to add two Text Labels, as well as two Comments Button that are each configured for a variable entity, selectedEntity, while one also has a hierarchy. We're going to add a Breadcrumb component for changing the selectedEntity variable at different levels. Finally, we'll set a default for selectedEntity.
Step 1. Add Text Labels and Comments Buttons
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:
Text Label 1
Content
Comments for Entity
Text Label 2
Content
Comments for Hierarchy Section
2. Drag and drop a Comments Button into each of the cells below the new Text Labels.
3. Configure the two Comments Buttons as follows (keeping the default values for the remaining properties):
Comments Button 1
Entity
Select Variable from the drop-down list; select selectedEntity from the drop-down list (this is the default)
Comments Button 2
Entity
Select Variable from the drop-down list; select selectedEntity from the drop-down list (this is the default)
Hierarchy
Select Hierarchy from the drop-down list; type P2 Corporate in the text box
Defining the Entity and Hierarchy for the second Comment Button in this group
Step 2. Add a Breadcrumb
1. Drag and drop a Breadcrumb component onto the top left of the page, and resize to fit about half of the page (horizontally).
2. Configure the Breadcrumb as follows, keeping the default values for all other properties of the component:
Entity Name
Select Variable from the drop-down list; select selectedEntity from the drop-down list (this is the default)
Hierarchy Name
Select P2 Corporate from the drop-down list
Step 3. Set the Default Values
We are going to set a default for the selectedEntity variable.
Click the Default Values button on the Studio toolbar.
For the selectedEntity variable, update it to specify New South Wales (this is in the P2 Corporate hierarchy).
Step 4. Preview the Changes
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.
In Preview mode:
1. Select Glen Innes in the breadcrumb.
2. Click the Comments Button under the label Comments for Entity, type a comment in the edit box, and click Save or press Enter.
3. Select Beardy in the breadcrumb.
4. Click the Comments Button under the label Comments for Entity, type a comment in the edit box, and click Save or press Enter.
Note how the attribute comment you added earlier appears in the comments list for entity Beardy (because this is an attribute of entity Beardy).
5. Select New South Wales in the breadcrumb.
6. Click the Comments Button under the label Comments for Entity, type a comment in the edit box, and click Save or press Enter.
7. Now click the Comments Button under the label Comments for Hierarchy Section, type a comment in the edit box, and click Save or press Enter.
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 Hierarchy is specified in the Comments Button component.
In this tutorial, we'll use a button style that works well on a black background image.
1. Drag and drop an Image component onto the page.
2. Select a black image as the Default Image. (In our example, we've used an image called 'Black Background'.)
3. Select COVER as the Display.
4. Drag and drop a Comments Button component onto the image. You won't be able to see it, because of the black background (the Comments Button is filled in black, because there are comments for the currently selected entity).
5. Change the Comments Button Style to Black Comment Button.
Note that you may need a new style for this.
The Black Comment Button style has the following important properties:
Empty Comments Fill Colour: Black
Empty Comments Border Colour: White
Available Comments Fill Colour: White
Available Comments Border Colour: White
In Preview mode:
1. Select Far West in the breadcrumb.
Note how the Comments button is outlined. This is because there are no comments yet for this entity.
2. Click the new Comments Button, type a comment in the edit box, and click Save or press Enter.
The comment is saved. Note how it is filled in now.
Comments can now include hashtags # in the content, for creating an entity 'pill'
Comments can now include mentions @ in the content, for sending a notification to another user
'Live Preview' tab when adding or editing comments or replies. From version 4.6.4, mentions are supported natively and Live Preview has been removed.
In version 4.6.4, a text format toolbar was added.
Comments Button 4.6.0
The comments window now opens in the Explore panel
The Edit privilege can be granted to users via a role
Delete is a new privilege, that can be granted to users via a role
Comments apply only to a point in time, and use the end time of a period as the comment’s timestamp. The timestamp for existing comments will change to be the end time of the period
Comments Button
ON THIS PAGE:
This article applies to versions 4.6.2 and later of P2 Explorer. For more, see Release History.
Overview
The Comments Button is a component that a page designer can position on a section of a page, or over an image (such as a schematic) so that a user can add and view comments for data that would most likely relate to that section or image (depending on configuration).
When a user clicks the configured Comments Button in Display Mode, the Explore panel opens to show comments relating to the Comments button's data.
The Comments button is filled in
if there are comments for the comment's time period, and just shows an outline 
if there are none.
Note: The Comments button icon appearance on a page may vary, depending on styling.
Users can add comments for data and comment context, for a timestamp specified by the page designer (defaulted to the page variable endTime) and can search for comments within the configured or selected time range. Comments are stored in P2 Server and can be viewed anywhere in Explorer trends, and in Explorer pages that have been configured for comments.
Related: Comments in Explorer
Finding the Component
The Comments Button is in the Display
group of the Components Toolbox.
Quick Start
You can very quickly configure a Comments Button, by giving it a fixed Entity property.
In the Comments Button component editor, assign a fixed value to the Entity property, then save and finish the page and click the comments button.
1. For the Entity property, select Entity from the drop-down (for a fixed value), and type Silver in the text box (this is a tag name in the Sample Data).
2. Click Finish and Open on the Studio toolbar.
3. In Display Mode, click the Comments Button. The Comments list (empty for this period) appears in the Explore panel, with the Title: "Comments for Silver".
4. From here, you can add, reply, edit*, and delete* comments, or search for comments in a different time range. See Working with Comments. (*Editing and Deleting options depend on role privileges.)
Usually, your comments button would be positioned next to the data it is describing, as in this page where the comments button for tag Silver is positioned next to a data label for Silver:
Related: Using Comments for collaboration in display mode.
Configuration
The Comments Button component and the Comments component have a very similar configuration.
The following diagram shows a configured Comments Button component:
Related: Comments component
Tutorial: Configuring Various Comments Buttons
If you're unfamiliar with the process of building pages, read the article Building an Explorer Page.
In this tutorial, we'll add several Comments Button components, as well as a Breadcrumb component. We'll also add some Text Labels to label the different configurations used in our Comments Buttons.
For all of the tutorials, we will keep the default values for: Timestamp, Show From and Show To properties.
At the end of the tutorial, your page should look something like this:
If you'd prefer to do just a part of the tutorial, then choose from the list here:
As you finish each section, try it out in preview mode:
Click the preview
button on the Studio toolbar to see what your page will look like in display mode.
Note: This configuration uses the Sample Data 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.
Prepare a New Explorer Page
In this section, we're going to add a new Explorer page in Precision Layout, then add two grids, for organising our page.
Step 1. Prepare a Studio Page
Before you start, click the New Page button on the Home tab of the ribbon. Choose the Precision layout.
Step 2. Add Two Grid Layouts
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 Buttons - just so we can organise the different comments buttons in the tutorial sections.
Related: Grid Layout
Comments Button for an Attribute
The most basic configuration for a Comments Button is when only the Entity property is specified. This is the time series data that the comment is about, and can be a Tag, an Attribute, or an Entity.
Step 1. Add Text Labels and Comments Buttons
In this step, we're going to add a Text Label and a Comments Button configured for an attribute.
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 Content text box.
2. Drag and drop a Comments Button into the cell below the Text Label.
3. Configure the Comments Button as follows, keeping the default values for all other properties of the component:
Step 2. Preview the Changes
In Preview mode:
1. Click the new comments button, under the text label Comments for an Attribute.
2. In the Explore panel, type a comment in the edit box, and click Save or press Enter.
Note: Live Preview only applies to version 4.6.2. In later versions, mentions are supported natively and a text format toolbar is available.
The new comment is saved and appears in the Comments list.
Related: Text Label tutorial
Comments Buttons with Comment Context
You can specify a Comment Context to apply a filter to the comments that are added to this comments button, and returned in the comments list. Read more about Comment Context.
Step 1. Add Text Labels and Comments Buttons
In this section, we're going to add Text Labels and three Comments Button, each with the same tag. We'll configure the comments button to filter for context, using Comment Context in three different ways.
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:
2. Drag and drop a Comments Button into each of the cells below the Text Labels.
3. Configure the three Comments Buttons as follows:
Step 2. Preview the Changes
In Preview mode:
1. Click the new comments button, under the label, Comments for Tag Silver, with Comment Context 'High Values'.
2. In the Explore panel, type a comment in the edit box, and click Save or press Enter.
The new comment is saved and appears in the Comments list.
3. Click the new comments button, under the label, Comments for Tag Silver, with Comment Context 'Low Values'.
4. In the Explore panel, type a comment in the edit box, and click Save or press Enter.
The new comment is saved and appears in the Comments list.
5. Click the new comments button, under the label, Comments for Tag Silver, with NO Comment Context.
6. In the Explore panel, type a comment in the edit box, and click Save or press Enter.
The new comment is saved and appears in the Comments list, along with the comments added for the other comments buttons.
Because this Comments Button has no comment context filter, all of the comments against this tag (and for this time range) appear in the comments list.
Comments Button for a Hierarchy Section
If you choose to specify the Hierarchy 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.
This should only be used if the Comments Button's Entity property is an entity.
In this section, we're going to add two Text Labels, as well as two Comments Button that are each configured for a variable entity, selectedEntity, while one also has a hierarchy. We're going to add a Breadcrumb component for changing the selectedEntity variable at different levels. Finally, we'll set a default for selectedEntity.
Step 1. Add Text Labels and Comments Buttons
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:
2. Drag and drop a Comments Button into each of the cells below the new Text Labels.
3. Configure the two Comments Buttons as follows (keeping the default values for the remaining properties):
Step 2. Add a Breadcrumb
1. Drag and drop a Breadcrumb component onto the top left of the page, and resize to fit about half of the page (horizontally).
2. Configure the Breadcrumb as follows, keeping the default values for all other properties of the component:
Step 3. Set the Default Values
We are going to set a default for the selectedEntity variable.
Step 4. Preview the Changes
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.
In Preview mode:
1. Select Glen Innes in the breadcrumb.
2. Click the Comments Button under the label Comments for Entity, type a comment in the edit box, and click Save or press Enter.
3. Select Beardy in the breadcrumb.
4. Click the Comments Button under the label Comments for Entity, type a comment in the edit box, and click Save or press Enter.
Note how the attribute comment you added earlier appears in the comments list for entity Beardy (because this is an attribute of entity Beardy).
5. Select New South Wales in the breadcrumb.
6. Click the Comments Button under the label Comments for Entity, type a comment in the edit box, and click Save or press Enter.
7. Now click the Comments Button under the label Comments for Hierarchy Section, type a comment in the edit box, and click Save or press Enter.
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 Hierarchy is specified in the Comments Button component.
Related: Breadcrumb tutorial, Variables, Default Values
Tutorial: Styling a Comments Button
In this tutorial, we'll use a button style that works well on a black background image.
1. Drag and drop an Image component onto the page.
2. Select a black image as the Default Image. (In our example, we've used an image called 'Black Background'.)
3. Select COVER as the Display.
4. Drag and drop a Comments Button component onto the image. You won't be able to see it, because of the black background (the Comments Button is filled in black, because there are comments for the currently selected entity).
5. Change the Comments Button Style to Black Comment Button.
Note that you may need a new style for this.
The Black Comment Button style has the following important properties:
In Preview mode:
1. Select Far West in the breadcrumb.
Note how the Comments button is outlined. This is because there are no comments yet for this entity.
2. Click the new Comments Button, type a comment in the edit box, and click Save or press Enter.
The comment is saved. Note how it is filled in now.
Related: Comments Button Styling
Release History