› Forums › Classic DFFS › Change field color on change
- This topic has 12 replies, 3 voices, and was last updated 8 years, 8 months ago by
gerrits.
-
AuthorPosts
-
-
June 30, 2015 at 14:03 #7777
Kristoffer Bertsch
ParticipantHi,
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= redI 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 -
July 2, 2015 at 07:42 #7790
Alexander Bautz
KeymasterPut 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
-
July 8, 2015 at 14:34 #7849
-
July 8, 2015 at 15:04 #7851
Alexander Bautz
KeymasterHi Gerrits,
Can you post a sceenshot? – in my setup the x icon is white.Alexander
-
July 8, 2015 at 15:13 #7852
gerrits
ParticipantSee attached.
Attachments:
-
July 8, 2015 at 15:15 #7854
Alexander Bautz
KeymasterWhich SharePoint version and browser are you using?
Alexander
-
July 8, 2015 at 15:18 #7855
gerrits
ParticipantChrome Version 43.0.2357.124 m
DFFS Backend v4.253|CSS version: 4.01 / |spjs-utility version: 1.206
-
July 8, 2015 at 15:19 #7856
Alexander Bautz
KeymasterThis 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
-
July 8, 2015 at 20:15 #7857
gerrits
ParticipantI 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”);
-
July 8, 2015 at 20:51 #7866
gerrits
ParticipantI’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.
-
July 8, 2015 at 22:39 #7868
Alexander Bautz
KeymasterI guess you need the relative URL of the image – like “/site/library/Red_X_icon.png”.
Alexander
-
July 8, 2015 at 23:44 #7869
gerrits
ParticipantThat was it! Thanks for your help.
-
-
July 2, 2015 at 14:42 #7798
Kristoffer Bertsch
ParticipantThank you sir!! Much appreciated!!
-
-
AuthorPosts
- You must be logged in to reply to this topic.