{"id":13130,"date":"2017-12-20T12:50:41","date_gmt":"2017-12-20T04:50:41","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=13130"},"modified":"2024-10-09T12:54:39","modified_gmt":"2024-10-09T04:54:39","slug":"duration-picker","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/duration-picker\/","title":{"rendered":"Duration Picker"},"content":{"rendered":"\n

This article applies to versions 4.4 and later of IFS OI Explorer. For more, see Release History<\/a>.<\/p>\n

The Duration Picker component allows a user to select a duration from a drop-down list. This sets the a datetime variable linked to Start Date\/Time, as well as a text variable linked to Duration.<\/p>\n

In version 4.13, the available time periods in the Duration Picker have been expanded to include 3, 4, 5, 10 and 20 years.<\/p>\n

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

In display mode, the Duration Picker displays a duration on the page, with a drop-down for selecting a different duration (such as 5 days, 1 week, 3 months<\/em>, for example).<\/p>\n

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

Related: Using a Duration Picker<\/a> in display mode, Adding a Duration Picker style<\/a>,\u00a0Variables<\/a>,\u00a0Default Values<\/a>\u00a0<\/p>\n

\n

The Duration Picker Component<\/h2>\n

The Month Duration has two dates: Start Date\/Time and End Date\/Time, a Duration, and a Default Duration.<\/p>\n

\"\"<\/a><\/p>\n\n\n\n\n\n\n\n
Start Date\/Time<\/strong>:<\/td>\nThe time that the duration begins, defined as a variable that Duration Picker can both use and set. For example, if the Start\/Date Time is midnight, the first duration of \"12 hours\" represents the period of time from midnight to midday.<\/p>\n

This is preconfigured to use the page default variable, startTime<\/em>.<\/p>\n<\/td>\n<\/tr>\n

End Date\/Time<\/strong>:<\/td>\nThe time that the duration period finishes. This is defined as a variable that the Duration Picker can use, but cannot set.<\/p>\n

This is preconfigured to use the page default variable, endTime<\/em>.<\/p>\n<\/td>\n<\/tr>\n

Duration:<\/strong><\/td>\nThe time range that is selected by the user. This is defined as a variable (duration<\/em>) that the Duration Picker can use and set.<\/td>\n<\/tr>\n
Default Duration:<\/strong><\/td>\nThe duration to display when the page is first loaded. Start Date\/Time and End Date\/Time must have a period between them exactly the same as Default Duration, in order for this to work.<\/td>\n<\/tr>\n
Style<\/strong>:<\/td>\nThe style you want to apply to the component. If you are a Style Administrator, you can create a new Duration Picker style<\/a>.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\n

Tutorial: Duration Picker Using Default Values<\/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 build a new page from the Date Time Tutorials<\/em> page. We'll add a Duration Picker component that uses the page default values for startTime<\/em> and endTime<\/em>.<\/p>\n

We'll also add a text label to show the duration picker's Duration<\/strong> text.<\/p>\n

\"\"<\/a><\/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

Step 1. Prepare the Tutorial Page<\/strong><\/p>\n

Before you start the tutorial, prepare a new date\/time tutorial page. If you have already created a \"Date\/Time Tutorials\" page, then open this. Otherwise follow the instructions in Date Time Tutorials<\/a> to add the page.<\/p>\n

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

 <\/p>\n

Step 2. Save as a New Tutorial Page<\/strong><\/p>\n

Save the page as \"Date Time Tutorials - Duration Picker\" in your private workspace, My Workspace<\/em>.<\/p>\n

1. Click the Save As..<\/strong> \"\" button on the Studio toolbar.<\/p>\n

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

2. In the dialog that appears, type in Date Time Tutorials - Duration Picker<\/strong>, and keep the default Workspace<\/strong>, My Workspace<\/em>.<\/p>\n

3. Click Save<\/strong>.<\/p>\n

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

 <\/p>\n

Step 3. Add a Duration Picker<\/strong><\/p>\n

1. Drag a Duration Picker component onto the top right of the Precision Layout, as shown.\u00a0The Duration Picker is in the Time \"timeicon_sm\"<\/a>\u00a0group.<\/p>\n

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

2. Click on the Duration Picker component to review it<\/p>\n

There is no need to change any of the properties. Note that Start Date\/Time<\/strong> and End Date\/Time<\/strong> are preconfigured to use the Page Defaults startTime<\/em> and endTime<\/em>, respectively.<\/p>\n

Remember that these variables are also used in the text labels and tags in your tutorial page, so you'll be able to observe the two that use Start Date\/Time change when you select a new duration from the duration picker.<\/p>\n

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

 <\/p>\n

Step 4. Add a Text Label<\/strong><\/p>\n

In this step we're going to add a text label to show duration<\/em>, set by the Duration Picker's Duration<\/strong> property.<\/p>\n

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

Related: Text Label<\/a>.<\/p>\n

1. Drag a Text Label onto the top left of the page. In the text label's Content<\/strong> type Selected Duration is:<\/em> then click Add Data<\/strong> and add the Duration Picker's Duration<\/strong> text variable, duration<\/em>.<\/p>\n

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

 <\/p>\n

Try out the New Component<\/strong><\/p>\n

1. Click the Preview \"preview\"<\/a> button on the Studio toolbar to see what your page will look like in run-time.<\/p>\n

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

2. Select 3 months<\/em> from the Duration Picker.<\/p>\n

Note<\/strong> how the Start Time text label updates with the new startTime<\/em> value, as well as the tag value using startTime<\/em>. The \"Selected Duration\" text label also updates to show the selected duration.<\/p>\n

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

Note<\/strong> If you refresh the page in run time, the startTime and endTime variables revert to the page default values, and the duration picker selects the duration 1 week<\/em>. This is because the page defaults values for startTime<\/em> and endTime<\/em> are exactly one week apart (if they haven't been edited).<\/p>\n

Watch the video below to see how the text label as well as the tag for start time change when different durations are selected.<\/p>\n\r\n\t\r\n\t

\n

Release History<\/h2>\n