{"id":13119,"date":"2018-03-01T12:44:07","date_gmt":"2018-03-01T04:44:07","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=13119"},"modified":"2024-10-09T12:54:36","modified_gmt":"2024-10-09T04:54:36","slug":"current-time-toggle","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/current-time-toggle\/","title":{"rendered":"Current Date\/Time Toggle"},"content":{"rendered":"<p class=\"page-subheading\"><\/p>\n<p class=\"left-bar\">This article applies to versions <strong>4.4 and later<\/strong> of IFS OI Explorer. See <a href=\"#Release_History\">Release History<\/a> for more.<\/p>\n<h2 class=\"page-subheading\">Overview<\/h2>\n<p class=\"overview\">Use the Current Date\/Time Toggle component to refresh data on your Explorer page.\u00a0<\/p>\n<p class=\"intro-text\">We have added new functionality: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/default-value\/#Page_Times_startTime_and_endTime\">Page Defaults for startTime and endTime<\/a>. We recomend that you set a page refresh here, instead of using this component.<\/p>\n<hr \/>\n<h2 class=\"page-subheading\">Quick Start<\/h2>\n<p class=\"note\">The Current Date\/Time Toggle component can be used without any changes to its configuration.<\/p>\n<p class=\"intro-text\">1. Open any Explorer page in Studio mode.<\/p>\n<p class=\"intro-text\">2. Drag a Current Date\/Time Toggle component onto the page.\u00a0The Current Date\/Time Toggle is in the Time <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/timeicon_sm.png\" rel=\"lightbox-0\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1865\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/timeicon_sm.png\" alt=\"timeicon_sm\" width=\"18\" height=\"17\" \/><\/a>\u00a0group.<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/QuickStart1.png\" rel=\"lightbox-1\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-13401 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/QuickStart1.png\" alt=\"\" width=\"325\" height=\"226\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/QuickStart1.png 325w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/QuickStart1-150x104.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/QuickStart1-24x17.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/QuickStart1-36x25.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/QuickStart1-48x33.png 48w\" sizes=\"auto, (max-width: 325px) 100vw, 325px\" \/><\/a><\/p>\n<p class=\"intro-text\">The Current Date\/Time Toggle component has the following pre-assigned properties.<\/p>\n<ul class=\"intro-text\">\n<li><strong>Date\/Time<\/strong>: <em>endTime<\/em> (the Page Default)<\/li>\n<li><strong>Is On<\/strong>: <em>isNow<\/em> (this is a Boolean that toggles between True\/False as the user selects\/de-selects the check-box at run-time.)<\/li>\n<li><strong>Refresh Rate<\/strong>: <em>60<\/em> (60 seconds)<\/li>\n<\/ul>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-1Step-4.2.png\" rel=\"lightbox-2\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-13392 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-1Step-4.2.png\" alt=\"\" width=\"356\" height=\"304\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-1Step-4.2.png 356w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-1Step-4.2-150x128.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-1Step-4.2-24x20.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-1Step-4.2-36x31.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-1Step-4.2-48x41.png 48w\" sizes=\"auto, (max-width: 356px) 100vw, 356px\" \/><\/a><\/p>\n<p class=\"intro-text\">3. Save the page.<\/p>\n<p class=\"intro-text\">\u00a0<\/p>\n<p class=\"intro-text\">During run-time, the <em>endTime<\/em> page variable is refreshed to the current date\/time, every 60 seconds. Consequently, any data on the page that uses the <em>endTime<\/em> variable is refreshed every 60 seconds.<\/p>\n<p class=\"intro-text\">\u00a0<\/p>\n<hr \/>\n<h2 class=\"page-subheading\">Tutorial 1: Display the Current Tag Value<\/h2>\n<p class=\"note\">If you're unfamiliar with the process of building pages, read the article\u00a0<a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-create-your-first-page\/building-an-explorer-page\/\" data-slimstat-clicked=\"false\" data-slimstat-type=\"2\" data-slimstat-tracking=\"false\" data-slimstat-callback=\"false\" data-slimstat-async=\"false\">Building an Explorer Page<\/a>.<\/p>\n<p class=\"intro-text\">The Current Date\/Time Toggle is a useful component that enables users to view data at the current time. It is more commonly used with timeseries data than with datasets.<\/p>\n<p class=\"intro-text\">In this tutorial, we\u2019ll look at adding a Current Date\/Time Toggle that will display the value of the <em>Goldenrod<\/em> tag at the current time.<\/p>\n<p class=\"intro-text\">We'll use the standard page for date tutorials, and add a basic Current Date\/Time Toggle to this, to demonstrate how text labels and tag values are updated when this component refreshes.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-1-Intro-1.png\" rel=\"lightbox-3\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-13370\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-1-Intro-1.png\" alt=\"\" width=\"900\" height=\"436\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-1-Intro-1.png 1118w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-1-Intro-1-768x372.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-1-Intro-1-150x73.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-1-Intro-1-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-1-Intro-1-36x17.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-1-Intro-1-48x23.png 48w\" sizes=\"auto, (max-width: 900px) 100vw, 900px\" \/><\/a><\/p>\n<p class=\"left-bar\"><strong>Note<\/strong>: This configuration uses the <em>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<p class=\"intro-text\">There are four steps in the tutorial:<\/p>\n<ul class=\"intro-text\">\n<li>Step 1. Prepare the Tutorial Page<\/li>\n<li>Step 2. Save as a New Tutorial Page<\/li>\n<li>Step 3. Update the Text Labels and Tags<\/li>\n<li>Step 4. Add and Configure a Current Date\/Time Toggle<\/li>\n<\/ul>\n<p class=\"intro-text\"><strong>Step 1. Prepare the Tutorial Page<\/strong><\/p>\n<p class=\"intro-text\">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 <a title=\" Date Time Tutorials\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/date-time-tutorials\/\"> Date Time Tutorials<\/a> to add the page.<\/p>\n<p class=\"intro-text\"><strong>Step 2. Save as a New Tutorial Page<\/strong><\/p>\n<p class=\"intro-text\">Save the page as \"Date Time Tutorials - Current date\/time toggle\" in your private workspace, <em>My Workspace<\/em>.<\/p>\n<p class=\"intro-text\">1. Click the <strong>Save As..<\/strong> <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-13286 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/save-as-button.png\" alt=\"\" width=\"21\" height=\"22\" \/> button on the Studio toolbar.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Save-As.png\" rel=\"lightbox-4\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-13253 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Save-As.png\" alt=\"\" width=\"480\" height=\"250\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Save-As.png 480w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Save-As-150x78.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Save-As-24x13.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Save-As-36x19.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Save-As-48x25.png 48w\" sizes=\"auto, (max-width: 480px) 100vw, 480px\" \/><\/a><\/p>\n<p class=\"intro-text\">2. In the dialog that appears, type in <strong>Date Time Tutorials - Current date\/time toggle<\/strong>, and keep the default <strong>Workspace<\/strong>, <em>My Workspace<\/em>.<\/p>\n<p class=\"intro-text\">3. Click <strong>Save<\/strong>.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Save-Current-date-time-toggle.png\" rel=\"lightbox-5\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-13245 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Save-Current-date-time-toggle.png\" alt=\"\" width=\"592\" height=\"293\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Save-Current-date-time-toggle.png 592w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Save-Current-date-time-toggle-150x74.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Save-Current-date-time-toggle-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Save-Current-date-time-toggle-36x18.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Save-Current-date-time-toggle-48x24.png 48w\" sizes=\"auto, (max-width: 592px) 100vw, 592px\" \/><\/a><\/p>\n<p class=\"intro-text\"><strong>Step 3. Update the Text Labels and Tags<\/strong><\/p>\n<p class=\"left-bar\">Related: <a title=\"Text Label\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/text-label\/\">Text Label<\/a> and <a title=\"Data Label\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/data-label\/\">Data Label<\/a>.<\/p>\n<p class=\"intro-text\">1. Replace or update the text label in the top left grid cell so that it uses <em>startTime<\/em> in <em>Time<\/em> format.<\/p>\n<p class=\"intro-text\">2. Update the text label in the top right grid cell so that the <strong>Content<\/strong> text is: <em>End Date\/Time:<\/em>.<\/p>\n<p class=\"intro-text\">3. Drag a text label into the bottom left grid cell , and give it a content of: End Time. Now <strong>Add Data<\/strong> <em>endTime<\/em> using <em>Time<\/em> format.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-1-Step-3.1.png\" rel=\"lightbox-6\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-13390 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-1-Step-3.1.png\" alt=\"\" width=\"782\" height=\"331\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-1-Step-3.1.png 782w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-1-Step-3.1-768x325.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-1-Step-3.1-150x63.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-1-Step-3.1-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-1-Step-3.1-36x15.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-1-Step-3.1-48x20.png 48w\" sizes=\"auto, (max-width: 782px) 100vw, 782px\" \/><\/a><\/p>\n<p class=\"intro-text\"><strong>Step 4. Add and Configure a Current Date\/Time Toggle<\/strong><\/p>\n<p class=\"intro-text\">1. Drag a Current Date\/Time Toggle component onto top right of the Precision Layout, as shown:<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-1-Step-4.1.png\" rel=\"lightbox-7\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-13391\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-1-Step-4.1.png\" alt=\"\" width=\"900\" height=\"362\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-1-Step-4.1.png 1322w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-1-Step-4.1-768x309.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-1-Step-4.1-150x60.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-1-Step-4.1-1280x515.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-1-Step-4.1-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-1-Step-4.1-36x14.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-1-Step-4.1-48x19.png 48w\" sizes=\"auto, (max-width: 900px) 100vw, 900px\" \/><\/a><\/p>\n<p class=\"intro-text\"><strong>Click on the Current Date\/Time Toggle component to configure it<\/strong><\/p>\n<p class=\"intro-text\">2. In the <strong>Refresh Rate<\/strong> text box, type <strong>2<\/strong>, to set the refresh rate to 2 seconds.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-1-Step-4.2.png\" rel=\"lightbox-8\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-13423 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-1-Step-4.2.png\" alt=\"\" width=\"355\" height=\"283\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-1-Step-4.2.png 355w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-1-Step-4.2-150x120.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-1-Step-4.2-24x19.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-1-Step-4.2-36x29.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-1-Step-4.2-48x38.png 48w\" sizes=\"auto, (max-width: 355px) 100vw, 355px\" \/><\/a><\/p>\n<p class=\"intro-text\"><strong>Try out the New Component<\/strong><\/p>\n<ul>\n<li class=\"intro-text\">Click the Preview <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/preview.png\" rel=\"lightbox-9\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2896\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/preview.png\" alt=\"preview\" width=\"13\" height=\"14\" \/><\/a> button on the Studio toolbar to see what your page will look like in run-time.<\/li>\n<\/ul>\n<p class=\"note\"><strong>Note<\/strong> how the <em>End Time<\/em> text label and the tag value update at the refresh rate of 2 seconds.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-1-conclusion-2.png\" rel=\"lightbox-10\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-13395 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-1-conclusion-2.png\" alt=\"\" width=\"900\" height=\"462\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-1-conclusion-2.png 900w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-1-conclusion-2-768x394.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-1-conclusion-2-150x77.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-1-conclusion-2-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-1-conclusion-2-36x18.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-1-conclusion-2-48x25.png 48w\" sizes=\"auto, (max-width: 900px) 100vw, 900px\" \/><\/a><\/p>\n<p class=\"intro-text\">Keep your page open if you want to continue with the next tutorial.<\/p>\n<hr \/>\n<h2 class=\"page-subheading\">Tutorial 2: Choose Refresh Rate from Combo Box<\/h2>\n<p class=\"intro-text\">This tutorial builds on Tutorial 1. In this tutorial, we'll add a Combo Box with refresh rate options, and then update the Current Date\/Time Toggle to use the selected RefreshRate.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-2-Intro-2.png\" rel=\"lightbox-11\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-13371\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-2-Intro-2.png\" alt=\"\" width=\"900\" height=\"418\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-2-Intro-2.png 1125w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-2-Intro-2-768x356.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-2-Intro-2-150x70.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-2-Intro-2-24x11.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-2-Intro-2-36x17.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-2-Intro-2-48x22.png 48w\" sizes=\"auto, (max-width: 900px) 100vw, 900px\" \/><\/a><\/p>\n<p class=\"intro-text\">There are two steps in the tutorial:<\/p>\n<ul class=\"intro-text\">\n<li>Step 1. Add a Combo Box with a Default Value<\/li>\n<li>Step 2. Configure the Current Date\/Time Toggle<\/li>\n<\/ul>\n<p class=\"intro-text\"><strong>Step 1. Add a Combo Box with a Default Value<\/strong><\/p>\n<p class=\"intro-text\">In this step we're going to add a Default Value and Combo Box, to control the <strong>Refresh Rate<\/strong> of the Current Date\/Time Toggle.<\/p>\n<p class=\"left-bar\">Related: <a title=\"Default Values\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/default-value\/\">Default Values<\/a> and <a title=\"Combo Box\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/combo-box\/\">Combo Box<\/a><\/p>\n<p class=\"intro-text\">Before you begin, open the page you saved in Tutorial 1: <em>Date Time Tutorials - Current date\/time toggle<\/em>.<\/p>\n<p class=\"intro-text\"><strong>Open the Default Values, and add a new Default Value.<\/strong><\/p>\n<p class=\"intro-text\">1. Type a variable name, <strong>RefreshRate<\/strong>, into the edit box, of type <em>Number<\/em>, with a default value, <strong>5<\/strong>.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-2-Step-1.1.png\" rel=\"lightbox-12\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-13378 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-2-Step-1.1.png\" alt=\"\" width=\"383\" height=\"697\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-2-Step-1.1.png 383w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-2-Step-1.1-82x150.png 82w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-2-Step-1.1-13x24.png 13w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-2-Step-1.1-20x36.png 20w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-2-Step-1.1-26x48.png 26w\" sizes=\"auto, (max-width: 383px) 100vw, 383px\" \/><\/a><\/p>\n<p class=\"intro-text\">2. Drag a Combo Box component onto the Precision Layout, just to the left of the Current Date\/Time Toggle component. Resize it to be slightly wider.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-2-Step-1.2.png\" rel=\"lightbox-13\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-13379\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-2-Step-1.2.png\" alt=\"\" width=\"900\" height=\"331\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-2-Step-1.2.png 1327w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-2-Step-1.2-768x282.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-2-Step-1.2-150x55.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-2-Step-1.2-1280x471.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-2-Step-1.2-24x9.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-2-Step-1.2-36x13.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-2-Step-1.2-48x18.png 48w\" sizes=\"auto, (max-width: 900px) 100vw, 900px\" \/><\/a><\/p>\n<p class=\"intro-text\"><strong>Now click on the combo box to configure it to interact with the new default value, <em>RefreshRate<\/em>.<\/strong><\/p>\n<p class=\"intro-text\">3. Add the following list of values to <strong>Option Values<\/strong>: 1, 2, 5.<\/p>\n<p class=\"intro-text\">4. Add the following list of values to <strong>Option Names<\/strong>: 1 second, 2 seconds, 5 seconds.<\/p>\n<p class=\"intro-text\">5. In the Selected Option drop-down list, select the new default variable: <em>RefreshRate<\/em>.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-2-Step-1.3.png\" rel=\"lightbox-14\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-13380 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-2-Step-1.3.png\" alt=\"\" width=\"382\" height=\"257\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-2-Step-1.3.png 382w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-2-Step-1.3-150x101.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-2-Step-1.3-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-2-Step-1.3-36x24.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-2-Step-1.3-48x32.png 48w\" sizes=\"auto, (max-width: 382px) 100vw, 382px\" \/><\/a><\/p>\n<p class=\"intro-text\"><strong>Step 2. Configure the Current Date\/Time Toggle<\/strong><\/p>\n<p class=\"intro-text\">In this step we're going to configure the Current Date\/Time Toggle to use the new variable <em>RefreshRate<\/em> for its <strong>Refresh Rate<\/strong> property.<\/p>\n<p class=\"intro-text\"><strong>Click on the Current Date\/Time Toggle component, to configure it.<\/strong><\/p>\n<p class=\"intro-text\">1. Click <strong>Advanced<\/strong> to open the Advanced properties panel.<\/p>\n<p class=\"intro-text\">2. For <strong>Refresh Rate<\/strong>: select <em>Variable<\/em> from the first drop-down list, and <em>RefreshRate<\/em> from the second.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-2-Step-3.1.png\" rel=\"lightbox-15\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-13381 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-2-Step-3.1.png\" alt=\"\" width=\"387\" height=\"323\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-2-Step-3.1.png 387w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-2-Step-3.1-150x125.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-2-Step-3.1-24x20.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-2-Step-3.1-36x30.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-2-Step-3.1-48x40.png 48w\" sizes=\"auto, (max-width: 387px) 100vw, 387px\" \/><\/a><\/p>\n<p class=\"intro-text\"><strong>Try out the Component<\/strong><\/p>\n<ul>\n<li class=\"intro-text\">Click the Preview <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/preview.png\" rel=\"lightbox-9\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2896\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/preview.png\" alt=\"preview\" width=\"13\" height=\"14\" \/><\/a> button on the Studio toolbar to see what your page will look like in run-time.<\/li>\n<li class=\"intro-text\">Select <em>1 second<\/em> from the Combo Box.<\/li>\n<\/ul>\n<p class=\"note\"><strong>Note<\/strong> how the <em>End Time<\/em> text label and the tag value update at the new refresh rate of 1 second.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-2-conclusion-1.png\" rel=\"lightbox-17\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-13377 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-2-conclusion-1.png\" alt=\"\" width=\"925\" height=\"466\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-2-conclusion-1.png 925w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-2-conclusion-1-768x387.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-2-conclusion-1-150x76.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-2-conclusion-1-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-2-conclusion-1-36x18.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Tut-2-conclusion-1-48x24.png 48w\" sizes=\"auto, (max-width: 925px) 100vw, 925px\" \/><\/a><\/p>\n<p class=\"left-bar\">Watch the video below to see how the tag value and the <em>End Time<\/em> text label update at the selected refresh rate, when the current date\/time toggle is switched on (selected). Note that <em>Start Time<\/em> does not update.<\/p>\n\r\n\t<!-- Begin Video.js -->\r\n\t<video id=\"example_video_id_574704275\" class=\"video-js vjs-default-skin\" width=\"960\" height=\"500\" controls preload=\"none\" data-setup='[]'>\r\n\t\t<source src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/videos\/CurrentDateTime2.mp4\" type='video\/mp4' \/>\r\n\t\t\r\n\t\t\r\n\t<\/video>\r\n\t<!-- End Video.js -->\r\n\n<p>&nbsp;<\/p>\n<h2 class=\"page-subheading\">Release History<\/h2>\n<ul class=\"intro-text\">\n<li class=\"intro-text\"><a title=\"Current Date\/Time Toggle 4.3.2\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/current-time-toggle\/current-time-toggle-4-3-2\/\">Current Date\/Time Toggle 4.3.2<\/a><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Use the Current Date\/Time Toggle component to refresh data on your Explorer page. The Current Date\/Time Toggle displays a check box on the page. When this is selected, the configured Date\/Time variable is updated with the current date\/time at regular intervals determined the Refresh Rate. This article describes how to configure a Current Date\/Time Toggle in Explorer version 4.4 and later. <\/p>\n<p class=\"continue-reading-button\"> <a class=\"continue-reading-link\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/current-time-toggle\/\">Read more<i class=\"crycon-right-dir\"><\/i><\/a><\/p>\n","protected":false},"author":8,"featured_media":13783,"parent":1407,"menu_order":122,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":"","_members_access_role":[],"_members_access_error":""},"categories":[11],"tags":[348],"class_list":["post-13119","page","type-page","status-publish","has-post-thumbnail","hentry","category-tutorial","tag-date-and-time-pickers","Product-ex"],"_links":{"self":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/13119","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/comments?post=13119"}],"version-history":[{"count":2,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/13119\/revisions"}],"predecessor-version":[{"id":67013,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/13119\/revisions\/67013"}],"up":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/1407"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media\/13783"}],"wp:attachment":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media?parent=13119"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/categories?post=13119"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/tags?post=13119"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}