Skip to Content
Author's profile photo Former Member
Former Member
February 27, 2013 11 minute read

Rating score in web dynpro .

This document can be used for rating (here from .5 to 5 stars ).

The user simply clicks on the star to rate as per desire .

the documents so far available or i could manage to find shows the star rating as image in web dynpro and only full star as input (for ex : user could only input integer values like 1 star , 2 star etc ).

Here , we can make it from .5 to 5 star . first user clicks on first star , he gets to  half star point and on clicking again he gets full star and clicking again will take back to half star and so on.

please refer these links as this document has additional details .

http://scn.sap.com/docs/DOC-28933

For this , first you have to download the images which you want to use as display buttons . Here i have used stars : a full star , half star and blank star image.

you can use the following links as reference :

  • Full star image:

http://www.google.co.in/imgres?q=yellow+star&hl=en&tbo=d&biw=1366&bih=667&tbm=isch&tbnid=itw6iWNSwO4S6M:&imgrefurl=http://depositphotos.com/1835162/stock-photo-Isolated-yellow-star.html&docid=r8iRHDI_yazERM&imgurl=http://static3.depositphotos.com/1003362/183/i/950/depositphotos_1835162-Isolated-yellow-star.jpg&w=1024&h=1024&ei=gxUGUfzOFoPyrQfv_4HACA&zoom=1&iact=hc&vpx=4&vpy=153&dur=821&hovh=225&hovw=225&tx=107&ty=143&sig=116549059471539435570&page=1&tbnh=137&tbnw=149&start=0&ndsp=25&ved=1t:429,r:17,s:0,i:196

  •   Half filled star image :

     http://www.google.co.in/imgres?    q=half+yellow+star&hl=en&tbo=d&biw=1034&bih=619&tbm=isch&tbnid=mkF4MmzU1tJZdM:&imgrefurl=http://www.clipartstation.com/clipart_indexer4/index%3Fid%3D21416%26page%3D1&docid=26UDsFKgusMxdM&imgurl=http://www.clipartstation.com/clipart/resized/Math/Fractions/Denominator%2525202/__100x100//Half%2525206%252520Point%252520Star%252520Yellow.gif&w=90&h=100&ei=_BUGUcjeI8v-rAfM3YDoDA&zoom=1&iact=rc&dur=2&sig=116549059471539435570&page=1&tbnh=83&tbnw=75&start=0&ndsp=20&ved=1t:429,r:5,s:0,i:94&tx=22&ty=29

  • Blank star :

          http://www.zazzle.com/blank_star_stickers_to_personalize-217766263989493464

You should edit these images for a common dimensions .

Now we start with the web dynpro abap part for its technical functionality .Follow the below steps :

  1. Create a node rating_node with the attribute name rating of type i.

              

1.PNG         

  2. Create another node naming img with 6 attributes of the type string naming star1, star2, star3, star4, star5,        star6.

2.PNG

3. Click on the MAIN view and under context tab , migrate the nodes from component controller to the main view .

3.PNG

4. Under layout tab – create 5 UI elements of the same type : linktoaction and name them as BUT1 , BUT2 ,

   BUT3 , BUT4 , BUT5.

  UNDER THE PROPETY column for each UI element created above , for the property action click on create and           createactions for all the UI elements naming BUT1 , BUT2 , BUT3 , BUT4, BUT5 ,BUT6

4.PNG

5.  Now import the images from the system to the webdynpro by right clicking on the name of the application,

  create -> mime objects   ->import.

/wp-content/uploads/2013/02/5_189821.png

6. Do remember to keep the name of images as : full (full star) half (half filled) and blank (blank star).

7.Now write the code written below under methods and actions as mentioned.

CODE :

  1. onactionbutton1:

method ONACTIONBUT1 .
DATA lo_nd_rating_node TYPE REF TO if_wd_context_node.
DATA : rating_node type ref to if_wd_context_node,

RATING TYPE STRING,
VALUE TYPE STRING.
*  DATA lo_el_rating_node TYPE REF TO if_wd_context_element.
*  DATA ls_rating_node TYPE wd_this->Element_rating_node.
*  DATA lv_rating TYPE wd_this->Element_rating_node-rating.

