Is it possible to change the color of a menu button if a certain form is submitted?

API & Customization Ask Developers
1

Hi,

I have a set of menu buttons that connects to forms. I'd like to have the button to change color or be disabled if the form is submitted.

Is this possible?

2

Good work Abeer, thanks for sharing.

3

Hi Brad,

Thank you so much! I really had no idea on what exactly to look for, this is exactly what I needed.

I've been working on it all morning and I finally got it to work :)

This is the Javascript code if anyone is interested in doing this, don't forget to change the scene_## & view_##s. The first view_## is where the text is shown in my page, the second view_## is where the button is located.

// Change the color of the button when RMA Acceptance is shown in Status table (Scene_434)
$(document).on('knack-scene-render.scene_434', function(event, scene) {
if($('#view_984').text().indexOf('RMA Accepted') != -1) {
$('#view_985 > div > a.kn-link.kn-link-1.kn-link-page.kn-button').css({"background-color": "#529542", "color": "white"})
}
});

4

Javascript...

On the scene render:

  1. Test for the presence of each status your looking for (RMA Approved exist?)
  2. Then set the button color depending on the existing status.

There would be other ways but I can't see anything working without Javascript.

If you're not comfortable coding I suggest contacting the someone in the Knack Developers for a paid solution, or start learning and post questions as you go. See https://www.knack.com/developer-documentation

5

Hi Brad,

Thank you for your response.

I have 5 menu buttons in a page, they are connected to forms. When a form is submitted, a connected record is created and it shows in the Status table. What I'm hoping to achieve (since this is a 5 steps workflow) is to have the buttons in its normal color, then when the form is submitted, the button turns to green.

Right now I only figured out how to change the color of the button using CSS. I just don't know how to have the color change only when the form is submitted (to indicate that the step is completed).

This is how I'd like the buttons to look like:

S1lODQb07RtfbL6t_RUpgQ.png1219×410

I changed the button colors using this code:

#view_970 a.kn-link.kn-link-1.kn-link-page.kn-button {
color: white;
background-color: #529542;
}

#view_970 a.kn-link.kn-link-2.kn-link-page.kn-button {
color: white;
background-color: #529542;
}

#view_970 a.kn-link.kn-link-3.kn-link-page.kn-button {
color: white;
background-color: #529542;
}

Do you know how to make this possible?

6

Sounds possible - and to be specific it sounds like you want a button color to change based on a value in a view (and after a form is submitted that might change that value).

Is that right?

And what have you tried so far?