cancel
Showing results for 
Search instead for 
Did you mean: 
Not applicable

Changing the background colour of a button dynamically

Jump to solution

Hi,

is there a way to change the background colour of a button control dynamically , on a nintex form ?

For example:

I have a 2 buttons as Yes and No on a nintex forms. If the button Yes is clicked , i would like to change the background colour to Green and Red when button No is clicked

I'm seeing different behaviours on Desktop layout and mobile app layouts of the Nintex forms.

1. I'm able to use JavaScript and add the JS function name to the onclick events of the buttons but Whenever the button Yes or No is clicked, the event fires and the page gets refreshed, and desired background for the buttons is not set.

2. If I add a rule to apply formatting based on some value. the background colour doesn't get applied on the desktop layout but it does reflect on the mobile app layout for iPhone.

Why is the page getting refreshed on click of the button. eventhough i have not selected the button properties as save/submit.

Thanks,

0 Kudos
Reply
25 Replies
Workflow Hero

Re: Changing the background colour of a button dynamically

Jump to solution

The formatting rule should do the trick. Do you have custom CSS on your form ?

Reply
Not applicable

Re: Changing the background colour of a button dynamically

Jump to solution

Hi Caroline,

thanks for your reply.

what formatting rule should I apply to the button to change the background colour of the button to say red.

Here is the scenario

- we have two buttons with text Yes and No

-on click of button Yes . the clicked button's background should change to green

-on click of button No. The clicked button's background should change to red.

- what will be the condition to check if button is selected as No or Yes ?

​Thanks,

0 Kudos
Reply
Workflow Hero

Re: Changing the background colour of a button dynamically

Jump to solution

Why don't you have radio button with yes and no choices ?

It will be easier to implement your need with radio button as you can access the value of all the controls in the rules to build the conditions.

You can also try to change the display of the radio buttons to look like buttons with CSS.

If you really want to have buttons (but I really don't recommend this method), you can execute a JavaScript function that will update a checkbox control. And then you can build your rule based on the value of this checkbox. Here's a link to the JavaScript code to update the checkbox value when a button is clicked : Re: how can I show/hide panel on button click using nintex forms

Hope this helps

0 Kudos
Reply
Not applicable

Re: Changing the background colour of a button dynamically

Jump to solution

HI Caroline,

appreciate your support and thanks a ton.

Its just how the requirements from business are to have buttons and colour preferences.

i can use the radio buttons yes/no , but here is what I have found

-the radio buttons are aligned one below the other . How can I make the radio options yes/no align horizontal in one line ?

-if I choose the option to display the radio options as buttons, is there a way to increase the size of these buttons ?

-also if I set the formatting rules to display background or fonts as green/red ,when option is selectend as 'yes' or 'no' then it changes the background /font for the whole Yes/No radio buttons and not just specifically to Yes or No radio buttons. Or may be I have to use separate radio buttons for Yes and No

0 Kudos
Reply
Workflow Hero

Re: Changing the background colour of a button dynamically

Jump to solution

To display the radio buttons in one line, in the settings of the control, change the number of column to 2.

If you render the radio buttons as buttons, you can increase their size with CSS. Add a custom CSS class in the settings of the control, formatting section, Control CSS class field (for example my-radio-button-class). And add the following CSS in the settings of the form, Custom CSS section (it will also add a space between the buttons) :

.my-radio-button-class .ui-button {

     width: 70px;

     margin-right: 10px;

}

Exactly, I didn't think of that : the formatting rule will change the background color of the whole control. Sorry.

What you can do, is to use the following CSS to change the background color of the selected button (note that the labels of the buttons are "hardcoded" in the CSS : if the labels change, you have to change the CSS too).

.my-radio-button-class span[data-nfchoicevalue=No] .ui-state-active  {

     background-color: red;

     background-image: none;

}

.my-radio-button-class span[data-nfchoicevalue=Yes] .ui-state-active  {

     background-color: green;

     background-image: none;

}

Hope this helps

0 Kudos
Reply
Not applicable

Re: Changing the background colour of a button dynamically

Jump to solution

Caroline,

Thanks for your help , this approach seems to be working well .

0 Kudos
Reply
Not applicable

Re: Changing the background colour of a button dynamically

Jump to solution

Hi Caroline,

The above approach works fine on the desktop layout of the form. We have other layouts such as Nintex mobile layout for Iphone/Android.

The above CSS doesn't seem to work on the mobile layouts.Is there any other CSS that we can use or do we have to use other formatting options ?

If we make any changes to the controls on the iphone layout , will it have any effect on the desktop layout/controls ?

Thanks,

0 Kudos
Reply
Workflow Hero

Re: Changing the background colour of a button dynamically

Jump to solution

Hi Mohammed,

Unfortunately, there's no CSS support in mobile app forms as described in this blog :

Nintex Mobile HTML formatting support

What you can do is to use layouts for smartphone (not mobile app layouts). The users can access those forms with the browser of their smartphone and I think that your CSS will be compatible.

If the changes you make on the iPhone layout aren't done on linked controls, it should have no effect on the desktop layout.

Hope this helps

Reply
Not applicable

Re: Changing the background colour of a button dynamically

Jump to solution

Hi Caroline,

Thanks for your prompt reply and suggestions.

Is there any javascript/jquery support  available for the forms on the mobile apps?

Thanks,

0 Kudos
Reply