* navigate from <CONTEXT> to <RATING_NODE> via lead selection
lo_nd_rating_node = wd_context->get_child_node( name = wd_this->wdctx_rating_node ).
lo_nd_RATING_NODE->set_attribute( exporting name = ‘RATING’ value = 1 ).
BREAK-POINT.
ratING_node = wd_context->get_child_node( ‘RATING_NODE’ ).
ratING_node->get_attribute( exporting name = ‘RATING’ importing value = rating ).
*IF RATING EQ 1.
*  lo_nd_rating_node = wd_context->get_child_node( name = wd_this->wdctx_rating_node ).
*  lo_nd_RATING_NODE->set_attribute( exporting name = ‘RATING’ value = 6 ).
*  ENDIF.

if wd_comp_controller->rating eq 1.
lo_nd_rating_node = wd_context->get_child_node( name = wd_this->wdctx_rating_node ).
lo_nd_RATING_NODE->set_attribute( exporting name = ‘RATING’ value = 6 ).
ratING_node = wd_context->get_child_node( ‘RATING_NODE’ ).
ratING_node->get_attribute( exporting name = ‘RATING’ importing value = rating ).
endif.
wd_comp_controller->rating = rating.

endmethod.

2. Onactionbut2 :

method ONACTIONBUT2 .
DATA lo_nd_rating_node TYPE REF TO if_wd_context_node.
*    DATA lo_nd_rating_node TYPE REF TO if_wd_context_node.
DATA : rating_node type ref to if_wd_context_node,

RATING TYPE STRING,
VALUE TYPE STRING.

*  DATA lo_el_rating_node TYPE REF TO if_wd_context_element.
*  DATA ls_rating_node TYPE wd_this->Element_rating_node.
*  DATA lv_rating TYPE wd_this->Element_rating_node-rating.

* navigate from <CONTEXT> to <RATING_NODE> via lead selection
lo_nd_rating_node = wd_context->get_child_node( name = wd_this->wdctx_rating_node ).
lo_nd_RATING_NODE->set_attribute( exporting name = ‘RATING’ value = 2 ).

ratING_node = wd_context->get_child_node( ‘RATING_NODE’ ).
ratING_node->get_attribute( exporting name = ‘RATING’ importing value = rating ).
*IF RATING EQ 1.
*  lo_nd_rating_node = wd_context->get_child_node( name = wd_this->wdctx_rating_node ).
*  lo_nd_RATING_NODE->set_attribute( exporting name = ‘RATING’ value = 6 ).
*  ENDIF.

if wd_comp_controller->rating eq 2.
lo_nd_rating_node = wd_context->get_child_node( name = wd_this->wdctx_rating_node ).
lo_nd_RATING_NODE->set_attribute( exporting name = ‘RATING’ value = 7 ).
ratING_node = wd_context->get_child_node( ‘RATING_NODE’ ).
ratING_node->get_attribute( exporting name = ‘RATING’ importing value = rating ).
endif.
wd_comp_controller->rating = rating.

endmethod.

3. onactionbut3 :

method ONACTIONBUT3 .
DATA lo_nd_rating_node TYPE REF TO if_wd_context_node.
DATA : rating_node type ref to if_wd_context_node,
RATING TYPE I.
*  DATA lo_el_rating_node TYPE REF TO if_wd_context_element.
*  DATA ls_rating_node TYPE wd_this->Element_rating_node.
*  DATA lv_rating TYPE wd_this->Element_rating_node-rating.

* navigate from <CONTEXT> to <RATING_NODE> via lead selection
lo_nd_rating_node = wd_context->get_child_node( name = wd_this->wdctx_rating_node ).
lo_nd_RATING_NODE->set_attribute( exporting name = ‘RATING’ value = 3 ).
*

DATA : “rating_node type ref to if_wd_context_node,

*       RATING TYPE STRING,
VALUE TYPE STRING.
*  DATA lo_el_rating_node TYPE REF TO if_wd_context_element.
*  DATA ls_rating_node TYPE wd_this->Element_rating_node.
*  DATA lv_rating TYPE wd_this->Element_rating_node-rating.

