I have an Icon which is an arrow up on click I want it to be arrow down is there a way I can do it using Css or Javascript ?

If so is there a way without doing with a screen action, becauso doing so will work but not good for perfomance, I was hoping I can do it other way.

Hello Ricardo,

Do you want to have the arrow down only in the moment of click or to keep it down after the user clicks on it?

If it is only for the moment of click you can use CSS, just give the icon a class a put this on the css style:

   .MyIconClass:active {
          transform: rotate(180deg);

If you want to keep it down, first give a name to your icon and use the 'RunJavaScript' inside the action linked to the click of the icon with this expression:   "document.getElementById('"+MyIconName.Id+"').style.transform = 'rotate(180deg)';"

Hope it helps you.

Hi Ricardo,

As per the mentioned requirement, 

1) Using Icon control

2) Without using screen action

I tried to frame out a solution using JavaScript implementation.

Check this Link:  Check this Demo Screen

Solution Steps: 

1) Enclose the Icon Widget inside a container and name the container as IconCntr

2) Define the onclick event handler on IconCntr container extended property section

3) Use the below JS onclick event handler script

SyntaxEditor Code Snippet

"$('#' + '" + IconCntr.Id + "').find('span').toggleClass('fa-arrow-up fa-arrow-down');"

Hope this helps you!


Benjith Sam

Hi Ricardo,

PFA - Includes .oml solution which incorporates solution suggested by Sofia (thank you for sharing) and mine.

Check this Link:  Check this Demo Screen

Hope this helps you or anyone else!


Benjith Sam

Hi Ricardo,

did you check this post?

I hope this help you.