{"id":31609,"date":"2017-12-07T11:06:08","date_gmt":"2017-12-07T03:06:08","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=31609"},"modified":"2018-10-03T14:26:36","modified_gmt":"2018-10-03T06:26:36","slug":"hyperlink-4-5-2","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/hyperlink\/hyperlink-4-5-2\/","title":{"rendered":"Hyperlink (4.5.2)"},"content":{"rendered":"\n<p class=\"left-bar\">This article applies to versions 4.5.2-4.5.3 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=\"overview\">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\/2017\/09\/Hyperlink-overview-3.png\" rel=\"lightbox-0\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-31123 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Hyperlink-overview-3.png\" alt=\"\" width=\"567\" height=\"769\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Hyperlink-overview-3.png 567w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Hyperlink-overview-3-111x150.png 111w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Hyperlink-overview-3-18x24.png 18w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Hyperlink-overview-3-27x36.png 27w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Hyperlink-overview-3-35x48.png 35w\" sizes=\"auto, (max-width: 567px) 100vw, 567px\" \/><\/a><\/p>\n<p class=\"note\">For a full description of the hyperlink properties, refer to the <a href=\"#Comprehensive_Reference\">comprehensive reference<\/a> at the end of this article.<\/p>\n<p class=\"left-bar\">Related: Adding a <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/styles\/#Hyperlink\">Hyperlink style<\/a>, <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/link-action-and-variable-mapping\/\">Link Action and Variable Mapping<\/a><\/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\">Step 1. 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\">Step 2. 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\/Page\/Trend\/URL\/Heading).<\/p>\n<p class=\"no-toc-heading\">Step 3. Tab Type: Where to Open<\/p>\n<p class=\"instruct\">For Explorer displays (trends and pages) the options are: <strong>New Explorer Tab<\/strong> and <strong>Same Explorer Tab<\/strong>. For URLs, the options are <strong>New Explorer Tab, Same Explorer Tab<\/strong> and <strong>New Browser Tab<\/strong>.<\/p>\n<p class=\"note\"><strong>Note, for URLs<\/strong>: Where Explorer is hosted on an unsecured site (http), you can open a secured (https) or unsecured (http) URL in an Explorer tab. If Explorer is hosted on a secured site (https), we recommend you open an unsecured (http) URL in a new browser tab.<\/p>\n<p class=\"no-toc-heading\">Step 4. 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\">Click <strong>Add<\/strong>, then select a <em>Source<\/em> and type in a <em>Target<\/em> value for the <em>Variable Mapping<\/em>. This must be an accurate, case-sensitive match.<\/p>\n<p class=\"intro-text\">The <em>Source<\/em> is a variable from your page. The <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 class=\"left-bar\">Read more: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/link-action-and-variable-mapping\/\">Link Action and Variable Mapping<\/a><\/p>\n<p>&nbsp;<\/p>\n<hr \/>\n<h2 class=\"page-subheading\">Tutorials<\/h2>\n<p class=\"note\">If you're unfamiliar with the process of building pages, read the article\u00a0<a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-create-your-first-page\/building-an-explorer-page\/\">Building an Explorer Page<\/a>.<\/p>\n<p class=\"intro-text\">There are four different types of hyperlink in Explorer, each covered in a separate tutorial.<\/p>\n<ul class=\"intro-text\">\n<li><a title=\"Tutorial 1: Adding a Hyperlink to Open a Trend\" href=\"#Tutorial_1_Adding_a_Hyperlink_to_Open_a_Trend\">Tutorial 1: Adding a Hyperlink to Open a Trend<\/a><\/li>\n<li><a title=\"Tutorial 2: Adding a Hyperlink to Open a New Trend\" href=\"#Tutorial_2_Adding_a_Hyperlink_to_Open_a_New_Trend\">Tutorial 2: Adding a Hyperlink to Open a New Trend<\/a><\/li>\n<li><a title=\"Tutorial 3: Adding a Hyperlink to Open an Explorer Page\" href=\"#Tutorial_3_Adding_a_Hyperlink_to_Open_an_Explorer_Page\">Tutorial 3: Adding a Hyperlink to Open an Explorer Page<\/a><\/li>\n<li><a title=\"Tutorial 4: Adding a Hyperlink to Open a URL\" href=\"#Tutorial_4_Adding_a_Hyperlink_to_Open_a_URL\">Tutorial 4: Adding a Hyperlink to Open a URL<\/a><\/li>\n<\/ul>\n<p class=\"left-bar\">Note: This configuration uses the <em>Sample<\/em> pages and trends that can be made available during initial installation and setup. If you don't have access to this, you will need to adjust the configuration to suit the pages and trends at your site.<\/p>\n<hr \/>\n<p>&nbsp;<\/p>\n<h3>Tutorial 1: Adding a Hyperlink to Open a Trend<\/h3>\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><\/p>\n<p class=\"intro-text\">In this tutorial, we're going to create a hyperlink to an existing trend, usinag two page defaults, <a title=\"Data Transformation and Sample Methods\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-server\/primers\/transforms\/\">pageSampleMethod<\/a> and pageSampleInterval, as variables in <em>Variable Mapping<\/em>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-31379 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-1-intro.png\" alt=\"\" width=\"691\" height=\"215\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-1-intro.png 691w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-1-intro-150x47.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-1-intro-24x7.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-1-intro-36x11.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-1-intro-48x15.png 48w\" sizes=\"auto, (max-width: 691px) 100vw, 691px\" \/><\/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 <em>Operating Data\u00a0<\/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 <a title=\"Tutorial 2 Adding a Hyperlink to Open a New Trend\" href=\"#Tutorial_2_Adding_a_Hyperlink_to_Open_a_New_Trend\">Tutorial 2<\/a>, where you get to open a new, blank trend.<\/p>\n<p class=\"left-bar\"><strong>Note: <\/strong>Before you start the tutorial, <a title=\"Preparing an Explorer page for Tutorials\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/preparing-an-explorer-studio-page-for-a-tutorial\/\">prepare a page in Studio<\/a>.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/grid-layout.png\" rel=\"lightbox-1\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-12353\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/grid-layout.png\" alt=\"\" width=\"600\" height=\"392\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/grid-layout.png 1125w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/grid-layout-768x502.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/grid-layout-150x98.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/grid-layout-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/grid-layout-36x24.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/grid-layout-48x31.png 48w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><\/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 a grid cell.\u00a0The Hyperlink is in the Display <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1844 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/display.png\" alt=\"Display group icon\" width=\"22\" height=\"13\" \/>\u00a0group.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-1-step-1.1-1.png\" rel=\"lightbox-2\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-31218 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-1-step-1.1-1.png\" alt=\"\" width=\"993\" height=\"623\" \/><\/a><\/p>\n<p class=\"intro-text\">2. Now configure the hyperlink:<\/p>\n<p class=\"note\"><strong>Note: <\/strong> This step includes adding <em>Variable Mapping<\/em>. We'll be using two page defaults: <em>pageSampleMethod<\/em> and <em>pageSampleInterval<\/em>. Read more about Page Default Values <a title=\"Default Values\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/default-value\/\">here<\/a>.<\/p>\n<table>\n<tbody>\n<tr>\n<td width=\"480\">\n<table>\n<tbody>\n<tr>\n<td width=\"150\"><strong>1. Content<\/strong><\/td>\n<td width=\"330\">Type <em>Open Operating Data Trend using Sample Method: <\/em>in the <strong>Content<\/strong> edit box, then add a variable: <em>pageSampleMethod<\/em>. (Type in a more suitable name, if you are opening a different trend).<\/td>\n<\/tr>\n<tr>\n<td><em>Adding a Variable to the Content:<\/em><\/td>\n<td>Click <strong>Add Variable<\/strong>, then select a variable (<em>pageSampleMethod)\u00a0<\/em>from the drop-down list. (You can leave out this variable if you prefer, as it won't affect the hyperlink's behaviour in any way.)<\/td>\n<\/tr>\n<tr>\n<td><strong>2. 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>3. Workspace<\/strong><\/td>\n<td>Select <em>Tutorials<\/em> from the <strong>Workspace <\/strong>drop-down list. (Or select the workspace name where your own trend is saved.)<\/td>\n<\/tr>\n<tr>\n<td><strong>4. Trend<\/strong><\/td>\n<td>Select <em>Operating Data <\/em>from the <strong>Trend <\/strong>drop-down list. (Or select the name of your own trend.)<\/td>\n<\/tr>\n<tr>\n<td><strong>5. Tab Type<\/strong><\/td>\n<td>Select <em>New Explorer Tab<\/em> from the <strong>Tab Type<\/strong> drop-down list.<\/td>\n<\/tr>\n<tr>\n<td><strong>6. 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>7. Variable Mapping<\/strong> <em> (first)<\/em><\/td>\n<td>Select <em>Variable<\/em> from the drop-down list, and <em>pageSampleMethod<\/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>8. Variable Mapping<\/strong> <em> (second)<\/em><\/td>\n<td>Select <em>Variable<\/em> from the drop-down list, and <em>pageSampleInterval<\/em> in the <strong>Source<\/strong> edit box. Type <em>sampleInterval<\/em> in the <strong>Target<\/strong> edit box.<\/td>\n<\/tr>\n<tr>\n<td><strong>9. Style<\/strong><\/td>\n<td>Select <i>Sub Title Font\u00a0<\/i>from the drop-down list. (Your list of Styles might not include this style; select your preferred style from the drop-down list.)<\/td>\n<\/tr>\n<tr>\n<td><strong>10. Alignment<\/strong><\/td>\n<td>Click the middle left square to align the hyperlink text to the middle left (this overrides the style's alignment).<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<td width=\"300\">\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Configure-the-Hyperlink.png\" rel=\"lightbox-3\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-31205 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Configure-the-Hyperlink.png\" alt=\"\" width=\"363\" height=\"765\" \/><\/a><\/p>\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=\"Variable Parameters\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/trends\/link-to-a-trend-via-a-url\/#Variable_Parameters\"> Variable Parameters <\/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 cell should be looking now:<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-1-hyperlink-in-design-mode.png\" rel=\"lightbox-4\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-31212 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-1-hyperlink-in-design-mode.png\" alt=\"\" width=\"722\" height=\"133\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-1-hyperlink-in-design-mode.png 722w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-1-hyperlink-in-design-mode-150x28.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-1-hyperlink-in-design-mode-24x4.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-1-hyperlink-in-design-mode-36x7.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-1-hyperlink-in-design-mode-48x9.png 48w\" sizes=\"auto, (max-width: 722px) 100vw, 722px\" \/><\/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 <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/preview.png\" rel=\"lightbox-5\"><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=\"instruct\">Click the hyperlink.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Click-the-hyperlink.png\" rel=\"lightbox-6\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-31214 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Click-the-hyperlink.png\" alt=\"\" width=\"696\" height=\"124\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Click-the-hyperlink.png 696w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Click-the-hyperlink-150x27.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Click-the-hyperlink-24x4.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Click-the-hyperlink-36x6.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Click-the-hyperlink-48x9.png 48w\" sizes=\"auto, (max-width: 696px) 100vw, 696px\" \/><\/a><\/p>\n<p class=\"intro-text\">The <i>Operating Data\u00a0<\/i>trend opens in a new Explorer tab. Note how the two <strong>Variable Mapping<\/strong> values have set the values for <em>Sample Method<\/em> and <em>Sample Interval<\/em> on the trend.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Trend-opens.png\" rel=\"lightbox-7\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-31213 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Trend-opens.png\" alt=\"\" width=\"1292\" height=\"328\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Trend-opens.png 1292w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Trend-opens-768x195.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Trend-opens-150x38.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Trend-opens-1280x325.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Trend-opens-24x6.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Trend-opens-36x9.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Trend-opens-48x12.png 48w\" sizes=\"auto, (max-width: 1292px) 100vw, 1292px\" \/><\/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<h3>Tutorial 2: Adding a Hyperlink to Open a New Trend<\/h3>\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, using the page default <a title=\"Data Transformation and Sample Methods\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-server\/primers\/transforms\/\">pageSampleInterval<\/a> as a variable in <em>Variable Mapping<\/em>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-31380 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-2-intro.png\" alt=\"\" width=\"691\" height=\"289\" \/><\/p>\n<p class=\"left-bar\"><strong>Note: <\/strong>Before you start the tutorial, <a title=\"Preparing an Explorer page for Tutorials\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/preparing-an-explorer-studio-page-for-a-tutorial\/\">prepare a page in Studio<\/a>, or use the page from Tutorial 1.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/grid-layout.png\" rel=\"lightbox-1\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-12353\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/grid-layout.png\" alt=\"\" width=\"600\" height=\"392\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/grid-layout.png 1125w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/grid-layout-768x502.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/grid-layout-150x98.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/grid-layout-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/grid-layout-36x24.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/grid-layout-48x31.png 48w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><\/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 a grid cell.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/tut-2-step1.1.png\" rel=\"lightbox-9\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-31217 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/tut-2-step1.1.png\" alt=\"\" width=\"987\" height=\"616\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/tut-2-step1.1.png 987w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/tut-2-step1.1-768x479.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/tut-2-step1.1-150x94.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/tut-2-step1.1-24x15.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/tut-2-step1.1-36x22.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/tut-2-step1.1-48x30.png 48w\" sizes=\"auto, (max-width: 987px) 100vw, 987px\" \/><\/a><\/p>\n<p class=\"intro-text\">2. Now configure the hyperlink:<\/p>\n<p class=\"note\"><strong>Note: <\/strong> This step includes adding <em>Variable Mapping<\/em>. We'll be using a page default: <em>pageSampleInterval<\/em>. Read more about Page Default Values <a title=\"Default Values\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/default-value\/\">here<\/a>.<\/p>\n<table>\n<tbody>\n<tr>\n<td width=\"480\">\n<table>\n<tbody>\n<tr>\n<td width=\"150\"><strong>1. 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>2. 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>3. Tab Type<\/strong><\/td>\n<td>Select <em>Same Explorer Tab<\/em> from the <strong>Tab Type<\/strong> drop-down list.<\/td>\n<\/tr>\n<tr>\n<td><strong>4. Add<\/strong><\/td>\n<td>Click <strong>Add<\/strong>, to add a <em>Variable Mapping<\/em>.<\/td>\n<\/tr>\n<tr>\n<td><strong>5. Variable Mapping<\/strong><\/td>\n<td>Select <em>Variable<\/em> from the drop-down list, and <em>pageSampleInterval<\/em> from the <strong>Source<\/strong> drop-down list. Type <em>sampleInterval<\/em> in the <strong>Target<\/strong> edit box.<\/td>\n<\/tr>\n<tr>\n<td><strong>6. Style<\/strong><\/td>\n<td>Select <i>Sub Title Font\u00a0<\/i>from the drop-down list. (Your list of Styles might not include this style; select your preferred style from the drop-down list.)<\/td>\n<\/tr>\n<tr>\n<td><strong>7. Alignment<\/strong><\/td>\n<td>Click the bottom left square to align the hyperlink text to the bottom left (this overrides the style's alignment).<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<td width=\"300\">\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Configure-tut-2-hyperlink.png\" rel=\"lightbox-10\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-31219 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Configure-tut-2-hyperlink.png\" alt=\"\" width=\"378\" height=\"615\" \/><\/a><\/p>\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=\"Variable Parameters\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/trends\/link-to-a-trend-via-a-url\/#Variable_Parameters\"> Variable Parameters <\/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><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-2-in-design-mode.png\" rel=\"lightbox-11\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-31224 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-2-in-design-mode.png\" alt=\"\" width=\"693\" height=\"251\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-2-in-design-mode.png 693w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-2-in-design-mode-150x54.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-2-in-design-mode-24x9.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-2-in-design-mode-36x13.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-2-in-design-mode-48x17.png 48w\" sizes=\"auto, (max-width: 693px) 100vw, 693px\" \/><\/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<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-2-in-preview-mode.png\" rel=\"lightbox-12\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-31223 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-2-in-preview-mode.png\" alt=\"\" width=\"722\" height=\"276\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-2-in-preview-mode.png 722w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-2-in-preview-mode-150x57.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-2-in-preview-mode-24x9.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-2-in-preview-mode-36x14.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-2-in-preview-mode-48x18.png 48w\" sizes=\"auto, (max-width: 722px) 100vw, 722px\" \/><\/a><\/p>\n<p class=\"intro-text\">A blank trend opens. Note how the <strong>Variable Mapping<\/strong> value has set the value for <em>Sample Interval<\/em> on the trend.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-2-Open-New-trend.png\" rel=\"lightbox-13\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-31222 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-2-Open-New-trend.png\" alt=\"\" width=\"1311\" height=\"441\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-2-Open-New-trend.png 1311w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-2-Open-New-trend-768x258.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-2-Open-New-trend-150x50.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-2-Open-New-trend-1280x431.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-2-Open-New-trend-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-2-Open-New-trend-36x12.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-2-Open-New-trend-48x16.png 48w\" sizes=\"auto, (max-width: 1311px) 100vw, 1311px\" \/><\/a><\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"width: 100%; padding: 10px; border-right: 1px solid #cccccc;\">1. A new blank trend opens. Because the page with the hyperlink was not saved, the trend was opened in a new Explorer tab (not in the same Explorer tab, as configured).<\/td>\n<\/tr>\n<tr>\n<td style=\"width: 100%; padding: 10px; border-right: 1px solid #cccccc;\">2. The Sample Interval matches the interval from the page, because of variable mapping.<\/td>\n<\/tr>\n<tr>\n<td style=\"width: 100%; padding: 10px; border-right: 1px solid #cccccc;\">3. The message showing why the trend was not opened in the same Explorer tab: \"This has been opened in a new tab so that you do not lose the changes to your studio page\".<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<p class=\"intro-text\">This time finish and open the page, so that the trend opens in the same Explorer tab.<\/p>\n<p class=\"intro-text\">1. Click the <strong>Finish and open<\/strong> <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-3364 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/runicon1.png\" alt=\"\" width=\"14\" height=\"15\" \/> button on the toolbar.<\/p>\n<p class=\"intro-text\">2. Click the hyperlink.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-2-in-preview-mode.png\" rel=\"lightbox-12\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-31223 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-2-in-preview-mode.png\" alt=\"\" width=\"722\" height=\"276\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-2-in-preview-mode.png 722w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-2-in-preview-mode-150x57.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-2-in-preview-mode-24x9.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-2-in-preview-mode-36x14.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-2-in-preview-mode-48x18.png 48w\" sizes=\"auto, (max-width: 722px) 100vw, 722px\" \/><\/a><\/p>\n<p class=\"intro-text\">This time the blank trend opens in the same Explorer tab.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-2-second-time.png\" rel=\"lightbox-15\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-31228 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-2-second-time.png\" alt=\"\" width=\"1348\" height=\"705\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-2-second-time.png 1348w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-2-second-time-768x402.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-2-second-time-150x78.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-2-second-time-1280x669.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-2-second-time-24x13.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-2-second-time-36x19.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-2-second-time-48x25.png 48w\" sizes=\"auto, (max-width: 1348px) 100vw, 1348px\" \/><\/a><\/p>\n<hr \/>\n<p>&nbsp;<\/p>\n<h3>Tutorial 3: Adding a Hyperlink to Open an Explorer Page<\/h3>\n<p class=\"intro-text\">In this tutorial, we're going to create a hyperlink to another Explorer Page.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-31381 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-3-intro.png\" alt=\"\" width=\"691\" height=\"358\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-3-intro.png 691w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-3-intro-150x78.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-3-intro-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-3-intro-36x19.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-3-intro-48x25.png 48w\" sizes=\"auto, (max-width: 691px) 100vw, 691px\" \/><\/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>Charts Tutorial<\/em> page, in the <em>Tutorials<\/em> workspace.<\/p>\n<p class=\"left-bar\"><strong>Note: <\/strong>Before you start the tutorial, <a title=\"Preparing an Explorer page for Tutorials\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/preparing-an-explorer-studio-page-for-a-tutorial\/\">prepare a page in Studio<\/a>, or use the page from Tutorial 1.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/grid-layout.png\" rel=\"lightbox-1\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-12353\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/grid-layout.png\" alt=\"\" width=\"600\" height=\"392\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/grid-layout.png 1125w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/grid-layout-768x502.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/grid-layout-150x98.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/grid-layout-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/grid-layout-36x24.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/grid-layout-48x31.png 48w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><\/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 a grid cell.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tutorial-3-step-1.1.png\" rel=\"lightbox-17\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-31235 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tutorial-3-step-1.1.png\" alt=\"\" width=\"995\" height=\"617\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tutorial-3-step-1.1.png 995w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tutorial-3-step-1.1-768x476.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tutorial-3-step-1.1-150x93.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tutorial-3-step-1.1-24x15.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tutorial-3-step-1.1-36x22.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tutorial-3-step-1.1-48x30.png 48w\" sizes=\"auto, (max-width: 995px) 100vw, 995px\" \/><\/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>1. Content<\/strong><\/td>\n<td width=\"330\">Type <em>Open Charts Page <\/em>in the <strong>Content<\/strong> edit box.<\/td>\n<\/tr>\n<tr>\n<td><strong>2. 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>3. Workspace<\/strong><\/td>\n<td>Select <em>Tutorials<\/em> from the <strong>Workspace <\/strong>drop-down list. (Or select the workspace name where your own page is saved.)<\/td>\n<\/tr>\n<tr>\n<td><strong>4. Page<\/strong><\/td>\n<td>Select <em>Charts Tutorial\u00a0<\/em>from the <strong>Page\u00a0<\/strong>drop-down list. (Or select the name of your own page.)<\/td>\n<\/tr>\n<tr>\n<td><strong>5. Tab Type<\/strong><\/td>\n<td>Select <em>New Explorer Tab<\/em> from the <strong>Tab Type<\/strong> drop-down list.<\/td>\n<\/tr>\n<tr>\n<td><strong>6. Add<\/strong><\/td>\n<td>Click <strong>Add<\/strong>, to add a <em>Variable Mapping<\/em>.<\/td>\n<\/tr>\n<tr>\n<td><strong>7. Variable Mapping<\/strong><\/td>\n<td>Select <em>Text<\/em> from the drop-down list, and type <i>Location\u00a0<\/i>into the <strong>Source<\/strong> text box. Type <em>selectedLevel<\/em> in the <strong>Target<\/strong> edit box.<\/td>\n<\/tr>\n<tr>\n<td><strong>8. Style<\/strong><\/td>\n<td>Select <i>Sub Title Font\u00a0<\/i>from the drop-down list. (Your list of Styles might not include this style; select your preferred style from the drop-down list.)<\/td>\n<\/tr>\n<tr>\n<td><strong>9. Alignment<\/strong><\/td>\n<td>Click the bottom left square to align the hyperlink text to the bottom left (this overrides the style's alignment).<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<td width=\"300\">\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Configure-Hyperlink-Tut-3.png\" rel=\"lightbox-18\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-31237 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Configure-Hyperlink-Tut-3.png\" alt=\"\" width=\"383\" height=\"699\" \/><\/a><\/p>\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\/2017\/09\/Tut-3-in-design.png\" rel=\"lightbox-19\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-31239 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-3-in-design.png\" alt=\"\" width=\"708\" height=\"344\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-3-in-design.png 708w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-3-in-design-150x73.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-3-in-design-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-3-in-design-36x17.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-3-in-design-48x23.png 48w\" sizes=\"auto, (max-width: 708px) 100vw, 708px\" \/><\/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<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tutorial-3-click-on-link.png\" rel=\"lightbox-20\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-31240 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tutorial-3-click-on-link.png\" alt=\"\" width=\"738\" height=\"344\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tutorial-3-click-on-link.png 738w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tutorial-3-click-on-link-150x70.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tutorial-3-click-on-link-24x11.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tutorial-3-click-on-link-36x17.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tutorial-3-click-on-link-48x22.png 48w\" sizes=\"auto, (max-width: 738px) 100vw, 738px\" \/><\/a><\/p>\n<p class=\"intro-text\">The <em>Charts Tutorial<\/em> page opens. Note how the <strong>Variable Mapping<\/strong> value (location) has set the value for the <em>selectedLevel<\/em> variable (shown in the Combo Box at the top left of the page).<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Open-Charts-Tutorial.png\" rel=\"lightbox-21\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-31249 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Open-Charts-Tutorial.png\" alt=\"\" width=\"786\" height=\"505\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Open-Charts-Tutorial.png 786w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Open-Charts-Tutorial-768x493.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Open-Charts-Tutorial-150x96.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Open-Charts-Tutorial-24x15.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Open-Charts-Tutorial-36x23.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Open-Charts-Tutorial-48x31.png 48w\" sizes=\"auto, (max-width: 786px) 100vw, 786px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<hr \/>\n<h3>Tutorial 4: Adding a Hyperlink to Open a URL<\/h3>\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=\"wp-image-31382 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-4-intro.png\" alt=\"\" width=\"691\" height=\"463\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-4-intro.png 691w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-4-intro-150x101.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-4-intro-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-4-intro-36x24.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-4-intro-48x32.png 48w\" sizes=\"auto, (max-width: 691px) 100vw, 691px\" \/><\/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\"><strong>Note: <\/strong>Before you start the tutorial, <a title=\"Preparing an Explorer page for Tutorials\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/preparing-an-explorer-studio-page-for-a-tutorial\/\">prepare a page in Studio<\/a>, or use the page from Tutorial 1.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/grid-layout.png\" rel=\"lightbox-1\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-12353\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/grid-layout.png\" alt=\"\" width=\"600\" height=\"392\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/grid-layout.png 1125w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/grid-layout-768x502.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/grid-layout-150x98.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/grid-layout-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/grid-layout-36x24.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/grid-layout-48x31.png 48w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><\/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 a grid cell.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-4-step-1.1.png\" rel=\"lightbox-23\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-31257 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-4-step-1.1.png\" alt=\"\" width=\"1556\" height=\"607\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-4-step-1.1.png 1556w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-4-step-1.1-768x300.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-4-step-1.1-150x59.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-4-step-1.1-1280x499.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-4-step-1.1-24x9.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-4-step-1.1-36x14.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-4-step-1.1-48x19.png 48w\" sizes=\"auto, (max-width: 1556px) 100vw, 1556px\" \/><\/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>1. Content<\/strong><\/td>\n<td width=\"330\">Type <em>Open URL to Explorer Help Topic<\/em> in the <strong>Content<\/strong> edit box.<\/td>\n<\/tr>\n<tr>\n<td><strong>2. 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>3. URL<\/strong><\/td>\n<td>Select <em>Text<\/em> from the drop-down list, and type <em>https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/trends\/creating-a-trend\/<\/em>\u00a0in the <strong>URL<\/strong> text box.<\/td>\n<\/tr>\n<tr>\n<td><strong>4. Header<\/strong><\/td>\n<td>Select <em>Text<\/em> from the drop-down list, and type <em>Explorer Trend Help\u00a0<\/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<tr>\n<td><strong>5. Tab Type<\/strong><\/td>\n<td>Select \u00a0<em>New Explorer Tab<\/em> from the <strong>Tab Type<\/strong> drop-down list.<\/td>\n<\/tr>\n<tr>\n<td><strong>6. Style<\/strong><\/td>\n<td>Select <i>Sub Title Font\u00a0<\/i>from the drop-down list. (Your list of Styles might not include this style; select your preferred style from the drop-down list.)<\/td>\n<\/tr>\n<tr>\n<td><strong>7. Alignment<\/strong><\/td>\n<td>Click the middle left square to align the hyperlink text to the middle left (this overrides the style's alignment).<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<td width=\"300\">\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Configure-Tut-4-hyperlink.png\" rel=\"lightbox-24\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-31252 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Configure-Tut-4-hyperlink.png\" alt=\"\" width=\"372\" height=\"674\" \/><\/a><\/p>\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\/2017\/09\/Tut-4-in-design-mode.png\" rel=\"lightbox-25\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-31251 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-4-in-design-mode.png\" alt=\"\" width=\"689\" height=\"431\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-4-in-design-mode.png 689w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-4-in-design-mode-150x94.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-4-in-design-mode-24x15.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-4-in-design-mode-36x23.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-4-in-design-mode-48x30.png 48w\" sizes=\"auto, (max-width: 689px) 100vw, 689px\" \/><\/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<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-4-open-URL.png\" rel=\"lightbox-26\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-31254 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-4-open-URL.png\" alt=\"\" width=\"774\" height=\"399\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-4-open-URL.png 774w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-4-open-URL-768x396.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-4-open-URL-150x77.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-4-open-URL-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-4-open-URL-36x19.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-4-open-URL-48x25.png 48w\" sizes=\"auto, (max-width: 774px) 100vw, 774px\" \/><\/a><\/p>\n<p class=\"intro-text\">The <em>Explore Help topic for creating a trend<\/em> opens in a new tab within P2 Explorer. Note how this page is named <em>Explorer Trend Help<\/em>, using the <strong>Header<\/strong> property from the hyperlink.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-4-opened-help-in-new-Explorer-page.png\" rel=\"lightbox-27\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-31253 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-4-opened-help-in-new-Explorer-page.png\" alt=\"\" width=\"1209\" height=\"627\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-4-opened-help-in-new-Explorer-page.png 1209w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-4-opened-help-in-new-Explorer-page-768x398.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-4-opened-help-in-new-Explorer-page-150x78.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-4-opened-help-in-new-Explorer-page-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-4-opened-help-in-new-Explorer-page-36x19.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-4-opened-help-in-new-Explorer-page-48x25.png 48w\" sizes=\"auto, (max-width: 1209px) 100vw, 1209px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<hr \/>\n<h2 class=\"page-subheading\">Additional Scenarios<\/h2>\n<p class=\"intro-text\">The above tutorials covered setting up basic hyperlinks for the various types.<\/p>\n<p class=\"intro-text\">In this section, we'll cover other possibilities:<\/p>\n<ul class=\"intro-text\">\n<li>\n<p class=\"intro-text\">Working with private pages and trends<\/p>\n<\/li>\n<li>\n<p class=\"intro-text\">Parameters for URLs<\/p>\n<\/li>\n<\/ul>\n<h3>Working with Private Pages and Trends<\/h3>\n<p class=\"intro-text\">If your hyperlink links to a private page or trend, then it is inaccessible to other users.<\/p>\n<p class=\"intro-text\"><strong>Follow these steps if the page containing the hyperlink is also private:<\/strong><\/p>\n<p class=\"intro-text\">1. Keep the page containing the hyperlink private for now.<\/p>\n<p class=\"intro-text\">2. Submit the page or trend that the hyperlink's Page\/Trend is using.<\/p>\n<p class=\"intro-text\">3. When that has been approved, submit the page containing the hyperlink.<\/p>\n<p class=\"note\">You can do steps 2 and 3 together, but the hyperlink will be unavailable until this has been approved. You can add something in the Submission Comment to request that the related page or trend is approved with the main page.<\/p>\n<p class=\"intro-text\"><strong>Follow these instructions if the page containing the hyperlink is not private:<\/strong><\/p>\n<p class=\"instruct\">Submit the page or trend that the hyperlink's Page\/Trend is using.<\/p>\n<p class=\"note\">Note that the hyperlink will be inaccessible to other users until the page or trend it is linking to is no longer private.<\/p>\n<p class=\"instruct\">Alternatively, submit the page or trend that you want to use, before using it in the hyperlink.<\/p>\n<p class=\"left-bar\">Read more: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-create-your-first-page\/publishing-a-page\/\">Publishing<\/a><\/p>\n<h3>Parameters for URLs<\/h3>\n<p class=\"intro-text\">When you add parameters to a URL, use the variable mappings to take the page's state (current variable value) or literal values, and assign these to the URL's parameters.<\/p>\n<p class=\"intro-text\">The URL format is something like this: <span style=\"color: #0000dd; font-weight: 600; letter-spacing: 0.5px;\">https:\/\/my-url.com\/?[target]=[source]&amp;[target]=[source]<\/span>, where each source and target pair is defined in the hyperlink's variable mapping:<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Source-and-Target-pairs.png\" rel=\"lightbox-28\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-31292 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Source-and-Target-pairs.png\" alt=\"\" width=\"347\" height=\"193\" \/><\/a><\/p>\n<p class=\"intro-text\">For example: <span style=\"color: #0000dd; font-weight: 600; letter-spacing: 0.5px;\">https:\/\/duckduckgo.com\/?q=Perth<\/span>.<\/p>\n<p class=\"intro-text\">This is how this the Link Action is set up for the hyperlink, when a fixed value (Perth) is the parameter's source:<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Using-a-fixed-source.png\" rel=\"lightbox-29\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-31295 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Using-a-fixed-source.png\" alt=\"\" width=\"349\" height=\"302\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Using-a-fixed-source.png 349w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Using-a-fixed-source-150x130.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Using-a-fixed-source-24x21.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Using-a-fixed-source-36x31.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Using-a-fixed-source-48x42.png 48w\" sizes=\"auto, (max-width: 349px) 100vw, 349px\" \/><\/a><\/p>\n<p class=\"intro-text\">Here the parameter's source is a variable called <em>City<\/em>, which the user can change using a <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/using-the-page-controls\/selecting-items\/#Combo_Box\">Combo Box<\/a> or maybe a <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/using-the-page-controls\/using-the-text-input\/\">Text Input<\/a> control:<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Using-a-variable-source.png\" rel=\"lightbox-30\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-31294 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Using-a-variable-source.png\" alt=\"\" width=\"345\" height=\"303\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Using-a-variable-source.png 345w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Using-a-variable-source-150x132.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Using-a-variable-source-24x21.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Using-a-variable-source-36x32.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Using-a-variable-source-48x42.png 48w\" sizes=\"auto, (max-width: 345px) 100vw, 345px\" \/><\/a><\/p>\n<p class=\"no-toc-heading\">The Explorer Trend URL<\/p>\n<p class=\"intro-text\">Here is an example of an Explorer trend using parameters for start time, end time, sample interval and hairline mode: <span style=\"color: #0000dd; font-weight: 600; letter-spacing: 0.5px;\">https:\/\/perauthor01.petroleumplace.com\/P2.Explorer\/trend\/?startTime=2%20weeks%20ago&amp;endTime=1%20week%20ago&amp;sampleInterval=43200&amp;hairlineMode=Dual<\/span><\/p>\n<p class=\"intro-text\">This is how the parameters are defined with variable mapping:<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/LInk-action-for-Explorer-Trend-URL-1.png\" rel=\"lightbox-31\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-31302 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/LInk-action-for-Explorer-Trend-URL-1.png\" alt=\"\" width=\"355\" height=\"538\" \/><\/a><\/p>\n<p class=\"left-bar\">Read more about the <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/trends\/link-to-a-trend-via-a-url\/#Variable_Parameters\">Variable Parameters<\/a> that are used for an Explorer trend's URL.<\/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. Options vary depending on what is being opened: a page, a trend, or a URL.<\/p>\n<table>\n<tbody>\n<tr>\n<td width=\"750\">\n<table>\n<tbody>\n<tr>\n<td width=\"120\"><strong>Content<\/strong>:<\/td>\n<td width=\"630\">The text you want to display in the hyperlink. This can include variable data (see <em>Add Variable<\/em>).<\/td>\n<\/tr>\n<tr>\n<td><strong>Add Variable<\/strong>:<\/td>\n<td>Click <strong>Add Variable<\/strong> if you want to add variable data to the content.<\/td>\n<\/tr>\n<tr>\n<td style=\"border-top: 1px solid #cccccc;\"><strong>Link Action<\/strong>:<\/td>\n<td style=\"border-top: 1px solid #cccccc;\">\n<p>This is where you define the hyperlink, along with optional <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/link-action-and-variable-mapping\/\">variable mapping<\/a>.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td><strong>Type:<\/strong><\/td>\n<td>Select the type of hyperlink you want:<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr>\n<td><em>Open Page<\/em><\/td>\n<td>Specify a <em>Workspace, Page, <\/em> and <em>Tab Type<\/em>.<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<td><em>Workspace:<\/em> Specify in which workspace the page is stored; this is because page names can be duplicated across different workspaces.<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<td><em>Page:<\/em> Specify which page to open (the list is limited to pages in the selected workspace).<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<td><em>Tab Type:<\/em> Specify where the page is opened: New Explorer Tab or Same Explorer Tab.<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr>\n<td><em>Open Trend<\/em><\/td>\n<td style=\"border-top: 1px solid #cccccc;\">Specify a <em>Workspace, Page, <\/em> and <em>Tab Type<\/em>.<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<td><em>Workspace:<\/em> Specify in which workspace the trend is stored; this is because trend names can be duplicated across different workspaces.<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<td><em>Trend:<\/em> Specify which trend to open (the list is limited to trends in the selected workspace).<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<td><em>Tab Type:<\/em> Specify where the trend is opened: New Explorer Tab or Same Explorer Tab.<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr>\n<td><em>New Trend<\/em><\/td>\n<td style=\"border-top: 1px solid #cccccc;\">Explorer opens a new, blank trend when a user clicks this type of hyperlink. Specify the <em>Tab Type<\/em>.<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<td><em>Tab Type:<\/em> Specify where the trend is opened: New Explorer Tab or Same Explorer Tab.<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr>\n<td><em>URL<\/em><\/td>\n<td style=\"border-top: 1px solid #cccccc;\">Specify the <em>URL, Header, <\/em> and <em>Tab Type<\/em>.<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<td><em>Tab Type:<\/em> Specify where the URL is opened: New Explorer Tab, New Browser Tab, or Same Explorer Tab. Where Explorer is hosted on an unsecured site (http), you can open a secured (https) or unsecured (http) URL in an Explorer tab. If Explorer is hosted on a secured site (https), we recommend you open the URL in a new browser tab.<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr>\n<td><strong>Variable Mapping<\/strong><\/td>\n<td>Use <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/link-action-and-variable-mapping\/\">Variable Mapping<\/a> 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>Click <strong>Add<\/strong> to add a new variable mapping.<\/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. See the tutorials for some examples.<\/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's<\/a> Selected Option, for example), or you can type in text or number (select <em>Variable, Text, Number, List, Entity, or Entities<\/em> as appropriate, from the drop-down list to the left of <em>Source<\/em>). You can also pass in a Yes\/No value or a datetime value.<\/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).\u00a0Read more about the names of common variables on <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-integration\/link-to-a-frameless-explorer-page\/#Variable_Parameters\">pages<\/a> and <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/trends\/link-to-a-trend-via-a-url\/#Variable_Parameters\">trends<\/a>.<\/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<tr>\n<td style=\"border-top: 1px solid #cccccc;\"><strong>Style<\/strong>:<\/td>\n<td style=\"border-top: 1px solid #cccccc;\">You can change the style of the hyperlink font and alignment by selecting a different style from the drop-down list.\u00a0If you are a Style Administrator,\u00a0you can\u00a0add a new <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/styles\/#Hyperlink\">Hyperlink\u00a0style<\/a>.<\/td>\n<\/tr>\n<tr>\n<td><strong>Alignment<\/strong>:<\/td>\n<td>Click on one of the boxes to override the selected style's alignment.<\/td>\n<\/tr>\n<tr>\n<td style=\"border-top: 1px solid #cccccc;\"><strong>Position<\/strong>:<\/td>\n<td style=\"border-top: 1px solid #cccccc;\">Specify the position layer and co-ordinates if the hyperlink is in a precision layout, or specify the row and column if the hyperlink is in a grid layout .<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<td width=\"250\">\n<table>\n<tbody>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Hyperlink-in-Editor.png\" rel=\"lightbox-32\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-31134 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Hyperlink-in-Editor.png\" alt=\"\" width=\"373\" height=\"764\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<hr \/>\n<h2 class=\"page-subheading\">Release History<\/h2>\n<ul class=\"intro-text\">\n<li class=\"overview\">Hyperlink 4.5.2 (this release)\n<ul class=\"overview\">\n<li>Ability to override the style's alignment<\/li>\n<\/ul>\n<\/li>\n<li class=\"intro-text\">\n<ul class=\"intro-text\">Hyperlink 4.5.0<\/p>\n<li>When Explorer is set up on an HTTP website, you can now open HTTP URLs in an Explorer tab.<\/li>\n<\/ul>\n<\/li>\n<li class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/hyperlink\/hyperlink-4-4-0\/ \">Hyperlink 4.4.0<\/a>\n<ul class=\"intro-text\">\n<li>Updated the help to reflect changes in the Explorer framework.<\/li>\n<\/ul>\n<\/li>\n<li class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/hyperlink\/hyperlink-4-4-4\/\">Hyperlink 4.4.4<\/a>\n<ul class=\"intro-text\">\n<li>The default value for <em>Type<\/em> has changed from 'Open Page' to 'Select Type'.<\/li>\n<li>For the \u2018Open Trend\u2019 type, the drop-down lists for workspaces is filtered to those that contain trends.<\/li>\n<li>For the \u2018Open Page\u2019 type, the drop-down lists for workspaces is filtered to those that contain pages.<\/li>\n<\/ul>\n<\/li>\n<li class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/hyperlink\/hyperlink-4-3-2\/\">Hyperlink 4.3.2<\/a><\/li>\n<\/ul>\n<p class=\"intro-text\">\u00a0<\/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 in versions 4.5.2 and later of P2 Explorer.<\/p>\n<p class=\"continue-reading-button\"> <a class=\"continue-reading-link\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/hyperlink\/hyperlink-4-5-2\/\">Read more<i class=\"crycon-right-dir\"><\/i><\/a><\/p>\n","protected":false},"author":1,"featured_media":31617,"parent":41639,"menu_order":2,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":"","_members_access_role":[],"_members_access_error":""},"categories":[11],"tags":[339],"class_list":["post-31609","page","type-page","status-publish","has-post-thumbnail","hentry","category-tutorial","tag-hyperlink","Version-4-5-2","Version-4-5-3","Product-ex"],"_links":{"self":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/31609","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/comments?post=31609"}],"version-history":[{"count":0,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/31609\/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\/31617"}],"wp:attachment":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media?parent=31609"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/categories?post=31609"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/tags?post=31609"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}