You are viewing limited content. For full access, please sign in.

Question

Question

Dynamically change the form theme or form title background colour

Forms Web Customizations
Updated January 26, 2022
asked on January 25, 2022 • Show version history

Hi, 

 

I currently have a system change request (SCR) process that handles all changes to our systems. 

It has been requested that changes for test and production be in different coloured forms. Green for test and Black for production (this is the convention we use on our other system). By default, all forms are white with a blue heading as our company branding is blue, but with the number of forms that are now in use, they are starting to look all look alike and we need a way to grab people's attention. The colour changes will grab people attention and make it easy to identify a test change request from a production change request.

 

Where I am at, I can't see a class option on the form header to use to update its colour off the back of some JavaScript and I can't seem to find a way to dynamically change or inject CSS to an active task.

 

this CSS will change the form title to the colour I want but it isn't dynamic

#cf-formtitle {background-color: #34eb00;} 

 

Any help would be greatly appreciated as I'd rather not have to create duplicate processes just to change the colour and update them all to stay in sync as this will become a headache.

0 0

Answer

SELECTED ANSWER
replied on January 25, 2022 • Show version history

Here's some Javascript that checks the value of a single line field with class name layoutChange, and based on the value, it makes the header background green, black, or blue.

$(document).ready(function () {
  
  //When the form loads, or the field with the layoutChange class is changed,
  //update the form header's color based on the value of the layoutChange field.
  HeaderColorChange();
  $('.layoutChange').change(HeaderColorChange);
  function HeaderColorChange()
  {
    if($('.layoutChange input').val() == 'test')
    {
      $('#cf-formtitle').css('background-color','#34EB00');
    }
    else if($('.layoutChange input').val() == 'prod')
    {
      $('#cf-formtitle').css('background-color','#000000');
    }
    else
    {
      $('#cf-formtitle').css('background-color','#0000DD');
    }
  }
  
});

The whole thing is wrapped in a document ready function, which says to run all this code when the form is loaded.  That's pretty standard and something you'll use all the time in Forms.

Lines 5 and 6 call the HeaderColorChange function when the form loads and when the field changes respectively.

Whenever the HeaderColorChange function is run, it looks at the value of the layoutChange field and modifies the CSS of the header accordingly.

2 0

Replies

replied on January 25, 2022

Something like this should work

$(document).ready(function(){
  var sHost = window.location.host;
  if (sHost.toLowerCase() == 'test.host.com' | sHost.toLowerCase() == 'test' | sHost.toLowerCase() == 'localhost')
  { 
    document.body.style.backgroundColor = "red";
  }
});

 

1 0
replied on January 25, 2022

You should be able to make themes with your color choices.  A test theme and a production theme.  Then it is just a couple clicks to change the theme on a form when you move it from testing to production.

Editing CSS is powerful, but the theme picker can wrap multiple CSS aspects together into a single saved theme that can be selected very easily.

0 0
View 5 previous replies
replied on January 25, 2022

But I think I missed the point…  It sounds like you are wanting some Javascript to dynamically change it…  Sorry.

0 0
replied on January 25, 2022 • Show version history

I’m not near my computer, so I can’t say for sure what ID or class name is used in the header.  You can use the inspect element tool on your browser to find it.

For example’s sake, let’s say it has the class of cf-form-header.  If that were the case, to change the color of that class you could do Javascript like this: 

$('.cf-form-header').css('background-color','#34EB00');

 

0 0
replied on January 25, 2022

Silly me, you posted the ID in your original question…

$('#cf-formtitle').css('background-color','#34EB00');

 

0 0
replied on January 25, 2022

Hey Matthew,

 

Thanks for getting back to me but I think we might have our wires crossed here, it wouldn't be an LF process moving from test to prod, rather change the colour to define what type of change is being requested.

To break it right down, I would want the heading of the form to change to green if a var was set to 'test' and then change the colour to black if that var was 'prod' and then default to blue if that var was blank. so that the one form serves all purposes rather than have the same process duplicated out 3 times with 3 different themes

 

I assume JavaScript could do it somehow, my knowledge just isn't quite there with Javascript yet.

0 0
SELECTED ANSWER
replied on January 25, 2022 • Show version history