* navigate from <CONTEXT> to <RATING_NODE> via lead selection

ratING_node = wd_context->get_child_node( ‘RATING_NODE’ ).
ratING_node->get_attribute( exporting name = ‘RATING’ importing value = rating ).
*IF RATING EQ 1.
*  lo_nd_rating_node = wd_context->get_child_node( name = wd_this->wdctx_rating_node ).
*  lo_nd_RATING_NODE->set_attribute( exporting name = ‘RATING’ value = 6 ).
*  ENDIF.

if wd_comp_controller->rating eq 3.
lo_nd_rating_node = wd_context->get_child_node( name = wd_this->wdctx_rating_node ).
lo_nd_RATING_NODE->set_attribute( exporting name = ‘RATING’ value = 8 ).
ratING_node = wd_context->get_child_node( ‘RATING_NODE’ ).
ratING_node->get_attribute( exporting name = ‘RATING’ importing value = rating ).
endif.
wd_comp_controller->rating = rating.

endmethod.

4. Onactionbut4 :

method ONACTIONBUT4 .
*  rate_node type ref to if_wd_context_node.
*
*rate_node = wd_context->get_child_node( ‘RATE_NODE’ ).
*rate_node->set_attribute( exporting name = ‘RATING’ value = 4 ).

DATA lo_nd_rating_node TYPE REF TO if_wd_context_node.

*  DATA lo_el_rating_node TYPE REF TO if_wd_context_element.
*  DATA ls_rating_node TYPE wd_this->Element_rating_node.
*  DATA lv_rating TYPE wd_this->Element_rating_node-rating.

* navigate from <CONTEXT> to <RATING_NODE> via lead selection
lo_nd_rating_node = wd_context->get_child_node( name = wd_this->wdctx_rating_node ).
lo_nd_RATING_NODE->set_attribute( exporting name = ‘RATING’ value = 4 ).

* @TODO handle non existant child
DATA : rating_node type ref to if_wd_context_node,

RATING TYPE STRING,
VALUE TYPE STRING.
*  DATA lo_el_rating_node TYPE REF TO if_wd_context_element.
*  DATA ls_rating_node TYPE wd_this->Element_rating_node.
*  DATA lv_rating TYPE wd_this->Element_rating_node-rating.

* navigate from <CONTEXT> to <RATING_NODE> via lead selection

ratING_node = wd_context->get_child_node( ‘RATING_NODE’ ).
ratING_node->get_attribute( exporting name = ‘RATING’ importing value = rating ).
*IF RATING EQ 1.
*  lo_nd_rating_node = wd_context->get_child_node( name = wd_this->wdctx_rating_node ).
*  lo_nd_RATING_NODE->set_attribute( exporting name = ‘RATING’ value = 6 ).
*  ENDIF.

if wd_comp_controller->rating eq 4.
lo_nd_rating_node = wd_context->get_child_node( name = wd_this->wdctx_rating_node ).
lo_nd_RATING_NODE->set_attribute( exporting name = ‘RATING’ value = 9 ).
ratING_node = wd_context->get_child_node( ‘RATING_NODE’ ).
ratING_node->get_attribute( exporting name = ‘RATING’ importing value = rating ).
endif.
wd_comp_controller->rating = rating.

endmethod.

5. onactionbut5 :

method ONACTIONBUT5 .
*  rate_node type ref to if_wd_context_node.
*
*rate_node = wd_context->get_child_node( ‘RATE_NODE’ ).
*rate_node->set_attribute( exporting name = ‘RATING’ value = 5 ).

DATA lo_nd_rating_node TYPE REF TO if_wd_context_node.

*  DATA lo_el_rating_node TYPE REF TO if_wd_context_element.
*  DATA ls_rating_node TYPE wd_this->Element_rating_node.
*  DATA lv_rating TYPE wd_this->Element_rating_node-rating.

* navigate from <CONTEXT> to <RATING_NODE> via lead selection
lo_nd_rating_node = wd_context->get_child_node( name = wd_this->wdctx_rating_node ).
lo_nd_RATING_NODE->set_attribute( exporting name = ‘RATING’ value = 5 ).
DATA : rating_node type ref to if_wd_context_node,

