{"id":7654,"date":"2017-06-12T13:46:03","date_gmt":"2017-06-12T05:46:03","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=7654"},"modified":"2024-05-30T14:42:27","modified_gmt":"2024-05-30T06:42:27","slug":"variables","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-primers\/variables\/","title":{"rendered":"Variables"},"content":{"rendered":"\n

Overview<\/h2>\n

IFS OI 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.<\/p>\n

The way IFS OI Explorer implements this is to use variables<\/em>.<\/p>\n

Here are some examples:<\/p>\n

Action<\/strong>: A user selects a different product type<\/em>, using option links<\/em>.<\/p>\n

Outcome<\/strong>: An image showing a well (representing OIL) changes to an image showing gas pipelines (representing GAS).<\/p>\n

Action<\/strong>: A user selects a new time<\/em> from a date picker<\/em> on a trend.<\/p>\n

Outcome<\/strong>: The trend covers a new period.<\/p>\n

Action<\/strong>: A user selects accounting period<\/em> to replace production period<\/em> from a combo box<\/em>.<\/p>\n

Outcome<\/strong>: Data in the grid shows different accounting figures based on the different reporting period.<\/p>\n

 <\/p>\n

In this example, a user selects NGL, then OIL from the Option Links to switch between NGL and OIL in the Sales Volume Chart.<\/p>\n\n\n\n
\n\n\n\n
\"\"<\/a><\/td>\n\"\"<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\n

Quick Start<\/h2>\n

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.<\/p>\n

On an Explorer page, in Studio mode:<\/p>\n\n\n\n\n\n\n
1. Set a Default Value for a Variable<\/strong>: In Design Mode:<\/em><\/p>\n

Open the Default Values<\/a> 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).<\/p>\n<\/td>\n

2. Give Users Access to the Variables<\/strong>: In Design Mode:<\/em><\/p>\n

Drop a Month Picker<\/a> component onto your page. Assign SelectedMth to the Month<\/em> property, and assign SelectedYr to the Year<\/em> property of the component.<\/p>\n<\/td>\n

\u00a0<\/td>\n<\/tr>\n
\"\"<\/td>\n\"\"<\/td>\n <\/td>\n<\/tr>\n
3. Use the variable in another Component<\/strong>: In Design Mode:<\/em><\/p>\n

Drop a Text Label<\/a> onto your page. Add the SelectedMth and SelectedYr variables to the text label, to the text label Content<\/em> (click Add Variable<\/strong>).<\/p>\n<\/td>\n

4. Click the preview button \"Preview to see what happens in display mode<\/strong>: In Display or Preview Mode:<\/em><\/p>\n

 <\/p>\n

a) Default Value<\/em>:<\/p>\n

When the page opens, the Month Picker displays May 2014 (the default values for SelectedMth<\/em> and SelectedYr<\/em>). The variables' default values are also displayed in the Text Label as 2014, 5.<\/p>\n<\/td>\n

 <\/td>\n<\/tr>\n
\"\"<\/td>\n\n\n\n\n\n
\n

\"\"<\/p>\n

b) User Interaction<\/em>:<\/p>\n

The user picks another month and year (October 2015) from the Combo Box.<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n

c) Using the Variable<\/em>:<\/p>\n

The new month and year are displayed in the Text Label: 2015, 10.<\/p>\n

\"\"<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

 <\/p>\n

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).<\/p>\n

For more detailed tutorials, refer to some of the following related articles: Month Picker<\/a>, Default Value<\/a>, Option Links<\/a>. Or you can search for help on any of the Studio components; many of these use Variables.<\/p>\n

 <\/p>\n

\n

How Does an Explorer Variable Work?<\/h2>\n

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).<\/p>\n

For example: A variable named SelectedProduct<\/em> is used in a text label with the content: Production figures for {{selectedProduct:text}}<\/em>.<\/p>\n

When GAS is selected, as shown below, the Text Label reads: Production figures for GAS<\/em>.<\/p>\n

\"\"<\/p>\n

Below is a breakdown of how the variables in this example get set, updated, and used.<\/p>\n\n\n\n
\n\n\n\n\n
1<\/strong>: In preview<\/em> or display\u00a0<\/em>mode, the user selects GAS from a Combo Box.<\/td>\n2<\/strong>: As shown in design<\/em> mode, this Selected Option<\/em> sets the variable: selectedProduct<\/em><\/td>\n3<\/strong>: As shown in design<\/em> mode, the Text Label uses variable selectedProduct<\/em> as part of its content.<\/td>\n4<\/strong>: In preview<\/em> or display\u00a0<\/em>mode: the Text Label displays the selectedProduct<\/em> (GAS).<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n
\n

\"\"<\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

 <\/p>\n

\n

Using Variables in IFS OI Explorer<\/h2>\n

The following sections offer some insight into how you should use variables<\/em> in Explorer.<\/p>\n

Variables and Data Types<\/h3>\n

Because variables work with data, they need a data type. Ensure that your variable's data type<\/a> is consistent, wherever you use it. If your variable uses Text<\/em> in one component, other components will expect Text<\/em> for this variable as well.<\/p>\n

When you set a default value for a variable, you select a data type from a drop-down list:<\/p>\n

\"\"

Data types for a Default Value<\/p><\/div>\n

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:<\/p>\n

\"\"

This property can either be Text or a Variable (Text)<\/p><\/div>\n

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<\/em> and Year<\/em>.<\/p>\n

Setting the Variable vs Using the Variable<\/h3>\n

Some controls set a variable value, others use a variable, and some can do both.<\/p>\n

Component properties usually indicate how a variable will be used, by the following symbols:<\/p>\n