{"id":12307,"date":"2016-03-29T13:13:28","date_gmt":"2016-03-29T05:13:28","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=12307"},"modified":"2018-10-12T16:21:00","modified_gmt":"2018-10-12T08:21:00","slug":"hyperlink-4-4-4","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/hyperlink\/hyperlink-4-4-4\/","title":{"rendered":"Hyperlink (4.4.4)"},"content":{"rendered":"\n<p class=\"left-bar\">This article applies to versions 4.4.4 and later of P2 Explorer. For more, see <a href=\"#Release_History\">Release History<\/a>. For help on the latest version, see <a title=\"Hyperlink\" 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\/2016\/03\/Hyperlink-overview-pic-2.png\" rel=\"lightbox-0\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-12440 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Hyperlink-overview-pic-2.png\" alt=\"\" width=\"546\" height=\"660\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Hyperlink-overview-pic-2.png 546w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Hyperlink-overview-pic-2-124x150.png 124w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Hyperlink-overview-pic-2-20x24.png 20w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Hyperlink-overview-pic-2-30x36.png 30w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Hyperlink-overview-pic-2-40x48.png 40w\" sizes=\"auto, (max-width: 546px) 100vw, 546px\" \/><\/a><\/p>\n<p class=\"note\">For a full description of the hyperlink properties, refer to the <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/hyperlink\/#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\">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\"><strong>1. <\/strong>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\"><strong>2. <\/strong>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\">Tab Type: Where to Open<\/p>\n<p class=\"instruct\"><strong>3. <\/strong> 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>: Unless the address begins with <em>https<\/em> the URL opens in a new tab in your web browser, regardless of the selected <em>Tab Type<\/em>.<\/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\"><strong>4. <\/strong>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=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/hyperlink\/#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=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/hyperlink\/#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=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/hyperlink\/#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=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/hyperlink\/#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 Data<\/em> table and datasets that can be optionally made available during initial installation and setup. If you don't have access to this data, you will need to adjust the configuration to suit your data at your site.<\/p>\n<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, using two page defaults, <a title=\"Data Transformation and Sample Methods\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-server\/primers\/transforms\/\">pageSampleMethod<\/a> and <a title=\"Data Transformation and Sample Methods\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-server\/primers\/transforms\/\">pageSampleInterval<\/a>, as variables in <em>Variable Mapping<\/em>.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tutorial-1-intro-Pic-1.png\" rel=\"lightbox-1\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-12456 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tutorial-1-intro-Pic-1.png\" alt=\"\" width=\"265\" height=\"47\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tutorial-1-intro-Pic-1.png 265w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tutorial-1-intro-Pic-1-150x27.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tutorial-1-intro-Pic-1-24x4.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tutorial-1-intro-Pic-1-36x6.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tutorial-1-intro-Pic-1-48x9.png 48w\" sizes=\"auto, (max-width: 265px) 100vw, 265px\" \/><\/a><\/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>Silver Trend<\/em>, 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=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/hyperlink\/#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-2\"><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\/2016\/03\/hyperlink-tut-1.png\" rel=\"lightbox-3\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-20547\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/hyperlink-tut-1.png\" alt=\"hyperlink-tut-1\" width=\"1389\" height=\"512\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/hyperlink-tut-1.png 1389w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/hyperlink-tut-1-768x283.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/hyperlink-tut-1-150x55.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/hyperlink-tut-1-1280x472.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/hyperlink-tut-1-24x9.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/hyperlink-tut-1-36x13.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/hyperlink-tut-1-48x18.png 48w\" sizes=\"auto, (max-width: 1389px) 100vw, 1389px\" \/><\/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 Silver 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 from the drop-down list. (Alternatively, you can leave out this variable, 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 Name<\/strong><\/td>\n<td>Select <em>Tutorials<\/em> from the <strong>Workspace Name<\/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 Name<\/strong><\/td>\n<td>Select <em>Silver Trend<\/em> from the <strong>Trend Name<\/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>Options<\/em> from the first drop-down list, then <em>New Explorer Tab<\/em> from the second 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 <em>Normal<\/em> from the drop-down list. (Your list of Styles might not include <em>Normal<\/em>; select your preferred style from the drop-down list).<\/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\/2016\/03\/Tut-1-step-1.2.png\" rel=\"lightbox-4\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-12430 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-1-step-1.2.png\" alt=\"\" width=\"359\" height=\"652\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-1-step-1.2.png 359w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-1-step-1.2-83x150.png 83w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-1-step-1.2-13x24.png 13w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-1-step-1.2-20x36.png 20w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-1-step-1.2-26x48.png 26w\" sizes=\"auto, (max-width: 359px) 100vw, 359px\" \/><\/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=\"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 cell should be looking now:<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-1-Grid-Cells-3.png\" rel=\"lightbox-5\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-12469 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-1-Grid-Cells-3.png\" alt=\"\" width=\"562\" height=\"102\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-1-Grid-Cells-3.png 562w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-1-Grid-Cells-3-150x27.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-1-Grid-Cells-3-24x4.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-1-Grid-Cells-3-36x7.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-1-Grid-Cells-3-48x9.png 48w\" sizes=\"auto, (max-width: 562px) 100vw, 562px\" \/><\/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-6\"><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\/2016\/03\/Tut-1-Click-hyperlink-2.png\" rel=\"lightbox-7\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-12445 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-1-Click-hyperlink-2.png\" alt=\"\" width=\"282\" height=\"58\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-1-Click-hyperlink-2.png 282w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-1-Click-hyperlink-2-150x31.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-1-Click-hyperlink-2-24x5.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-1-Click-hyperlink-2-36x7.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-1-Click-hyperlink-2-48x10.png 48w\" sizes=\"auto, (max-width: 282px) 100vw, 282px\" \/><\/a><\/p>\n<p class=\"intro-text\">The <em>Silver<\/em> trend opens. 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\/2016\/03\/Tut-1-Conclusion.png\" rel=\"lightbox-8\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-12296\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-1-Conclusion.png\" alt=\"\" width=\"1000\" height=\"527\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-1-Conclusion.png 1370w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-1-Conclusion-768x405.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-1-Conclusion-150x79.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-1-Conclusion-1280x675.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-1-Conclusion-24x13.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-1-Conclusion-36x19.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-1-Conclusion-48x25.png 48w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/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\">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, 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><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tutorial-2-intro-Pic.png\" rel=\"lightbox-9\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-12379 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tutorial-2-intro-Pic.png\" alt=\"\" width=\"232\" height=\"44\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tutorial-2-intro-Pic.png 232w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tutorial-2-intro-Pic-150x28.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tutorial-2-intro-Pic-24x5.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tutorial-2-intro-Pic-36x7.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tutorial-2-intro-Pic-48x9.png 48w\" sizes=\"auto, (max-width: 232px) 100vw, 232px\" \/><\/a><\/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-2\"><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\/2016\/03\/Tut2.step1_.1-1.png\" rel=\"lightbox-11\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-12455\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut2.step1_.1-1.png\" alt=\"\" width=\"1000\" height=\"439\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut2.step1_.1-1.png 1321w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut2.step1_.1-1-768x337.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut2.step1_.1-1-150x66.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut2.step1_.1-1-1280x562.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut2.step1_.1-1-24x11.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut2.step1_.1-1-36x16.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut2.step1_.1-1-48x21.png 48w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/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>Options<\/em> from the first drop-down list, then <em>Same Explorer Tab<\/em> from the second 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<\/tbody>\n<\/table>\n<\/td>\n<td width=\"300\">\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut2.step1_.2.png\" rel=\"lightbox-12\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-12333 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut2.step1_.2.png\" alt=\"\" width=\"349\" height=\"508\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut2.step1_.2.png 349w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut2.step1_.2-103x150.png 103w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut2.step1_.2-16x24.png 16w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut2.step1_.2-25x36.png 25w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut2.step1_.2-33x48.png 33w\" sizes=\"auto, (max-width: 349px) 100vw, 349px\" \/><\/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=\"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><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-2-Grid-Cells-2.png\" rel=\"lightbox-13\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-12448 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-2-Grid-Cells-2.png\" alt=\"\" width=\"415\" height=\"200\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-2-Grid-Cells-2.png 415w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-2-Grid-Cells-2-150x72.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-2-Grid-Cells-2-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-2-Grid-Cells-2-36x17.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-2-Grid-Cells-2-48x23.png 48w\" sizes=\"auto, (max-width: 415px) 100vw, 415px\" \/><\/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\/2016\/03\/Tut-2-Click-hyperlink-2.png\" rel=\"lightbox-14\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-12447 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-2-Click-hyperlink-2.png\" alt=\"\" width=\"422\" height=\"174\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-2-Click-hyperlink-2.png 422w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-2-Click-hyperlink-2-150x62.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-2-Click-hyperlink-2-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-2-Click-hyperlink-2-36x15.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-2-Click-hyperlink-2-48x20.png 48w\" sizes=\"auto, (max-width: 422px) 100vw, 422px\" \/><\/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\/2016\/03\/Tut-2-Conclusion-1.png\" rel=\"lightbox-15\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-12319\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-2-Conclusion-1.png\" alt=\"\" width=\"1000\" height=\"519\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-2-Conclusion-1.png 1369w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-2-Conclusion-1-768x399.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-2-Conclusion-1-150x78.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-2-Conclusion-1-1280x665.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-2-Conclusion-1-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-2-Conclusion-1-36x19.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-2-Conclusion-1-48x25.png 48w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/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\">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 another Explorer Page.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tutorial-3-intro-Pic.png\" rel=\"lightbox-16\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-12380 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tutorial-3-intro-Pic.png\" alt=\"\" width=\"220\" height=\"45\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tutorial-3-intro-Pic.png 220w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tutorial-3-intro-Pic-150x31.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tutorial-3-intro-Pic-24x5.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tutorial-3-intro-Pic-36x7.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tutorial-3-intro-Pic-48x10.png 48w\" sizes=\"auto, (max-width: 220px) 100vw, 220px\" \/><\/a><\/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>Selected Chart Axis<\/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-2\"><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\/2016\/03\/Tut-3-Step-1.1-2.png\" rel=\"lightbox-18\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-12451\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-3-Step-1.1-2.png\" alt=\"\" width=\"1000\" height=\"411\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-3-Step-1.1-2.png 1325w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-3-Step-1.1-2-768x316.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-3-Step-1.1-2-150x62.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-3-Step-1.1-2-1280x526.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-3-Step-1.1-2-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-3-Step-1.1-2-36x15.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-3-Step-1.1-2-48x20.png 48w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/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 Chart 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 Name<\/strong><\/td>\n<td>Select <em>Tutorials<\/em> from the <strong>Workspace Name<\/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 Name<\/strong><\/td>\n<td>Select <em>Selected Chart Axis<\/em> from the <strong>Page Name<\/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>Options<\/em> from the first drop-down list, then <em>New Explorer Tab<\/em> from the second 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 <em>2014<\/em> into the <strong>Source<\/strong> text box. Type <em>selectedAxis<\/em> in the <strong>Target<\/strong> edit box.<\/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\/2016\/03\/Tut3-step1.2-1.png\" rel=\"lightbox-19\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-12485 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut3-step1.2-1.png\" alt=\"\" width=\"355\" height=\"575\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut3-step1.2-1.png 355w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut3-step1.2-1-93x150.png 93w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut3-step1.2-1-15x24.png 15w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut3-step1.2-1-22x36.png 22w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut3-step1.2-1-30x48.png 30w\" sizes=\"auto, (max-width: 355px) 100vw, 355px\" \/><\/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\/2016\/03\/Tut-3-Grid-Cells-2.png\" rel=\"lightbox-20\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-12450 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-3-Grid-Cells-2.png\" alt=\"\" width=\"414\" height=\"294\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-3-Grid-Cells-2.png 414w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-3-Grid-Cells-2-150x107.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-3-Grid-Cells-2-24x17.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-3-Grid-Cells-2-36x26.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-3-Grid-Cells-2-48x34.png 48w\" sizes=\"auto, (max-width: 414px) 100vw, 414px\" \/><\/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\/2016\/03\/Tut-3-click-hyperlink-2.png\" rel=\"lightbox-21\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-12449 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-3-click-hyperlink-2.png\" alt=\"\" width=\"364\" height=\"230\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-3-click-hyperlink-2.png 364w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-3-click-hyperlink-2-150x95.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-3-click-hyperlink-2-24x15.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-3-click-hyperlink-2-36x23.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-3-click-hyperlink-2-48x30.png 48w\" sizes=\"auto, (max-width: 364px) 100vw, 364px\" \/><\/a><\/p>\n<p class=\"intro-text\">The <em>Chart Page<\/em> opens. Note how the <strong>Variable Mapping<\/strong> value (2014) has set the value for the <em>selectedAxis<\/em> variable.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-3-conclusion-1.png\" rel=\"lightbox-22\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-12322\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-3-conclusion-1.png\" alt=\"\" width=\"1000\" height=\"376\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-3-conclusion-1.png 1519w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-3-conclusion-1-768x289.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-3-conclusion-1-150x56.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-3-conclusion-1-1280x481.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-3-conclusion-1-24x9.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-3-conclusion-1-36x14.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-3-conclusion-1-48x18.png 48w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/a><\/p>\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><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tutorial-4-intro-Pic.png\" rel=\"lightbox-23\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-12381 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tutorial-4-intro-Pic.png\" alt=\"\" width=\"261\" height=\"48\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tutorial-4-intro-Pic.png 261w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tutorial-4-intro-Pic-150x28.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tutorial-4-intro-Pic-24x4.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tutorial-4-intro-Pic-36x7.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tutorial-4-intro-Pic-48x9.png 48w\" sizes=\"auto, (max-width: 261px) 100vw, 261px\" \/><\/a><\/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-2\"><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\/2016\/03\/Tut-4-Step-1.1-1.png\" rel=\"lightbox-25\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-12454\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-4-Step-1.1-1.png\" alt=\"\" width=\"1000\" height=\"430\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-4-Step-1.1-1.png 1318w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-4-Step-1.1-1-768x330.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-4-Step-1.1-1-150x65.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-4-Step-1.1-1-1280x551.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-4-Step-1.1-1-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-4-Step-1.1-1-36x15.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-4-Step-1.1-1-48x21.png 48w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/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 Australia Weather<\/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:\/\/weather.yahoo.com.au\/forecast<\/em> in 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>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<tr>\n<td><strong>5. Tab Type<\/strong><\/td>\n<td>Select <em>Options<\/em> from the first drop-down list, then <em>New Explorer Tab<\/em> from the second drop-down list.<\/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\/2016\/03\/Tut-4-Step-1.2-1.png\" rel=\"lightbox-26\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-12490 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-4-Step-1.2-1.png\" alt=\"\" width=\"356\" height=\"493\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-4-Step-1.2-1.png 356w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-4-Step-1.2-1-108x150.png 108w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-4-Step-1.2-1-17x24.png 17w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-4-Step-1.2-1-26x36.png 26w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-4-Step-1.2-1-35x48.png 35w\" sizes=\"auto, (max-width: 356px) 100vw, 356px\" \/><\/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\/2016\/03\/Tut-4-grid-cells-1.png\" rel=\"lightbox-27\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-12453 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-4-grid-cells-1.png\" alt=\"\" width=\"417\" height=\"389\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-4-grid-cells-1.png 417w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-4-grid-cells-1-150x140.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-4-grid-cells-1-24x22.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-4-grid-cells-1-36x34.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-4-grid-cells-1-48x45.png 48w\" sizes=\"auto, (max-width: 417px) 100vw, 417px\" \/><\/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\/2016\/03\/tut-4-click-hyperlink-2.png\" rel=\"lightbox-28\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-12452 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/tut-4-click-hyperlink-2.png\" alt=\"\" width=\"347\" height=\"322\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/tut-4-click-hyperlink-2.png 347w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/tut-4-click-hyperlink-2-150x139.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/tut-4-click-hyperlink-2-24x22.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/tut-4-click-hyperlink-2-36x33.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/tut-4-click-hyperlink-2-48x45.png 48w\" sizes=\"auto, (max-width: 347px) 100vw, 347px\" \/><\/a><\/p>\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\/2016\/03\/Tut-4-conclusion.png\" rel=\"lightbox-29\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-12306 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-4-conclusion.png\" alt=\"\" width=\"754\" height=\"383\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-4-conclusion.png 754w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-4-conclusion-150x76.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-4-conclusion-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-4-conclusion-36x18.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/Tut-4-conclusion-48x24.png 48w\" sizes=\"auto, (max-width: 754px) 100vw, 754px\" \/><\/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<table>\n<tbody>\n<tr>\n<td>\n<table>\n<tbody>\n<tr>\n<td><strong>Content<\/strong>:<\/td>\n<td>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 a variable to the content.<\/td>\n<\/tr>\n<tr>\n<td><strong>Action Editor<\/strong>:<\/td>\n<td>\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 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. Unless the address begins with <em>https<\/em> the URL opens in a new tab in your web browser, regardless of the selected <em>Tab Type<\/em>.<\/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>Trend Name\/Page 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>Tab Type<\/em><\/td>\n<td>This specifies where the page, trend or URL is opened. 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><strong>Note, for URLs<\/strong>: Unless the address begins with <em>https<\/em> the URL opens in a new tab in your web browser, regardless of the selected <em>Tab Type<\/em>.<\/p>\n<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr>\n<td><em>Variable Mapping<\/em><\/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><strong>Style<\/strong>:<\/td>\n<td>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<\/tbody>\n<\/table>\n<\/td>\n<td>\n<table>\n<tbody>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/hyperlink-comprehensive-reference-final.png\" rel=\"lightbox-30\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-12478 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/hyperlink-comprehensive-reference-final.png\" alt=\"\" width=\"356\" height=\"656\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/hyperlink-comprehensive-reference-final.png 356w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/hyperlink-comprehensive-reference-final-81x150.png 81w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/hyperlink-comprehensive-reference-final-13x24.png 13w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/hyperlink-comprehensive-reference-final-20x36.png 20w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/03\/hyperlink-comprehensive-reference-final-26x48.png 26w\" sizes=\"auto, (max-width: 356px) 100vw, 356px\" \/><\/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.4.4 (this release):\n<ul class=\"overview\">\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><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><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.4.4 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-4-4\/\">Read more<i class=\"crycon-right-dir\"><\/i><\/a><\/p>\n","protected":false},"author":8,"featured_media":31617,"parent":41639,"menu_order":3,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":"","_members_access_role":[],"_members_access_error":""},"categories":[11],"tags":[339],"class_list":["post-12307","page","type-page","status-publish","has-post-thumbnail","hentry","category-tutorial","tag-hyperlink","Version-4-5-0","Version-4-5-1","Product-ex"],"_links":{"self":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/12307","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=12307"}],"version-history":[{"count":0,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/12307\/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=12307"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/categories?post=12307"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/tags?post=12307"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}