{"id":1597,"date":"2015-02-18T01:26:17","date_gmt":"2015-02-17T17:26:17","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=1597"},"modified":"2017-12-14T14:35:30","modified_gmt":"2017-12-14T06:35:30","slug":"month-picker-4-3-2","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/month-picker\/month-picker-4-3-2\/","title":{"rendered":"Month 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 month picker, see Month Picker<\/a>.<\/p>\n

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

Overview<\/h3>\n

The Month\u00a0Picker allows a user select a monthly time period. This is usually used to provide a time period for other components\u00a0on the page, such as a chart. The component publishes the start and end of the month period for use by other components.<\/p>\n

The following diagram shows a Month\u00a0Picker component\u00a0being configured:<\/p>\n

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

\u00a0<\/div>\n\n\n\n\n\n\n
Start Time<\/strong>:<\/td>\nThe start of the month\u00a0that is initially displayed when the page first loads.\u00a0This must be created as an event<\/a> with a type of Datetime<\/em>. You can choose a date and time using the date picker. You can choose the date and time separately, however it\u2019s normally used to specify a time period starting from midnight.<\/td>\n<\/tr>\n
End Time<\/strong><\/td>\nThe end of the time\u00a0range that is initially displayed when the page first loads.\u00a0This must also be created as an event<\/a> with a type of Datetime<\/em>. This should be no later\u00a0than the end of the month specified as the start date.\u00a0If this is past the end of the month from the start date, the end date is ignored and defaults to the end of the month.<\/td>\n<\/tr>\n
Month<\/strong><\/td>\nThe month that is selected by default when the page first loads. This must be created as an event<\/a> with a type of Number<\/em>, with the number corresponding to the month.<\/td>\n<\/tr>\n
Year<\/strong><\/td>\nThe year that is selected by default when the page first loads. If no year is specified, the current year is used. This must be created as an event<\/a> with a type of Number<\/em>.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

 <\/p>\n

\n

Tutorial<\/h3>\n

The Month Picker is a useful component\u00a0that enables users to change the type of data that is returned to other components\u00a0on a page.<\/p>\n

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

\"timeperiodpickerchart\"<\/p>\n

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

\n

Step by Step: Creating a Month\u00a0Picker that Drives a Stacked Chart<\/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 Month\u00a0Picker to the page<\/strong><\/p>\n

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

Drag and drop the Month\u00a0Picker component\u00a0onto a grid cell.<\/p>\n

\u00a0<\/p>\n

\u00a0Step 2.\u00a0\u00a0Configure the Month\u00a0Picker<\/strong><\/p>\n

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

The Month\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 components\u00a0on 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

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

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

This step provides the hooks for the Month\u00a0Picker to send signals to other components\u00a0on the page.<\/p>\n