{"id":13134,"date":"2017-12-20T12:52:31","date_gmt":"2017-12-20T04:52:31","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=13134"},"modified":"2024-10-23T14:20:52","modified_gmt":"2024-10-23T06:20:52","slug":"month-picker","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/month-picker\/","title":{"rendered":"Month 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

Overview<\/h2>\n

The Month Picker component allows a user to select a month and year from a drop-down list. This sets the two datetime<\/em> variables linked to Start Date\/Time<\/strong> and End Date\/Time<\/strong>, as well as the two number<\/em> variables linked to Month<\/strong> and Year<\/strong>.<\/p>\n

In display mode, the Month Picker displays a month and year on the page, with a drop-down for selecting a different month and year.<\/p>\n

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

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

\n

The Month Picker Component<\/h2>\n

The Month Picker has two dates: Start Date\/Time and End Date\/Time, and two numbers: Month and Year.<\/p>\n

\"\"<\/a><\/p>\n\n\n\n\n\n\n\n
Start Date\/Time<\/strong>:<\/td>\nThe first day of the selected month\/year, at 12:00 AM.<\/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 first day of month after<\/em> the selected month\/year, at 12:00 AM.<\/p>\n

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

Month<\/strong>:<\/td>\nThe month portion of Start Date\/Time<\/em>, stored as a numeric variable. For example, if the selected value is February 2016, selectedMonth<\/em> = 2<\/strong>.<\/td>\n<\/tr>\n
Year<\/strong>:<\/td>\nThe year portion of Start Date\/Time<\/em>, stored as a numeric variable. For example, if the selected year is February 2016, selectedYear<\/em> = 2016<\/strong>.<\/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 Month Picker style<\/a>.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
<\/i>BEST PRACTICE<\/span><\/p>\n

Keep the preconfigured variables in the Month Picker if you want to simplify your work.<\/p>\n<\/div>\n

 <\/p>\n

\n

Tutorial: Month 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 Month Picker component that uses the page default values for startTime<\/em> and endTime<\/em>.<\/p>\n

We'll also add two text labels to show the month picker's Year and Month numbers.<\/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 - Month 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 - Month 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 Month Picker<\/strong><\/p>\n

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

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

2. Click on the Month 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 how they change when you select a new month\/year from the month picker.<\/p>\n

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

 <\/p>\n

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

In this step we're going to add text labels to show selectedMonth<\/em> and selectedYear<\/em>, set by the Month Picker's respective Month<\/strong> and Year<\/strong> properties.<\/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 Month:<\/em> then click Add Data<\/strong> and add the Month Picker's Month<\/strong> variable, selectedMonth<\/em>, with a Normal<\/em> format.<\/p>\n

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

2. Drag another Text Label onto the top left of the page, below the first one. In the text label's Content<\/strong> type Year:<\/em> then click Add Data<\/strong> and add the Month Picker's Year<\/strong> variable, selectedYear<\/em>, with a Normal<\/em> format.<\/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

2. Select June 2015 <\/em>from the Month Picker.<\/p>\n

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

Note<\/strong> how the Start Time and End Time text labels update, as well as the tag values using startTime<\/em> and endTime<\/em>, respectively. The Month and Year text labels also update to show the numerical variables, selectedMonth<\/em> and selectedYear<\/em>.<\/p>\n

\"\"<\/a>

The month picker selection updates variables, as shown on the page.<\/p><\/div>\n

Note<\/strong> If you refresh the page in run time, the startTime and endTime variables revert to the page default values, and the month picker shows the text: \"Choose month...\".<\/p>\n

The video below shows a page with a chart that uses data from a dataset query with a month<\/em> parameter. The month parameter uses the Month<\/strong> variable (selectedMonth<\/em>) from the Month Picker. Note how the chart and the text label update every time a new month is selected, and how the start and end dates change in the text labels.<\/p>\n\r\n\t\r\n\t

\n

Release History<\/h2>\n