Home Explorer Studio Components Hyperlink Hyperlink (4.4.4)

Hyperlink (4.4.4)

This article applies to versions 4.4.4 and later of P2 Explorer. For more, see Release History. For help on the latest version, see Hyperlink.

Overview

The hyperlink component can be used to open an Explorer page or trend, or to open an external URL.

For a full description of the hyperlink properties, refer to the comprehensive reference at the end of this article.

Related: Adding a Hyperlink style, Link Action and Variable Mapping

 

Quick Start

This section explains how to set up a hyperlink in four steps.

Content: The Hyperlink on your Page

The hyperlink is similar to a text label in appearance.

1. Type in a meaningful Content, including optional variables; this is what the user will see on your page.

Type: What to Link to

You can link to any of the following:

  • Open Page, to open an existing Explorer Page
  • Open Trend, to open an existing Explorer Trend
  • New Trend, to open a new Explorer Trend
  • Open URL, to open an external URL

2. Select a Type from the drop-down list, then fill in its applicable details (Workspace Name/ Page Name/ Trend Name/ URL).

Tab Type: Where to Open

3. For Explorer displays (trends and pages) the options are: New Explorer Tab and Same Explorer Tab. For URLs, the options are New Explorer Tab, Same Explorer Tab and New Browser Tab.

Note, for URLs: Unless the address begins with https the URL opens in a new tab in your web browser, regardless of the selected Tab Type.

Variable Mapping: Sending Parameters from the Source Page

Use Variable Mapping to send values to the destination page, trend or URL.

4. Click Add, then select a Source and type in a Target value for the Variable Mapping. This must be an accurate, case-sensitive match.

The Source is a variable from your page. The Target must match the variable name on the destination page, trend or URL. For pages and trends, this overrides Default Values.

Read more: Link Action and Variable Mapping

 

Tutorials

If you're unfamiliar with the process of building pages, read the article Building an Explorer Page.

There are four different types of hyperlink in Explorer, each covered in a separate tutorial.

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.

Tutorial 1: Adding a Hyperlink to Open a Trend

Related: Creating a Trend, Link to a Trend via a URL

In this tutorial, we're going to create a hyperlink to an existing trend, using two page defaults, pageSampleMethod and pageSampleInterval, as variables in Variable Mapping.

Before you start this exercise, make sure you have a trend to open.

  • If you have access to the training environment, you should be able to use Silver Trend, in the Tutorials workspace. You can search for the trend, to make sure you have it.
  • Otherwise, add a new trend, and save it.

Or, just skip to Tutorial 2, where you get to open a new, blank trend.

Note: Before you start the tutorial, prepare a page in Studio.

Step 1. Add and Configure a Hyperlink

1. Drag a hyperlink component onto a grid cell. The Hyperlink is in the Display Display group icon group.

hyperlink-tut-1

2. Now configure the hyperlink:

Note: This step includes adding Variable Mapping. We'll be using two page defaults: pageSampleMethod and pageSampleInterval. Read more about Page Default Values here.

1. Content Type Open Silver Trend using Sample Method: in the Content edit box, then add a variable: pageSampleMethod. (Type in a more suitable name, if you are opening a different trend).
Adding a Variable to the Content: Click Add Variable, then select a variable from the drop-down list. (Alternatively, you can leave out this variable, as it won't affect the hyperlink's behaviour in any way.)
2. Type Select Open Trend from the Type drop-down list.
3. Workspace Name Select Tutorials from the Workspace Name drop-down list. (Or select the workspace name where your own trend is saved.)
4. Trend Name Select Silver Trend from the Trend Name drop-down list. (Or select the name of your own trend.)
5. Tab Type Select Options from the first drop-down list, then New Explorer Tab from the second drop-down list.
6. Add Click Add twice, to add two Variable Mappings.
7. Variable Mapping (first) Select Variable from the drop-down list, and pageSampleMethod from the Source drop-down list. Type sampleMethod in the Target edit box.
8. Variable Mapping (second) Select Variable from the drop-down list, and pageSampleInterval in the Source edit box. Type sampleInterval in the Target edit box.
9. Style Select Normal from the drop-down list. (Your list of Styles might not include Normal; select your preferred style from the drop-down list).

