SAP Tech Pro

SAP Technical Blog
Topprice Price Comparison

How to use “DateNavigator” in Web Dynpro with Static and Dynamic Programming

How to use “DateNavigator” in Web Dynpro with Static and Dynamic Programming

The UI element DateNavigator offers the possibilities to display and navigate in a calendar and to enter dates, by choosing a year, a month,a day or a range of dates,from the showed calendar.

Hereunder,we present a table with some of the DataNavigator properties that can be bound, and the attribute type in case the property is bindable (Table ).

How to use “DateNavigator” in Web Dynpro with Static and Dynamic Programming

We create a WD Component named Y_UI_DATENAVIGATOR. In the context view,we create three attributes: MONTH, WEEK and DAY of STRING type,and two context nodes:

  • LEGEND,Cardinality 0. . .n,
    supply function named SUPPLY_LEGEND,attributes:
    CATEGORY of WDY_MD_DATE_MARKING_CATEGORY type and TEXT of STRING type
  • MARKING,Cardinality 0...n,supply function named SUPPLY_MARKING, attributes: CATEGORY of WDY_MD_DATE_MARKING_CATEGORY type and DATE of D type.

In the view layout,we insert a DateNavigator UI element with a DateNavigator- Legend and DateNavigatorMarking, Fig. By using the DateNavigatorLegend element,we can add a legend for the DateNavigator, and with the DateNavigator- Marking element,we can highlight entries of a specific category within the Date- Navigator UI element.

Context view and DateNavigatorLegend, DateNavigatorMarking properties

How to use “DateNavigator” in Web Dynpro with Static and Dynamic Programming

The most important properties of the DateNavigatorLegend element are:

  • “Category”,which allows us to create the legend categories (in format one,two,three and four).It shall be bound to a context attribute that stores these categories.
  • “Text”, which stores the texts, describing each category.
  • “DataSource”,which shall be bound to a context node,which stores the categories and the texts of the legend entries. The most important properties of the DateNavigatorMarking element are:
  • “Category”,which shall be bound to a context attribute that stores the category of the highlighted data.
  • “DataSource”,which shall be bound to a context node which stores the categories,data and tooltip of the highlighted data.
  • “Tooltip” is not necessarily bindable. In our case,we have not created an attribute for the tooltip,because we don’t want to display a quick info text when the user passes the mouse pointer over the highlighted data of the Date- Navigator UI element.
  • “Data” shall be bound to a context attribute that stores the date of the highlighted data.

View layout

How to use “DateNavigator” in Web Dynpro with Static and Dynamic Programming

The DateNavigator UI element has many properties and events. In our case,we have changed the properties:

How to use “DateNavigator” in Web Dynpro with Static and Dynamic Programming

In this way,we have chosen Sunday as the first day of the week in our calendar.

How to use “DateNavigator” in Web Dynpro with Static and Dynamic Programming

In this way,we show 3 months in our calendar.

How to use “DateNavigator” in Web Dynpro with Static and Dynamic Programming

We have chosen from the list the range option,because we want to offer the possibility to select the range of dates.

How to use “DateNavigator” in Web Dynpro with Static and Dynamic Programming

We have set the starting date of our calendar.

To be able to show,in the TextView UI elements,the week,the day or the month that the end-user selects in our calendar,we have used the events:onDaySelect,on Month Select and on Week Select(Fig.)

Events of the DataNavigator UI element

How to use “DateNavigator” in Web Dynpro with Static and Dynamic Programming

First of all,we have to populate our nodes with values. The Listing shows the SUPPLY_LEGEND supply function method.

The SUPPLY_LEGEND supply function method


METHOD supply_legend.

DATA: ls_legend TYPE wd_this-element_legend,lt_legend LIKE TABLE OF ls_legend.

ls_legend-category = cl_wd_date_nav_legend=e_category-one.

ls_legend-text = 'Doors open day'.

APPEND ls_legend TO lt_legend.

ls_legend-category = cl_wd_date_nav_legend=>e_category-two.

ls_legend-text = 'Operating teams trip'.

APPEND ls_legend TO lt_legend.

ls_legend-category = cl_wd_date_nav_legend=>e_category-three.

ls_legend-text = 'Happy hour'.

INSERT ls_legend INTO TABLE lt_legend.

node-bind_table( lt_legend ).

ENDMETHOD.


We create three legend categories(one, two and three),with the texts:“Doors open day” for the first category, “Operating teams trip”for the second category and “Happy hour” for the third category.

The Listing shows the SUPPLY_MARKING supply function method required to populate with values the MARKING node.

The SUPPLY_MARKING supply function method


METHOD supply_legend. 

