I started with an idea to create an interactive way to make SAP CRM fun and interesting end up creating a SAP CRM quiz.
To create a quiz I wanted radio buttons and images as an option on screen to create a question format for the user.

I followed following steps for achieving the task.

I created the radio button as a group and used the following tags to assign it to a group:

 

<thtmlb:radioButtonGroup id="Radio" >


The radio button would now be assigned to one group so only one option could be clicked a time.

The image had to be changed with each question and similarly the question also needed to be dynamic.

To make the pictures dynamic, I created a public static variable and declared in the implementation class. Then, I implemented the following code in the .htm page

  <thtmlb:image src    = "<%= controller->gv_url2 %>"

Now the pictures will be picked dynamically based on the value of public static variable gv_url.

Now to identify the question at each iteration I also created a global counter that would increment after every question.

 

GV_COUNTER	Static Attribute	Public	Type	NUM02

Now same will be followed for each question and image URL. So I created global static variable for each question and image URL.

To record the responses, I created an event handler for each of the radio button, that would record the response of each option clicked by user.

method EH_ONRADIO1.
  gv_resp1  = 'X'.
endmethod.

The response will then be handled on the submit handler for the submit button.

The following code will be written for submit button

  DATA: zv_msg_srv  TYPE REF TO cl_bsp_wd_message_service,
        lv_flag     VALUE 'FALSE' TYPE boolean.
  CONSTANTS : c_msgtype VALUE 'I' TYPE symsgty,
  c_msg_id VALUE 'ZFUN'  TYPE symsgid,
  c_correct_msg  VALUE '004' TYPE symsgno,
  c_wrong_msg    VALUE '005' TYPE symsgno.

  CLEAR : zv_msg_srv,lv_flag.

  zv_msg_srv = cl_bsp_wd_message_service=>get_instance( ).

  CHECK zv_msg_srv IS BOUND.


  CASE gv_counter.

    WHEN 0.
      IF gv_resp2 = 'X'.
        lv_flag = 'X'.

      ENDIF.

    WHEN 1.
      IF gv_resp4 = 'X'.
        lv_flag = 'X'.
      ENDIF.

    WHEN 2.
      IF gv_resp3 = 'X'.
        lv_flag = 'X'.
      ENDIF.

    WHEN 3.
      IF gv_resp1 = 'X'.
        lv_flag = 'X'.
      ENDIF.

    WHEN 4.
      IF gv_resp1 = 'X'.
        lv_flag = 'X'.
      ENDIF.

    WHEN 5.
      IF gv_resp3 = 'X'.
        lv_flag = 'X'.
      ENDIF.


  ENDCASE.

  IF gv_counter <= 5.
    IF lv_flag = 'X' .
*---Right Answer-----*
      CALL METHOD zv_msg_srv->add_message
        EXPORTING
          iv_msg_type   = c_msgtype
          iv_msg_id     = c_msg_id
          iv_msg_number = c_correct_msg.



    ELSE.

*---Wrong Answer-----*
      CALL METHOD zv_msg_srv->add_message
        EXPORTING
          iv_msg_type   = c_msgtype
          iv_msg_id     = c_msg_id
          iv_msg_number = c_wrong_msg.

    ENDIF.
  ENDIF.

  CLEAR: gv_resp1, gv_resp2, gv_resp3, gv_resp4.
  gv_counter = gv_counter + 1.

I also implemented message handling for the message being displayed for correct and wrong response.

Now to change the values dynamically, I implemented the following code in do prepare output.

Do_prepare_output:

 

 CASE gv_counter.
  WHEN 0.
    gv_question = '   Identify the Apple LOGO   '.
    gv_url1 = '/SAP/BC/BSP/SAP/ZCRM_FUNBOX/logo.bmp'.
    gv_url2 = '/SAP/BC/BSP/SAP/ZCRM_FUNBOX/apple.bmp'.
    gv_url3 = '/SAP/BC/BSP/SAP/ZCRM_FUNBOX/microsoft.bmp'.
    gv_url4 = '/SAP/BC/BSP/SAP/ZCRM_FUNBOX/yahoo.bmp'.

  when 1.
    gv_question = 'Identify button in web UI'.
    gv_url1 = '/SAP/BC/BSP/SAP/ZCRM_FUNBOX/checkbox.bmp'.
    gv_url2 = '/SAP/BC/BSP/SAP/ZCRM_FUNBOX/input_area.bmp'.
    gv_url3 = '/SAP/BC/BSP/SAP/ZCRM_FUNBOX/radio.bmp'.
    gv_url4 = '/SAP/BC/BSP/SAP/ZCRM_FUNBOX/button.bmp'.

  when 2.
    gv_question = 'Identify the Radio button in web UI'.
    gv_url1 = '/SAP/BC/BSP/SAP/ZCRM_FUNBOX/dropdown.bmp'.
    gv_url2 = '/SAP/BC/BSP/SAP/ZCRM_FUNBOX/checkbox.bmp'.
    gv_url3 = '/SAP/BC/BSP/SAP/ZCRM_FUNBOX/radio.bmp'.
    gv_url4 = '/SAP/BC/BSP/SAP/ZCRM_FUNBOX/button.bmp'.

  when 3.
    gv_question = 'Identify the Checkbox in web UI'.
    gv_url1 = '/SAP/BC/BSP/SAP/ZCRM_FUNBOX/checkbox.bmp'.
    gv_url2 = '/SAP/BC/BSP/SAP/ZCRM_FUNBOX/dropdown.bmp'.
    gv_url3 = '/SAP/BC/BSP/SAP/ZCRM_FUNBOX/input_area.bmp'.
    gv_url4 = '/SAP/BC/BSP/SAP/ZCRM_FUNBOX/button.bmp'.

  when 4.
    gv_question = 'Identify the Dropdown field below'.
    gv_url1 = '/SAP/BC/BSP/SAP/ZCRM_FUNBOX/dropdown.bmp'.
    gv_url2 = '/SAP/BC/BSP/SAP/ZCRM_FUNBOX/checkbox.bmp'.
    gv_url3 = '/SAP/BC/BSP/SAP/ZCRM_FUNBOX/radio.bmp'.
    gv_url4 = '/SAP/BC/BSP/SAP/ZCRM_FUNBOX/button.bmp'.

  when 5.
    gv_question = 'Identify the Radio button in web UI'.
    gv_url1 = '/SAP/BC/BSP/SAP/ZCRM_FUNBOX/dropdown.bmp'.
    gv_url2 = '/SAP/BC/BSP/SAP/ZCRM_FUNBOX/checkbox.bmp'.
    gv_url3 = '/SAP/BC/BSP/SAP/ZCRM_FUNBOX/radio.bmp'.
    gv_url4 = '/SAP/BC/BSP/SAP/ZCRM_FUNBOX/button.bmp'.

 when 6.
    gv_question = 'Identify the Radio button in web UI'.
    gv_url1 = '/SAP/BC/BSP/SAP/ZCRM_FUNBOX/dropdown.bmp'.
    gv_url2 = '/SAP/BC/BSP/SAP/ZCRM_FUNBOX/checkbox.bmp'.
    gv_url3 = '/SAP/BC/BSP/SAP/ZCRM_FUNBOX/radio.bmp'.
    gv_url4 = '/SAP/BC/BSP/SAP/ZCRM_FUNBOX/button.bmp'.


  ENDCASE.

