{"id":37039,"date":"2018-03-06T09:12:31","date_gmt":"2018-03-06T01:12:31","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=37039"},"modified":"2024-10-23T14:20:53","modified_gmt":"2024-10-23T06:20:53","slug":"option-links","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/option-links\/","title":{"rendered":"Option Links"},"content":{"rendered":"\n<p class=\"left-bar\">This article applies to versions 4.5.4 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 Option Links component is used for selecting an option, from a row of options. The selected option is underlined, and updates a variable which can be used elsewhere on the page.<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Option-Links-Example.png\" rel=\"lightbox-0\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-37046 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Option-Links-Example.png\" alt=\"\" width=\"682\" height=\"48\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Option-Links-Example.png 682w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Option-Links-Example-150x11.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Option-Links-Example-24x2.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Option-Links-Example-36x3.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Option-Links-Example-48x3.png 48w\" sizes=\"auto, (max-width: 682px) 100vw, 682px\" \/><\/a><\/p>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/using-the-page-controls\/selecting-items\/#Option_Links\">Using Option Links<\/a>, <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/styling-controls\/\">Option Links style<\/a>, <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/combo-box\/\">Combo Box<\/a><\/p>\n<p>&nbsp;<\/p>\n<h2 class=\"page-subheading\">Quick Start<\/h2>\n<p class=\"intro-text\">You can configure an Option Links component to show fixed values as shown here, where we've configured four Option Values:<\/p>\n<ul class=\"intro-text\">\n<li>Quarter 1<\/li>\n<li>Quarter 2<\/li>\n<li>Quarter 3<\/li>\n<li>Quarter 4<\/li>\n<\/ul>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Four-options.png\" rel=\"lightbox-1\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-37050 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Four-options.png\" alt=\"\" width=\"264\" height=\"53\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Four-options.png 264w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Four-options-150x30.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Four-options-24x5.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Four-options-36x7.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Four-options-48x10.png 48w\" sizes=\"auto, (max-width: 264px) 100vw, 264px\" \/><\/a><\/p>\n<p class=\"instruct\">In the component editor, set the Option Values.<\/p>\n<ul class=\"intro-text\">\n<li>Open the <strong>Option Values <\/strong>Data Selector by clicking on the field. Stay on the Value <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-15215 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/dataselectorvalueicon.png\" alt=\"Data selector Value icon\" width=\"15\" height=\"15\" \/> tab.<\/li>\n<li>Type the following values into the <strong>Values<\/strong> field, pressing <strong>Enter<\/strong> or clicking <strong>Add<\/strong> after each entry: Quarter 1, Quarter 2, Quarter 3, Quarter 4.<\/li>\n<\/ul>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Add-option-values-2.png\" rel=\"lightbox-2\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-37109 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Add-option-values-2.png\" alt=\"\" width=\"369\" height=\"322\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Add-option-values-2.png 369w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Add-option-values-2-150x131.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Add-option-values-2-24x21.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Add-option-values-2-36x31.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Add-option-values-2-48x42.png 48w\" sizes=\"auto, (max-width: 369px) 100vw, 369px\" \/><\/a><\/p>\n<p class=\"intro-text\">Well done! The Option Links component configuration is complete.<\/p>\n<p class=\"intro-text\">When a user selects one of the options, the variable for <strong>Selected Option<\/strong> is updated with the value of the selected option.<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Selected-Option.png\" rel=\"lightbox-3\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-37105 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Selected-Option.png\" alt=\"\" width=\"707\" height=\"355\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Selected-Option.png 707w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Selected-Option-150x75.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Selected-Option-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Selected-Option-36x18.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Selected-Option-48x24.png 48w\" sizes=\"auto, (max-width: 707px) 100vw, 707px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<h3>Using the Selected Option Variable<\/h3>\n<p class=\"intro-text\">To demonstrate how the user-selected option updates the <strong>Selected Option <\/strong>variable, we'll show this variable in a Text Label.<\/p>\n<p class=\"intro-text\">We'll use the same Option Links component that we have just configured.<\/p>\n<p class=\"intro-text\">1. Drop a <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/text-label\/\">Text Label<\/a> onto the page, below the Option Links.<\/p>\n<p class=\"intro-text\">2. Click on the Text Label to open it in the component editor.<\/p>\n<ul class=\"intro-text\">\n<li>In the <strong>Content<\/strong>, type <em>Selected Quarter:<\/em><\/li>\n<li>Click <strong>Add Data<\/strong>, then add the <em>SelectedOption<\/em> variable (Text).<\/li>\n<\/ul>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Configure-Text-Label-1.png\" rel=\"lightbox-4\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-37119 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Configure-Text-Label-1.png\" alt=\"\" width=\"363\" height=\"514\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Configure-Text-Label-1.png 363w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Configure-Text-Label-1-106x150.png 106w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Configure-Text-Label-1-17x24.png 17w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Configure-Text-Label-1-25x36.png 25w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Configure-Text-Label-1-34x48.png 34w\" sizes=\"auto, (max-width: 363px) 100vw, 363px\" \/><\/a><\/p>\n<p class=\"intro-text\">Well done! You now have an Option Links that updates a variable shown in a Text Label.<\/p>\n<ul class=\"intro-text\">\n<li>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 display mode.<\/li>\n<li>See what happens to the Text Label when you click on the different options in the option links.<\/li>\n<\/ul>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Updating-the-Text-Label.png\" rel=\"lightbox-5\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-37118 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Updating-the-Text-Label.png\" alt=\"\" width=\"316\" height=\"121\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Updating-the-Text-Label.png 316w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Updating-the-Text-Label-150x57.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Updating-the-Text-Label-24x9.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Updating-the-Text-Label-36x14.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Updating-the-Text-Label-48x18.png 48w\" sizes=\"auto, (max-width: 316px) 100vw, 316px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<hr \/>\n<h2 class=\"page-subheading\">Configuration<\/h2>\n<p class=\"intro-text\">The following diagram shows a configured Option Links component:<\/p>\n<table style=\"width: 900px;\">\n<tbody>\n<tr>\n<td style=\"width: 450px; padding-left: 5px;\">\n<table style=\"width: 450px;\">\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"width: 120px; padding-left: 5px;\"><strong>Option Values<\/strong>:<\/td>\n<td style=\"width: 386.89px;\">These are the options that set the variable defined in <strong>Selected Option<\/strong>. The data is a list, which you can assign from either of the following <a title=\"See how to assign data\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/#Adding_Data\">Data Categories<\/a>: Dataset or Value. <img loading=\"lazy\" decoding=\"async\" class=\"wp-image-37126 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Data-set-or-value-2.png\" alt=\"\" width=\"344\" height=\"84\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Data-set-or-value-2.png 344w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Data-set-or-value-2-150x37.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Data-set-or-value-2-24x6.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Data-set-or-value-2-36x9.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Data-set-or-value-2-48x12.png 48w\" sizes=\"auto, (max-width: 344px) 100vw, 344px\" \/><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"width: 120px; padding-left: 5px;\"><strong>Option Names<\/strong>:<\/td>\n<td style=\"width: 386.89px;\">\n<p>If specified, then these are the values displayed on the option links buttons. Each value in <em>Option Names<\/em> is linked to the corresponding (by list position) value in <em>Option Values<\/em>. If <em>Option Names<\/em> are unspecified, then <em>Option Values<\/em> are displayed <em>(as demonstrated in the Quick Start)<\/em>.<\/p>\n<p>The data is a list, which you can assign from either of the following <a title=\"See how to assign data\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/#Adding_Data\">Data Categories<\/a>: Dataset or Value.<\/p>\n<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"width: 120px; padding-left: 5px;\"><strong>Selected Option<\/strong>:<\/td>\n<td style=\"width: 386.89px;\">The <a title=\"Variables\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-primers\/variables\/\">variable<\/a> that uses the selected <em>Option Value<\/em>.<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"width: 120px; padding-left: 5px;\"><strong>Style<\/strong>:<\/td>\n<td style=\"width: 386.89px;\">The style to apply to the option links component. If you are a Style Administrator, you can add a new Option Links style.<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"width: 120px; padding-left: 5px;\"><strong>Alignment<\/strong>:<\/td>\n<td style=\"width: 386.89px;\">Click on one of the boxes to align the component. (If there is an assigned style, this will override its alignment.)<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"width: 120px; padding-left: 5px;\"><strong>Position<\/strong>:<\/td>\n<td style=\"width: 386.89px;\">Defines the component's position in the grid layout\/precision layout.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<td>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Option-Links-Configuration.png\" rel=\"lightbox-6\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-37092 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Option-Links-Configuration.png\" alt=\"\" width=\"371\" height=\"605\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Option-Links-Configuration.png 371w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Option-Links-Configuration-92x150.png 92w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Option-Links-Configuration-15x24.png 15w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Option-Links-Configuration-22x36.png 22w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Option-Links-Configuration-29x48.png 29w\" sizes=\"auto, (max-width: 371px) 100vw, 371px\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<hr \/>\n<h2 class=\"page-subheading\"><span id=\"Tutorial\">Tutorial: Entity Downtime Hours for Selected Downtime Reasons<\/span><\/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\">In this tutorial, we'll add two Option Link components, a Text Label, and a Data Table.<\/p>\n<p class=\"intro-text\">At the end of the tutorial, your page should look something like this:<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Tutorial-Intro-pic-2.png\" rel=\"lightbox-7\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-37135 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Tutorial-Intro-pic-2.png\" alt=\"\" width=\"641\" height=\"503\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Tutorial-Intro-pic-2.png 641w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Tutorial-Intro-pic-2-150x118.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Tutorial-Intro-pic-2-24x19.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Tutorial-Intro-pic-2-36x28.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Tutorial-Intro-pic-2-48x38.png 48w\" sizes=\"auto, (max-width: 641px) 100vw, 641px\" \/><\/a><\/p>\n<p class=\"intro-text\">Let\u2019s go through this process, step-by-step.<\/p>\n<p class=\"left-bar\"><strong>Note<\/strong>: This configuration uses the <em>Sample Data <\/em>table and datasets that can be optionally made available during initial installation and setup. If you don't have access to this data, you will need to adjust the configuration to suit your data at your site.<\/p>\n<p class=\"intro-text\">\u00a0<\/p>\n<p class=\"intro-text\"><strong>Step 1. Prepare a Studio 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\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Step-1-add-a-page.png\" rel=\"lightbox-8\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-36024 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Step-1-add-a-page.png\" alt=\"\" width=\"553\" height=\"113\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Step-1-add-a-page.png 553w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Step-1-add-a-page-150x31.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Step-1-add-a-page-24x5.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Step-1-add-a-page-36x7.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Step-1-add-a-page-48x10.png 48w\" sizes=\"auto, (max-width: 553px) 100vw, 553px\" \/><\/a><\/p>\n<p class=\"intro-text\"><strong>Step 2. Add and Configure an Option Links component<\/strong><\/p>\n<p class=\"intro-text\">In this step we'll add an Option Links component, and configure it to use downtime departments for its Option Values, and selectedDowntimeDepartment as its <strong>Selected Option<\/strong>.<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Add-and-configure-option-links-1.png\" rel=\"lightbox-9\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-37140 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Add-and-configure-option-links-1.png\" alt=\"\" width=\"710\" height=\"580\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Add-and-configure-option-links-1.png 710w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Add-and-configure-option-links-1-150x123.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Add-and-configure-option-links-1-24x20.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Add-and-configure-option-links-1-36x29.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Add-and-configure-option-links-1-48x39.png 48w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/><\/a><\/p>\n<p class=\"intro-text\">1. Drag and drop an Option Links component near the top left of the page. The Option Links is in the Control <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/controls_sm.png\" rel=\"lightbox-10\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1840\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/controls_sm.png\" alt=\"Controls\" width=\"18\" height=\"16\" \/><\/a> group.<\/p>\n<p class=\"intro-text\">2. Configure the Option Values to use the list of downtime departments returned by a dataset query.<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Configure-Option-Links-1-1.png\" rel=\"lightbox-11\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-37161 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Configure-Option-Links-1-1.png\" alt=\"\" width=\"357\" height=\"313\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Configure-Option-Links-1-1.png 357w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Configure-Option-Links-1-1-150x132.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Configure-Option-Links-1-1-24x21.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Configure-Option-Links-1-1-36x32.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Configure-Option-Links-1-1-48x42.png 48w\" sizes=\"auto, (max-width: 357px) 100vw, 357px\" \/><\/a><\/p>\n<ul class=\"intro-text\">\n<li>Open the <strong>Option Values <\/strong>Data Selector by clicking on the field. Select the <strong>Dataset<\/strong> tab.<\/li>\n<li>Select the <em>DowntimeDepartment<\/em> <strong>Dataset Query<\/strong>.<\/li>\n<li>Select <em>DowntimeDepartment<\/em> as the <strong>Value Column<\/strong>.<\/li>\n<li>Click in the <strong>Option Values<\/strong> field again, to close the Data Selector.<\/li>\n<\/ul>\n<p class=\"note\">This dataset query will return all downtime departments.<\/p>\n<p class=\"intro-text\">3. Type a variable name <em>selectedDowntimeDepartment<\/em> in the <strong>Selected Option<\/strong> field.<\/p>\n<p class=\"intro-text\">4. Position the Option Links: type <em>45<\/em> in the <strong>X<\/strong> edit box.<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Finish-Configuring-Option-Links-1.png\" rel=\"lightbox-12\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-37158 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Finish-Configuring-Option-Links-1.png\" alt=\"\" width=\"364\" height=\"492\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Finish-Configuring-Option-Links-1.png 364w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Finish-Configuring-Option-Links-1-111x150.png 111w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Finish-Configuring-Option-Links-1-18x24.png 18w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Finish-Configuring-Option-Links-1-27x36.png 27w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Finish-Configuring-Option-Links-1-36x48.png 36w\" sizes=\"auto, (max-width: 364px) 100vw, 364px\" \/><\/a><\/p>\n<p class=\"intro-text\"><strong>Step 3. Add and Configure another Option Links component<\/strong><\/p>\n<p class=\"intro-text\">In this step we'll add a second Option Links component, and configure it to use downtime reasons for its <strong>Option Values<\/strong>, downtime display reasons for its <strong>Option Names<\/strong>, and <em>selectedDowntimeReason<\/em> as the variable for its <strong>Selected Option<\/strong>.<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Add-and-configure-option-links-2.png\" rel=\"lightbox-13\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-37139 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Add-and-configure-option-links-2.png\" alt=\"\" width=\"1008\" height=\"574\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Add-and-configure-option-links-2.png 1008w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Add-and-configure-option-links-2-768x437.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Add-and-configure-option-links-2-150x85.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Add-and-configure-option-links-2-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Add-and-configure-option-links-2-36x21.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Add-and-configure-option-links-2-48x27.png 48w\" sizes=\"auto, (max-width: 1008px) 100vw, 1008px\" \/><\/a><\/p>\n<p class=\"intro-text\">1. Drag and drop an Option Links component below the first one.<\/p>\n<p class=\"intro-text\">2. Configure the Option Values to use the list of downtime reasons returned by a dataset query.<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Configure-Option-Links-2a.png\" rel=\"lightbox-14\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-37160 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Configure-Option-Links-2a.png\" alt=\"\" width=\"355\" height=\"375\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Configure-Option-Links-2a.png 355w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Configure-Option-Links-2a-142x150.png 142w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Configure-Option-Links-2a-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Configure-Option-Links-2a-34x36.png 34w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Configure-Option-Links-2a-45x48.png 45w\" sizes=\"auto, (max-width: 355px) 100vw, 355px\" \/><\/a><\/p>\n<ul class=\"intro-text\">\n<li>Open the <strong>Option Values <\/strong>Data Selector by clicking on the field. Select the <strong>Dataset<\/strong> tab.<\/li>\n<li>Select the <em>DowntimeReason<\/em> <strong>Dataset Query<\/strong>.<\/li>\n<li>Select the <em>selectedDowntimeDepartment<\/em> variable as the <strong>DowntimeDepartment<\/strong> Dataset Parameter.<\/li>\n<li>Select <em>DowntimeReason<\/em> as the <strong>Value Column<\/strong>.<\/li>\n<li>Click in the <strong>Option Values<\/strong> field again, to close the Data Selector.<\/li>\n<\/ul>\n<p class=\"intro-text\">3. Configure the Option Names to use the list of downtime display reasons returned by a dataset query.<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Configure-Option-Links-2b.png\" rel=\"lightbox-15\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-37159 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Configure-Option-Links-2b.png\" alt=\"\" width=\"356\" height=\"419\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Configure-Option-Links-2b.png 356w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Configure-Option-Links-2b-127x150.png 127w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Configure-Option-Links-2b-20x24.png 20w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Configure-Option-Links-2b-31x36.png 31w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Configure-Option-Links-2b-41x48.png 41w\" sizes=\"auto, (max-width: 356px) 100vw, 356px\" \/><\/a><\/p>\n<ul class=\"intro-text\">\n<li>Open the <strong>Option Names <\/strong>Data Selector by clicking on the field. Select the <strong>Dataset<\/strong> tab.<\/li>\n<li>Select the <em>DowntimeReason<\/em> <strong>Dataset Query<\/strong>.<\/li>\n<li>Select the <em>selectedDowntimeDepartment<\/em> variable as the <strong>DowntimeDepartment<\/strong> Dataset Parameter.<\/li>\n<li>Select <em>DowntimeDisplayReason<\/em> as the <strong>Value Column<\/strong>.<\/li>\n<li>Click in the <strong>Option Names<\/strong> field again, to close the Data Selector.<\/li>\n<\/ul>\n<p class=\"note\">The dataset query used for <strong>Option Values<\/strong> and also for <strong>Option Names<\/strong> will return downtime reasons (and downtime display reasons) for the <em>selectedDowntimeDepartment<\/em> variable.<\/p>\n<p class=\"intro-text\">4. Type a variable name <em>selectedDowntimeReason<\/em> in the <strong>Selected Option<\/strong> field.<\/p>\n<p class=\"intro-text\">5. Position the Option Links: type <em>45<\/em> in the <strong>X<\/strong> edit box.<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Finish-Configuring-Option-Links-2.png\" rel=\"lightbox-16\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-37157 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Finish-Configuring-Option-Links-2.png\" alt=\"\" width=\"367\" height=\"490\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Finish-Configuring-Option-Links-2.png 367w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Finish-Configuring-Option-Links-2-112x150.png 112w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Finish-Configuring-Option-Links-2-18x24.png 18w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Finish-Configuring-Option-Links-2-27x36.png 27w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Finish-Configuring-Option-Links-2-36x48.png 36w\" sizes=\"auto, (max-width: 367px) 100vw, 367px\" \/><\/a><\/p>\n<p class=\"intro-text\"><strong>Step 4. Add Default Values<\/strong><\/p>\n<p class=\"intro-text\">In this step we'll add default values for the two Option Links components.<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Add-default-values.png\" rel=\"lightbox-17\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-37141 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Add-default-values.png\" alt=\"\" width=\"365\" height=\"625\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Add-default-values.png 365w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Add-default-values-88x150.png 88w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Add-default-values-14x24.png 14w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Add-default-values-21x36.png 21w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Add-default-values-28x48.png 28w\" sizes=\"auto, (max-width: 365px) 100vw, 365px\" \/><\/a><\/p>\n<p class=\"intro-text\">1. Click <strong>Defaults<\/strong> on the Studio ribbon tab, to open the Defaults Panel.<\/p>\n<p class=\"intro-text\">2. Click <strong>Add<\/strong> twice to add two default values.<\/p>\n<p class=\"intro-text\">3. Configure the first default value:<\/p>\n<ul class=\"intro-text\">\n<li>Type <em>selectedDowntimeDepartment <\/em> in the <em>Variable Name<\/em> edit box.<\/li>\n<li>Select <em>Text <\/em> from the drop-down list.<\/li>\n<li>Type <em>Production <\/em> in the <em>Text<\/em> edit box.<\/li>\n<\/ul>\n<p class=\"intro-text\">4. Configure the second default value:<\/p>\n<ul class=\"intro-text\">\n<li>Type <em>selectedDowntimeReason <\/em> in the <em>Variable Name<\/em> edit box.<\/li>\n<li>Select <em>Text <\/em> from the drop-down list.<\/li>\n<li>Type <em>No Issues <\/em> in the <em>Text<\/em> edit box.<\/li>\n<\/ul>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/default-value\/\" data-slimstat-clicked=\"false\" data-slimstat-type=\"2\" data-slimstat-tracking=\"false\" data-slimstat-callback=\"false\" data-slimstat-async=\"false\">Default Values<\/a><\/p>\n<p class=\"intro-text\"><strong>Step 5. Add a Text Label<\/strong><\/p>\n<p class=\"intro-text\">In this step we'll add a Text Label showing the downtime reason variable, <em>selectedDowntimeReason<\/em>.<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Add-and-configure-text-label.png\" rel=\"lightbox-18\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-37138 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Add-and-configure-text-label.png\" alt=\"\" width=\"1017\" height=\"459\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Add-and-configure-text-label.png 1017w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Add-and-configure-text-label-768x347.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Add-and-configure-text-label-150x68.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Add-and-configure-text-label-24x11.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Add-and-configure-text-label-36x16.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Add-and-configure-text-label-48x22.png 48w\" sizes=\"auto, (max-width: 1017px) 100vw, 1017px\" \/><\/a><\/p>\n<ul class=\"intro-text\">\n<li>Drag and drop a Text Label below the second Option Links.<\/li>\n<li>In the <strong>Content<\/strong> edit box, type <em>Entity Downtime Hours for Downtime Reason: <\/em> then click <strong>Add Data <\/strong> and add the <em>selectedDowntimeReason<\/em> variable.<\/li>\n<li>Position the Text Label: type <em>45<\/em> in the <strong>X<\/strong> edit box.<\/li>\n<\/ul>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/text-label\/\" data-slimstat-clicked=\"false\" data-slimstat-type=\"2\" data-slimstat-tracking=\"false\" data-slimstat-callback=\"false\" data-slimstat-async=\"false\">Text Label tutorial<\/a><\/p>\n<p class=\"intro-text\"><strong>Step 6. Add a Data Table<\/strong><\/p>\n<p class=\"intro-text\">In this step we'll add a Data Table showing the downtime hours, per entity, for the Downtime Reason variable, <em>selectedDowntimeReason<\/em>.<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Add-and-configure-data-table.png\" rel=\"lightbox-19\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-37137 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Add-and-configure-data-table.png\" alt=\"\" width=\"800\" height=\"732\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Add-and-configure-data-table.png 800w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Add-and-configure-data-table-768x703.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Add-and-configure-data-table-150x137.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Add-and-configure-data-table-24x22.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Add-and-configure-data-table-36x33.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Add-and-configure-data-table-48x44.png 48w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/a><\/p>\n<p class=\"intro-text\">1. Drag and drop a Data Table below the Text Label.<\/p>\n<p class=\"intro-text\">2. Configure the Data Table's <strong>Data<\/strong> to return downtime per entity, for the Option Link's downtime reason, <em>selectedDowntimeReason<\/em>:<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Configure-data-table.png\" rel=\"lightbox-20\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-37147 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Configure-data-table.png\" alt=\"\" width=\"353\" height=\"430\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Configure-data-table.png 353w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Configure-data-table-123x150.png 123w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Configure-data-table-20x24.png 20w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Configure-data-table-30x36.png 30w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Configure-data-table-39x48.png 39w\" sizes=\"auto, (max-width: 353px) 100vw, 353px\" \/><\/a><\/p>\n<ul class=\"intro-text\">\n<li>Open the <strong>Data <\/strong>Data Selector by clicking on the field. Select the <strong>Dataset<\/strong> tab.<\/li>\n<li>Select the <em>DowntimeByEntity<\/em> <strong>Dataset Query<\/strong>.<\/li>\n<li>Select <em>selectedDowntimeReason<\/em> as the <strong>DowntimeReason<\/strong> Dataset Parameter.<\/li>\n<li>Select <em>endTime<\/em> as the <strong>EndDate<\/strong> Dataset Parameter.<\/li>\n<li>Select <em>startTime<\/em> as the <strong>StartDate<\/strong> Dataset Parameter.<\/li>\n<\/ul>\n<p class=\"note\">This dataset query will sum and group the downtime hours per entity, for the period defined by startDate and endDate, and for the <em>selectedDowntimeReason<\/em> variable.<\/p>\n<p class=\"intro-text\">3. Click <strong>Add Column<\/strong> and add a column for Entity:<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Add-Entity-Column.png\" rel=\"lightbox-21\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-37149 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Add-Entity-Column.png\" alt=\"\" width=\"331\" height=\"363\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Add-Entity-Column.png 331w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Add-Entity-Column-137x150.png 137w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Add-Entity-Column-22x24.png 22w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Add-Entity-Column-33x36.png 33w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Add-Entity-Column-44x48.png 44w\" sizes=\"auto, (max-width: 331px) 100vw, 331px\" \/><\/a><\/p>\n<ul class=\"intro-text\">\n<li><strong>Header:<\/strong> Type <em>Entity<\/em><\/li>\n<li><strong>Column:<\/strong> Select the <em>Entity<\/em> column from the drop-down list<\/li>\n<li><strong>Column Type:<\/strong> Select <em>Text <\/em> from the drop-down list<\/li>\n<\/ul>\n<p class=\"intro-text\">4. Click <strong>Add Column<\/strong> and add a column for Downtime Hours:<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Add-DowntimeHours-Column.png\" rel=\"lightbox-22\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-37148 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Add-DowntimeHours-Column.png\" alt=\"\" width=\"342\" height=\"485\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Add-DowntimeHours-Column.png 342w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Add-DowntimeHours-Column-106x150.png 106w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Add-DowntimeHours-Column-17x24.png 17w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Add-DowntimeHours-Column-25x36.png 25w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Add-DowntimeHours-Column-34x48.png 34w\" sizes=\"auto, (max-width: 342px) 100vw, 342px\" \/><\/a><\/p>\n<ul class=\"intro-text\">\n<li><strong>Header:<\/strong> Type <em>Downtime Hours<\/em><\/li>\n<li><strong>Column:<\/strong> Select the <em>SumDowntimeHours<\/em> column from the drop-down list<\/li>\n<li><strong>Column Type:<\/strong> Select <em>Number <\/em> from the drop-down list<\/li>\n<\/ul>\n<p class=\"intro-text\">5. Deselect <strong>Filterable, Column Resizable, Sortable<\/strong>.<\/p>\n<p class=\"intro-text\">6. Position the Data Table: type <em>45<\/em> in the <strong>X<\/strong> edit box.<\/p>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/data-table\/\" data-slimstat-clicked=\"false\" data-slimstat-type=\"2\" data-slimstat-tracking=\"false\" data-slimstat-callback=\"false\" data-slimstat-async=\"false\">Data Table tutorial<\/a><\/p>\n<p class=\"intro-text\"><strong>Step 7. All done!<\/strong><\/p>\n<p class=\"intro-text\">Congratulations! You now have an Option Links that changes another Option Links' option values, which in turn updates a Text Label and a Data Table.<\/p>\n<ul class=\"intro-text\">\n<li>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 display mode.<\/li>\n<li>Select a different Downtime Department from the first Option Links. Note how the second Option Links shows Downtime resons for that department. Select one of the downtime reasons, and note how the Text Label and Data Table update.<\/li>\n<\/ul>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Tutorial-conclusion.png\" rel=\"lightbox-23\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-37142 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Tutorial-conclusion.png\" alt=\"\" width=\"549\" height=\"490\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Tutorial-conclusion.png 549w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Tutorial-conclusion-150x134.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Tutorial-conclusion-24x21.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Tutorial-conclusion-36x32.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/02\/Tutorial-conclusion-48x43.png 48w\" sizes=\"auto, (max-width: 549px) 100vw, 549px\" \/><\/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\u2019t 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<h2 class=\"page-subheading\">Release History<\/h2>\n<ul class=\"overview\">\n<li>Option Links 4.5.2 (this release)\n<ul class=\"intro-text\">\n<li class=\"overview\">In this release, you can override alignment of the selected style.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul class=\"intro-text\">\n<li><a title=\"Option Links\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/option-links\/option-links-4-4\/\">Option Links 4.4<\/a><\/li>\n<\/ul>\n<ul class=\"intro-text\">\n<li><a title=\"Option Links\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/option-links\/option-links-4-3-2\/\">Option Links 4.3.2<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>The Option Links component is used for selecting an option, from a row of options. The selected option is underlined, and updates a variable which can be used elsewhere on the page.<\/p>\n<p class=\"continue-reading-button\"> <a class=\"continue-reading-link\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/option-links\/\">Read more<i class=\"crycon-right-dir\"><\/i><\/a><\/p>\n","protected":false},"author":8,"featured_media":4507,"parent":1407,"menu_order":348,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":"","_members_access_role":[],"_members_access_error":""},"categories":[11],"tags":[624,136],"class_list":["post-37039","page","type-page","status-publish","has-post-thumbnail","hentry","category-tutorial","tag-controls","tag-option-links","Product-ex"],"_links":{"self":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/37039","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=37039"}],"version-history":[{"count":2,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/37039\/revisions"}],"predecessor-version":[{"id":67042,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/37039\/revisions\/67042"}],"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\/4507"}],"wp:attachment":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media?parent=37039"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/categories?post=37039"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/tags?post=37039"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}