A note on Variable Mapping for Trends: Trends use specific default values, as outlined in the URL Formats section of how to Link to a Trend via a URL. For example, Trends have a parameter called sampleInterval, which uses seconds to control the sample interval in which trend data is collected.

This is how your grid cell should be looking now:

Step 2. Test your Hyperlink

Now that your hyperlink is set up, click the Preview preview button on the Studio toolbar to see what your page will look like in run-time.

Click the hyperlink.

The Silver trend opens. Note how the two Variable Mapping values have set the values for Sample Method and Sample Interval on the trend.

save Don't forget to save your page!

 

Tutorial 2: Adding a Hyperlink to Open a New Trend

Related: Creating a Trend, Link to a Trend via a URL

In this tutorial, we're going to create a hyperlink to a new trend, using the page default pageSampleInterval as a variable in Variable Mapping.

Note: Before you start the tutorial, prepare a page in Studio, or use the page from Tutorial 1.

Step 1. Add and Configure a Hyperlink

1. Drag a hyperlink component onto a grid cell.

2. Now configure the hyperlink:

Note: This step includes adding Variable Mapping. We'll be using a page default: pageSampleInterval. Read more about Page Default Values here.

1. Content Type Open a new trend in the Content edit box.
2. Type Select New Trend from the Type drop-down list.
3. Tab Type Select Options from the first drop-down list, then Same Explorer Tab from the second drop-down list.
4. Add Click Add, to add a Variable Mapping.
5. Variable Mapping Select Variable from the drop-down list, and pageSampleInterval from the Source drop-down list. Type sampleInterval in the Target edit box.

A note on Variable Mapping for Trends: Trends use specific default values, as outlined in the URL Formats section of how to Link to a Trend via a URL. For example, Trends have a parameter called sampleInterval, which uses seconds to control the sample interval in which trend data is collected.

This is how your grid cells should be looking now:

Step 2. Test your Hyperlink

Now that your hyperlink is set up, click the Preview preview button on the Studio toolbar to see what your page will look like in run-time.

Click the hyperlink.

A blank trend opens. Note how the Variable Mapping value has set the value for Sample Interval on the trend.

save Don't forget to save your page!

 

Tutorial 3: Adding a Hyperlink to Open an Explorer Page

In this tutorial, we're going to create a hyperlink to another Explorer Page.

Before you start this exercise, make sure you have a page to open.

If you have access to the training environment, you should be able to use the Selected Chart Axis page, in the Tutorials workspace.

Note: Before you start the tutorial, prepare a page in Studio, or use the page from Tutorial 1.

Step 1. Add and Configure a Hyperlink

1. Drag a hyperlink component onto a grid cell.

2. Now configure the hyperlink:

1. Content Type Open Chart Page in the Content edit box.
2. Type Select Open Page from the Type drop-down list.
3. Workspace Name Select Tutorials from the Workspace Name drop-down list. (Or select the workspace name where your own page is saved.)
4. Page Name Select Selected Chart Axis from the Page Name drop-down list. (Or select the name of your own page.)
5. Tab Type Select Options from the first drop-down list, then New Explorer Tab from the second drop-down list.
6. Add Click Add, to add a Variable Mapping.
7. Variable Mapping Select Text from the drop-down list, and type 2014 into the Source text box. Type selectedAxis in the Target edit box.

This is how your grid cells should be looking now:

Step 2. Test your Hyperlink

Now that your hyperlink is set up, click the Preview preview button on the Studio toolbar to see what your page will look like in run-time.

Click the hyperlink.

The Chart Page opens. Note how the Variable Mapping value (2014) has set the value for the selectedAxis variable.

 

Tutorial 4: Adding a Hyperlink to Open a URL

In this tutorial, we're going to create a hyperlink to an external URL.

This tutorial does not use variable mapping; if you are going to use variable mapping with an external URL, ensure that you know which parameters are available. Then reference, by name, the ones you use in the Target of the Variable Mappings.

