Star Rating Input Component

[Former Member]

Few days back I wrote the document Star Rating Display Component which can be used to show the average rating of an item. Now in this document I wish to share you how to create a reusable star rating input component through which we can give rating to items by just clicking on stars.

Create a new component ZRATING_INPUT and in the component controller create the following context nodes and attributes.

RATE_NODE should be made as interface node so that the rating can be obtained from the component from outside the component. RATING attribute should be of type I (only whole stars can be selected, so no floating type) and all other attributes (STAR1 to STAR5) should be of type STRING.

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

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

Now in the MAIN view of the component create five elements of type LinkToAction with names BUT1 to BUT5 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 LinkToAction UI elements BUT1 to BUT5’s imageSource property respectively.

On the action of each button, we have to write the corresponding code to set the rating.

BUT1

method ONACTIONBUT1 .

data:
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 = 1 ).
endmethod.

BUT2

method ONACTIONBUT2 .
data:
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 = 2 ).

endmethod.

BUT3

method ONACTIONBUT3 .
data:
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 = 3 ).

endmethod.

BUT4

method ONACTIONBUT4 .
data:
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 ).

endmethod.

BUT5

method ONACTIONBUT5 .
data:
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 ).

endmethod.

Once the rating is set on the context, we have to update the color of stars. The following coding on the WDDOMODIFYVIEW can do it.

WDDOMODIFYVIEW

method WDDOMODIFYVIEW .
data:
rate_node type ref to if_wd_context_node,
img type ref to if_wd_context_node,
rating type i,
gstar type string value 'gstar.png',
wstar type string value 'wstar.png'.

img = 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 = 1.
img->set_attribute( exporting name = 'STAR1' value = gstar ).
img->set_attribute( exporting name = 'STAR2' value = wstar ).
img->set_attribute( exporting name = 'STAR3' value = wstar ).
img->set_attribute( exporting name = 'STAR4' value = wstar ).
img->set_attribute( exporting name = 'STAR5' value = wstar ).
elseif rating = 2.
img->set_attribute( exporting name = 'STAR1' value = gstar ).
img->set_attribute( exporting name = 'STAR2' value = gstar ).
img->set_attribute( exporting name = 'STAR3' value = wstar ).
img->set_attribute( exporting name = 'STAR4' value = wstar ).
img->set_attribute( exporting name = 'STAR5' value = wstar ).
elseif rating = 3.
img->set_attribute( exporting name = 'STAR1' value = gstar ).
img->set_attribute( exporting name = 'STAR2' value = gstar ).
img->set_attribute( exporting name = 'STAR3' value = gstar ).
img->set_attribute( exporting name = 'STAR4' value = wstar ).
img->set_attribute( exporting name = 'STAR5' value = wstar ).
elseif rating = 4.
img->set_attribute( exporting name = 'STAR1' value = gstar ).
img->set_attribute( exporting name = 'STAR2' value = gstar ).
img->set_attribute( exporting name = 'STAR3' value = gstar ).
img->set_attribute( exporting name = 'STAR4' value = gstar ).
img->set_attribute( exporting name = 'STAR5' value = wstar ).
elseif rating = 5.
img->set_attribute( exporting name = 'STAR1' value = gstar ).
img->set_attribute( exporting name = 'STAR2' value = gstar ).
img->set_attribute( exporting name = 'STAR3' value = gstar ).
img->set_attribute( exporting name = 'STAR4' value = gstar ).
img->set_attribute( exporting name = 'STAR5' value = gstar ).
else.
img->set_attribute( exporting name = 'STAR1' value = wstar ).
img->set_attribute( exporting name = 'STAR2' value = wstar ).
img->set_attribute( exporting name = 'STAR3' value = wstar ).
img->set_attribute( exporting name = 'STAR4' value = wstar ).
img->set_attribute( exporting name = 'STAR5' value = wstar ).
endif.
endmethod.

We need not create a separate component to test this one as this is an input component and not a display component. On running it we get the desired output.

Before and after clicking a star

Hope you enjoyed it.

- Fareez Ahamed K.N.

freeze-cse.blogspot.com