RATING TYPE STRING,
VALUE TYPE STRING.
*  DATA lo_el_rating_node TYPE REF TO if_wd_context_element.
*  DATA ls_rating_node TYPE wd_this->Element_rating_node.
*  DATA lv_rating TYPE wd_this->Element_rating_node-rating.

* navigate from <CONTEXT> to <RATING_NODE> via lead selection

ratING_node = wd_context->get_child_node( ‘RATING_NODE’ ).
ratING_node->get_attribute( exporting name = ‘RATING’ importing value = rating ).
*IF RATING EQ 1.
*  lo_nd_rating_node = wd_context->get_child_node( name = wd_this->wdctx_rating_node ).
*  lo_nd_RATING_NODE->set_attribute( exporting name = ‘RATING’ value = 6 ).
*  ENDIF.

if wd_comp_controller->rating eq 5.
lo_nd_rating_node = wd_context->get_child_node( name = wd_this->wdctx_rating_node ).
lo_nd_RATING_NODE->set_attribute( exporting name = ‘RATING’ value = 10 ).
ratING_node = wd_context->get_child_node( ‘RATING_NODE’ ).
ratING_node->get_attribute( exporting name = ‘RATING’ importing value = rating ).
endif.
wd_comp_controller->rating = rating.

endmethod.

6. onactionbut6 :

method ONACTIONBUT6 .
DATA lo_nd_rating_node TYPE REF TO if_wd_context_node.

*  DATA lo_el_rating_node TYPE REF TO if_wd_context_element.
*  DATA ls_rating_node TYPE wd_this->Element_rating_node.
*  DATA lv_rating TYPE wd_this->Element_rating_node-rating.

* navigate from <CONTEXT> to <RATING_NODE> via lead selection
lo_nd_rating_node = wd_context->get_child_node( name = wd_this->wdctx_rating_node ).
lo_nd_RATING_NODE->set_attribute( exporting name = ‘RATING’ value = 6 ).
endmethod.

write the below code in modify view :

method WDDOMODIFYVIEW .
data:
rating_node type ref to if_wd_context_node,
img type ref to if_wd_context_node,
rating type i,
full type string value ‘full.png’,
blank type string value ‘blank.png’,
HALF TYPE STRING VALUE ‘half.PNG’.
*BREAK-POINT.
img = wd_context->get_child_node( ‘IMG’ ).
ratING_node = wd_context->get_child_node( ‘RATING_NODE’ ).
ratING_node->get_attribute( exporting name = ‘RATING’ importing value = rating ).

if rating = 6.
img->set_attribute( exporting name = ‘STAR1’ value = full ).
img->set_attribute( exporting name = ‘STAR2’ value = blank ).
img->set_attribute( exporting name = ‘STAR3’ value = blank ).
img->set_attribute( exporting name = ‘STAR4’ value = blank ).
img->set_attribute( exporting name = ‘STAR5’ value = blank ).

elseif rating = 7.
img->set_attribute( exporting name = ‘STAR1’ value = full ).
img->set_attribute( exporting name = ‘STAR2’ value = full ).
img->set_attribute( exporting name = ‘STAR3’ value = blank ).
img->set_attribute( exporting name = ‘STAR4’ value = blank ).
img->set_attribute( exporting name = ‘STAR5’ value = blank ).

elseif rating = 8.
img->set_attribute( exporting name = ‘STAR1’ value = full ).
img->set_attribute( exporting name = ‘STAR2’ value = full ).
img->set_attribute( exporting name = ‘STAR3’ value = full ).
img->set_attribute( exporting name = ‘STAR4’ value = blank ).
img->set_attribute( exporting name = ‘STAR5’ value = blank ).

elseif rating = 9.
img->set_attribute( exporting name = ‘STAR1’ value = full ).
img->set_attribute( exporting name = ‘STAR2’ value = full ).
img->set_attribute( exporting name = ‘STAR3’ value = full ).
img->set_attribute( exporting name = ‘STAR4’ value = full ).
img->set_attribute( exporting name = ‘STAR5’ value = blank ).

