Overview
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's typically used in conjunction with a grid layout on dashboard-style pages.
The following diagram shows the configuration options for the Switch layout:
| Switch Event: | The event that determines what to display in the Switch layout. For example, you could use a combo box to trigger an event called 'selectedOption'. 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. |
| Conditions: |
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:
|
Tutorial
The Switch component provides some exciting opportunities for interactive page design. In this tutorial, we’ll look how to change the chart displayed on the page, depending on what the user selects from a combo box.
Configuring this component might seem a little daunting at first, but you'll soon get the hang of it. Let’s look at how we’re actually going to do this, step-by-step.
Step by Step: Using a Switch to Change the Displayed Chart
Before you start, open a new tab in Explorer and click the “Create a New Page in Studio Mode” thumbnail. Choose the grid layout – you can adjust the rows and columns if you like but it’s not important for this exercise.
You will need to adjust the configuration to suit your data at your site.
Step 1. Add the source data
First, let's add the data that will drive the display.
- Add the ProductionAndTargetsMonthly1 dataset, and configure it as follows:
- Name: ProductionAndTargetsMonthly1
- Query: (Text) ProductionAndTargetsMonthly
- EntitiesList: (List) Bossier 1, Bossier 2
Click the Preview button and observe the columns in the dataset. You may want to leave this preview table open during the next steps.
Step 2. Add and Configure a Combo Box
This step adds the control that will change what is displayed by the Switch component.
- Drag and drop the Combo Box component onto the canvas.
- Configure it as follows:
- Option Values: (List) Oil Production, Gas Production, Water Production
- Option Names: (leave blank)
- Selected Option: selectedOption
Take note of the Option Values here, as you will need them when you start configuring the Switch conditions.
Step 3. Add the Switch Component
Drag and drop the Switch component onto a grid cell. The component is located in the Layout group.
Step 4. Configure the Switch Event
This step specifies the event that will ultimately control the display.
- In the drop-down list next to Switch Event, select the event "selectedOption". This is the event generated from the combo box we added earlier.
Note that all events that have been configured on the page will appear in this list.
Step 5. Configure the Default Condition
This step is where we specify what is to be displayed if the user has not selected anything from the combo box.
- As this is the only condition available at this time, it will be surrounded by a blue border, indicating this is the selected condition.
- Notice that the grid containing the Switch is labelled as "Default" - this indicates the condition that is being configured.
- Drag and drop the Text Label component onto the canvas in the same grid that contains the Switch control and is labelled "Default".
- Configure the Text Label as follows:
- Content: "Nothing to see? Choose something from the drop-down!"
Your 1st condition has been configured!
Step 6. Return to the Switch Layer
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.
- Right-click on the cell containing the Switch.
- In the shortcut menu, select "Switch".
You are returned to the Switch view, with the Default condition selected.
Step 7. Add Another Condition
Now we'll add the next condition.
- Click "Add".
- In the box that appears, type "Oil Production". Remember that this corresponds to one of the options set in the combo box earlier.
- Click "Set".
Notice that the blue outline moves to the condition you just created, and that the grid cell on the canvas now displays 'Oil Production'.
Step 8. Add a Chart to the Switch and Configure It
With the Oil Production condition set, add a chart that will display when the user selects "Oil Production" from the combo box. Drag and drop a Chart onto the cell labelled 'Oil Production'. Configure a bar chart as follows:
- Source Data: ProductionAndTargetsMonthly1
- For the chart series:
- Type: Bar series
- Y Column: (Text) Oil
- Colour: (blank)
- Colour Matcher: (Text) Oil
- For the X Axis:
- Column: (Text) entity
You'll see a chart with green bars appear in the 'Oil Production' cell.
Your 2nd condition has been configured!
Step 9. Add Another Condition
Each time you want to add a condition, you need to return to the Switch component.
- Right-click on the 'Oil Production' cell.
- In the shortcut menu, select "Switch".
Then, you can go ahead and add another condition.
- Click "Add".
- In the box that appears, type "Gas Production". Remember that this corresponds to one of the options set in the combo box earlier.
- Click "Set".
Notice that the blue outline moves to the condition you just created, and that the grid cell on the canvas now displays 'Gas Production'.
Step 10. Add Another Chart to the Switch and Configure It
With the Gas Production condition set, add a chart that will display when the user selects "Gas Production" from the combo box. Drag and drop a Chart onto the cell labelled 'Gas Production'. Configure a bar chart as follows:
- Source Data: ProductionAndTargetsMonthly1
- For the chart series:
- Type: Bar series
- Y Column: (Text) Gas
- Colour: (blank)
- Colour Matcher: (Text) Gas
- For the X Axis:
- Column: (Text) entity
You'll see a chart with red bars appear in the 'Gas Production' cell.
Your 3rd condition has been configured!
Step 11. Add Another Condition
Remember that to add a condition, you need to return to the Switch component.
- Right-click on the 'Gas Production' cell.
- In the shortcut menu, select "Switch".
Now go ahead and add the final condition.
- Click "Add".
- In the box that appears, type "Water Production". Remember that this corresponds to the option set in the combo box earlier.
- Click "Set".
Notice that the blue outline moves to the condition you just created, and that the grid cell on the canvas now displays 'Water Production'.
Step 12. Add the Final Chart to the Switch and Configure It
With the Water Production condition set, add a chart that will display when the user selects "Water Production" from the combo box. Drag and drop a Chart onto the cell labelled 'Water Production'. Configure a bar chart as follows:
- Source Data: ProductionAndTargetsMonthly1
- For the chart series:
- Type: Bar series
- Y Column: (Text) Water
- Colour: (blank)
- Colour Matcher: (Text) Water
- For the X Axis:
- Column: (Text) entity
You'll see a chart with blue bars appear in the 'Water Production' cell.
Your final condition has been configured!
Step 13. All done!
Congratulations! You now page with a chart that changes depending on what the user selects from the combo box.
- Click the Finish and Open
button on the Studio toolbar to save your page and see what it will look like in run-time. - Select different values from the combo box and observe the changes in the page.
Don’t forget to save your page!