{"id":6410,"date":"2015-10-13T12:36:31","date_gmt":"2015-10-13T04:36:31","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=6410"},"modified":"2018-10-03T14:27:06","modified_gmt":"2018-10-03T06:27:06","slug":"hyperlink-4-3-2","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/hyperlink\/hyperlink-4-3-2\/","title":{"rendered":"Hyperlink (4.3.2)"},"content":{"rendered":"\n<p class=\"left-bar\">This article applies to versions 4.3.2 and earlier of P2 Explorer. For the latest, see <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/hyperlink\/\">Hyperlink<\/a>.<\/p>\n<h2 class=\"page-subheading\">Overview<\/h2>\n<p class=\"intro-text\">The hyperlink component can be used to open an Explorer page or trend, or to open an external URL.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/HyperlinkOverview3.png\" rel=\"lightbox-0\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-6540\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/HyperlinkOverview3.png\" alt=\"\" width=\"500\" height=\"520\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/HyperlinkOverview3.png 661w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/HyperlinkOverview3-144x150.png 144w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/HyperlinkOverview3-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/HyperlinkOverview3-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/HyperlinkOverview3-46x48.png 46w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/a><\/p>\n<p class=\"left-bar\">For a full description of the hyperlink properties, refer to the <span class=\"removed_link\" title=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/hyperlink-4-3-2\/#Comprehensive_Reference\">comprehensive reference<\/span> at the end of this article.<\/p>\n<p>&nbsp;<\/p>\n<hr \/>\n<h2 class=\"page-subheading\">Quick Start<\/h2>\n<p class=\"intro-text\">This section explains how to set up a hyperlink in four steps.<\/p>\n<p class=\"no-toc-heading\">Content: The Hyperlink on your Page<\/p>\n<p class=\"intro-text\">The hyperlink is similar to a <a title=\"Text Label\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/text-label\/\">text label<\/a> in appearance.<\/p>\n<p class=\"instruct\">Type in a meaningful <em>Content<\/em>, including optional variables; this is what the user will see on your page.<\/p>\n<p class=\"no-toc-heading\">Type: What to Link to<\/p>\n<p class=\"intro-text\">You can link to any of the following:<\/p>\n<ul class=\"intro-text\">\n<li><strong>Open Page<\/strong>, to open an existing Explorer Page<\/li>\n<li><strong>Open Trend<\/strong>, to open an existing Explorer Trend<\/li>\n<li><strong>New Trend<\/strong>, to open a new Explorer Trend<\/li>\n<li><strong>Open URL<\/strong>, to open an external URL<\/li>\n<\/ul>\n<p class=\"instruct\">Select a <em>Type<\/em> from the drop-down list, then fill in its applicable details (Workspace Name\/ Page Name\/ Trend Name\/ URL).<\/p>\n<p class=\"no-toc-heading\">New Tab: Where to Open<\/p>\n<p class=\"instruct\"><em>New Tab<\/em> is selected by default. De-select if you want to open a page, trend, or URL in the current Explorer tab.<\/p>\n<p class=\"note\"><strong>Note, for URLs<\/strong>: For an address beginning with <em>https<\/em> the URL opens in Explorer; otherwise, it opens in a separate tab in your browser.<\/p>\n<p class=\"no-toc-heading\">Variable Mapping: Sending Parameters from the Source Page<\/p>\n<p class=\"intro-text\">Use <em>Variable Mapping<\/em> to send values to the destination page, trend or URL.<\/p>\n<p class=\"instruct\">Type in a <em>Source<\/em> and <em>Target<\/em> value for each <em>Variable Mapping<\/em> you want to add. This must be an accurate, case-sensitive match.<\/p>\n<p class=\"intro-text\">Your <em>Source<\/em> is either a constant or a variable from your page. Your <em>Target<\/em> must match the variable name on the destination page, trend or URL. For pages and trends, this overrides <a title=\"Default Value\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/default-value\/\"> Default Values<\/a>.<\/p>\n<p>&nbsp;<\/p>\n<hr \/>\n<h2 class=\"page-subheading\">Tutorial Setup: Preparing an Explorer Page for Tutorials<\/h2>\n<p class=\"intro-text\">To demonstrate the different types of hyperlinks, we're going to set up an Explorer page, and then re-use that for the separate tutorials.<\/p>\n<p class=\"intro-text\">This is what we need to do:<\/p>\n<ul class=\"intro-text\">\n<li>Step 1. Set up a new P2 Explorer Page.<\/li>\n<li>Step 2. Add a <em>Sample Method<\/em> Combo Box with a Text Label, and a Default Value.<\/li>\n<\/ul>\n<p class=\"intro-text\">This is what your page should look like. You'll only be adding the hyperlinks in the tutorials, but it's helpful to prepare the grid rows now.<\/p>\n<div id=\"attachment_6675\" style=\"width: 599px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6675\" class=\"wp-image-6675 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/PageLayoutIntro.png\" alt=\"\" width=\"589\" height=\"385\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/PageLayoutIntro.png 589w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/PageLayoutIntro-150x98.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/PageLayoutIntro-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/PageLayoutIntro-36x24.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/PageLayoutIntro-48x31.png 48w\" sizes=\"auto, (max-width: 589px) 100vw, 589px\" \/><p id=\"caption-attachment-6675\" class=\"wp-caption-text\">Page Setup for Tutorials<\/p><\/div>\n<p class=\"intro-text\"><strong>Step 1. Set up a new P2 Explorer Page<\/strong><\/p>\n<p class=\"intro-text\">Create a new page in <em>Grid Layout<\/em>, then format this so that you have six rows in the top left quadrant of the grid.<\/p>\n<div id=\"attachment_6679\" style=\"width: 329px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6679\" class=\"wp-image-6679 size-medium\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/Set-Up-Grid-with-Rows-319x300.png\" alt=\"\" width=\"319\" height=\"300\" \/><p id=\"caption-attachment-6679\" class=\"wp-caption-text\">Format the Grid<\/p><\/div>\n<p class=\"intro-text\">1. Click <strong>New Page<\/strong> on the Explorer Ribbon <strong>Home<\/strong> tab, and select <strong>Grid Layout<\/strong>.<\/p>\n<p class=\"intro-text\">2. Drag a new grid onto the top left quadrant, and add five rows. See how to <a title=\"Grid Layout\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/grid-layout\/\">add and format a grid<\/a>.<\/p>\n<p class=\"intro-text\">3. If you like, you can adjust the row heights and add column and row spacing.<\/p>\n<p class=\"intro-text\"><strong>Step 2. Add a <em>Sample Method<\/em> Combo Box with a Default Value<\/strong><\/p>\n<p class=\"intro-text\">We're adding this combo box to demonstrate how you would pass a variable as a hyperlink parameter, with <em>Variable Mapping<\/em>.<\/p>\n<div id=\"attachment_6462\" style=\"width: 193px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6462\" class=\"wp-image-6462 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/SampleMethodDropDown.png\" alt=\"\" width=\"183\" height=\"189\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/SampleMethodDropDown.png 183w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/SampleMethodDropDown-145x150.png 145w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/SampleMethodDropDown-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/SampleMethodDropDown-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/SampleMethodDropDown-46x48.png 46w\" sizes=\"auto, (max-width: 183px) 100vw, 183px\" \/><p id=\"caption-attachment-6462\" class=\"wp-caption-text\">Sample Method Combo Box, with Text Label<\/p><\/div>\n<p class=\"intro-text\">1. Drag a <a title=\"Text Label\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/text-label\/\">Text Label<\/a> into the top row, and type 'Sample Interval' in the <em>Content<\/em> edit box.<\/p>\n<p class=\"intro-text\">2. Drag a <a title=\"Combo Box\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/combo-box\/\">Combo Box<\/a> into the middle row, and configure it as follows:<\/p>\n<table>\n<tbody>\n<tr>\n<td width=\"380\">\n<table>\n<tbody>\n<tr>\n<td width=\"150\"><strong>Option Values<\/strong><\/td>\n<td width=\"50\">(List)<\/td>\n<td width=\"180\">average<\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<td>&nbsp;<\/td>\n<td>\n<table>\n<tbody>\n<tr>\n<td>linearinterpolate<\/td>\n<\/tr>\n<tr>\n<td>lastknownvalue<\/td>\n<\/tr>\n<tr>\n<td>raw<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<tr>\n<td><strong>Option Names<\/strong><\/td>\n<td>(List)<\/td>\n<td>Average<\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<td>&nbsp;<\/td>\n<td>\n<table>\n<tbody>\n<tr>\n<td>Linear interpolate<\/td>\n<\/tr>\n<tr>\n<td>Last known value<\/td>\n<\/tr>\n<tr>\n<td>Raw<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<tr>\n<td><strong>Selected Option<\/strong><\/td>\n<td>&nbsp;<\/td>\n<td>selectedMethod<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<td width=\"200\">\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-6541 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/ComboBox3.png\" alt=\"\" width=\"354\" height=\"467\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/ComboBox3.png 354w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/ComboBox3-114x150.png 114w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/ComboBox3-18x24.png 18w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/ComboBox3-27x36.png 27w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/ComboBox3-36x48.png 36w\" sizes=\"auto, (max-width: 354px) 100vw, 354px\" \/><\/p>\n<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\">2. Now add a <a title=\"Default Value\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/default-value\/\"> Default Value<\/a> for the<em> selectedMethod<\/em>:<\/p>\n<ul class=\"intro-text\">\n<li>selectedMethod<\/li>\n<li>average<\/li>\n<\/ul>\n<div id=\"attachment_6532\" style=\"width: 413px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6532\" class=\"wp-image-6532 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/defaultValues.png\" alt=\"\" width=\"403\" height=\"263\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/defaultValues.png 403w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/defaultValues-150x98.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/defaultValues-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/defaultValues-36x23.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/defaultValues-48x31.png 48w\" sizes=\"auto, (max-width: 403px) 100vw, 403px\" \/><p id=\"caption-attachment-6532\" class=\"wp-caption-text\">Add Default Value<\/p><\/div>\n<p class=\"intro-text\">This is how your grid cells should be looking (note how the default value for selectedMethod, <em>average<\/em> is already selected, displaying <em>Average<\/em>):<\/p>\n<div id=\"attachment_6522\" style=\"width: 290px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6522\" class=\"wp-image-6522\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/LabelAndComboBox.png\" alt=\"\" width=\"280\" height=\"210\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/LabelAndComboBox.png 387w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/LabelAndComboBox-150x112.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/LabelAndComboBox-24x18.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/LabelAndComboBox-36x27.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/LabelAndComboBox-48x36.png 48w\" sizes=\"auto, (max-width: 280px) 100vw, 280px\" \/><p id=\"caption-attachment-6522\" class=\"wp-caption-text\">Label and Combo Box<\/p><\/div>\n<p class=\"intro-text\">Now that you have the page set up, you can add a hyperlink. There are four different types, each covered in a separate tutorial.<\/p>\n<ul class=\"intro-text\">\n<li><span class=\"removed_link\" title=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/hyperlink-4-3-2\/#Tutorial_1_Adding_a_Hyperlink_to_Open_a_Trend\">Tutorial 1: Adding a Hyperlink to Open a Trend<\/span><\/li>\n<li><span class=\"removed_link\" title=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/hyperlink-4-3-2\/#Tutorial_2_Adding_a_Hyperlink_to_Open_a_New_Trend\">Tutorial 2: Adding a Hyperlink to Open a New Trend<\/span><\/li>\n<li><span class=\"removed_link\" title=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/hyperlink-4-3-2\/#Tutorial_3_Adding_a_Hyperlink_to_Open_an_Explorer_Page\">Tutorial 3: Adding a Hyperlink to Open an Explorer Page<\/span><\/li>\n<li><span class=\"removed_link\" title=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/hyperlink-4-3-2\/#Tutorial_4_Adding_a_Hyperlink_to_Open_a_URL\">Tutorial 4: Adding a Hyperlink to Open a URL<\/span><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<hr \/>\n<h2 class=\"page-subheading\">Tutorial 1: Adding a Hyperlink to Open a Trend<\/h2>\n<p class=\"left-bar\">Related: <a title=\"Creating a Trend\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/trends\/creating-a-trend\/\">Creating a Trend<\/a>, <a title=\"Link to a Trend via a URL\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/trends\/link-to-a-trend-via-a-url\/\">Link to a Trend via a URL<\/a><\/p>\n<p class=\"intro-text\">In this tutorial, we're going to create a hyperlink to an existing trend, with a variable <a title=\"Data Transformation and Sample Methods\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-server\/primers\/transforms\/\">Sample Method<\/a> and a fixed <a title=\"Data Transformation and Sample Methods\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-server\/primers\/transforms\/\">Sample Interval<\/a> of <em>1 minute<\/em>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-6626 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/StartTut11.png\" alt=\"\" width=\"198\" height=\"52\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/StartTut11.png 198w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/StartTut11-150x39.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/StartTut11-24x6.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/StartTut11-36x9.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/StartTut11-48x13.png 48w\" sizes=\"auto, (max-width: 198px) 100vw, 198px\" \/><\/p>\n<p class=\"intro-text\">Before you start this exercise, make sure you have a trend to open.<\/p>\n<ul class=\"intro-text\">\n<li>If you have access to the training environment, you should be able to use the <em>Tubing Head Pressure<\/em> trend, in the <em>Tutorials<\/em> workspace. You can <a title=\"Search for a Trend\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/trends\/creating-a-trend\/#Step_8_Search_for_a_Trend\">search for the trend<\/a>, to make sure you have it.<\/li>\n<li>Otherwise, <a title=\"Creating a Trend\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/trends\/creating-a-trend\/\">add a new trend<\/a>, and save it.<\/li>\n<\/ul>\n<p class=\"intro-text\">Or, just skip to <span class=\"removed_link\" title=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/hyperlink-4-3-2\/#Tutorial_2_Adding_a_Hyperlink_to_Open_a_New_Trend\">Tutorial 2<\/span>, where you get to open a new, blank trend.<\/p>\n<p class=\"left-bar\">Ensure you have a page ready, as described in the <span class=\"removed_link\" title=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/hyperlink-4-3-2\/#Tutorial_Setup_Preparing_an_Explorer_Page_for_Tutorials\">tutorial setup<\/span> section, above.<\/p>\n<p class=\"intro-text\"><strong>Step 1. Add and Configure a Hyperlink<\/strong><\/p>\n<p class=\"intro-text\">1. Drag a hyperlink component onto the third row.<\/p>\n<div id=\"attachment_6535\" style=\"width: 430px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6535\" class=\"wp-image-6535\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/Drag-a-Hyperlink.png\" alt=\"\" width=\"420\" height=\"288\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/Drag-a-Hyperlink.png 653w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/Drag-a-Hyperlink-150x103.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/Drag-a-Hyperlink-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/Drag-a-Hyperlink-36x25.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/Drag-a-Hyperlink-48x33.png 48w\" sizes=\"auto, (max-width: 420px) 100vw, 420px\" \/><p id=\"caption-attachment-6535\" class=\"wp-caption-text\">Adding a Hyperlink Component<\/p><\/div>\n<p class=\"intro-text\">2. Now configure the hyperlink:<\/p>\n<table>\n<tbody>\n<tr>\n<td width=\"480\">\n<table>\n<tbody>\n<tr>\n<td width=\"150\"><strong>Content<\/strong><\/td>\n<td width=\"330\">Type <em>Open Tubing Head Pressure Trend <\/em>in the <strong>Content<\/strong> edit box. (Type in a more suitable name, if you are opening a different trend).<\/td>\n<\/tr>\n<tr>\n<td><strong>Type<\/strong><\/td>\n<td>Select <em>Open Trend<\/em> from the <strong>Type<\/strong> drop-down list.<\/td>\n<\/tr>\n<tr>\n<td><strong>Workspace Name<\/strong><\/td>\n<td>Type <em>Tutorials<\/em> in the <strong>Workspace Name<\/strong>. (Or type in the workspace name where your own trend is saved.)<\/td>\n<\/tr>\n<tr>\n<td><strong>Trend Name<\/strong><\/td>\n<td>Type <em>Tubing Head Pressure <\/em>in the <strong>Trend Name<\/strong>. (Or type in the name of your own trend.)<\/td>\n<\/tr>\n<tr>\n<td><strong>Add<\/strong><\/td>\n<td>Click <strong>Add<\/strong> twice, to add two <em>Variable Mappings<\/em>.<\/td>\n<\/tr>\n<tr>\n<td><strong>Variable Mapping<\/strong> <em> (first)<\/em><\/td>\n<td>Select <em>Variable<\/em> from the drop-down list, and <em>selectedMethod<\/em> from the <strong>Source<\/strong> drop-down list. Type <em>sampleMethod<\/em> in the <strong>Target<\/strong> edit box.<\/td>\n<\/tr>\n<tr>\n<td><strong>Variable Mapping<\/strong> <em> (second)<\/em><\/td>\n<td>Select <em>Number<\/em> from the drop-down list, and type <em>60<\/em> in the <strong>Source<\/strong> edit box. Type <em>sampleInterval<\/em> in the <strong>Target<\/strong> edit box. This will pass a fixed 60 second value to the source <em>sampleInterval<\/em>.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<td width=\"300\">\n<div id=\"attachment_6548\" style=\"width: 430px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6548\" class=\"wp-image-6548\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/ConfigureHyperlink.png\" alt=\"\" width=\"420\" height=\"443\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/ConfigureHyperlink.png 598w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/ConfigureHyperlink-142x150.png 142w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/ConfigureHyperlink-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/ConfigureHyperlink-34x36.png 34w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/ConfigureHyperlink-45x48.png 45w\" sizes=\"auto, (max-width: 420px) 100vw, 420px\" \/><p id=\"caption-attachment-6548\" class=\"wp-caption-text\">Configure the Hyperlink<\/p><\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"note\"><strong>A note on <em>Variable Mapping<\/em> for Trends:<\/strong> Trends use specific default values, as outlined in the<a title=\"URL Formats\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/trends\/link-to-a-trend-via-a-url\/#URL_Formats\"> URL Formats <\/a> section of how to <em>Link to a Trend via a URL<\/em>. For example, Trends have a parameter called <em>sampleInterval<\/em>, which uses seconds to control the <a title=\"Data Transformation and Sample Methods\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-server\/primers\/transforms\/\">sample interval<\/a> in which trend data is collected.<\/p>\n<p class=\"intro-text\">This is how your grid cells should be looking now:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-6605 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/NewPageLayout3.png\" alt=\"\" width=\"384\" height=\"277\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/NewPageLayout3.png 384w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/NewPageLayout3-150x108.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/NewPageLayout3-24x17.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/NewPageLayout3-36x26.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/NewPageLayout3-48x35.png 48w\" sizes=\"auto, (max-width: 384px) 100vw, 384px\" \/><\/p>\n<p class=\"intro-text\"><strong>Step 2. Test your Hyperlink<\/strong><\/p>\n<p class=\"intro-text\">Now that your hyperlink is set up, click the Preview <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/preview.png\" rel=\"lightbox-1\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2896\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/preview.png\" alt=\"preview\" width=\"13\" height=\"14\" \/><\/a> button on the Studio toolbar to see what your page will look like in run-time.<\/p>\n<p class=\"intro-text\">1. Select <em>Linear interpolate<\/em> from the <em>Sample Method<\/em> combo box. (This is setting the <em>sampleMethod<\/em> variable.)<\/p>\n<p class=\"intro-text\">2. Now click the hyperlink.<\/p>\n<div id=\"attachment_6586\" style=\"width: 410px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6586\" class=\"wp-image-6586 size-medium\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/TestHyperlink-400x220.png\" alt=\"\" width=\"400\" height=\"220\" \/><p id=\"caption-attachment-6586\" class=\"wp-caption-text\">Test Hyperlink \"Open Tubing Head Pressure Trend\"<\/p><\/div>\n<p class=\"intro-text\">The <em>Tubing Head Pressure<\/em> trend opens. Note how the two <strong>Variable Mapping<\/strong> values have set the default values for <em>Sample Method<\/em> and <em>Sample Interval<\/em> on the trend.<\/p>\n<div id=\"attachment_6587\" style=\"width: 1012px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/TrendOpens.png\" rel=\"lightbox-2\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6587\" class=\"wp-image-6587\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/TrendOpens-800x397.png\" alt=\"\" width=\"1002\" height=\"497\" \/><\/a><p id=\"caption-attachment-6587\" class=\"wp-caption-text\">The Hyperlink opens this Trend<\/p><\/div>\n<p class=\"intro-text\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1348\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/save.png\" alt=\"save\" width=\"48\" height=\"53\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/save.png 48w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/save-22x24.png 22w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/save-33x36.png 33w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/save-43x48.png 43w\" sizes=\"auto, (max-width: 48px) 100vw, 48px\" \/> Don't forget 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>!<\/p>\n<p>&nbsp;<\/p>\n<hr \/>\n<h2 class=\"page-subheading\">Tutorial 2: Adding a Hyperlink to Open a New Trend<\/h2>\n<p class=\"left-bar\">Related: <a title=\"Creating a Trend\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/trends\/creating-a-trend\/\">Creating a Trend<\/a>, <a title=\"Link to a Trend via a URL\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/trends\/link-to-a-trend-via-a-url\/\">Link to a Trend via a URL<\/a><\/p>\n<p class=\"intro-text\">In this tutorial, we're going to create a hyperlink to a new trend, with a variable <a title=\"Data Transformation and Sample Methods\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-server\/primers\/transforms\/\">Sample Method<\/a> and a fixed <em>Y Scale Type<\/em> of <em>Log<\/em>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-6689 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/OpenANewTrend.png\" alt=\"\" width=\"174\" height=\"54\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/OpenANewTrend.png 174w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/OpenANewTrend-150x47.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/OpenANewTrend-24x7.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/OpenANewTrend-36x11.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/OpenANewTrend-48x15.png 48w\" sizes=\"auto, (max-width: 174px) 100vw, 174px\" \/><\/p>\n<p class=\"left-bar\">Ensure you have a page ready, as described in the <span class=\"removed_link\" title=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/hyperlink-4-3-2\/#Tutorial_Setup_Preparing_an_Explorer_Page_for_Tutorials\">tutorial setup<\/span> section, above.<\/p>\n<p class=\"intro-text\"><strong>Step 1. Add and Configure a Hyperlink<\/strong><\/p>\n<p class=\"intro-text\">1. Drag a hyperlink component onto the fourth row of your grid.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/NewHyperlinkTut2..png\" rel=\"lightbox-3\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-6702 size-medium\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/NewHyperlinkTut2.-370x300.png\" alt=\"\" width=\"370\" height=\"300\" \/><\/a><\/p>\n<p class=\"intro-text\">2. Now configure the hyperlink:<\/p>\n<table>\n<tbody>\n<tr>\n<td width=\"480\">\n<table>\n<tbody>\n<tr>\n<td width=\"150\"><strong>Content<\/strong><\/td>\n<td width=\"330\">Type <em>Open a New Trend <\/em>in the <strong>Content<\/strong> edit box.<\/td>\n<\/tr>\n<tr>\n<td><strong>Type<\/strong><\/td>\n<td>Select <em>New Trend<\/em> from the <strong>Type<\/strong> drop-down list.<\/td>\n<\/tr>\n<tr>\n<td><strong>Add<\/strong><\/td>\n<td>Click <strong>Add<\/strong> twice, to add two <em>Variable Mappings<\/em>.<\/td>\n<\/tr>\n<tr>\n<td><strong>Variable Mapping<\/strong> <em> (first)<\/em><\/td>\n<td>Select <em>Variable<\/em> from the drop-down list, and <em>selectedMethod<\/em> from the <strong>Source<\/strong> drop-down list. Type <em>sampleMethod<\/em> in the <strong>Target<\/strong> edit box.<\/td>\n<\/tr>\n<tr>\n<td><strong>Variable Mapping<\/strong> <em> (second)<\/em><\/td>\n<td>Select <em>Text<\/em> from the drop-down list, and type <em>Log<\/em> in the <strong>Source<\/strong> edit box. Type <em>scaleType<\/em> in the <strong>Target<\/strong> edit box.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<td width=\"300\">\n<div id=\"attachment_6770\" style=\"width: 430px\" class=\"wp-caption alignleft\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6770\" class=\"wp-image-6770\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/ConfigureHyperlinkTut2.png\" alt=\"\" width=\"420\" height=\"383\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/ConfigureHyperlinkTut2.png 630w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/ConfigureHyperlinkTut2-150x137.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/ConfigureHyperlinkTut2-24x22.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/ConfigureHyperlinkTut2-36x33.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/ConfigureHyperlinkTut2-48x44.png 48w\" sizes=\"auto, (max-width: 420px) 100vw, 420px\" \/><p id=\"caption-attachment-6770\" class=\"wp-caption-text\">Configure the Hyperlink<\/p><\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"note\"><strong>A note on <em>Variable Mapping<\/em> for Trends:<\/strong> Trends use specific default values, as outlined in the<a title=\"URL Formats\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/trends\/link-to-a-trend-via-a-url\/#URL_Formats\"> URL Formats <\/a> section of how to <em>Link to a Trend via a URL<\/em>. For example, Trends have a parameter called <em>sampleInterval<\/em>, which uses seconds to control the <a title=\"Data Transformation and Sample Methods\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-server\/primers\/transforms\/\">sample interval<\/a> in which trend data is collected.<\/p>\n<p class=\"intro-text\">This is how your grid cells should be looking now:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-6707 size-medium\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/ConfiguredTrendTut2-306x300.png\" alt=\"\" width=\"306\" height=\"300\" \/><\/p>\n<p class=\"intro-text\"><strong>Step 2. Test your Hyperlink<\/strong><\/p>\n<p class=\"intro-text\">Now that your hyperlink is set up, click the Preview <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2896 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/preview.png\" alt=\"preview\" width=\"13\" height=\"14\" \/> button on the Studio toolbar to see what your page will look like in run-time.<\/p>\n<p class=\"intro-text\">1. Select <em>Last known value<\/em> from the <em>Sample Method<\/em> combo box. (This is setting the <em>sampleMethod<\/em> variable.)<\/p>\n<p class=\"intro-text\">2. Now click the hyperlink.<\/p>\n<div id=\"attachment_6715\" style=\"width: 410px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/TestTutorial2.png\" rel=\"lightbox-4\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6715\" class=\"wp-image-6715 size-medium\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/TestTutorial2-400x220.png\" alt=\"\" width=\"400\" height=\"220\" \/><\/a><p id=\"caption-attachment-6715\" class=\"wp-caption-text\">Test Hyperlink \"Open a New Trend\"<\/p><\/div>\n<p class=\"intro-text\">A blank trend opens. Note how the two <strong>Variable Mapping<\/strong> values have set the default values for <em>Sample Method<\/em> and <em>Y Scale Type<\/em> on the trend.<\/p>\n<div id=\"attachment_6723\" style=\"width: 810px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/NewBlankTrend.png\" rel=\"lightbox-5\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6723\" class=\"wp-image-6723 size-large\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/NewBlankTrend-800x439.png\" alt=\"\" width=\"800\" height=\"439\" \/><\/a><p id=\"caption-attachment-6723\" class=\"wp-caption-text\">A New Blank Trend Opens, in a New Tab<\/p><\/div>\n<p class=\"intro-text\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1348\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/save.png\" alt=\"save\" width=\"48\" height=\"53\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/save.png 48w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/save-22x24.png 22w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/save-33x36.png 33w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/save-43x48.png 43w\" sizes=\"auto, (max-width: 48px) 100vw, 48px\" \/> Don't forget 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>!<\/p>\n<p>&nbsp;<\/p>\n<hr \/>\n<h2 class=\"page-subheading\">Tutorial 3: Adding a Hyperlink to Open an Explorer Page<\/h2>\n<p class=\"intro-text\">In this tutorial, we're going to create a hyperlink to an Explorer Page.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-6688 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/OpenChartPage.png\" alt=\"\" width=\"193\" height=\"55\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/OpenChartPage.png 193w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/OpenChartPage-150x43.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/OpenChartPage-24x7.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/OpenChartPage-36x10.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/OpenChartPage-48x14.png 48w\" sizes=\"auto, (max-width: 193px) 100vw, 193px\" \/><\/p>\n<p class=\"intro-text\">Before you start this exercise, make sure you have a page to open.<\/p>\n<p class=\"intro-text\">If you have access to the training environment, you should be able to use the <em>Chart Page<\/em> page, in the <em>Tutorials<\/em> workspace.<\/p>\n<p class=\"left-bar\">Ensure you have a page ready, as described in the <span class=\"removed_link\" title=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/hyperlink-4-3-2\/#Tutorial_Setup_Preparing_an_Explorer_Page_for_Tutorials\">tutorial setup<\/span> section, above.<\/p>\n<p class=\"intro-text\"><strong>Step 1. Add and Configure a Hyperlink<\/strong><\/p>\n<p class=\"intro-text\">1. Drag a hyperlink component onto the fifth row of your grid.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/NewHyperlinkTut3.png\" rel=\"lightbox-6\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-6701 size-medium alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/NewHyperlinkTut3-400x266.png\" alt=\"\" width=\"400\" height=\"266\" \/><\/a><\/p>\n<p class=\"intro-text\">2. Now configure the hyperlink:<\/p>\n<table>\n<tbody>\n<tr>\n<td width=\"480\">\n<table>\n<tbody>\n<tr>\n<td width=\"150\"><strong>Content<\/strong><\/td>\n<td width=\"330\">Type <em>Open Chart Page <\/em>in the <strong>Content<\/strong> edit box.<\/td>\n<\/tr>\n<tr>\n<td><strong>Type<\/strong><\/td>\n<td>Select <em>Open Page<\/em> from the <strong>Type<\/strong> drop-down list.<\/td>\n<\/tr>\n<tr>\n<td><strong>Workspace Name<\/strong><\/td>\n<td>Type <em>Tutorials<\/em> in the <strong>Workspace Name<\/strong>.<\/td>\n<\/tr>\n<tr>\n<td><strong>Page Name<\/strong><\/td>\n<td>Type <em>Chart Page <\/em>in the <strong>Page Name<\/strong>.<\/td>\n<\/tr>\n<tr>\n<td><strong>Add<\/strong><\/td>\n<td>Click <strong>Add<\/strong>, to add a <em>Variable Mapping<\/em>.<\/td>\n<\/tr>\n<tr>\n<td><strong>Variable Mapping<\/strong> <em> (first)<\/em><\/td>\n<td>Select <em>Text<\/em> from the drop-down list, and type <em>Oil Production<\/em> in the <strong>Source<\/strong> edit box. Type <em>selectedOption<\/em> in the <strong>Target<\/strong> edit box.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<td width=\"300\">\n<div id=\"attachment_6775\" style=\"width: 430px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6775\" class=\"wp-image-6775\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/ConfigureHyperlinkTut3b.png\" alt=\"\" width=\"420\" height=\"397\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/ConfigureHyperlinkTut3b.png 630w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/ConfigureHyperlinkTut3b-150x142.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/ConfigureHyperlinkTut3b-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/ConfigureHyperlinkTut3b-36x34.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/ConfigureHyperlinkTut3b-48x45.png 48w\" sizes=\"auto, (max-width: 420px) 100vw, 420px\" \/><p id=\"caption-attachment-6775\" class=\"wp-caption-text\">Configure the Hyperlink<\/p><\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\">This is how your grid cells should be looking now:<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/ConfiguredTrendTut3.png\" rel=\"lightbox-7\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-6706 size-medium alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/ConfiguredTrendTut3-300x300.png\" alt=\"\" width=\"300\" height=\"300\" \/><\/a><\/p>\n<p class=\"intro-text\"><strong>Step 2. Test your Hyperlink<\/strong><\/p>\n<p class=\"intro-text\">Now that your hyperlink is set up, click the Preview <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2896 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/preview.png\" alt=\"preview\" width=\"13\" height=\"14\" \/> button on the Studio toolbar to see what your page will look like in run-time.<\/p>\n<p class=\"instruct\">Click the hyperlink.<\/p>\n<div id=\"attachment_6714\" style=\"width: 410px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6714\" class=\"wp-image-6714 size-medium\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/TestTutorial3-400x277.png\" alt=\"\" width=\"400\" height=\"277\" \/><p id=\"caption-attachment-6714\" class=\"wp-caption-text\">Test Hyperlink \"Open Chart Page\"<\/p><\/div>\n<p class=\"intro-text\">The <em>Chart Page<\/em> opens. Note how the <strong>Variable Mapping<\/strong> value (Oil Production) has set the default values for the <em>Sample Method<\/em> and <em>Y Scale Type<\/em> on the trend.<\/p>\n<div id=\"attachment_6745\" style=\"width: 810px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/ChartPage.png\" rel=\"lightbox-8\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6745\" class=\"wp-image-6745 size-large\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/ChartPage-800x443.png\" alt=\"\" width=\"800\" height=\"443\" \/><\/a><p id=\"caption-attachment-6745\" class=\"wp-caption-text\">Chart Page<\/p><\/div>\n<p>&nbsp;<\/p>\n<hr \/>\n<h2 class=\"page-subheading\">Tutorial 4: Adding a Hyperlink to Open a URL<\/h2>\n<p class=\"intro-text\">In this tutorial, we're going to create a hyperlink to an external URL.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-6687 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/OpenURL.png\" alt=\"\" width=\"190\" height=\"52\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/OpenURL.png 190w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/OpenURL-150x41.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/OpenURL-24x7.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/OpenURL-36x10.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/OpenURL-48x13.png 48w\" sizes=\"auto, (max-width: 190px) 100vw, 190px\" \/><\/p>\n<p class=\"intro-text\">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 <em>Target<\/em> of the Variable Mappings.<\/p>\n<p class=\"left-bar\">Ensure you have a page ready, as described in the <span class=\"removed_link\" title=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/hyperlink-4-3-2\/#Tutorial_Setup_Preparing_an_Explorer_Page_for_Tutorials\">tutorial setup<\/span> section, above.<\/p>\n<p class=\"intro-text\"><strong>Step 1. Add and Configure a Hyperlink<\/strong><\/p>\n<p class=\"intro-text\">1. Drag a hyperlink component onto the sixth row of your grid.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/NewHyperlinkTut4.png\" rel=\"lightbox-9\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-6700 size-medium alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/NewHyperlinkTut4-400x271.png\" alt=\"\" width=\"400\" height=\"271\" \/><\/a><\/p>\n<p class=\"intro-text\">2. Now configure the hyperlink:<\/p>\n<table>\n<tbody>\n<tr>\n<td width=\"480\">\n<table>\n<tbody>\n<tr>\n<td width=\"150\"><strong>Content<\/strong><\/td>\n<td width=\"330\">Type <em>Open URL to Australia Weather <\/em>in the <strong>Content<\/strong> edit box.<\/td>\n<\/tr>\n<tr>\n<td><strong>Type<\/strong><\/td>\n<td>Select <em>Open URL<\/em> from the <strong>Type<\/strong> drop-down list.<\/td>\n<\/tr>\n<tr>\n<td><strong>URL<\/strong><\/td>\n<td>Type <em>https:\/\/weather.yahoo.com.au\/forecast<\/em> in the <strong>URL<\/strong> text box.<\/td>\n<\/tr>\n<tr>\n<td><strong>Header<\/strong><\/td>\n<td>Type <em>Australia Weather <\/em>in the <strong>Header<\/strong> text box. Note: if you leave out the Header, Explorer will open this URL with a header of \"New Page\".<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<td width=\"300\">\n<div id=\"attachment_6778\" style=\"width: 430px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6778\" class=\"wp-image-6778\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/ConfigureHyperlinkTut4.png\" alt=\"\" width=\"420\" height=\"350\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/ConfigureHyperlinkTut4.png 595w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/ConfigureHyperlinkTut4-150x125.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/ConfigureHyperlinkTut4-24x20.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/ConfigureHyperlinkTut4-36x30.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/ConfigureHyperlinkTut4-48x40.png 48w\" sizes=\"auto, (max-width: 420px) 100vw, 420px\" \/><p id=\"caption-attachment-6778\" class=\"wp-caption-text\">Configure the Hyperlink<\/p><\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\">This is how your grid cells should be looking now:<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/ConfiguredTrendTut4.png\" rel=\"lightbox-10\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-6705 size-medium alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/ConfiguredTrendTut4-298x300.png\" alt=\"\" width=\"298\" height=\"300\" \/><\/a><\/p>\n<p class=\"intro-text\"><strong>Step 2. Test your Hyperlink<\/strong><\/p>\n<p class=\"intro-text\">Now that your hyperlink is set up, click the Preview <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2896 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/preview.png\" alt=\"preview\" width=\"13\" height=\"14\" \/> button on the Studio toolbar to see what your page will look like in run-time.<\/p>\n<p class=\"instruct\">Click the hyperlink.<\/p>\n<div id=\"attachment_6713\" style=\"width: 503px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/TestTutorial4.png\" rel=\"lightbox-11\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6713\" class=\"wp-image-6713 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/TestTutorial4.png\" alt=\"\" width=\"493\" height=\"438\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/TestTutorial4.png 493w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/TestTutorial4-150x133.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/TestTutorial4-24x21.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/TestTutorial4-36x32.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/TestTutorial4-48x43.png 48w\" sizes=\"auto, (max-width: 493px) 100vw, 493px\" \/><\/a><p id=\"caption-attachment-6713\" class=\"wp-caption-text\">Test Hyperlink \"Open URL for Australia Weather\"<\/p><\/div>\n<p class=\"intro-text\">The <em>Australia Weather<\/em> opens in a new tab within P2 Explorer. Note how this page is named <em>Australia Weather<\/em>, using the <strong>Header<\/strong> property.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/WeatherTab1.png\" rel=\"lightbox-12\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-6973 size-large\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/WeatherTab1-800x321.png\" alt=\"\" width=\"800\" height=\"321\" \/><\/a><\/p>\n<p class=\"intro-text\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1348\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/save.png\" alt=\"save\" width=\"48\" height=\"53\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/save.png 48w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/save-22x24.png 22w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/save-33x36.png 33w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/save-43x48.png 43w\" sizes=\"auto, (max-width: 48px) 100vw, 48px\" \/> Don't forget 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>!<\/p>\n<p>&nbsp;<\/p>\n<hr \/>\n<h2 class=\"page-subheading\">Comprehensive Reference<\/h2>\n<p class=\"intro-text\">This section describes the properties of the Hyperlink component.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-6968 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/HyperlinkReferences.png\" alt=\"\" width=\"393\" height=\"692\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/HyperlinkReferences.png 393w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/HyperlinkReferences-85x150.png 85w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/HyperlinkReferences-14x24.png 14w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/HyperlinkReferences-20x36.png 20w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/HyperlinkReferences-27x48.png 27w\" sizes=\"auto, (max-width: 393px) 100vw, 393px\" \/><\/p>\n<table>\n<tbody>\n<tr>\n<td width=\"120\"><strong>Title<\/strong>:<\/td>\n<td>Select the check box if this label is going to be a page title. This will style the text to a font size of 20px.<\/td>\n<\/tr>\n<tr>\n<td><strong>Content<\/strong>:<\/td>\n<td>The text you want to display in the hyperlink. This styles the text to a font size of 11px (or 20px if this is a title).<\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<td>As soon as the hyperlink points to a valid address, it has a blue font.<\/td>\n<\/tr>\n<tr>\n<td><strong>Add Variable<\/strong>:<\/td>\n<td>Click <strong>Add Variable<\/strong> if you want to add a variable to the content. The <a title=\"Text Label\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/text-label\/\"> text label <\/a> article explains how to do this.<\/td>\n<\/tr>\n<tr>\n<td><strong>Action Editor<\/strong>:<\/td>\n<td>This is where you'll define the hyperlink, along with optional parameters.<\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<td>\n<table>\n<tbody>\n<tr>\n<td width=\"90\"><em>Type<\/em><\/td>\n<td width=\"800\">Select the type of hyperlink you want:<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<td><strong>Open Page<\/strong> Specify a <em>Workspace Name, Page Name<\/em>.<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<td><strong>Open Trend<\/strong> Specify a <em>Workspace Name, Trend Name<\/em>.<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<td><strong>New Trend<\/strong> No further details are required; Explorer opens a new, blank trend when a user clicks this type of hyperlink.<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<td><strong>Open URL<\/strong> Specify the URL. You can also specify a Header. For an address beginning with <em>https<\/em> the URL opens embedded in your current Explorer window; otherwise, the URL opens in a separate tab in your web browser.<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr>\n<td><em>New Tab<\/em><\/td>\n<td>Select the checkbox to open the trend, page or URL in a new tab in Explorer. De-select the checkbox to open the trend, page, or URL in the current Explorer tab.<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr>\n<td><em>Workspace Name\/URL<\/em><\/td>\n<td>For <em>Open Page<\/em> and <em>Open Trend<\/em> 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 <em>URL<\/em> hyperlink, specify a URL address; if the address starts with <em>http<\/em>, then it will open in a new browser tab; if the address starts with <em>https<\/em> the URL will open in Explorer.<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr>\n<td><em>Page Name\/Trend Name\/Header<\/em><\/td>\n<td>For an <em>Open Page<\/em>\/ <em>Open Trend<\/em> hyperlink, specify which page\/trend to open. For a <em>URL<\/em> hyperlink, optionally specify a header.<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr>\n<td><em>Variable Mapping<\/em><\/td>\n<td>Use Variable Mapping to pass variables from the current Explorer page to the page, trend or URL you are linking to.<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<td>\n<table>\n<tbody>\n<tr>\n<td width=\"50\"><em>Add<\/em><\/td>\n<td>Click <strong>Add<\/strong> to add a new variable mapping.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<td>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. We'll go over some examples in the tutorials.<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<td>\n<table>\n<tbody>\n<tr>\n<td width=\"50\"><em>Source<\/em><\/td>\n<td>This can be a variable (such as a <a title=\"Combo Box\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/combo-box\/\">Combo Box<\/a> selection, for example), or you can type in string or number (select <em>Variable, String, Number<\/em> as appropriate, from the drop-down list to the left of <em>Source<\/em>).<\/td>\n<\/tr>\n<tr>\n<td><em>Target<\/em><\/td>\n<td>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).<\/td>\n<\/tr>\n<tr>\n<td><em>Remove<\/em><\/td>\n<td>Click <strong>Remove<\/strong> to remove the variable mapping.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hyperlinks provide a useful way to direct the navigational flow between various Explorer pages. They are also useful for opening trends, creating new trends, and opening external sites. This article shows how to configure hyperlinks, and applies to versions 4.3.2 and earlier 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\/hyperlink\/hyperlink-4-3-2\/\">Read more<i class=\"crycon-right-dir\"><\/i><\/a><\/p>\n","protected":false},"author":8,"featured_media":6412,"parent":41639,"menu_order":5,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":"","_members_access_role":[],"_members_access_error":""},"categories":[11],"tags":[339],"class_list":["post-6410","page","type-page","status-publish","has-post-thumbnail","hentry","category-tutorial","tag-hyperlink","Product-ex"],"_links":{"self":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/6410","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\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/comments?post=6410"}],"version-history":[{"count":0,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/6410\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/41639"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media\/6412"}],"wp:attachment":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media?parent=6410"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/categories?post=6410"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/tags?post=6410"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}