{"id":13205,"date":"2016-04-06T12:01:53","date_gmt":"2016-04-06T04:01:53","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=13205"},"modified":"2024-09-11T11:26:39","modified_gmt":"2024-09-11T03:26:39","slug":"date-time-tutorials","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/date-time-tutorials\/","title":{"rendered":"Date Time Tutorials"},"content":{"rendered":"\n

This article describes how to get a single page ready for date\/time tutorials.<\/p>\n

Overview<\/h2>\n

There are several date\/time components in Explorer, and each of these uses one or more dates. To save yourself some time, it's worth setting up a single tutorial page, and then seeing how this page is affected by the various date\/time components.<\/p>\n

Page Defaults for startTime and endTime<\/h2>\n

Before you set up the page, read about Page Defaults in the Default Values<\/a> article.<\/p>\n

Note<\/strong> how startTime<\/em> and endTime<\/em> are already in the Default Values list panel; these are page defaults.<\/p>\n

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

Preparing the Page<\/h2>\n

We're going to add a page in grid layout, with three rows. We'll add a precision layout to each of the top two rows, and then a grid layout onto the second precision layout.<\/p>\n

Next, we'll add two Text Labels and two Data Labels.<\/p>\n

Finally, we'll save the new page as \"Date Time Tutorials\" in My Workspace<\/em>.<\/p>\n

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

Step 1. Set up a new IFS OI Explorer Page<\/strong><\/p>\n

Create a new page in Grid Layout<\/em>, then format this so that you have three rows and no columns.<\/p>\n

1. Click New Page<\/strong> on the Explorer Ribbon Home<\/strong> tab, and select Grid Layout<\/strong>.<\/p>\n

2. Drag a new grid<\/a> onto the top left quadrant, and add three rows.<\/p>\n

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

 <\/p>\n

Step 2. Add Precision Layouts and another Grid Layout<\/strong><\/p>\n

Related: Precision Layout<\/a> and Grid Layout<\/a>.<\/p>\n

1. Drag a Precision Layout component onto each of the top two grids cells.<\/p>\n

2. Drag a Grid Layout onto the second precision layout.<\/p>\n

3. Resize the grid layout to center in the precision layout, and give it two rows and two columns.<\/p>\n

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

 <\/p>\n

Step 3. Add components to the page.<\/strong><\/p>\n

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

Add components to the central grid<\/strong>:<\/p>\n

1. Drag a Text Label onto the top left grid cell. In the text label's Content<\/strong> type Start Time:<\/em> then click Add Data<\/strong> and add the page variable startTime<\/em> with a Full Date<\/em> format.<\/p>\n

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

2. Drag a Text Label onto the top right grid cell. In the text label's Content<\/strong> type End Time:<\/em> then click Add Data<\/strong> and add the page variable endTime<\/em> with a Full Date<\/em> format.<\/p>\n

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

3. Drag a Tag into the bottom left quadrant. We've used the Goldenrod<\/em> tag and configure its Time<\/em> to use startTime<\/em>.<\/p>\n

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

4. Copy and paste your tag into the bottom right and configure its Time<\/em> to use endTime<\/em>.<\/p>\n

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

This is how your page should look:<\/p>\n

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

 <\/p>\n

Step 4. Save the Page in your Workspace<\/strong><\/p>\n

Save the page in your private workspace with suitable name, such as \"Date Time Tutorials\".<\/p>\n

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

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

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

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

You can now continue with your date tutorials.<\/p>\n

Date Time Tutorials<\/h2>\n

There are several date\/time components in Explorer Studio. Here are the links:<\/p>\n