Dear SAP Community Member,
In order to fully benefit from what the SAP Community has to offer, please register at:
Thank you,
The SAP Community team.
Skip to end of metadata
Go to start of metadata

One of the feature that I like in the CRM Web UI, we can have our own creativity in our new component. This wiki is to explain on how to create area frame in Web UI.

The question is why you need new area frame ? Let me give you example on my previous project’s requirement.

  • Before user create new transaction, selecting one or multiple records in the result list, they  need to fill certain parameters. Web UI will give error message if the parameter is not within the certain logic.
  • It is user friendly and will reduce the time to create transaction. Multiple transactions can be created with the same parameter. 

Now let's start create new area frame :

  • Create new value node, in this example I’m using name ZADDITIONAL. Use wizard to automatically generate the attributes. 
  • The wizard will automatically create method like in below screenshot. Getter and setter method is generic. There’s no need to do modification to the code
    method IF_BSP_MODEL~INIT.
        TYPES: BEGIN OF ltype_attr_struct,
               DEMO_START TYPE DATS,
               DEMO_END TYPE DATS,

           END OF ltype_attr_struct.

    super->if_bsp_model~init( id    = id
                              owner = owner ).

    DATA: lv_struct_ref TYPE REF TO ltype_attr_struct,
          lv_value_node TYPE REF TO cl_bsp_wd_value_node,
          lv_bo_coll    TYPE REF TO if_bol_bo_col.

    CREATE DATA lv_struct_ref.
    CREATE OBJECT lv_value_node
        iv_data_ref = lv_struct_ref.
    CREATE OBJECT lv_bo_coll TYPE cl_crm_bol_bo_col.

    lv_bo_coll->add( lv_value_node ).

    set_collection( lv_bo_coll ).

  • Go to the view layout of the html page (in my case is SearchResult.htm). Add below portion of the code just above the result table 

    <thtmlb:areaFrame id            = "af1"
                      lateRendering = "true"
                      header        = "<%= ls_header %>" >
      <thtmlb:label id     = "lbl_datefrom"
                    design = "label"
                    for    = "//"
                    text   = "Demo Start Date" />
      <thtmlb:inputField disabled  = "false"
                         id        = "dateFrom"
                         maxlength = "10"
                         size      = "10"
                         type      = "date"
                         showHelp  = "true"
                         value="//ZAdditional/Demo_start" />
      <thtmlb:label id     = "lbl_separator"
                    design = "label"
                    for    = "//"
                    text   = "                    " />
      <thtmlb:label id     = "lbl_dateto"
                    design = "label"
                    for    = "//"
                    text   = "Demo End Date" />
      <thtmlb:inputField disabled  = "false"
                         id        = "dateTo"
                         maxlength = "10"
                         size      = "10"
                         type      = "date"
                         showHelp  = "true"
                         value     ="//ZAdditional/Demo_End" />

Now your result list will have new area frame.

The next question, how to use the area frame in your coding.

You can use below code portion to get the value.

** get demo start date and demo end date
  lr_date = me->typed_context->zadditional->collection_wrapper->get_current( ).

  CHECK lr_date IS BOUND.
      CALL METHOD lr_date->get_property_as_value( EXPORTING iv_attr_name = 'DEMO_START' IMPORTING ev_result = lv_date_start ).
      CALL METHOD lr_date->get_property_as_value( EXPORTING iv_attr_name = 'DEMO_END' IMPORTING ev_result = lv_date_end ).
    CATCH cx_crm_cic_parameter_error cx_crm_genil_model_error.

  • No labels