Skip to Content
Author's profile photo Nallasivam Balagurusamy

Date Navigator – Marking & Date Legends – How to Do

Date Navigator – Marking & Date Legends – How to Do

Date Navigator can be very much useful in case of Time related applications. In one of my development related to the Leave application, has created a Calendar which has been marked with the Leave days, Holidays & Week offs with the Tooltip text mentioning the exact description along with the Legends which shows the meaning of the colors marked.

Date Navigator

Use the Data Navigator UI element and create a Date Navigator Marking Ui inside it.

 

Create a Legend UI element with a proper element id & Create a Multiple legend Item Ui inside it.

Now create the Context Node & Attributes for the Date Navigator & Legends

 

Field Type
Color WDUI_TABLE_CELL_DESIGN
Text String
Date Datum

 

  1. Bind the Date Navigator Marking UI with the DATE_MARKING Node & Attributes

 

Bind the Multiple Legend Item UI with the LEG_ITEMS Node & Attributes as below

Mention the name of the Legend element Id name in the legendid property of the Date navigator UI element

Write the necessary logic in WDDOINIT method to fill the internal table of the DATE_MARKING & LEG_ITEMS node to see the result in the UI. Please check the code give in the sample code section.

 

Now the UI will be displayed with the calendar UI with days marked in colors along with the Legends for the colors with Description

 

****  Legend Items Data filling *******

  DATA lo_nd_leg_items TYPE REF TO if_wd_context_node.
  DATA ls_leg_items TYPE wd_this->element_leg_items.
  DATA lt_leg_items TYPE wd_this->elements_leg_items.

  lo_nd_leg_items = wd_context->get_child_node(
              name = wd_this->wdctx_leg_items ).

  ls_leg_items-color = '05'.
  ls_leg_items-text = 'Holidays'.
  APPEND ls_leg_items TO lt_leg_items.
  CLEAR: ls_leg_items.

  ls_leg_items-color = '22'.
  ls_leg_items-text = 'Flexi Days'.
  APPEND ls_leg_items TO lt_leg_items.
  CLEAR: ls_leg_items.

  IF lo_nd_leg_items IS NOT INITIAL.
    lo_nd_leg_items->bind_table( 
    new_items = lt_leg_items 
    set_initial_elements = abap_true ).
  ENDIF.

*****  Date Marking Data filling *******

  DATA lo_nd_date_marking TYPE REF TO if_wd_context_node.
  DATA ls_date_marking TYPE wd_this->element_date_marking.
  DATA lt_date_marking TYPE wd_this->elements_date_marking.

  lo_nd_date_marking = 
  wd_context->get_child_node( 
  name = wd_this->wdctx_date_marking ).

  ls_date_marking-color = '22'.
  ls_date_marking-text = 'Flexi Days'.
  ls_date_marking-date = '20170919'.
  APPEND ls_date_marking TO lt_date_marking.
  CLEAR: ls_date_marking.

  ls_date_marking-color = '22'.
  ls_date_marking-text = 'Flexi Days'.
  ls_date_marking-date = '20170920'.
  APPEND ls_date_marking TO lt_date_marking.
  CLEAR: ls_date_marking.

  ls_date_marking-color = '05'.
  ls_date_marking-text = 'HoliDay'.
  ls_date_marking-date = '20170921'.
  APPEND ls_date_marking TO lt_date_marking.
  CLEAR: ls_date_marking.

  ls_date_marking-color = '05'.
  ls_date_marking-text = 'HoliDay'.
  ls_date_marking-date = '20170922'.
  APPEND ls_date_marking TO lt_date_marking.
  CLEAR: ls_date_marking.

  IF lo_nd_date_marking IS NOT INITIAL.
    lo_nd_date_marking->bind_table( 
    new_items = lt_date_marking 
    set_initial_elements = abap_true ).
  ENDIF.

Hope this helps. Cheers.

 

Thanks,

Nalla B

Assigned Tags

      5 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Srinivasa Rao Sesham
      Srinivasa Rao Sesham

      Dear Nalla,

      Nice Blog. Thanks for sharing.

      BR,
      Srini

       

      Author's profile photo Miroslav Packan
      Miroslav Packan

      Thank you,

      nice example . Works fine.

      Well done

      Mirek

       

       

      Author's profile photo Shankar Ramigani
      Shankar Ramigani

      Hi,

      Thanks for the nice content.  I tried the same in my system and the legend colors are missing.  Attached image.Example

      Example

      Regards,

      Shankar

      Author's profile photo Nallasivam Balagurusamy
      Nallasivam Balagurusamy
      Blog Post Author

      Hi,

      Please try passing the right color code. '05' / '22' mentioned below might not be supported in your landscape. Kindly check & pass the right value.

       

      ls_leg_items-color = '05'.
        ls_leg_items-text = 'Holidays'.
        APPEND ls_leg_items TO lt_leg_items.
        CLEAR: ls_leg_items.
      
        ls_leg_items-color = '22'.
        ls_leg_items-text = 'Flexi Days'.
        APPEND ls_leg_items TO lt_leg_items.
        CLEAR: ls_leg_items.
      
        IF lo_nd_leg_items IS NOT INITIAL.
          lo_nd_leg_items->bind_table( 
          new_items = lt_leg_items 
          set_initial_elements = abap_true ).
        ENDIF.
      Author's profile photo Shankar Ramigani
      Shankar Ramigani

      Hi,

      I have unnecessary html text as well.  Colors are missing in the legend and also unnecessary html text.legend%20issue

      legend issue

      Regards,

      Shankar