Adding a Dataset

The dataset control is essential for getting data onto your page. In this tutorial we’ll add a dataset from the Explorer Training data datasource to populate a combo box (using the dataset event). We'll use this combo box to display some data on a chart, and then we'll update the chart to display sales data for different products.

This tutorial is quite involved, so we'll do it in 3 parts. Let’s go through this process, step-by-step.

---

Tutorial 1: Adding a Dataset to Populate a Combo Box

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.

If you have access to the training environment, you can follow the steps exactly as outlined here. Otherwise, you will need to adjust the configuration to suit your data.

Step 1. Add a Dataset

This is the first step to getting your dataset working.

1. Click Add Data.
2. Select the Dataset option.
3. Select the Explorer Training datasource, from the panel on the left.
4. Select the ETASalesAreas dataset.
5. Click Add.

The configuration panel for the dataset will appear to the left of the canvas, with Name and Query pre-populated.

 

Step 2. Configure the Dataset

Fill in the fields and parameters as follows:

• Name: AreaList
• Query: keep as is (ETASalesAreas)
• Parameters:
  • YTDMonth: (Number) 11
  • YTDYear: (Number) 2014

(We've added fixed parameters; you can get these to run off events if you'd prefer.)

• Click Preview to see what the data looks like. The dataset should return a list of areas.

It's a good idea to always click Preview to make sure you are getting the data you think you are.

 

Step 3.  Publish an Event from the Dataset

Now that we know we've got some data, we want to display this data in a combo box. A combo box can only display data from a dataset by subscribing to an event. So we'll get this dataset to publish an event that contains a list of values that will populate the combo box.

• In the Publish events from dataset section, click Add.
• Click List.
• Configure the event as follows:
  • Event: Areas
  • Column: Area (this corresponds to the Area column when you click Preview)
  • Select Distinct so that there are no duplicates in the list.

 

 Step 4.  Display the Area List in a Combo Box

 

We've now got our event sorted, but we now need to add the combo box to display it.

• Drag and drop a combo box onto a grid cell.
• Configure the combo box as follows:
  • Option Values (Event): Areas
  • Option Names: (leave blank)
  • SelectedOption: selectedOption

 

Step 5.  Add a Default Value for the Event

In doing this, we can populate the combo box automatically when the page loads. You can create an event at any time.

• Click the Event Defaults button on the far right side of the Studio toolbar.
• Click Add.
• Add an event called “selectedOption” with a text value of BADGER. (Note that BADGER was one of the values from the AreaList dataset.)

As soon as you add this default, the combo box updates to display the new value.

 

Step 6. Done!

Congratulations! You have configured a dataset and published an event from it, which populates a combo box.

• Click the preview  button on the Studio toolbar to see the data displayed from the dataset.

 Don't forget to save your page! 

---

 

Tutorial 2: Use the Combo Box to Update a Chart

In the first step-by-step we added a dataset from the Explorer Training data datasource to populate a combo box (using the dataset event). Let's go a step further and use this combo box event as a parameter to another dataset. We'll then display this data in a chart.

Step 1.  Add a New Dataset

First, let's add the 2nd dataset we will be working with.

1. Click Add Data.
2. Select the Dataset option.
3. Select the Explorer Training datasource, from the panel on the left.
4. Select the ETAAreaYTDSales dataset.
5. Click Add.

 

Step 2.  Configure the Dataset to Use the Combo Box Event as a Parameter

We want to add a different dataset that contains our sales data. But we only want to show the data for the area selected by the combo box. To do this, we add the event published by the combo box as an input parameter for this dataset. Configure the dataset as follows:

• Name: Sales
• Query: (keep as is)
• Parameters:
  • Area: (Event) selectedOption
  • YTDMonth: (Number) 11
  • YTDYear: (Number) 2014

Note that we've specified selectedOption as the event that drives the Area parameter.

• Click the preview  button on the Studio toolbar to see the data displayed from the dataset. 

 

Step 3.  Add a Chart to Show YTD Sales

Let's add a Chart to display our data.

• Drag and drop a chart onto another cell on the page, and configure an area chart as follows.
  • Source Data: Sales
• • Series:
    • Type: Area Series
    • Y Column: (Text) OIL
    • Colour: (Text) remove the default and keep blank.
    • Colour Matcher: (Text) OIL
  • Axes:
    • X Axis
      • Column (text): Mnth

 

Step 4.  Done!

Congratulations! You have configured the two datasets so that you can see the available areas in a combo box, and you can view YTD Sales from a selected area.

• Click the preview  button on the Studio toolbar to see what your page will look like in run-time.
• Try selecting various areas from the combo box to see the chart change.

 Don't forget to save your page! 

---

 

Tutorial 3: Use Option Links to Update the Chart

In the first tutorial we added a dataset from the Explorer Training data datasource to populate a combo box (using the dataset event). In the next one, we went a step further and used this combo box event as a parameter to another dataset for display in a chart. Now we'll add another dimension, and change the chart so that it display either oil, gas, or NGL sales for the area selected in the combo box.

Step 1. Add an Event Default

Firstly, let's add an event default that represents the product that will be chosen by the Option Links.

• Click the Event Defaults button on the far right side of the Studio toolbar.
• Click Add.
• Add an event called “selectedProduct” with a text value of OIL. 

 

Step 2. Add a Label

 

Let's add a text label for the title of the page, and let's use it to display the selected options from the combo box and option links.

Drag and drop a Text Label component into a cell on the page, and configure it as follows:

• Title: Selected
• Content: YTD Sales for {{selectedProduct}} in {{selectedOption}}

 

Step 3.  Add Option Links

 

Let's add an Option Links component that will allow the user to select Oil, Gas, or NGL. The user's selection will be reflected in the text label we just added.

• Drag and drop an Option Links component onto another cell, and configure it as follows:
  • Option Values: (List) OIL, GAS, NGL
  • Selected Option: selectedProduct

 

Step 4. Modify the Chart  Configuration

Remember that up to this point, the chart has been configured to only show oil sales. We now have to change this so that it can also display sales for gas and NGL. This will be done by using the SelectedProduct event in place of text for the Y Column and the Colour Matcher.

• Click the chart component and reconfigure it as follows:
  • Series:
    • Y Column: (Event) SelectedProduct
    • Colour Matcher: (Event) SelectedProduct

Don't forget to change from Text to Event, this is a common oversight.

 

Step 5.  All done!

Congratulations! You have configured two datasets so that you can see the available areas in a combo box, and you can view YTD Sales from a selected area and for a selected product.

• Click the preview  button on the Studio toolbar, to see what your page will look like in run-time.
• Try selecting various areas from the combo box, and select the different options (OIL, GAS, NGL) to see the chart change.

 Don't forget to save your page!