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

Interacting with button control

Jump to solution

Hello Friends,

I have used the choice field to render them as buttons on Nintex form. I did change the image on the buttons and form is working as expected. Now my requirement is, when I click on the first star, the background color of that image should change.

I would also know if there's an option to just change the blue color to some other color? I want to do away with choice field rendered as buttons option, what other choices do I have?

Any suggestions? Let me know if you need any further explanation on this

Thank you

Labels: (3)
0 Kudos
Reply
13 Replies
itrippedover
Nintex Newbie

Re: Interacting with button control

Jump to solution

I've done this using CSS, using the CSS class for the choice field (in my case I called it tabs) use this in the Custom CSS area in Form Settings:

.tabs .ui-state-active

{

background-image: url("link_to_your_new_image");

}

This will change the image for the active selection

Reply
Not applicable

Re: Interacting with button control

Jump to solution

Hello Suzanne,

Thank you very much for the response. Unfortunately, I can't use the choice fields because I couldn't assign individual images for each option when I render them as buttons.

When I click on the first star, the blue color image should change to green and there would be an option to save the selection. Any suggestions?

Reply
itrippedover
Nintex Newbie

Re: Interacting with button control

Jump to solution

Have you tried the method for choice fields mentioned here: Changing the background colour of a button dynamically

Using this, you can select a different image for each choice :-)

Reply
Not applicable

Re: Interacting with button control

Jump to solution

Hi Suzanne,

Thank you. But I'm using buttons individually. I did go thru the link earlier which would only work if the buttons were part of a group. This is what I'm trying to do

1. In the first star image

11.jpg

2. In the form settings, I'm using the tab1

12.jpg

However, I couldn't get the image width increase to 70px.

I'm sure that there's some configuration changes that I'm missing. Could you please point that out?

Thank you

Reply
itrippedover
Nintex Newbie

Re: Interacting with button control

Jump to solution

Are you using tab1 as the css class for the button? I can see that you have it under Client click which will try to call a javascript function called tab1.

So where I have tabs, you would put tab1.

Then in the css where you want to change the button when its clicked use

.tab1:active

{

whatever CSS changes you want to happen

}

Reply
Not applicable

Re: Interacting with button control

Jump to solution

Hi Suzanne, in the image 1, the button action is changed to Javascript thus making the Client click option mandatory. I guess your scenario works only if the choice is rendered as buttons. And even if I tried to implement the logic, the form never loads.

However in my requirement, all are individual buttons. So is it possible to implement the image changing code for individual buttons

Reply
itrippedover
Nintex Newbie

Re: Interacting with button control

Jump to solution

Hi, sorry I wasn't clear, in my last reply the css code works for individual buttons, give them a css class and use :active for the image change to take effect when the button is clicked.

Reply
Not applicable

Re: Interacting with button control

Jump to solution

Just a quick question. If I follow your suggestion, what should be the action event of the button?

Reply
Not applicable

Re: Interacting with button control

Jump to solution

OK here's what I did.

1. Changed the CSS class to tab1

1.jpg

2. In the form settings, the code was added to change it to g1.jpg

2.jpg

The problem is: if I use the Button action as Save, once I click on the button, the form data is automatically submitted, which doesn't allow me to see the changes I made to the button

1. If I use the Button action as Save, once I click on the button, the form data is automatically submitted, which doesn't allow me to see the changes I made to the button

2. If I use the Button action as Javascript, I have to enter something in Client click option of the button, which makes no sense in adding it. And when I type something like first(); in it and publish the form, and click on New Item, the form just says "Working on it" message.

Hopefully, the info is useful. Could you please point out my mistakes here?

Thank you

Reply