{"id":14010,"date":"2016-04-15T11:19:14","date_gmt":"2016-04-15T03:19:14","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=14010"},"modified":"2017-12-14T14:38:04","modified_gmt":"2017-12-14T06:38:04","slug":"switch-4-3-2","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/switch\/switch-4-3-2\/","title":{"rendered":"Switch (4.3.2)"},"content":{"rendered":"\n<p class=\"left-bar\">This article applies to versions 4.3.2 and earlier of P2 Explorer.\u00a0For help on the latest version of the Switch, see <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/switch\/\">Switch<\/a>.<\/p>\n<h3 class=\"page-subheading\"><span id=\"Overview\">Overview<\/span><\/h3>\n<p class=\"intro-text\">The Switch\u00a0Layout is a powerful component that can change the components that are displayed on a page depending on what the user selects on that page. It's typically used in conjunction with a <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/grid-layout\/\">grid layout<\/a> on <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/killer-dashboards\/\">dashboard-style pages<\/a>.<\/p>\n<p class=\"intro-text\">The following diagram shows the configuration options for the Switch layout:<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchconfig.png\" rel=\"lightbox-0\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-4726\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchconfig-800x385.png\" alt=\"switchconfig\" width=\"800\" height=\"385\" \/><\/a><\/p>\n<table>\n<tbody>\n<tr>\n<td width=\"130\"><strong>Switch Event<\/strong>:<\/td>\n<td>The event that determines what to display in the Switch layout. For example, you could use a <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/combo-box\/\">combo box<\/a> to trigger an <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/events\/\">event<\/a> called '<em>selectedOption<\/em>'. Whenever a user selects a different item from the combo box, this triggers an event that can change what is displayed in the Switch layout.<\/td>\n<\/tr>\n<tr>\n<td width=\"130\"><span style=\"color: #000000;\"><b>Conditions<\/b><\/span>:<\/td>\n<td>\n<p>The conditions for which you want to change the Switch display. The conditions must match the event options for the Switch Event. For example, if the combo box contains 3 options (Oil, Gas, Water), you should have 3 matching conditions (Oil, Gas, Water). The buttons perform the following functions:<\/p>\n<ul>\n<li><strong>Add<\/strong> - adds a new condition<\/li>\n<li><strong>Remove<\/strong> - removes the selected condition from the Switch (does not remove it from the component that generates the event)<\/li>\n<li><strong>Set<\/strong> - changes the \"active\" view of the Switch component in Studio. Click this button when you want to configure what is going to be displayed when that condition is met. \u00a0<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr \/>\n<h3 class=\"page-subheading\"><span id=\"Tutorial\">Tutorial<\/span><\/h3>\n<p class=\"intro-text\">The Switch component provides some exciting opportunities for interactive page design.\u00a0In this tutorial, we\u2019ll look how to change the chart displayed on the page, depending on what the user selects from a combo box.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchoil.png\" rel=\"lightbox-1\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4730\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchoil.png\" alt=\"switchoil\" width=\"392\" height=\"396\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchoil.png 392w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchoil-148x150.png 148w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchoil-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchoil-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchoil-48x48.png 48w\" sizes=\"auto, (max-width: 392px) 100vw, 392px\" \/><\/a><\/p>\n<p class=\"intro-text\">Configuring this component might seem a little daunting at first, but you'll soon get the hang of it.\u00a0Let\u2019s look at how we\u2019re actually going to do this, step-by-step.<\/p>\n<hr \/>\n<h3 class=\"page-subheading\"><span id=\"Step_by_Step_Creating_a_Schematic_Using_Precision_Layout\">Step by Step: Using a Switch to Change the Displayed Chart<\/span><\/h3>\n<p class=\"intro-text\">Before you start, open a new tab in Explorer and click the \u201cCreate a New Page in Studio Mode\u201d thumbnail. Choose the <a title=\"Grid Layout\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/grid-layout\/\" data-slimstat-tracking=\"false\" data-slimstat-callback=\"true\" data-slimstat-type=\"2\">grid<\/a>\u00a0layout \u2013 you can adjust the rows and columns if you like but it\u2019s not important for this exercise.<\/p>\n<p class=\"intro-text\">You will need to adjust the configuration to suit your data at your site.<\/p>\n<p class=\"intro-text\"><strong>Step 1. Add the\u00a0source data<\/strong><\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchdata.png\" rel=\"lightbox-2\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-4735\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchdata-800x519.png\" alt=\"switchdata\" width=\"800\" height=\"519\" \/><\/a><\/p>\n<p class=\"intro-text\">First, let's <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/add-data\/\" data-slimstat-tracking=\"false\" data-slimstat-callback=\"true\" data-slimstat-type=\"2\">add\u00a0the data<\/a>\u00a0that will drive the display.\u00a0<\/p>\n<ul class=\"intro-text\">\n<li>Add the <em>ProductionAndTargetsMonthly1\u00a0<\/em><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/add-data\/add-a-dataset\/\" data-slimstat-tracking=\"false\" data-slimstat-callback=\"true\" data-slimstat-type=\"2\">dataset<\/a>, and configure it as follows:\n<ul class=\"intro-text\">\n<li>Name: ProductionAndTargetsMonthly1<\/li>\n<li>Query: (Text) ProductionAndTargetsMonthly<\/li>\n<li>EntitiesList: (List) Bossier 1, Bossier 2<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p class=\"intro-text\">Click the <strong>Preview<\/strong> button and observe the columns in the dataset. You may want to leave this preview table open during the next steps.<\/p>\n<p class=\"intro-text\">\u00a0<\/p>\n<p class=\"intro-text\"><strong>Step 2.\u00a0Add and Configure a Combo Box<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchcombo.png\" rel=\"lightbox-3\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-4736\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchcombo-800x212.png\" alt=\"switchcombo\" width=\"800\" height=\"212\" \/><\/a><\/p>\n<p class=\"intro-text\">This step adds the control that will change what is displayed by the Switch component.<\/p>\n<ul class=\"intro-text\">\n<li>Drag and drop the <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/combo-box\/\">Combo Box<\/a> component onto the canvas.<\/li>\n<li>Configure it as follows:\n<ul class=\"intro-text\">\n<li>Option Values: (List) Oil Production, Gas Production, Water Production<\/li>\n<li>Option Names: (leave blank)<\/li>\n<li>Selected Option: selectedOption<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p class=\"intro-text\">Take note of the Option Values here, as you will need them when you start configuring the Switch conditions.<\/p>\n<p class=\"intro-text\"><strong>Step 3. Add\u00a0the\u00a0Switch Component<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchdrag.png\" rel=\"lightbox-4\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-4738\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchdrag-800x318.png\" alt=\"switchdrag\" width=\"800\" height=\"318\" \/><\/a><\/p>\n<p class=\"intro-text\">Drag and drop the Switch\u00a0component\u00a0onto a grid cell. The component is located in the Layout group.<\/p>\n<p class=\"intro-text\"><strong>Step 4. Configure the Switch Event<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchevent.png\" rel=\"lightbox-5\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4740\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchevent.png\" alt=\"switchevent\" width=\"763\" height=\"439\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchevent.png 763w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchevent-150x86.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchevent-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchevent-36x21.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchevent-48x28.png 48w\" sizes=\"auto, (max-width: 763px) 100vw, 763px\" \/><\/a><\/p>\n<p class=\"intro-text\">This step specifies the event that will ultimately control the display.<\/p>\n<ul class=\"intro-text\">\n<li>In the drop-down list next to Switch Event, select the event \"<strong>selectedOption<\/strong>\". This is the event generated from the combo box we added earlier.<\/li>\n<\/ul>\n<p class=\"intro-text\">Note that all events that have been configured on the page will appear in this list.\u00a0<\/p>\n<p class=\"intro-text\"><strong>Step 5. Configure the Default Condition<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchdefault.png\" rel=\"lightbox-6\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-4741\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchdefault-800x282.png\" alt=\"switchdefault\" width=\"800\" height=\"282\" \/><\/a><\/p>\n<p class=\"intro-text\">This step is where we specify what is to be displayed if the user has not selected anything from the combo box.<\/p>\n<ul class=\"intro-text\">\n<li>As this is the only condition available at this time, it will be surrounded by a blue border, indicating this is the selected condition.<\/li>\n<li>Notice that the grid containing the Switch is labelled as \"<em>Default<\/em>\" - this indicates the condition that is being configured.<\/li>\n<li>Drag and drop the <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/text-label\/\">Text Label<\/a> component\u00a0onto the canvas <strong>in the same grid that contains the Switch control and is labelled \"Default\"<\/strong>.<\/li>\n<li>Configure the Text Label as follows:\n<ul class=\"intro-text\">\n<li>Content: \"<em>Nothing to see? Choose something from the drop-down!<\/em>\"<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchtext.png\" rel=\"lightbox-7\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-4742\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchtext-800x416.png\" alt=\"switchtext\" width=\"800\" height=\"416\" \/><\/a><\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/new-year-152044_640.png\" rel=\"lightbox-8\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-4743\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/new-year-152044_640.png\" alt=\"new-year-152044_640\" width=\"47\" height=\"47\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/new-year-152044_640.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/new-year-152044_640-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/new-year-152044_640-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/new-year-152044_640-48x48.png 48w\" sizes=\"auto, (max-width: 47px) 100vw, 47px\" \/><\/a>\u00a0 <strong>Your 1st\u00a0condition has been configured!<\/strong><\/p>\n<p class=\"intro-text\"><strong>Step 6. Return to the Switch Layer\u00a0<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchtextswitch.png\" rel=\"lightbox-9\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4747\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchtextswitch.png\" alt=\"switchtextswitch\" width=\"794\" height=\"474\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchtextswitch.png 794w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchtextswitch-150x90.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchtextswitch-768x458.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchtextswitch-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchtextswitch-36x21.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchtextswitch-48x29.png 48w\" sizes=\"auto, (max-width: 794px) 100vw, 794px\" \/><\/a><\/p>\n<p class=\"intro-text\">To configure the rest of the conditions, we need to return to the Switch component. To do this we make use of Studio's canvas layers, which allows us to access multiple layers within a grid cell.<\/p>\n<ul class=\"intro-text\">\n<li>Right-click on the cell containing the Switch.<\/li>\n<li>In the shortcut menu, select \"<strong>Switch<\/strong>\".<\/li>\n<\/ul>\n<p class=\"intro-text\">You are returned to the Switch view, with the Default condition selected.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchdefaultview.png\" rel=\"lightbox-10\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4748\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchdefaultview.png\" alt=\"switchdefaultview\" width=\"796\" height=\"463\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchdefaultview.png 796w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchdefaultview-150x87.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchdefaultview-768x447.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchdefaultview-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchdefaultview-36x21.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchdefaultview-48x28.png 48w\" sizes=\"auto, (max-width: 796px) 100vw, 796px\" \/><\/a><\/p>\n<p class=\"intro-text\"><strong>Step 7. Add Another Condition<\/strong><\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchoilcondition32.png\" rel=\"lightbox-11\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-4754\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchoilcondition32-800x444.png\" alt=\"switchoilcondition3\" width=\"800\" height=\"444\" \/><\/a>\u00a0<\/p>\n<p class=\"intro-text\">Now we'll add the next condition.<\/p>\n<ul class=\"intro-text\">\n<li>Click \"<strong>Add<\/strong>\".<\/li>\n<li>In the box that appears, type \"<strong>Oil Production<\/strong>\". Remember that this corresponds to one of the options set in the combo box earlier.<\/li>\n<li>Click \"<strong>Set<\/strong>\".<\/li>\n<\/ul>\n<p class=\"intro-text\">Notice that the blue outline moves to the condition you just created, and that the grid cell on the canvas now displays <strong>'Oil Production'<\/strong>.<\/p>\n<p class=\"intro-text\"><strong>Step 8. Add a Chart to the Switch and Configure It<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchoilconfig.png\" rel=\"lightbox-12\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-4755\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchoilconfig-800x564.png\" alt=\"switchoilconfig\" width=\"800\" height=\"564\" \/><\/a><\/p>\n<p class=\"intro-text\">With the Oil Production condition set, add a <a title=\"Charts\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/charts\/\" data-slimstat-tracking=\"false\" data-slimstat-callback=\"true\" data-slimstat-type=\"2\">chart<\/a>\u00a0that will display when the user selects \"Oil Production\" from the combo box. Drag and drop a Chart\u00a0onto the cell labelled 'Oil Production'. Configure a\u00a0<a title=\"Stacked Bar Chart\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/charts\" type=\"2\">bar chart<\/a> as follows:<\/p>\n<ul class=\"intro-text\">\n<li>Source Data:\u00a0ProductionAndTargetsMonthly1<\/li>\n<li>For the chart series:\n<ul class=\"intro-text\">\n<li>Type: Bar series<\/li>\n<li>Y Column: (Text)\u00a0Oil<\/li>\n<li>Colour: (blank)<\/li>\n<li>Colour Matcher: (Text) Oil<\/li>\n<\/ul>\n<\/li>\n<li>For the X Axis:\n<ul class=\"intro-text\">\n<li>Column: (Text) entity<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p class=\"intro-text\">You'll see a chart with green bars appear in the 'Oil Production' cell.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/new-year-152044_640.png\" rel=\"lightbox-8\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-4743\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/new-year-152044_640.png\" alt=\"new-year-152044_640\" width=\"47\" height=\"47\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/new-year-152044_640.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/new-year-152044_640-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/new-year-152044_640-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/new-year-152044_640-48x48.png 48w\" sizes=\"auto, (max-width: 47px) 100vw, 47px\" \/><\/a>\u00a0 <strong>Your 2nd\u00a0condition has been configured!<\/strong><\/p>\n<p class=\"intro-text\"><strong>Step 9. <strong>Add Another Condition<\/strong><\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchgasswitch1.png\" rel=\"lightbox-14\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-4757 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchgasswitch1.png\" alt=\"\" width=\"789\" height=\"410\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchgasswitch1.png 789w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchgasswitch1-150x78.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchgasswitch1-768x399.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchgasswitch1-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchgasswitch1-36x19.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchgasswitch1-48x25.png 48w\" sizes=\"auto, (max-width: 789px) 100vw, 789px\" \/><\/a><\/p>\n<p class=\"intro-text\">Each time you want to add a condition, you need to return to the Switch component.\u00a0<\/p>\n<ul class=\"intro-text\">\n<li>Right-click on the 'Oil Production' cell.<\/li>\n<li>In the shortcut menu, select \"<strong>Switch<\/strong>\".<\/li>\n<\/ul>\n<p class=\"intro-text\">Then, you can go ahead and add\u00a0another\u00a0condition.<\/p>\n<ul class=\"intro-text\">\n<li>Click \"<strong>Add<\/strong>\".<\/li>\n<li>In the box that appears, type \"<strong>Gas Production<\/strong>\".\u00a0Remember that this corresponds to one of the options set in the combo box earlier.<\/li>\n<li>Click \"<strong>Set<\/strong>\".<\/li>\n<\/ul>\n<p class=\"intro-text\">Notice that the blue outline moves to the condition you just created, and that the grid cell on the canvas now displays <strong>'Gas\u00a0Production'<\/strong>.<\/p>\n<p class=\"intro-text\"><strong>Step 10. Add Another Chart to the Switch and Configure It<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchgaschart.png\" rel=\"lightbox-15\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-4759\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchgaschart-800x574.png\" alt=\"switchgaschart\" width=\"800\" height=\"574\" \/><\/a><\/p>\n<p class=\"intro-text\">With the Gas\u00a0Production condition set, add a <a title=\"Charts\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/charts\/\" data-slimstat-tracking=\"false\" data-slimstat-callback=\"true\" data-slimstat-type=\"2\">chart<\/a>\u00a0that will display when the user selects \"Gas\u00a0Production\" from the combo box. Drag and drop a Chart\u00a0onto the cell labelled 'Gas\u00a0Production'. Configure a\u00a0<a title=\"Stacked Bar Chart\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/charts\" type=\"2\">bar chart<\/a> as follows:<\/p>\n<ul class=\"intro-text\">\n<li>Source Data:\u00a0ProductionAndTargetsMonthly1<\/li>\n<li>For the chart series:\n<ul class=\"intro-text\">\n<li>Type: Bar series<\/li>\n<li>Y Column: (Text)\u00a0Gas<\/li>\n<li>Colour: (blank)<\/li>\n<li>Colour Matcher: (Text)\u00a0Gas<\/li>\n<\/ul>\n<\/li>\n<li>For the X Axis:\n<ul class=\"intro-text\">\n<li>Column: (Text) entity<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p class=\"intro-text\">You'll see a chart with red\u00a0bars appear in the 'Gas\u00a0Production' cell.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/new-year-152044_640.png\" rel=\"lightbox-8\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-4743\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/new-year-152044_640.png\" alt=\"new-year-152044_640\" width=\"47\" height=\"47\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/new-year-152044_640.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/new-year-152044_640-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/new-year-152044_640-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/new-year-152044_640-48x48.png 48w\" sizes=\"auto, (max-width: 47px) 100vw, 47px\" \/><\/a>\u00a0 <strong>Your 3rd\u00a0condition has been configured!<\/strong><\/p>\n<p class=\"intro-text\"><strong>Step 11.\u00a0Add Another Condition<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchwater.png\" rel=\"lightbox-17\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4760\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchwater.png\" alt=\"switchwater\" width=\"786\" height=\"416\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchwater.png 786w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchwater-150x79.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchwater-768x406.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchwater-24x13.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchwater-36x19.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchwater-48x25.png 48w\" sizes=\"auto, (max-width: 786px) 100vw, 786px\" \/><\/a><\/p>\n<p class=\"intro-text\">Remember that\u00a0to add a condition, you need to return to the Switch component.\u00a0<\/p>\n<ul class=\"intro-text\">\n<li>Right-click on the 'Gas Production' cell.<\/li>\n<li>In the shortcut menu, select \"<strong>Switch<\/strong>\".<\/li>\n<\/ul>\n<p class=\"intro-text\">Now\u00a0go ahead and add the final condition.\u00a0<\/p>\n<ul class=\"intro-text\">\n<li>Click \"<strong>Add<\/strong>\".<\/li>\n<li>In the box that appears, type \"<strong>Water Production<\/strong>\".\u00a0Remember that this corresponds to the option set in the combo box earlier.<\/li>\n<li>Click \"<strong>Set<\/strong>\".<\/li>\n<\/ul>\n<p class=\"intro-text\">Notice that the blue outline moves to the condition you just created, and that the grid cell on the canvas now displays <strong>'Water\u00a0Production'<\/strong>.<\/p>\n<p class=\"intro-text\"><strong>Step 12. Add the Final\u00a0Chart to the Switch and Configure It<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchwaterchart.png\" rel=\"lightbox-18\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-4761\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchwaterchart-800x573.png\" alt=\"switchwaterchart\" width=\"800\" height=\"573\" \/><\/a><\/p>\n<p class=\"intro-text\">With the Water\u00a0Production condition set, add a <a title=\"Charts\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/charts\/\" data-slimstat-tracking=\"false\" data-slimstat-callback=\"true\" data-slimstat-type=\"2\">chart<\/a>\u00a0that will display when the user selects \"Water\u00a0Production\" from the combo box. Drag and drop a Chart\u00a0onto the cell labelled 'Water\u00a0Production'. Configure a\u00a0<a title=\"Stacked Bar Chart\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/charts\" type=\"2\">bar chart<\/a> as follows:<\/p>\n<ul class=\"intro-text\">\n<li>Source Data:\u00a0ProductionAndTargetsMonthly1<\/li>\n<li>For the chart series:\n<ul class=\"intro-text\">\n<li>Type: Bar series<\/li>\n<li>Y Column: (Text)\u00a0Water<\/li>\n<li>Colour: (blank)<\/li>\n<li>Colour Matcher: (Text)\u00a0Water<\/li>\n<\/ul>\n<\/li>\n<li>For the X Axis:\n<ul class=\"intro-text\">\n<li>Column: (Text) entity<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p class=\"intro-text\">You'll see a chart with blue\u00a0bars appear in the 'Water\u00a0Production' cell.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/new-year-152044_640.png\" rel=\"lightbox-8\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-4743\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/new-year-152044_640.png\" alt=\"new-year-152044_640\" width=\"47\" height=\"47\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/new-year-152044_640.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/new-year-152044_640-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/new-year-152044_640-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/new-year-152044_640-48x48.png 48w\" sizes=\"auto, (max-width: 47px) 100vw, 47px\" \/><\/a>\u00a0 <strong>Your final\u00a0condition has been configured!<\/strong><\/p>\n<p class=\"intro-text\"><strong><br \/>\nStep 13. All done!<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchoil.png\" rel=\"lightbox-1\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4730\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchoil.png\" alt=\"switchoil\" width=\"392\" height=\"396\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchoil.png 392w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchoil-148x150.png 148w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchoil-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchoil-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/07\/switchoil-48x48.png 48w\" sizes=\"auto, (max-width: 392px) 100vw, 392px\" \/><\/a><\/p>\n<p class=\"intro-text\">Congratulations! You now page with a chart that changes depending on what the user selects from the combo box.<\/p>\n<ul class=\"intro-text\">\n<li>Click the Finish and Open\u00a0<a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/livemode1.png\" rel=\"lightbox-21\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2978\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/livemode1.png\" alt=\"livemode\" width=\"14\" height=\"16\" \/><\/a>\u00a0button on the Studio toolbar to save your page and see what it will look like in run-time.<\/li>\n<li>Select different values from the combo box\u00a0and observe the changes in the page.<\/li>\n<\/ul>\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\/\" data-slimstat-tracking=\"false\" data-slimstat-callback=\"true\" data-slimstat-type=\"2\">save your page<\/a>!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Switch Layout is a powerful component that can change the components that are displayed on a page depending on what the user selects on that page. It\u2019s typically used in conjunction with a grid layout on dashboard-style pages. This tutorial walks you through a scenario for configuring the Switch component, and applies to versions 4.3.2 and earlier of P2 Explorer.<\/p>\n<p class=\"continue-reading-button\"> <a class=\"continue-reading-link\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/switch\/switch-4-3-2\/\">Read more<i class=\"crycon-right-dir\"><\/i><\/a><\/p>\n","protected":false},"author":1,"featured_media":4733,"parent":4712,"menu_order":1,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":"","_members_access_role":[],"_members_access_error":""},"categories":[11],"tags":[116,299],"class_list":["post-14010","page","type-page","status-publish","has-post-thumbnail","hentry","category-tutorial","tag-layouts","tag-switch","Product-ex"],"_links":{"self":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/14010","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/comments?post=14010"}],"version-history":[{"count":0,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/14010\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/4712"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media\/4733"}],"wp:attachment":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media?parent=14010"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/categories?post=14010"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/tags?post=14010"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}