{"id":4712,"date":"2017-12-20T22:09:09","date_gmt":"2017-12-20T14:09:09","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=4712"},"modified":"2024-10-23T14:21:02","modified_gmt":"2024-10-23T06:21:02","slug":"switch","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/switch\/","title":{"rendered":"Switch"},"content":{"rendered":"\n

This article applies to versions 4.4 and later of IFS OI Explorer. For more, see Release History<\/a>.<\/p>\n

Overview<\/span><\/h2>\n

The Switch\u00a0Layout 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 grid layout<\/a> on dashboard-style pages<\/a>, and can be used to create the effect of a tabbed page.\u00a0<\/p>\n

For example, you may want the same page to display a chart or a table, or a daily or a monthly report,\u00a0depending on what someone clicks. You can use the Switch layout to achieve that.\u00a0<\/p>\n

<\/i>TOP TIP<\/span><\/p>\n

To create the effect of a tabbed page, use the option links control at the top of the page.<\/p>\n<\/div>\n

 <\/p>\n

Configuring the Switch<\/h2>\n

The following diagram shows the configuration options for the Switch layout, and how it works with the component that triggers the layout change:<\/p>\n

\"Switch<\/a><\/p>\n\n\n\n\n\n
Switch Variable<\/strong>:<\/td>\nThe variable\u00a0that determines what condition to display in the Switch layout. For example, you could use an Option Links<\/a> component\u00a0to trigger a variable<\/a>\u00a0called 'selectedOption<\/em>'. Whenever a user selects a different item from the Option Links component, this triggers a change in what is displayed in the layout.<\/td>\n<\/tr>\n
Conditions<\/b><\/span>:<\/td>\n\n

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 Option Links\u00a0contains 3 options (Table, Chart, Text), you should have 3 corresponding\u00a0conditions (Table, Chart, Default). The buttons perform the following functions:<\/p>\n

    \n
  • Add<\/strong> - adds a new condition<\/li>\n
  • Remove<\/strong> - removes the selected condition from the Switch (does not remove it from the component that triggers\u00a0the layout change)<\/li>\n
  • 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
Style<\/b><\/span><\/td>\nLists the predefined styles for the Switch component.\u00a0<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

 <\/p>\n

\n

Tutorial:\u00a0Using a Switch to Change the Page Display<\/span><\/h2>\n

If you're unfamiliar with the process of building pages, read the article\u00a0Building an Explorer Page<\/a>.<\/p>\n

The Switch component provides some exciting opportunities for interactive page design.\u00a0In this tutorial, we\u2019ll look how to change the content displayed on a\u00a0page, depending on what option the user selects. You need to do a little planning up front for this: in this case, we want the page to display a table, chart, or text, depending on what the user selects.\u00a0<\/p>\n

\"Switch<\/a><\/p>\n

 <\/p>\n

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

Note<\/strong>: This configuration uses the Sample Data <\/em>table\u00a0and datasets that can be optionally made available\u00a0during 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.\u00a0<\/p>\n

Step 1. Prepare a Studio Page<\/h3>\n

\"Switch<\/a><\/p>\n

Before you start, open a new tab in Explorer and click the \u201cNew Page\u201d button in the ribbon. Choose the Grid Layout. For this exercise, we want to adjust the rows and columns to make the page look nicer.<\/p>\n

Note: You will need to adjust the configuration to suit your data at your site.<\/p>\n

Let's set up the page nicely.\u00a0<\/p>\n