The value of each question and image will be changed based on a global counter( gv_counter ).

Finally, I implemented the code for the htm page to hadle the layout of the view.

 

<%@page language="abap" %>
<%@extension name="htmlb" prefix="htmlb" %>
<%@extension name="xhtmlb" prefix="xhtmlb" %>
<%@extension name="crm_bsp_ic" prefix="crmic" %>
<%@extension name="thtmlb" prefix="thtmlb" %>
<%@extension name="chtmlb" prefix="chtmlb" %>
<%@extension name="bsp" prefix="bsp" %>
<chtmlb:config mode        = "RUNTIME"
               displayMode = "TRUE"
               xml         = "<%= controller->configuration_descr->get_config_data( ) %>" />
<%-- <thtmlb:fileUpload id = "imgUpl" --%>
<%-- onUpload = "upload" /> --%>
<thtmlb:tray design = "PLAIN"
             height = "100%"
             id     = "de"
             title  = "Now Answer the below question" >
  <thtmlb:trayBody>
    <thtmlb:grid cellSpacing = "1"
                 columnSize  = "3"
                 height      = "100%"
                 rowSize     = "7"
                 width       = "100%" >
     <thtmlb:label id = "question"
                   text = '<%= controller->gv_question %>'
                   labelType = "MEDIUM"   />
      <thtmlb:radioButtonGroup id="Radio" >
        <thtmlb:gridCell colSpan             = "1"
                         columnIndex         = "1"
                         horizontalAlignment = "center"
                         rowIndex            = "2" >
          <thtmlb:radioButton id      = "R1"
                              text    = " A "
                              onClick = "radio1" />
          <thtmlb:image src    = "<%= controller->gv_url1 %>"
                        width  = "175"
                        height = "175" />
        </thtmlb:gridCell>
        <thtmlb:gridCell colSpan             = "1"
                         columnIndex         = "2"
                         horizontalAlignment = "center"
                         rowIndex            = "2" >
          <thtmlb:radioButton id      = "R2"
                              text    =  " B "
                              onClick = "radio2" />
          <thtmlb:image src    = "<%= controller->gv_url2 %>"
                        width  = "175"
                        height = "175" />
        </thtmlb:gridCell>
        <thtmlb:gridCell colSpan             = "1"
                         columnIndex         = "1"
                         horizontalAlignment = "center"
                         rowIndex            = "4" >
          <thtmlb:radioButton id      = "R3"
                              text    = " C "
                              onClick = "radio3" />
          <thtmlb:image src    = "<%= controller->gv_url3 %>"
                        width  = "175"
                        height = "175" />
        </thtmlb:gridCell>
        <thtmlb:gridCell colSpan             = "1"
                         columnIndex         = "2"
                         horizontalAlignment = "center"
                         rowIndex            = "4" >
          <thtmlb:radioButton id      = "R4"
                              text    = " D "
                              onClick = "radio4" />
          <thtmlb:image src    = "<%= controller->gv_url4 %>"
                        width  = "175"
                        height = "175" />
        </thtmlb:gridCell>
        <thtmlb:gridCell colSpan             = "1"
                         columnIndex         = "1"
                         horizontalAlignment = "right"
                         rowIndex            = "7" >
          <thtmlb:button id      = "submit"
                         onClick = "submit"
                         text    = "SUBMIT" />
        </thtmlb:gridCell>
      </thtmlb:radioButtonGroup>
    </thtmlb:grid>
  </thtmlb:trayBody>
</thtmlb:tray> 

So instead of creating multiple views only one view could handle multiple questions and images that would change dynamically with each answer.

The idea of fun ended up creating a fun game for each one to enjoy. 🙂


Please send your comments on improving or any queries related to it.

To report this post you need to login first.

2 Comments

You must be Logged on to comment or reply to a post.

  1. Amit Singh

    Hi Akshay,

    First of all thanks for documenting real time example with all steps to be followed in SAP CRM Web UI. But, I want you to add database tables or structure created for value node and show how entries are getting created in the db tables.

    Thanks,

    Amit

    (0) 

Leave a Reply