elseif rating = 10.
img->set_attribute( exporting name = ‘STAR1’ value = full ).
img->set_attribute( exporting name = ‘STAR2’ value = full ).
img->set_attribute( exporting name = ‘STAR3’ value = full ).
img->set_attribute( exporting name = ‘STAR4’ value = full ).
img->set_attribute( exporting name = ‘STAR5’ value = full ).

elseif rating = 2.
img->set_attribute( exporting name = ‘STAR1’ value = full ).
img->set_attribute( exporting name = ‘STAR2’ value = half ).
img->set_attribute( exporting name = ‘STAR3’ value = blank ).
img->set_attribute( exporting name = ‘STAR4’ value = blank ).
img->set_attribute( exporting name = ‘STAR5’ value = blank ).
elseif rating = 3.
img->set_attribute( exporting name = ‘STAR1’ value = full ).
img->set_attribute( exporting name = ‘STAR2’ value = full ).
img->set_attribute( exporting name = ‘STAR3’ value = half ).
img->set_attribute( exporting name = ‘STAR4’ value = blank ).
img->set_attribute( exporting name = ‘STAR5’ value = blank).
elseif rating = 4.
img->set_attribute( exporting name = ‘STAR1’ value = full ).
img->set_attribute( exporting name = ‘STAR2’ value = full ).
img->set_attribute( exporting name = ‘STAR3’ value = full ).
img->set_attribute( exporting name = ‘STAR4’ value = half ).
img->set_attribute( exporting name = ‘STAR5’ value = blank ).
elseif rating = 5.
img->set_attribute( exporting name = ‘STAR1’ value = full ).
img->set_attribute( exporting name = ‘STAR2’ value = full ).
img->set_attribute( exporting name = ‘STAR3’ value = full ).
img->set_attribute( exporting name = ‘STAR4’ value = full ).
img->set_attribute( exporting name = ‘STAR5’ value = half ).
elseif rating = 1 .
img->set_attribute( exporting name = ‘STAR1’ value = Half ).
img->set_attribute( exporting name = ‘STAR2’ value = blank ).
img->set_attribute( exporting name = ‘STAR3’ value = blank ).
img->set_attribute( exporting name = ‘STAR4’ value = blank ).
img->set_attribute( exporting name = ‘STAR5’ value = blank ).
else.
img->set_attribute( exporting name = ‘STAR1’ value = blank ).
img->set_attribute( exporting name = ‘STAR2’ value = blank ).
img->set_attribute( exporting name = ‘STAR3’ value = blank ).
img->set_attribute( exporting name = ‘STAR4’ value = blank ).
img->set_attribute( exporting name = ‘STAR5’ value = blank ).
endif.


endmethod.

  • Now finally create an application and test it.

Untitled.png

Assigned Tags

      5 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Kiran Kumar Valluru
      Kiran Kumar Valluru

      Hi,

      Nice document. But this looks like a copy of document by Fareez Ahamed , isn't it..?

      here is the link for the same http://scn.sap.com/docs/DOC-28648

      Regards,

      Kiran

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

      Hi Kiran

      It is not same as the link you mention but a next version of it i think.

      the above document simply shows the star rating which can be predefined .

      As per what i have written , the star images acts as buttons (input) which allow user to

      rate from half(0.5) to 5 star as per desire by clicking on it.

      correct me if  i am wrong and will remove this document as per sap scn rules .

      regards

      vaibhav

      Author's profile photo Kiran Kumar Valluru
      Kiran Kumar Valluru

      Oh. good. Keep writing.. One small suggestion - Remove BREAK-POINT in your code and put screen shots of Application Test. It will be more good.

      Best Regards,

      Kiran

      Author's profile photo Former Member
      Former Member

      Nice work Vaibhav; while this is similar to Fareez's document, there are still some differences. It would have been much better if you put that document as a reference in your introduction so that people know you are adding additional details.

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

      Hi Abdullah

      Thanks for your valuable suggestion.

      changes done 🙂 .

      regards

      vaibhav