Change field color on change

Forums Dynamic Forms for SharePoint Change field color on change

Viewing 2 reply threads
  • Author
    Posts
    • #7777
      Kristoffer Bertsch
      Participant

      Hi,

      I have a simple list, with a dropdown of three options:
      No gaps were found =green
      Minor gaps were found= yellow
      Significant gaps found, remediation required= red

      I would like the tab to change color according to one of the option selected above. Is there CSS that will change the tab color to green, yellow or red when one of the options above is chosen? Or is there another way to show the “status” when one of the options is selected?

      Thanks for the help!
      -Kris

    • #7790
      Alexander Bautz
      Keymaster

      Put this is the Custom CSS in the “CSS and JS” tab:

      .tabGreen *{
      	color:#ffffff !important;
      	background-color:green !important;
      }
      .tabYellow *{
      	color:#444 !important;
      	background-color:yellow !important;
      }
      .tabRed *{
      	color:#ffffff !important;
      	background-color:red !important;
      }

      Put this is the Custom JS in the “CSS and JS” tab:

      function colorTab(){
      	$("#dffs_tab_2").removeClass("tabGreen tabYellow tabRed");
      	switch(getFieldValue("Color")){ // Color is the FieldInternalName
      		case "Green": // The option form the choice field
      			$("#dffs_tab_2").addClass("tabGreen");
      		break;
      		case "Yellow": // The option form the choice field
      			$("#dffs_tab_2").addClass("tabYellow");
      		break;
      		case "Red": // The option form the choice field
      			$("#dffs_tab_2").addClass("tabRed");
      		break;		
      	}	
      }

      Change the tab ID number of the tab – “dffs_tab_2” is the third tab as the index is 0-based. Also change the “case” to match your choice field values.

      Then add a rule to trigger on your choice field, and have it call the function “colorTab” in the “Run these functions / trigger these rules” field.

      Alexander

      • #7849
        gerrits
        Participant

        Is it possible to also change the ToolTip dialog box heading color?

        Currently when the user clicks on the question mark icon to keep the tooltip displayed…the X (to exit the tooltip) is blue, and the heading is blue.

        • This reply was modified 6 years, 5 months ago by gerrits.
      • #7851
        Alexander Bautz
        Keymaster

        Hi Gerrits,
        Can you post a sceenshot? – in my setup the x icon is white.

        Alexander

      • #7852
        gerrits
        Participant

        See attached.

        Attachments:
      • #7854
        Alexander Bautz
        Keymaster

        Which SharePoint version and browser are you using?

        Alexander

      • #7855
        gerrits
        Participant

        Chrome Version 43.0.2357.124 m

        DFFS Backend v4.253|CSS version: 4.01 / |spjs-utility version: 1.206

      • #7856
        Alexander Bautz
        Keymaster

        This image is set using a base64 encoded string. If you encounter problems, you may change the image to a proper image in the file DFFS_frontend.css – look for the class “tooltipHolderClose”-

        Alexander

      • #7857
        gerrits
        Participant

        I found it…but not sure I understand the CSS. Could you explain the URL? or point me to an article?

        background-image: url(“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuM4zml1AAAAB5SURBVDhPzZJBDoAgEAN5CG/jF74fGewigSUcOOgkTaTtrhoN/yHnHIuSFGU3djkFAuMqai”);

      • #7866
        gerrits
        Participant

        I’ve uploaded an image, and changed the line to:

        background-image: url(“Red_X_icon.png”);

        But it isn’t showing up. Not sure if I have the syntax right or if there’s another issue. I’ve even tried giving it the complete url, instead of just the file name.

      • #7868
        Alexander Bautz
        Keymaster

        I guess you need the relative URL of the image – like “/site/library/Red_X_icon.png”.

        Alexander

      • #7869
        gerrits
        Participant

        That was it! Thanks for your help.

    • #7798
      Kristoffer Bertsch
      Participant

      Thank you sir!! Much appreciated!!

Viewing 2 reply threads
  • You must be logged in to reply to this topic.