Note: Before you start the tutorial, prepare a page in Studio, or use the page from Tutorial 1.

Step 1. Add and Configure a Hyperlink

1. Drag a hyperlink component onto a grid cell.

2. Now configure the hyperlink:

1. Content Type Open URL to Australia Weather in the Content edit box.
2. Type Select Open URL from the Type drop-down list.
3. URL Select Text from the drop-down list, and type https://weather.yahoo.com.au/forecast in the URL text box.
4. Header Select Text from the drop-down list, and type Australia Weather in the Header text box. Note: if you leave out the Header, Explorer will open this URL with a header of "New Page".
5. Tab Type Select Options from the first drop-down list, then New Explorer Tab from the second drop-down list.

This is how your grid cells should be looking now:

Step 2. Test your Hyperlink

Now that your hyperlink is set up, click the Preview preview button on the Studio toolbar to see what your page will look like in run-time.

Click the hyperlink.

The Australia Weather opens in a new tab within P2 Explorer. Note how this page is named Australia Weather, using the Header property.

 

Comprehensive Reference

This section describes the properties of the Hyperlink component.

Content: The text you want to display in the hyperlink. This can include variable data (see Add Variable).
Add Variable: Click Add Variable if you want to add a variable to the content.
Action Editor:

This is where you define the hyperlink, along with optional variable mapping.
Type Select the type of hyperlink you want:  
  Open Page Specify a Workspace Name, Page Name.  
  Open Trend Specify a Workspace Name, Trend Name.  
  New Trend No further details are required; Explorer opens a new, blank trend when a user clicks this type of hyperlink.  
  Open URL Specify the URL. You can also specify a Header. Unless the address begins with https the URL opens in a new tab in your web browser, regardless of the selected Tab Type.  
Workspace Name/URL For Open Page and Open Trend hyperlink types, specify in which workspace the page or trend exists; this is because page names/trend names can be duplicated across different workspaces. For a URL hyperlink, specify a URL address; if the address starts with http, then it will open in a new browser tab; if the address starts with https the URL will open in Explorer.  
Trend Name/Page Name/Header For an Open Page/ Open Trend hyperlink, specify which page/trend to open. For a URL hyperlink, optionally specify a header.  
Tab Type This specifies where the page, trend or URL is opened. For Explorer displays (trends and pages) the options are: New Explorer Tab and Same Explorer Tab. For URLs, the options are New Explorer Tab, Same Explorer Tab and New Browser Tab.

Note, for URLs: Unless the address begins with https the URL opens in a new tab in your web browser, regardless of the selected Tab Type.

  
Variable Mapping Use Variable Mapping to pass variables from the current Explorer page to the page, trend or URL you are linking to.  
  Click Add to add a new variable mapping.  
  Each variable mapping needs a source (coming from the page you are on) and a target (for the trend/ page/ URL you are opening). The source and the target should have matching data types. See the tutorials for some examples.  
 
Source This can be a variable (such as a Combo Box's Selected Option, for example), or you can type in text or number (select Variable, Text, Number, List, Entity, or Entities as appropriate, from the drop-down list to the left of Source). You can also pass in a Yes/No value or a datetime value.
Target Type in the variable name for the target page/ trend, or a parameter name for the target URL. This must be an accurate match (case-sensitive). Read more about the names of common variables on pages and trends.
Remove Click Remove to remove the variable mapping.
 
Style: You can change the style of the hyperlink font and alignment by selecting a different style from the drop-down list. If you are a Style Administrator, you can add a new Hyperlink style.

 

Release History

  • Hyperlink 4.4.4 (this release):
    • The default value for Type has changed from 'Open Page' to 'Select Type'.
    • For the ‘Open Trend’ type, the drop-down lists for workspaces is filtered to those that contain trends.
    • For the ‘Open Page’ type, the drop-down lists for workspaces is filtered to those that contain pages.
  • Hyperlink 4.4.0
    • Updated the help to reflect changes in the Explorer framework.
  • Hyperlink 4.3.2

 

Comments are closed