Star Rating Display Component

[Former Member]

Most of the time ratings are expressed in terms of stars, which is more appealing and easy to interpret. I came across a similar situation and I developed a reusable component to show star rating.

Now in this tutorial we are going to create a component which displays star rating and test it in another component. We are going to implement it with images. First, create component ZRATING_DISP and in the component controller add the following context nodes.

RATE_NODE should be made as interface node so that the rating can be set from outside the component. RATING attribute should be of type F and all other attributes (STAR1 to STAR5) should be of type STRING.

Now we need images of stars. A gold star, a white star and a half star. I downloaded some icons and edited them. I’m sharing them below.

Upload them to the server through ‘Create MIME Object’ and make sure their names are ‘gstar.png’, ‘hstar.png’ and ‘wstar.png’ respectively.

Now in the MAIN view of the component create five elements of type Image with names IMG1 to IMG5 under ROOTUIELEMENT.

And also make context mapping of the nodes RATE_NODE and IMG to the MAIN view.

Bind the attributes STAR1 to STAR5 to image UI elements IMG1 to IMG5 respectively.

Now we have to add the logic for updating the stars at each refresh at WDDOMODIFY. (I could have coded a better algorithm, but the matter of interest here is not algorithms. This seemed to be simple to understand than any)

method WDDOMODIFYVIEW .

data:
rate_node type ref to if_wd_context_node,
img_node type ref to if_wd_context_node,
gstar type string value 'gstar.png',
hstar type string value 'hstar.png',
wstar type string value 'wstar.png',
rating type f.

img_node = wd_context->get_child_node( 'IMG' ).
rate_node = wd_context->get_child_node( 'RATE_NODE' ).
rate_node->get_attribute( exporting name = 'RATING' importing value = rating ).

if rating > '0.0' and rating <= '0.5'.
img_node->set_attribute( exporting name = 'STAR1' value = hstar ).
img_node->set_attribute( exporting name = 'STAR2' value = wstar ).
img_node->set_attribute( exporting name = 'STAR3' value = wstar ).
img_node->set_attribute( exporting name = 'STAR4' value = wstar ).
img_node->set_attribute( exporting name = 'STAR5' value = wstar ).
elseif rating > '0.5' and rating <= '1.0'.
img_node->set_attribute( exporting name = 'STAR1' value = gstar ).
img_node->set_attribute( exporting name = 'STAR2' value = wstar ).
img_node->set_attribute( exporting name = 'STAR3' value = wstar ).
img_node->set_attribute( exporting name = 'STAR4' value = wstar ).
img_node->set_attribute( exporting name = 'STAR5' value = wstar ).
elseif rating > '1.0' and rating <= '1.5'.
img_node->set_attribute( exporting name = 'STAR1' value = gstar ).
img_node->set_attribute( exporting name = 'STAR2' value = hstar ).
img_node->set_attribute( exporting name = 'STAR3' value = wstar ).
img_node->set_attribute( exporting name = 'STAR4' value = wstar ).
img_node->set_attribute( exporting name = 'STAR5' value = wstar ).
elseif rating > '1.5' and rating <= '2.0'.
img_node->set_attribute( exporting name = 'STAR1' value = gstar ).
img_node->set_attribute( exporting name = 'STAR2' value = gstar ).
img_node->set_attribute( exporting name = 'STAR3' value = wstar ).
img_node->set_attribute( exporting name = 'STAR4' value = wstar ).
img_node->set_attribute( exporting name = 'STAR5' value = wstar ).
elseif rating > '2.0' and rating <= '2.5'.
img_node->set_attribute( exporting name = 'STAR1' value = gstar ).
img_node->set_attribute( exporting name = 'STAR2' value = gstar ).
img_node->set_attribute( exporting name = 'STAR3' value = hstar ).
img_node->set_attribute( exporting name = 'STAR4' value = wstar ).
img_node->set_attribute( exporting name = 'STAR5' value = wstar ).
elseif rating > '2.5' and rating <= '3.0'.
img_node->set_attribute( exporting name = 'STAR1' value = gstar ).
img_node->set_attribute( exporting name = 'STAR2' value = gstar ).
img_node->set_attribute( exporting name = 'STAR3' value = gstar ).
img_node->set_attribute( exporting name = 'STAR4' value = wstar ).
img_node->set_attribute( exporting name = 'STAR5' value = wstar ).
elseif rating > '3.0' and rating <= '3.5'.
img_node->set_attribute( exporting name = 'STAR1' value = gstar ).
img_node->set_attribute( exporting name = 'STAR2' value = gstar ).
img_node->set_attribute( exporting name = 'STAR3' value = gstar ).
img_node->set_attribute( exporting name = 'STAR4' value = hstar ).
img_node->set_attribute( exporting name = 'STAR5' value = wstar ).
elseif rating > '3.5' and rating <= '4.0'.
img_node->set_attribute( exporting name = 'STAR1' value = gstar ).
img_node->set_attribute( exporting name = 'STAR2' value = gstar ).
img_node->set_attribute( exporting name = 'STAR3' value = gstar ).
img_node->set_attribute( exporting name = 'STAR4' value = gstar ).
img_node->set_attribute( exporting name = 'STAR5' value = wstar ).
elseif rating > '4.0' and rating <= '4.5'.
img_node->set_attribute( exporting name = 'STAR1' value = gstar ).
img_node->set_attribute( exporting name = 'STAR2' value = gstar ).
img_node->set_attribute( exporting name = 'STAR3' value = gstar ).
img_node->set_attribute( exporting name = 'STAR4' value = gstar ).
img_node->set_attribute( exporting name = 'STAR5' value = hstar ).
elseif rating > '4.5' and rating <= '5.0'.
img_node->set_attribute( exporting name = 'STAR1' value = gstar ).
img_node->set_attribute( exporting name = 'STAR2' value = gstar ).
img_node->set_attribute( exporting name = 'STAR3' value = gstar ).
img_node->set_attribute( exporting name = 'STAR4' value = gstar ).
img_node->set_attribute( exporting name = 'STAR5' value = gstar ).
else.
img_node->set_attribute( exporting name = 'STAR1' value = wstar ).
img_node->set_attribute( exporting name = 'STAR2' value = wstar ).
img_node->set_attribute( exporting name = 'STAR3' value = wstar ).
img_node->set_attribute( exporting name = 'STAR4' value = wstar ).
img_node->set_attribute( exporting name = 'STAR5' value = wstar ).
endif.

endmethod.

Now the work on the component is completed. Activate the component and we have to test it on another component.

Create the component ZRATING_DISP_TEST and add the component ZRATING_DISP in component usage.

And also add the component usage on the MAIN view.

Now map the RATE_NODE of the interface controller to the MAIN view of ZRATING_DISP_TEST.

Create a ViewUIElementContainer named VIEW on the MAIN view. And go to the windows and embed the MAIN view of the ZRATING_DISP to the ViewUIElementContainer.

Now we have to add the code to set the rating value on the component at the WDDOINIT of MAIN view of ZRATING_DISP_TEST.

method WDDOINIT .
data:
node type ref to if_wd_context_node.

node = wd_context->get_child_node( 'RATE_NODE' ).
node->set_attribute( exporting name = 'RATING' value = '3.5' ).
endmethod.

Now activate and run the component and verify the output.

I conclude here hoping this would be helpful to many. Even when you give the rating for this article it will remind you of star rating in Web Dynpro ABAP :smile:

- Fareez Ahamed