{"id":11923,"date":"2016-03-21T10:38:24","date_gmt":"2016-03-21T02:38:24","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=11923"},"modified":"2018-02-21T16:28:06","modified_gmt":"2018-02-21T08:28:06","slug":"option-links-4-4","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/option-links\/option-links-4-4\/","title":{"rendered":"Option Links (4.4)"},"content":{"rendered":"\n

This article applies to versions 4.4 and later of P2 Explorer. For more, see Release History<\/a>. For the latest help, see Option Links<\/a>.<\/p>\n

Overview<\/h2>\n

The Option Links are used for selecting a single value, such as an accounting period.<\/p>\n

Option Links provide interactivity on your pages. You can pass the selected value to other components on the page, using a variable set in the Option Link's Selected Option<\/em> property.<\/p>\n

The Option Links component is similar to the Combo Box<\/a>. Option Links displays options as a row of buttons, while Combo Box displays options as a list.<\/p>\n

The following diagram shows a grid layout with an Options Link component displaying a year's quarters:<\/p>\n

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

\u00a0<\/div>\n\n\n\n
\n\n\n\n\n\n
Option Values<\/strong>:<\/td>\nThese are the options that set the variable<\/a> defined in Selected Option<\/strong>.<\/td>\n<\/tr>\n
Option Names<\/strong>:<\/td>\nIf specified, then this is the text displayed on the option links buttons. Each value in Option Names<\/em> is linked to the corresponding (by list position) value in Option Values<\/em>. If Option Names<\/em> are unspecified, then Option Values<\/em> are displayed.<\/td>\n<\/tr>\n
Selected Option<\/strong>:<\/td>\nThe variable that uses the selected Option Value<\/em>.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n\n\n\n\n\n\n
1: <\/strong>Here you can see Option Names<\/em> displayed in the Option Links.<\/td>\n<\/tr>\n
2: <\/strong>Quarter 2<\/em> is the selected button.<\/td>\n<\/tr>\n
3: <\/strong>Q2<\/em> corresponds to Quarter 2<\/em>, each being in the second position on the Option Values<\/strong> and Option Names<\/strong> list, respectively.<\/p>\n

Thus the Option Value<\/strong> of Q2<\/em> is assigned to the Selected Option<\/strong>, selectedQuarter<\/em>.<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Related: Using Option Links<\/a> in display mode, Adding a new Option Links style<\/a><\/p>\n

\n

Tutorial 1:\u00a0Adding Option Links with Default Value<\/h2>\n

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

In this tutorial, we'll add a simple Option Links component, and give it a default value.<\/p>\n

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

Note: <\/strong>Before you start the tutorial, prepare a page in Studio.<\/a><\/p>\n

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

Step 1. Add Option Links to the Page.<\/strong><\/p>\n

Drag and drop an Option Links component onto a grid cell.\u00a0The Option Links is in the Control \"Controls\"<\/a>\u00a0group.<\/p>\n

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

Step 2. Configure the Option Links<\/strong><\/p>\n

In this example we will use values for the Option Values<\/strong> and Option Names<\/strong>, by selecting the Values<\/em> \"\" data category.<\/p>\n

Click the Option Links<\/strong> component to configure it:<\/p>\n\n\n\n
\n\n\n\n\n\n\n\n\n
\u00a0<\/td>\n1. Add Option Values<\/strong>:<\/td>\nFollow the instructions in Using Value Data<\/a> to add the following list of values:<\/p>\n

Q1, Q2, Q3<\/strong> and Q4<\/strong>.<\/p>\n<\/td>\n<\/tr>\n

 <\/td>\n <\/td>\n<\/tr>\n
 <\/td>\n2. Add Option Names<\/strong>:<\/td>\nFollow the instructions in Using Value Data<\/a> to add the following list of values:<\/p>\n

Quarter 1, Quarter 2, Quarter 3<\/strong> and Quarter 4<\/strong>.<\/p>\n<\/td>\n<\/tr>\n

 <\/td>\n <\/td>\n<\/tr>\n
 <\/td>\n3. Add Selected Option<\/strong>:<\/td>\nIn the Selected Option<\/strong> drop-down list, type selectedQuarter<\/em>.<\/td>\n<\/tr>\n
 <\/td>\n <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n\n\n\n\n
\u00a0<\/td>\n <\/td>\n\n

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

Next, open the Default Values<\/strong> panel:<\/p>\n\n\n\n
\n\n\n\n
\u00a0<\/td>\n4. Add a Default Value<\/strong>:<\/td>\nIn Default Values<\/strong>, add a default pair: selectedQuarter<\/em> (Variable Name) of type Text<\/em>, and Q2<\/em> (Default Value).<\/p>\n

See how to add Default Values<\/a>.<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n

\n\n\n\n
\u00a0<\/td>\n <\/td>\n\n

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

In preview mode, the Option Links shows the four Option Names<\/em>, with Quarter 2<\/strong> selected.<\/p>\n

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

\n

Advanced Tutorials<\/h2>\n

These tutorials demonstrate how to get your option links to interact with other controls on an Explorer page.<\/p>\n

We will be using the basic Option Links created in Tutorial 1<\/a>.<\/p>\n

Tutorial 2: Option Links Controlling Text Label Content<\/h3>\n

Option Links provide a way for the user to interact with other controls.<\/p>\n

To demonstrate this, we'll add Option Links that change the content of a Text Label.<\/p>\n

\"\"<\/a>

Text Label with Variable selectedQuarter<\/p><\/div>\n

Before you start, open the page you created in Tutorial 1:<\/p>\n

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

See how to add and configure a text label: Text Label<\/a>.<\/p>\n

Step 1. Add a Text Label to the Page:<\/strong><\/p>\n

Drag and drop a Text Label component onto a grid cell.<\/p>\n

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

Step 2. Add Content: <\/strong><\/p>\n

In the Content<\/strong>, type: \"The selected Quarter is:\" then click Add Data<\/strong> and add selectedQuarter<\/em>.<\/p>\n

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

This is how your Text Label looks:<\/p>\n

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

Watch the video below to see how changing the Option Links selections changes the Text Labels' content (the variable portion of the text label: selectedQuarter<\/em>), in preview mode.<\/p>\n\r\n\t\r\n\t

Related: See how the Combo Box (similar to Option Links) uses the Selected Option<\/strong> variable to control a chart's dataset parameters in the Charts<\/a> article.<\/p>\n

 <\/p>\n

Tutorial 3: Option Links Using Dataset Values<\/h3>\n

In this tutorial, we'll add another Option Links component, this time using a dataset query for the Option Values<\/strong>. Alternatively, you can edit the Option Links created in Tutorial 1.<\/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.<\/p>\n

\"\"<\/a>

New option links<\/p><\/div>\n

Before you start, open the page you created in Tutorial 1:<\/p>\n

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

Step 1. Add Option Links to the Page.<\/strong><\/p>\n

Drag and drop an Option Links component onto a grid cell.<\/p>\n

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

Step 2. Configure the Option Links<\/strong><\/p>\n

In this example we will use a dataset for the Option Values<\/strong>, by selecting the Dataset<\/em> \"\" data category.<\/p>\n

This time, we will leave out the Option Names<\/strong> to demonstrate how the Option Values<\/strong> display in the Option Links when Option Names<\/strong> are undefined.<\/p>\n

Click the Option Links<\/strong> component to configure it:<\/p>\n\n\n\n
\n\n\n\n\n\n\n
\u00a0<\/td>\n1. Add Option Values<\/strong>:<\/td>\nFollow the instructions in Using Dataset Data<\/a> to a list using a dataset Value Column<\/em>. Use the following, when setting up the data:<\/p>\n

Dataset Query<\/strong>: AccountingProdAmtsDisplayMth<\/p>\n

Value Column<\/strong>: rpt_year<\/p>\n

Dataset Parameters: displayMth<\/strong>: Jan<\/p>\n

Note: <\/strong>If you do not have access to this data, substitute with your own dataset query.<\/p>\n<\/td>\n<\/tr>\n

 <\/td>\n <\/td>\n<\/tr>\n
 <\/td>\n2. Add Selected Option<\/strong>:<\/td>\nIn the Selected Option<\/strong> drop-down list, type selectedYear<\/em>.<\/td>\n<\/tr>\n
 <\/td>\n <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n\n\n\n\n
\u00a0<\/td>\n <\/td>\n\n

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

In preview mode, this is what the Option Links data looks like.<\/p>\n

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

In preview mode, the Option Links shows the rpt_year<\/em> columns from the query.<\/p>\n

Note how none of the options is selected (underlined). This is because we have not set up a default value for the variable, selectedYear<\/em><\/p>\n

\"\"<\/a>

The rpt_year column values used as option values<\/p><\/div>\n

\n

Release History<\/h2>\n