fareez.info

Star Rating Display Component in Web Dynpro ABAP

Sep 4, 2012

sap-abap, webdynpro-abap

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.

Context

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.

Context

Context

Context

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.

Context

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

Context

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. (Maybe a better algorithm exists to do this, 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.

Context

And also add the component usage on the MAIN view.

Context

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.

Context

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.

Context

I conclude here hoping this would be helpful to many.

comments powered by Disqus

Related Posts

Hierarchy of UI Elements

Web Dynpro has been provided with lots of tools to make the development easier. When we want to create applications in which UI elements has to be created dynamically and processed dynamically, we have to go a little deeper i. Read more...

Singleton Pattern in ABAP

Object Oriented Programming has been a boon to the programmers without which development of huge systems is almost impossible. ABAP is no exception to that which is why Object Oriented Programming was added to ABAP. Read more...

Timer in Web Dynpro ABAP

Timer is a very essential UI element in many applications and creating a timer in Web Dynpro ABAP seems to be a little critical task in the versions prior to NetWeaver 7. Read more...