Skip to Content
Author's profile photo Former Member

Customizing HTM page for the view component and creating an interactive quiz

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.

Assigned tags

      2 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Amit Singh
      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

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Thaks Amit
      Will surely write a new post for the value node also.