BSP Application using Date Navigator Control

By Raghava Vakada, Mouri Tech Solutions

Scenario: Displaying the selected date in an Inputfield. 

Go to transaction SE80. Select BSP application and input the name of the BSP application that you want to create. Press Enter or click on the display icon.

Save and activate the application.

Right click on the application name and click  à create à page.

The resultant window appears as follows.

Enter the name of the page that you want to create.

In this case it is the ‘first.htm’ that is being created.

Enter the name, description of the page,

select the ‘Page with Flow Logic’ radio button and click on ‘continue’.

Now we are done with creating the pages.

Your screen should look as shown below.

We proceed with providing the layout, attributes and the Event handling

of the respective pages.

Go to first.htm and put the following code in the layout tab of the page 

Code in layout tab 

<%@page language="abap"%>
<%@extension name="htmlb" prefix="htmlb"%>

<htmlb:content design="design2003">
  <htmlb:page title = "DATE NAVIGATOR ">
    <htmlb:form>
      <h2>  <htmlb:label for="date" text="DATE" />

       <htmlb:inputField        id             = "mydate"
                                value          = "<%= date%>"
                                maxlength      = "10"
                                type           = "date"/>
       </h2>
       <htmlb:dateNavigator id             = "myDateNavigator"
                           monthsPerRow    = "1"
                           onNavigate      = "myOnNavigate"
                           onDayClick      = "myOnDayClick"
                           onWeekClick     = "myOnWeekClick"
                           onMonthClick    = "myOnMonthClick">
      </htmlb:dateNavigator>

      </htmlb:form>
  </htmlb:page>
</htmlb:content>

In the ‘Page Attributes’ of first.htm, enter the attributes as shown below.

We need our application to take the date in input field when date is selected from DateNavigator control.

So we write the code in the ‘OnInputProcessing’ event. 

Code in event handler tab for oninputprocessing event. 

DATA: date_event TYPE REF TO CL_HTMLB_INPUTFIELD.
     date_event ?= CL_HTMLB_MANAGER=>GET_DATA(
                                    REQUEST = RUNTIME->SERVER->REQUEST
                                         NAME     = 'inputField'
                                         ID       = 'mydate'  ).

DATA: event TYPE REF TO CL_HTMLB_EVENT.
      event = CL_HTMLB_MANAGER=>get_event( runtime->server->request ).

DATA: dateNavigator_event TYPE REF TO CL_HTMLB_EVENT_DATENAVIGATOR.
      dateNavigator_event ?= event.

 if date_event->value is initial.
    date = dateNavigator_event->day.
    

 elseif date_event->value is not initial.
    date = dateNavigator_event->day.
 endif. 

Save, Check and activate the first.htm. Save, check and activate the  application

and after that  execute it. The below screen would be displayed.

Enter the username and password and click on ‘OK’.

The BSP page appears as shown below.

Select the date from DateNavigator.

The date is displayed in input field as shown below.