{"id":1938,"date":"2015-02-27T17:30:13","date_gmt":"2015-02-27T09:30:13","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=1938"},"modified":"2017-12-14T14:33:11","modified_gmt":"2017-12-14T06:33:11","slug":"duration-picker-4-3-2","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/duration-picker\/duration-picker-4-3-2\/","title":{"rendered":"Duration Picker (4.3.2)"},"content":{"rendered":"

This article applies to versions 4.3.2 and earlier of P2 Explorer. For help on the latest version of the duration picker, see Duration Picker<\/a>.<\/p>\n

This article describes how to add a Duration\u00a0Picker control to a page during the page design process. For details on how to use the Duration\u00a0Picker\u00a0during run time, see: Using Time Pickers<\/a>.<\/p>\n\n

Overview<\/h3>\n

The Duration Picker is used to retrieve data from a selected period.\u00a0This is usually used to provide a time range\u00a0for other controls on the page, typically a line chart.<\/p>\n

The following diagram shows a Duration Picker\u00a0control being configured:<\/p>\n

\"\"<\/a><\/p>\n\n\n\n\n\n\n
Start Time<\/strong>:<\/td>\nThe time that the duration begins, defined as an event that the Duration Picker can both publish or\u00a0subscribe to. E.g. If the Start Time is midnight, the first duration of \"12 hours\" represents the period of time from midnight to midday.<\/td>\n<\/tr>\n
End Time<\/strong>:<\/td>\nThe time that the duration period finishes. This is defined as an event that the Duration Picker can listen to.<\/td>\n<\/tr>\n
Duration:<\/strong><\/td>\nThe time range that is selected by the user. \u00a0This is\u00a0defined as an event that the Duration Picker can both publish or\u00a0subscribe to.<\/td>\n<\/tr>\n
Default Duration:<\/strong><\/td>\nThe duration to display when the page is first loaded. This becomes invalid if a default duration is specified in the Event Defaults.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\n

Tutorial<\/h3>\n

The Duration\u00a0Picker is a useful control that enables users to change the type of data that is returned to other controls on a page.<\/p>\n

In this tutorial, we'll look at adding a Duration\u00a0Picker that will change what is displayed on a chart as the user selects different dates.<\/p>\n

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

Let's go through this process, step-by-step.<\/p>\n

\n

Step by Step: Creating a Duration\u00a0Picker that Drives a Line\u00a0Chart<\/h3>\n

Before you start, open a new tab in Explorer and click the \u201cCreate a New Page in Studio Mode\u201d thumbnail. Choose the grid<\/a>\u00a0layout - you can adjust the rows and columns if you like but it's not important for this exercise.<\/p>\n

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

Step 1. Add the Duration Picker to the page<\/strong><\/p>\n

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

Drag and drop the Duration\u00a0Picker\u00a0control onto a grid cell.<\/p>\n

\u00a0<\/p>\n

Step 2.\u00a0\u00a0Configure the Duration Picker<\/strong><\/p>\n

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

By default, the Duration\u00a0Picker uses events to configure all its options. In fact, you'll notice that the\u00a0events all come preconfigured with event names. This is because these events are so often used, and by other controls on the page, that it's often unnecessary to bother changing the names. It's best to leave the names as is, but you can change them if you want. If you do change them, you'll need to remember this for the next steps.<\/p>\n

\u00a0<\/p>\n

\u00a0\u00a0Step 3.\u00a0\u00a0Create the events<\/strong><\/p>\n

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

This step provides the hooks for the Duration\u00a0Picker to send and receive signals (events<\/a>) to and from other controls on the page.<\/p>\n