Here's some Javascript that checks the value of a single line field with class name layoutChange, and based on the value, it makes the header background green, black, or blue.

$(document).ready(function () {
  
  //When the form loads, or the field with the layoutChange class is changed,
  //update the form header's color based on the value of the layoutChange field.
  HeaderColorChange();
  $('.layoutChange').change(HeaderColorChange);
  function HeaderColorChange()
  {
    if($('.layoutChange input').val() == 'test')
    {
      $('#cf-formtitle').css('background-color','#34EB00');
    }
    else if($('.layoutChange input').val() == 'prod')
    {
      $('#cf-formtitle').css('background-color','#000000');
    }
    else
    {
      $('#cf-formtitle').css('background-color','#0000DD');
    }
  }
  
});

The whole thing is wrapped in a document ready function, which says to run all this code when the form is loaded.  That's pretty standard and something you'll use all the time in Forms.

Lines 5 and 6 call the HeaderColorChange function when the form loads and when the field changes respectively.

Whenever the HeaderColorChange function is run, it looks at the value of the layoutChange field and modifies the CSS of the header accordingly.

2 0
replied on January 26, 2022

This has done the trick and it was easy to implement and understand, Thank You.

 

1 0
replied on January 26, 2022

I have been building on this to update the text in the title and thought I'd share the info as it may help someone else.

 

Now the title of the form will also be updated to state if it is a request for test resources or a live system change and default to a 'system change request'. then the CSS is updated back to what it was, I got this info from inspecting the page and looking at the style elements

 

$(document).ready(function () {
  
  //When the form loads, or the field with the layoutChange class is changed,
  //update the form header's color based on the value of the layoutChange field.
  //update text inside the form title HTML element
  //call the CSSUpdate function to correct the CSS after updating the HTML element   
  
  HeaderColorChange();
  $('.layoutChange').change(HeaderColorChange);
  function HeaderColorChange()
  {
    if($('.layoutChange input').val() == 'test')
    {
      $('#cf-formtitle').css('background-color','#34EB00');
      document.getElementById("form-title-wrap").innerHTML = "Test Resourse Request";
      CssUpdate();
    }
    
    else if($('.layoutChange input').val() == 'prod')
    {
      $('#cf-formtitle').css('background-color','#000000');
      document.getElementById("form-title-wrap").innerHTML = "Live System Change";
      CssUpdate();
    }
    else
      
    {
      $('#cf-formtitle').css('background-color','#4655a5');
      document.getElementById("form-title-wrap").innerHTML = "System Change Request";
      CssUpdate();
    }
           
      function CssUpdate()
      {
        $("#form-title-wrap").css('color', '#ffffff');
        $("#form-title-wrap").css('font-family', 'Arial');
        $("#form-title-wrap").css('font-style', 'normal');
        $("#form-title-wrap").css('font-weight', 'bold');
        $("#form-title-wrap").css('text-decoration', 'underline');
        $("#form-title-wrap").css('font-size', '30px');
        $("#form-title-wrap").css('line-height', '90px');
        $("#form-title-wrap").css('min-height', '90px');     
      }
      
  }
  
});

 

 

0 0
replied on January 26, 2022

I’m really happy to hear that you found it easy to implement, understand, and improve upon!

Here’s a suggestion for something else that could be tweaked:

The code I shared, and the modified version you shared, both will only work in the active version of the form, not in a read-only version, including submission history and repository archival.

This is because it requires verifying the field value is set to test or prod.  However, in the read-only version, the are no fields from which to retrieve a value.

While a live form can retrieve a value from a single line field like this: $('.className input').val(), a good way to get the value from the read-only form would be something like this: $('.className .cf-field').text().

Therefore, changing the if statements slightly, to check for one or the other, should allow your code to operate in both the live and read-only versions of your form.

//New if statement to check for live or read-only version of field value.
if($('.layoutChange input').val() == 'test' || $('.layoutChange .cf-field').text() == 'test')

//New else if statement to check for live or read-only version of field value.
else if($('.layoutChange input').val() == 'prod' || $('.layoutChange .cf-field').text() == 'prod')

A lot of the CSS gets overlooked with archival to the repository, which is why I didn’t bother with this initially when changing the header color.  But since you are also changing the header text, this change is likely more beneficial.

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.

Details
Related Posts
Loading ...