DATA: ls_legend TYPE wd_this-element_legend,lt_legend LIKE TABLE OF ls_legend. 

ls_legend-category = cl_wd_date_nav_legend=e_category-one. 

ls_legend-text = 'Doors open day'. 

APPEND ls_legend TO lt_legend. 

ls_legend-category = cl_wd_date_nav_legend=e_category-two. 

ls_legend-text = 'Operating teams trip'. 

APPEND ls_legend TO lt_legend. 

ls_legend-category = cl_wd_date_nav_legend=e_category-three. 

ls_legend-text = 'Happy hour'. 

INSERT ls_legend INTO TABLE lt_legend. 

node-bind_table( lt_legend ). 

ENDMETHOD. 


In this way we mark (highlight),for the first category,the day 11.08.2009,for the second category,the day 21.08.2009,and for the third category,the day 24.08.2009. When the user selects a day in our calendar,the Framework triggers the event handler method onactionon_day_select (Fig).

The onactionon_day_select event handler method

How to use “DateNavigator” in Web Dynpro with Static and Dynamic Programming

As import parameter, for our event handler method, we have the parameter named DAY of D type that holds the selected day. We pass this value in our DAY attribute created in the context view.

When the user selects a Week in our calendar, the Framework triggers the event handler method onactionon_week_select (Fig).

The onactionon_week_select event handler method

 How to use “DateNavigator” in Web Dynpro with Static and Dynamic Programming

As import parameter,for our event handler method,we have the parameters: WEEK of I type that holds the selected week and YEAR of I type that holds the corresponding year of the selected week. We pass these values in our WEEK attribute created in the context view.

When the user selects a Month in our calendar,the Framework triggers the event handler method onactionon_month_select (Fig).

The onactionon_month_select event handler method

As import parameters,for our event handler method,we have: MONTH of I type that holds the selected month and YEAR of I type that holds the corresponding of the selected month. We pass these values in our MONTH attribute created in context view.

Runtime

How to use “DateNavigator” in Web Dynpro with Static and Dynamic Programming

Dynamic Programming

RUNTIME CLASS: CL_WD_DATE_NAVIGATOR

Hereunder,we present a table showing the correspondence between the view designer name and the runtime name, with the proper types,in case of dynamic programming of a DateNavigation UI element (Table).

How to use “DateNavigator” in Web Dynpro with Static and Dynamic Programming

The implementation of a dynamic DateNavigator UI element with elements: DateNavigatorLegent and DateNavigatorMarking,contains the following statements(Listing ):

Dynamic programming of a DataNavigator UI element


METHOD wddomodifyview. 

DATA lr_date_navigator TYPE REF TO cl_wd_date_navigator. 

DATA lr_flow_data TYPE REF TO cl_wd_flow_data. 

DATA lr_container TYPE REF TO cl_wd_uielement_container. 

DATA lr_datenav_legend TYPE REF TO cl_wd_date_nav_legend. 

DATA lr_datenav_marking TYPE REF TO cl_wd_date_nav_marking. 

IF first_time EQ abap_true. 

lr_container ?= view->get_element('ROOTUIELEMENTCONTAINER'). 

lr_date_navigator = cl_wd_date_navigator=>new_date_navigator( 

id ='DATENAVIGATOR' 

first_day_of_week = cl_wd_date_navigator=>e_first_day_of_week-sunday 

months_per_column = 1 

months_per_row = 3 

selection_mode = cl_wd_date_navigator=>e_selection_mode-range 

starts_with ='20090801' 

on_day_select ='ON_DAY_SELECT' 

on_month_select ='ON_MONTH_SELECT' 

on_week_select ='ON_WEEK_SELECT' 

). 

lr_flow_data = cl_wd_flow_data=>new_flow_data(element = 

lr_date_navigator). 

lr_container->add_child(lr_date_navigator). 

lr_datenav_legend = cl_wd_date_nav_legend=>new_date_nav_legend( 

id ='DATENAVIGATORLEGEND' 

bind_category ='LEGEND.CATEGORY' 

bind_data_source ='LEGEND' 

bind_text ='LEGEND.TEXT' 

). 

lr_date_navigator->set_legend(the_legend = lr_datenav_legend). 

lr_datenav_marking = cl_wd_date_nav_marking=>new_date_nav_marking( 

id = 'DATENAVIGATORMARKING' 

bind_category = MARKING.CATEGORY' 

bind_data_source ='MARKING' 

bind_date ='MARKING.DATE' 

). 

lr_date_navigator->set_marking(the_marking=lr_datenav_marking) 

ENDIF. 

ENDMETHOD. 

Add comment

Before Buying, Compare Prices at Topprice.in

Topprice.in