A toggle display - Changing styles of a button control dynamically in XPages

In a normal HTML page changing the look and feel of a button dynamically is very easy. All have to do is write a few lines of Javascript. But the same will often let you down in XPages.

Yes I have tried this on a Button Control in an XPage. My requirement was to give it a look and feel which simulates a toggle like display for the button on the screen. The color of the button needs to toggle between green and blue gradients each time I click it. Normal client side javascript which i use to do in normal HTML Pages failed.

Even when stuffs worked fine, when a server level refresh happens, the change gets nullified. So I had to do the following to keep up with the task.

1. Create a Button control on the XPage
2. Code such a way that you associate a field control to its onclick event. That is when ever you click on the button, mark the field control with a flag.Let me Name the field as FlagField
3. Go to the Style tab of the button control in the properties pane.
4. click the little diamond against the style class name as illustrated in the following figure

5.This will open up the script editor. Put up the code as illustrated in the following figure.

6. Now write a style sheet with the following code,

.topNavBtnGreen{
    border-color:#c0c7cd;
    background-image:url(TopLightGrey.JPG);
    background-repeat: no-repeat;
    background-size: 100%;
    }

.topNavBtnBrown{
    border-color:#9f060d;
    color:#ffffff;
    background-image:url(TopDarkGrey.JPG);
    background-repeat: no-repeat;
    background-size: 100%;
    }

and associate the same with the XPage.

7. This is it. Now you can preview your button and view the difference.
A sample illustration of the look feel is shown in the following figure

Hope this helps :)