{"id":41639,"date":"2018-10-03T14:21:21","date_gmt":"2018-10-03T06:21:21","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=41639"},"modified":"2024-10-23T14:20:49","modified_gmt":"2024-10-23T06:20:49","slug":"hyperlink","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/hyperlink\/","title":{"rendered":"Hyperlink"},"content":{"rendered":"\n<p class=\"left-bar\">This article applies to versions 4.6.2 and later of IFS OI Explorer. For more, see <a href=\"#Release_History\">Release History<\/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. Or the hyperlink component can be configured to set variables on the current page.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/10\/Hyperlink-overview.png\" rel=\"lightbox-0\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-41696 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/10\/Hyperlink-overview-e1541748115743.png\" alt=\"\" width=\"358\" height=\"642\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/10\/Hyperlink-overview-e1541748115743.png 358w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/10\/Hyperlink-overview-e1541748115743-84x150.png 84w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/10\/Hyperlink-overview-e1541748115743-13x24.png 13w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/10\/Hyperlink-overview-e1541748115743-20x36.png 20w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/10\/Hyperlink-overview-e1541748115743-27x48.png 27w\" sizes=\"auto, (max-width: 358px) 100vw, 358px\" \/><\/a><\/p>\n<table>\n<tbody>\n<tr style=\"border-top: 1px solid #cccccc;\">\n<td><strong>1<\/strong>:<\/td>\n<td>The text you want to display in the hyperlink. This can include variable data (click <em>Add Variable<\/em>).<\/td>\n<\/tr>\n<tr style=\"border-top: 1px solid #cccccc;\">\n<td><strong>2<\/strong>:<\/td>\n<td>Choose from one of the four link actions (<em>Open Page, Open Trend, Open URL<\/em>, or <em>New Trend<\/em>) for opening a new page, url or trend, or choose the <em>Set Variables<\/em> link action for setting page variables.<br \/>\nYou can add Variable Mapping (or Variables for the <em>Set Variables<\/em>) link action type.<\/td>\n<\/tr>\n<tr style=\"border-top: 1px solid #cccccc;\">\n<td><strong>3<\/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. If you are a Style Administrator, you can add a new <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/styling-displays\/\">Hyperlink style<\/a>.<\/td>\n<\/tr>\n<tr style=\"border-top: 1px solid #cccccc;\">\n<td><strong>4<\/strong>:<\/td>\n<td>The hyperlink's position in a layout.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\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\/explorer-styles\/styling-displays\/\">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), an unsecured (http) URL opens in a New Browser tab, regardless of the selected <em>Tab Type<\/em>. We recommend you choose <em>New Browser Tab<\/em> for these cases, so that your selection matches what actually happens.<\/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, Variables, 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 <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 five different types of link action types for the hyperlink component, 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<li><a title=\"Tutorial 5: Adding a Hyperlink to Set Page Variables\" href=\"#Tutorial_5_Adding_a_Hyperlink_to_Set_Page_Variables\">Tutorial 5: Adding a Hyperlink to Set Page Variables<\/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<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  alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-1-intro.png\" alt=\"\" width=\"434\" height=\"135\" 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: 434px) 100vw, 434px\" \/><\/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 <\/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\/finding-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>&nbsp;<\/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. The 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\" \/> group.<\/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-1\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-31218 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-1-step-1.1-1-e1541748075927.png\" alt=\"\" width=\"993\" height=\"608\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-1-step-1.1-1-e1541748075927.png 993w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-1-step-1.1-1-e1541748075927-768x470.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-1-step-1.1-1-e1541748075927-150x92.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-1-step-1.1-1-e1541748075927-24x15.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-1-step-1.1-1-e1541748075927-36x22.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-1-step-1.1-1-e1541748075927-48x29.png 48w\" sizes=\"auto, (max-width: 993px) 100vw, 993px\" \/><\/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) <\/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 <\/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-2\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-31205 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Configure-the-Hyperlink-e1541748032403.png\" alt=\"\" width=\"344\" height=\"730\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Configure-the-Hyperlink-e1541748032403.png 344w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Configure-the-Hyperlink-e1541748032403-71x150.png 71w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Configure-the-Hyperlink-e1541748032403-11x24.png 11w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Configure-the-Hyperlink-e1541748032403-17x36.png 17w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Configure-the-Hyperlink-e1541748032403-23x48.png 23w\" sizes=\"auto, (max-width: 344px) 100vw, 344px\" \/><\/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-3\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-31212  alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-1-hyperlink-in-design-mode.png\" alt=\"\" width=\"548\" height=\"101\" 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: 548px) 100vw, 548px\" \/><\/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-4\"><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-5\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-31214  alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Click-the-hyperlink.png\" alt=\"\" width=\"556\" height=\"99\" 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: 556px) 100vw, 556px\" \/><\/a><\/p>\n<p class=\"intro-text\">The <i>Operating Data <\/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-6\"><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<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=\"alignnone wp-image-31380 \" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-2-intro-e1541747993334.png\" alt=\"\" width=\"495\" height=\"147\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-2-intro-e1541747993334.png 673w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-2-intro-e1541747993334-150x45.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-2-intro-e1541747993334-24x7.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-2-intro-e1541747993334-36x11.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-2-intro-e1541747993334-48x14.png 48w\" sizes=\"auto, (max-width: 495px) 100vw, 495px\" \/><\/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>&nbsp;<\/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-7\"><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 <\/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-8\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-31219 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Configure-tut-2-hyperlink-e1541747960965.png\" alt=\"\" width=\"355\" height=\"575\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Configure-tut-2-hyperlink-e1541747960965.png 355w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Configure-tut-2-hyperlink-e1541747960965-93x150.png 93w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Configure-tut-2-hyperlink-e1541747960965-15x24.png 15w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Configure-tut-2-hyperlink-e1541747960965-22x36.png 22w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Configure-tut-2-hyperlink-e1541747960965-30x48.png 30w\" sizes=\"auto, (max-width: 355px) 100vw, 355px\" \/><\/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-9\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-31224  alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-2-in-design-mode.png\" alt=\"\" width=\"505\" height=\"183\" 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: 505px) 100vw, 505px\" \/><\/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-10\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-31223  alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-2-in-preview-mode.png\" alt=\"\" width=\"521\" height=\"199\" 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: 521px) 100vw, 521px\" \/><\/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-11\"><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-10\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-31223  alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-2-in-preview-mode.png\" alt=\"\" width=\"492\" height=\"188\" 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: 492px) 100vw, 492px\" \/><\/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-13\"><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  alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-3-intro.png\" alt=\"\" width=\"477\" height=\"247\" 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: 477px) 100vw, 477px\" \/><\/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>&nbsp;<\/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-14\"><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 <\/em>from the <strong>Page <\/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 <\/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 <\/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-15\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-31237 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Configure-Hyperlink-Tut-3-e1541747912685.png\" alt=\"\" width=\"363\" height=\"655\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Configure-Hyperlink-Tut-3-e1541747912685.png 363w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Configure-Hyperlink-Tut-3-e1541747912685-83x150.png 83w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Configure-Hyperlink-Tut-3-e1541747912685-13x24.png 13w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Configure-Hyperlink-Tut-3-e1541747912685-20x36.png 20w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Configure-Hyperlink-Tut-3-e1541747912685-27x48.png 27w\" sizes=\"auto, (max-width: 363px) 100vw, 363px\" \/><\/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-16\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-31239  alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-3-in-design.png\" alt=\"\" width=\"512\" height=\"249\" 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: 512px) 100vw, 512px\" \/><\/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-17\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-31240  alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tutorial-3-click-on-link.png\" alt=\"\" width=\"478\" height=\"223\" 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: 478px) 100vw, 478px\" \/><\/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-18\"><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  alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-4-intro.png\" alt=\"\" width=\"478\" height=\"320\" 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: 478px) 100vw, 478px\" \/><\/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>&nbsp;<\/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-19\"><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> 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>Explorer Trend Help <\/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>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 <\/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-20\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-31252 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Configure-Tut-4-hyperlink-e1541747877973.png\" alt=\"\" width=\"340\" height=\"593\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Configure-Tut-4-hyperlink-e1541747877973.png 340w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Configure-Tut-4-hyperlink-e1541747877973-86x150.png 86w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Configure-Tut-4-hyperlink-e1541747877973-14x24.png 14w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Configure-Tut-4-hyperlink-e1541747877973-21x36.png 21w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Configure-Tut-4-hyperlink-e1541747877973-28x48.png 28w\" sizes=\"auto, (max-width: 340px) 100vw, 340px\" \/><\/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-21\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-31251  alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-4-in-design-mode.png\" alt=\"\" width=\"444\" height=\"278\" 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: 444px) 100vw, 444px\" \/><\/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-22\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-31254  alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Tut-4-open-URL.png\" alt=\"\" width=\"456\" height=\"235\" 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: 456px) 100vw, 456px\" \/><\/a><\/p>\n<p class=\"intro-text\">The <em>Explore Help topic for creating a trend<\/em> opens in a new tab within IFS OI 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-23\"><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<h3>Tutorial 5: Adding a Hyperlink to Set Page Variables<\/h3>\n<p class=\"overview\">This tutorial demonstrates the use of the <em>Set Variables<\/em> Link Action type.<\/p>\n<p class=\"intro-text\">In this tutorial, we're going to add three separate hyperlinks. Each of these will set two separate page <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-primers\/variables\/\">variables<\/a>, which will be displayed on the page.<\/p>\n<p class=\"intro-text\">This is how the page will look when you have completed the steps:<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Grid-layout-with-components-1.png\" rel=\"lightbox-24\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-41648 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Grid-layout-with-components-1-e1541747828477.png\" alt=\"\" width=\"798\" height=\"368\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Grid-layout-with-components-1-e1541747828477.png 798w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Grid-layout-with-components-1-e1541747828477-768x354.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Grid-layout-with-components-1-e1541747828477-150x69.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Grid-layout-with-components-1-e1541747828477-24x11.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Grid-layout-with-components-1-e1541747828477-36x17.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Grid-layout-with-components-1-e1541747828477-48x22.png 48w\" sizes=\"auto, (max-width: 798px) 100vw, 798px\" \/><\/a><\/p>\n<p class=\"intro-text\"><strong>Step 1. Prepare the new Page<\/strong><\/p>\n<p class=\"intro-text\">Before you start, click the <strong>New Page<\/strong> button on the Home tab of the ribbon. Choose the Precision layout.<\/p>\n<p class=\"intro-text\">Now drag a Grid Layout component onto the page, and resize so that it fits into the top left quadrant of the page, approximately.<\/p>\n<ul class=\"intro-text\">\n<li>Add five rows to the grid (so there will be a total of six rows).<\/li>\n<li>Add two columns to the grid (so there will be a total of three columns).<\/li>\n<\/ul>\n<p class=\"left-bar-p2blue\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/grid-layout\/\">Grid Layout<\/a><\/p>\n<p class=\"intro-text\"><strong>Step 2. Add three Default values<\/strong><\/p>\n<p class=\"intro-text\">In this step, we'll add three Default values: two that will be updated by the hyperlinks (each being a variable <em>Target<\/em>), and one that will be used by the hyperlink (a variable <em>Source<\/em>) to update another variable.<\/p>\n<p class=\"intro-text\">1. Open the Default Values panel, by clicking <strong>Defaults<\/strong> on the Studio ribbon tab.<\/p>\n<p class=\"intro-text\">2. Click <strong>Add<\/strong> three times.<\/p>\n<p class=\"intro-text\">3. Configure the first default:<\/p>\n<ul class=\"intro-text\">\n<li><strong>Variable Name<\/strong>: MyNumber<\/li>\n<li><strong>Drop-down for data type<\/strong>: Number<\/li>\n<li><strong>Text<\/strong>: 1<\/li>\n<\/ul>\n<p class=\"intro-text\">3. Configure the second default:<\/p>\n<ul class=\"intro-text\">\n<li><strong>Variable Name<\/strong>: myLetter<\/li>\n<li><strong>Drop-down for data type<\/strong>: Text<\/li>\n<li><strong>Text<\/strong>: A<\/li>\n<\/ul>\n<p class=\"intro-text\">5. Configure the third default:<\/p>\n<ul class=\"intro-text\">\n<li><strong>Variable Name<\/strong>: userLetter<\/li>\n<li><strong>Drop-down for data type<\/strong>: Text<\/li>\n<li><strong>Text<\/strong>: A<\/li>\n<\/ul>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Add-three-default-values.png\" rel=\"lightbox-25\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-41654 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Add-three-default-values-e1541747798550.png\" alt=\"\" width=\"1009\" height=\"828\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Add-three-default-values-e1541747798550.png 1009w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Add-three-default-values-e1541747798550-768x630.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Add-three-default-values-e1541747798550-150x123.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Add-three-default-values-e1541747798550-24x20.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Add-three-default-values-e1541747798550-36x30.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Add-three-default-values-e1541747798550-48x39.png 48w\" sizes=\"auto, (max-width: 1009px) 100vw, 1009px\" \/><\/a><\/p>\n<p class=\"left-bar-p2blue\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/default-value\/\">Default Values<\/a><\/p>\n<p class=\"intro-text\"><strong>Step 3. Add three Text Labels, two Data Labels, and a Text Input<\/strong> onto the Grid Layout:<\/p>\n<p class=\"intro-text\">1. Drag a Text Label onto the second grid cell in the top row, and configure it to have <strong>Content<\/strong>: <em>Number<\/em>.<\/p>\n<p class=\"intro-text\">2. Drag a Text Label onto the third grid cell in the top row, and configure it to have <strong>Content<\/strong>: <em>Letter<\/em>.<\/p>\n<p class=\"intro-text\">3. Drag a Text Label onto the second grid cell of the fifth row, and configure it to have <strong>Content<\/strong>: <em>User Input Letter<\/em>.<\/p>\n<p class=\"intro-text\">4. Drag a Data Label onto the second grid cell of the second row, and configure it to have <strong>Value<\/strong>: <em>MyNumber<\/em> (the variable), with a <strong>Decimals<\/strong> value of <em>0<\/em>.<\/p>\n<p class=\"intro-text\">5. Drag a Data Label onto the third grid cell of the second row, and configure it to have <strong>Value<\/strong>: <em>myLetter<\/em> (the variable).<\/p>\n<p class=\"intro-text\">6. Drag a Text Input onto the second grid cell of the sixth row, and configure it to have <strong>Variable Name<\/strong>: <em>userLetter<\/em> (the variable) and <strong>Hint Text<\/strong>: <em>Type in a single letter<\/em>.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Add-components-to-the-grid.png\" rel=\"lightbox-26\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-41657 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Add-components-to-the-grid-e1541747757251.png\" alt=\"\" width=\"688\" height=\"342\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Add-components-to-the-grid-e1541747757251.png 688w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Add-components-to-the-grid-e1541747757251-150x75.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Add-components-to-the-grid-e1541747757251-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Add-components-to-the-grid-e1541747757251-36x18.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Add-components-to-the-grid-e1541747757251-48x24.png 48w\" sizes=\"auto, (max-width: 688px) 100vw, 688px\" \/><\/a><\/p>\n<p class=\"left-bar-p2blue\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/text-label\/\">Text Label,<\/a> <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/data-label\/\">Data Label<\/a>, <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/text-input\/\">Text Input<\/a>.<\/p>\n<p class=\"intro-text\"><strong>Step 4. Add and configure four Hyperlinks<\/strong><\/p>\n<p class=\"intro-text\">In this step, we'll add and configure a hyperlink, then make two copies of it, and reconfigure these.<\/p>\n<p class=\"intro-text\">1. Drag a hyperlink component onto the first grid cell in row three.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Drag-hyperlink-onto-page.png\" rel=\"lightbox-27\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-41663 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Drag-hyperlink-onto-page-e1541747722318.png\" alt=\"\" width=\"897\" height=\"335\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Drag-hyperlink-onto-page-e1541747722318.png 897w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Drag-hyperlink-onto-page-e1541747722318-768x287.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Drag-hyperlink-onto-page-e1541747722318-150x56.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Drag-hyperlink-onto-page-e1541747722318-24x9.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Drag-hyperlink-onto-page-e1541747722318-36x13.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Drag-hyperlink-onto-page-e1541747722318-48x18.png 48w\" sizes=\"auto, (max-width: 897px) 100vw, 897px\" \/><\/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 style=\"height: 240px;\">\n<tbody>\n<tr style=\"height: 24px;\">\n<td style=\"height: 24px;\" width=\"150\"><strong>1. Content<\/strong><\/td>\n<td style=\"height: 24px;\" width=\"330\">Type <em>Set my Number to 1 and my Letter to A <\/em>in the <strong>Content<\/strong> edit box.<\/td>\n<\/tr>\n<tr style=\"height: 24px;\">\n<td style=\"height: 24px;\"><strong>2. Type<\/strong><\/td>\n<td style=\"height: 24px;\">Select <em>Set Variables<\/em> from the <strong>Type<\/strong> drop-down list.<\/td>\n<\/tr>\n<tr style=\"height: 24px;\">\n<td style=\"height: 24px;\"><strong>3. Add<\/strong><\/td>\n<td style=\"height: 24px;\">Click <strong>Add<\/strong> twice, to add two <em>Variables<\/em>.<\/td>\n<\/tr>\n<tr style=\"height: 48px;\">\n<td style=\"height: 48px;\"><strong>4. Variable (first)<\/strong><\/td>\n<td style=\"height: 48px;\">Select <em>Number<\/em> from the drop-down list, and type <i>1 <\/i>into the <strong>Source<\/strong> text box. Select <em>MyNumber<\/em> from the <strong>Target<\/strong> drop-down list.<\/td>\n<\/tr>\n<tr style=\"height: 48px;\">\n<td style=\"height: 48px;\"><strong>5. Variable (second)<\/strong><\/td>\n<td style=\"height: 48px;\">Select <em>Text<\/em> from the drop-down list, and type <i>A <\/i>into the <strong>Source<\/strong> text box. Select <em>myLetter<\/em> from the <strong>Target<\/strong> drop-down list.<\/td>\n<\/tr>\n<tr style=\"height: 72px;\">\n<td style=\"height: 72px;\"><strong>6. Style<\/strong><\/td>\n<td style=\"height: 72px;\">Select a style from the <strong>Style<\/strong> drop-down list. (The one used in this example has a blue <em>Font Colour<\/em> and a Bold <em>Font Weight<\/em>. See <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/styling-displays\/#Hyperlink\">Hyperlink Styles<\/a><\/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\/2018\/09\/Configure-the-hyperlink.png\" rel=\"lightbox-28\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-41667 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Configure-the-hyperlink-e1541747680128.png\" alt=\"\" width=\"352\" height=\"609\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Configure-the-hyperlink-e1541747680128.png 352w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Configure-the-hyperlink-e1541747680128-87x150.png 87w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Configure-the-hyperlink-e1541747680128-14x24.png 14w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Configure-the-hyperlink-e1541747680128-21x36.png 21w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Configure-the-hyperlink-e1541747680128-28x48.png 28w\" sizes=\"auto, (max-width: 352px) 100vw, 352px\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\">3. Copy (Ctrl+C) the hyperlink.<\/p>\n<p class=\"intro-text\">4. First copy: Click the grid cell below the hyperlink and Paste (Ctrl+V).<\/p>\n<p class=\"intro-text\">5. Second copy: Click the grid cell below the second hyperlink and Paste (Ctrl+V).<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Copy-the-hyperlinks-1.png\" rel=\"lightbox-29\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-41670 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Copy-the-hyperlinks-1-e1541747652152.png\" alt=\"\" width=\"683\" height=\"325\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Copy-the-hyperlinks-1-e1541747652152.png 683w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Copy-the-hyperlinks-1-e1541747652152-150x71.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Copy-the-hyperlinks-1-e1541747652152-24x11.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Copy-the-hyperlinks-1-e1541747652152-36x17.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Copy-the-hyperlinks-1-e1541747652152-48x23.png 48w\" sizes=\"auto, (max-width: 683px) 100vw, 683px\" \/><\/a><\/p>\n<p class=\"intro-text\">6. Adjust the first copied hyperlink to set different values to the same two variables, and give it a different content as well:<\/p>\n<p class=\"intro-text\">a. <strong>Content<\/strong>: Type <em>Set my Number to 2 and my Letter to B<\/em>.<br \/>\nb. <strong>First Variable<\/strong>: Type <em>2 <\/em>in the <strong>Source<\/strong>.<br \/>\nc. <strong>Second Variable<\/strong>: Type <em>B <\/em>in the <strong>Source<\/strong>.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Configure-hyperlink-2.png\" rel=\"lightbox-30\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-41673 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Configure-hyperlink-2-e1541747499882.png\" alt=\"\" width=\"345\" height=\"502\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Configure-hyperlink-2-e1541747499882.png 345w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Configure-hyperlink-2-e1541747499882-103x150.png 103w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Configure-hyperlink-2-e1541747499882-16x24.png 16w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Configure-hyperlink-2-e1541747499882-25x36.png 25w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Configure-hyperlink-2-e1541747499882-33x48.png 33w\" sizes=\"auto, (max-width: 345px) 100vw, 345px\" \/><\/a><\/p>\n<p class=\"intro-text\">7. Adjust the second copied hyperlink to set different values to the same two variables, and give it a different content as well:<\/p>\n<p class=\"intro-text\">a. <strong>Content<\/strong>: Type <em>Set my Letter to the User input letter<\/em>.<br \/>\nb. <strong>First Variable<\/strong>: Type <em>3 <\/em>in the <strong>Source<\/strong>.<br \/>\nc. <strong>Second Variable<\/strong>: Select <em>(variable)<\/em>, then select <em>userLetter<\/em> from the <strong>Source<\/strong> drop-down list.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Reconfigure-hyperlink-3-2.png\" rel=\"lightbox-31\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-41675 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Reconfigure-hyperlink-3-2-e1541747544708.png\" alt=\"\" width=\"339\" height=\"522\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Reconfigure-hyperlink-3-2-e1541747544708.png 339w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Reconfigure-hyperlink-3-2-e1541747544708-97x150.png 97w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Reconfigure-hyperlink-3-2-e1541747544708-16x24.png 16w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Reconfigure-hyperlink-3-2-e1541747544708-23x36.png 23w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Reconfigure-hyperlink-3-2-e1541747544708-31x48.png 31w\" sizes=\"auto, (max-width: 339px) 100vw, 339px\" \/><\/a><\/p>\n<p class=\"intro-text\">This is how your page should be looking now:<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Completed-hyperlink-page.png\" rel=\"lightbox-32\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-41666 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Completed-hyperlink-page-e1541747623611.png\" alt=\"\" width=\"683\" height=\"341\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Completed-hyperlink-page-e1541747623611.png 683w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Completed-hyperlink-page-e1541747623611-150x75.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Completed-hyperlink-page-e1541747623611-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Completed-hyperlink-page-e1541747623611-36x18.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Completed-hyperlink-page-e1541747623611-48x24.png 48w\" sizes=\"auto, (max-width: 683px) 100vw, 683px\" \/><\/a><\/p>\n<p class=\"intro-text\"><strong>Step 2. Test the Hyperlinks<\/strong><\/p>\n<p class=\"intro-text\">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><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tutorial-5-Page-Preview.png\" rel=\"lightbox-33\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-41646 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tutorial-5-Page-Preview.png\" alt=\"\" width=\"838\" height=\"460\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tutorial-5-Page-Preview.png 838w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tutorial-5-Page-Preview-768x422.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tutorial-5-Page-Preview-150x82.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tutorial-5-Page-Preview-24x13.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tutorial-5-Page-Preview-36x20.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Tutorial-5-Page-Preview-48x26.png 48w\" sizes=\"auto, (max-width: 838px) 100vw, 838px\" \/><\/a><\/p>\n<p class=\"intro-text\">Click each hyperlink, noting how the <em>Letter<\/em> and <em>Number<\/em> variables update in the Data Labels.<\/p>\n<p class=\"intro-text\">When trying the third hyperlink, first type a different letter ('Z', for example, into the Text Input). Note how this variable <em>userLetter<\/em> is then used to update the <em>myLetter<\/em> variable<\/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>Working with private pages and trends<\/li>\n<li>Parameters for URLs<\/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-34\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-31292 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Source-and-Target-pairs-e1541747568480.png\" alt=\"\" width=\"337\" height=\"191\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Source-and-Target-pairs-e1541747568480.png 337w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Source-and-Target-pairs-e1541747568480-150x85.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Source-and-Target-pairs-e1541747568480-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Source-and-Target-pairs-e1541747568480-36x20.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Source-and-Target-pairs-e1541747568480-48x27.png 48w\" sizes=\"auto, (max-width: 337px) 100vw, 337px\" \/><\/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-35\"><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-36\"><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-37\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-31302 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/LInk-action-for-Explorer-Trend-URL-1-e1541747594543.png\" alt=\"\" width=\"325\" height=\"523\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/LInk-action-for-Explorer-Trend-URL-1-e1541747594543.png 325w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/LInk-action-for-Explorer-Trend-URL-1-e1541747594543-93x150.png 93w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/LInk-action-for-Explorer-Trend-URL-1-e1541747594543-15x24.png 15w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/LInk-action-for-Explorer-Trend-URL-1-e1541747594543-22x36.png 22w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/LInk-action-for-Explorer-Trend-URL-1-e1541747594543-30x48.png 30w\" sizes=\"auto, (max-width: 325px) 100vw, 325px\" \/><\/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 variable mapping. <br \/>\n<strong>For a full description of these options, see <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/link-action-and-variable-mapping\/\">Link Action, Variables, and Variable Mapping<\/a>.<\/strong><\/p>\n<p><strong>Type:<\/strong> Specify the type of link you want to open: trend, page, or URL. Or select <em>Set Variables<\/em> which is not a hyperlink action, but is used for setting page variables<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td><strong>Variable Mapping\/Variables<\/strong><\/td>\n<td>\n<p>Pass variables from the current Explorer page to the page, trend, or URL you are linking to. Click <strong>Add<\/strong> to add a new variable mapping, or click <strong>Remove <\/strong>to remove the variable mapping.<\/p>\n<p>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.<\/p>\n<p>For the <em>Set Variables<\/em> link action type, these will be <em>Variables<\/em> that belong to the current page.<\/p>\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. If you are a Style Administrator, you can add a new <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/styling-displays\/\">Hyperlink style<\/a>.<\/td>\n<\/tr>\n<tr>\n<td><strong>Alignment<\/strong>:<\/td>\n<td>Click one of the boxes to override the selected style's alignment.<\/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-38\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-31134 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Hyperlink-in-Editor-e1507251464993.png\" alt=\"\" width=\"343\" height=\"657\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Hyperlink-in-Editor-e1507251464993.png 343w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Hyperlink-in-Editor-e1507251464993-78x150.png 78w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Hyperlink-in-Editor-e1507251464993-13x24.png 13w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Hyperlink-in-Editor-e1507251464993-19x36.png 19w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Hyperlink-in-Editor-e1507251464993-25x48.png 25w\" sizes=\"auto, (max-width: 343px) 100vw, 343px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr \/>\n<p>&nbsp;<\/p>\n<h2 class=\"page-subheading\">Release History<\/h2>\n<ul class=\"intro-text\">\n<li class=\"overview\">Hyperlink 4.6.2 (this release)\n<ul class=\"overview\">\n<li>New Link Action type: Set Variables<\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/hyperlink\/hyperlink-4-5-4\/\">Hyperlink 4.5.4<\/a>\n<ul class=\"intro-text\">\n<li>Tab Action 'New Browser Tab' is now available for all Link Action Types<\/li>\n<li>Whenever HTTP content is accessed from an HTTPS instance of Explorer, a New Browser tab opens, regardless of the Tab Type specified in the Link Action editor<\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/hyperlink\/hyperlink-4-5-2\/\">Hyperlink 4.5.2<\/a>\n<ul class=\"intro-text\">\n<li>Ability to override the style's alignment<\/li>\n<\/ul>\n<\/li>\n<li>Hyperlink 4.5.0\n<ul class=\"intro-text\">\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-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><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-3-2\/\">Hyperlink 4.3.2<\/a>\n<ul class=\"intro-text\">\n<li>Initial release<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p class=\"intro-text\">\u00a0<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The hyperlink component can be used to open an Explorer page or trend, or to open an external URL. Or the hyperlink component can be configured to set variables on the current page. This article shows how to configure hyperlinks in versions 4.6.2 and later of IFS OI 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\/\">Read more<i class=\"crycon-right-dir\"><\/i><\/a><\/p>\n","protected":false},"author":8,"featured_media":31617,"parent":1407,"menu_order":263,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":"","_members_access_role":[],"_members_access_error":""},"categories":[11],"tags":[339,313],"class_list":["post-41639","page","type-page","status-publish","has-post-thumbnail","hentry","category-tutorial","tag-hyperlink","tag-links","Version-4-6-2","Product-ex"],"_links":{"self":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/41639","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=41639"}],"version-history":[{"count":7,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/41639\/revisions"}],"predecessor-version":[{"id":69206,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/41639\/revisions\/69206"}],"up":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/1407"}],"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=41639"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/categories?post=41639"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/tags?post=41639"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}