ON THIS PAGE:
Overview
P2 Explorer offers an interactive user interface. Users can filter the contents of pages and trends, or change context by selecting different periods or entities to report on.
The way P2 Explorer implements this is to use variables.
Here are some examples:
Action: A user selects a different product type, using option links.
Outcome: An image showing a well (representing OIL) changes to an image showing gas pipelines (representing GAS).
Action: A user selects a new time from a date picker on a trend.
Outcome: The trend covers a new period.
Action: A user selects accounting period to replace production period from a combo box.
Outcome: Data in the grid shows different accounting figures based on the different reporting period.
In this example, a user selects NGL, then OIL from the Option Links to switch between NGL and OIL in the Sales Volume Chart.
|
Quick Start
There are many places you can set up and use an Explorer variable. This basic exercise demonstrates how to add and use a variable, in just three steps. Step 4 demonstrates what happens in display mode.
On an Explorer page, in Studio mode:
| 1. Set a Default Value for a Variable: In Design Mode:
Open the Default Values panel. Add a default called SelectedMth, and give it a value of 5 (Number). Add another default called SelectedYr, and give it a value of 2014 (Number). |
2. Give Users Access to the Variables: In Design Mode:
Drop a Month Picker component onto your page. Assign SelectedMth to the Month property, and assign SelectedYr to the Year property of the component. |
|
 |
 |
|
| 3. Use the variable in another Component: In Design Mode:
Drop a Text Label onto your page. Add the SelectedMth and SelectedYr variables to the text label, to the text label Content (click Add Variable). |
4. Click the preview button  to see what happens in display mode: In Display or Preview Mode:
a) Default Value: When the page opens, the Month Picker displays May 2014 (the default values for SelectedMth and SelectedYr). The variables' default values are also displayed in the Text Label as 2014, 5. |
|
 |
|
|
| c) Using the Variable:
The new month and year are displayed in the Text Label: 2015, 10.
|
From this exercise you can see the potential of using variables to set the scene (setting default values), providing interaction (for example, using the variable in the Combo Box) and having an effect on the page (for example, using the variable in the Text Label).
For more detailed tutorials, refer to some of the following related articles: Month Picker, Default Value, Option Links. Or you can search for help on any of the Studio components; many of these use Variables.
How Does an Explorer Variable Work?
Variables are named data points that get set in one control (for example, a combo box) and used by another control (for example, a dataset, switch or text label).
For example: A variable named SelectedProduct is used in a text label with the content: Production figures for {{selectedProduct:text}}.
When GAS is selected, as shown below, the Text Label reads: Production figures for GAS.
Below is a breakdown of how the variables in this example get set, updated, and used.
|
||||
|
|
Using Variables in P2 Explorer
The following sections offer some insight into how you should use variables in Explorer.
Variables and Data Types
Because variables work with data, they need a data type. Ensure that your variable's data type is consistent, wherever you use it. If your variable uses Text in one component, other components will expect Text for this variable as well.
When you set a default value for a variable, you select a data type from a drop-down list:
Data types for a Default Value
Sometimes the component property gives you a clue of what data type your variable should use, by displaying that data type in the drop-down list:
This property can either be Text or a Variable (Text)
Sometimes you need to know the component to know which type to use: for example, the Month Picker uses an integer variable for both Month and Year.
Setting the Variable vs Using the Variable
Some controls set a variable value, others use a variable, and some can do both.
Component properties usually indicate how a variable will be used, by the following symbols:
- Set the variable, where you see this symbol:
- Use the variable, where you see this symbol:
- Set or use the variable, where you see this symbol:
Sometimes, components have an Add Variable button (the Text Label component is one of these).
Some examples of components that set a variable value:
- Month Picker (Month and Year)
- Hyperlink (Variable Mapping)
Some examples of components that use a variable value:
- Relational Dataset (as parameters to the dataset's query)
- Text Label (as part of Content)
- Hyperlink (as part of Content)
- Switch (Switch Variable)
Some examples of components can use and set a variable value:
- Entity Selector (Selected Entities)
- Combo Box (Selected Option)
- Hierarchy Picker (Selected hierarchy)
This is not a comprehensive list; however, as you start using the Explorer components you will become more familiar with the way in which variables get set and then used.
Assigning Default Values to Variables
You can assign a default value to any variable on an Explorer page. Trends have pre-defined default values. Default values affect how combo boxes, option links, date selections etc. appear when a page or trend is first opened.
Default values set the context for a page. A user should have access to relevant information, preferably without having to immediately change the default selections.
Variables used in Hyperlinks
A Hyperlink can pass variable values to the page, trend or URL that is opening through the use of Variable Mapping. This overrides default values that exist on the opened page, trend or URL, and provides continuity to the end-user navigating through Explorer.
Other components that can link to another page, trend or URL, also with variable mapping:
- Hotspot
- Status Tile
- Charts using Discrete Data
Using a Variable versus using a Fixed Value
If you want the user to change behaviour on a page or trend, you should assign a variable to the relevant control.
Sometimes, you might prefer to give less control (for example, fixed versus variable text in the Content of a Text Label); this is when you either type in a fixed value or: assign a default variable, and then don‘t give the user a way of changing that value.
Some of the Explorer components allow you to type in a fixed value, or choose a variable. For these components, you first need to specify what you are using, from a drop-down list.
Selecting the type for the Filter Column property in a Chart component
Variables used in Trends
Trends come with standard combo boxes and date pickers. Users change the trace by changing the Time Range, Sample Method, and various other selections.
You can read about the Trend Selectors in the Overview section of the Creating a Trend article.