Home General Discussion

customize the color of font displayed on the Incident.js file

Alan_FosterAlan_Foster Customer Adept IT Monkey ✭✭
edited March 2018 in General Discussion
I have a custom incident.js file, in it I have added the notes field to ExtraProps: "Department,BusinessPhone,Notes" .  I would like to have the "Notes" field be either font color RED or the Background color RED.  so it will stand out on the incident page.

columnFieldList: [
               { DataType: "UserPicker", PropertyDisplayName: "AffectedUser", PropertyName: "RequestedWorkItem", ExtraProps: "Department,BusinessPhone,Notes" },
               { DataType: "String", PropertyDisplayName: "Alternatecontactmethod", PropertyName: "ContactMethod", MinLength: 0, MaxLength: 256 },
               { DataType: "String", PropertyDisplayName: "TSR Number", PropertyName: "TSRNumber", MaxLength: 5 }
                                    ],

Best Answer

Answers

  • Matt_MedleyMatt_Medley Member Advanced IT Monkey ✭✭✭
    Hey Alan, can you attach your full incident.js file so I can see the headings etc..?
  • Alan_FosterAlan_Foster Customer Adept IT Monkey ✭✭
    edited March 2018
    @Matt_Medley
     Incident.js

  • Alan_FosterAlan_Foster Customer Adept IT Monkey ✭✭
    @Matt_Medley
    did you get a chance to look at my file?
  • Justin_WorkmanJustin_Workman Cireson Support Super IT Monkey ✭✭✭✭✭
    @Alan_Foster
    If you add the following to your custom.js I think it will accomplish what you're after:
    app.custom.formTasks.add('Incident', null, function (formObj, viewModel) { 
        formObj.boundReady(function () {
    var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
    if (MutationObserver)
    {
    var observer = new MutationObserver(function() {
    if ($('span[data-bind="text: extraPropText, visible: isVisible"]')) {
    var extraProp = $('span[data-bind="text: extraPropText, visible: isVisible"]')
    if (extraProp)
    {
    console.log("change color");
    observer.disconnect();
    extraProp.attr("style","color:#FF0000;"); 
    }
    }
    });
    var objPanelBody = document.querySelector('div[data-cid-propname="RequestedWorkItem"]');
    observer.observe(objPanelBody, {
    childList: true,
    subtree: true,
    attributes: false,
    characterData: false,
    });
    }
    }); 
    }); 
  • Alan_FosterAlan_Foster Customer Adept IT Monkey ✭✭
    @Justin_Workman
    should this be in the custom.js or the incident.js file?  I added it to the end of the custom.js but it did not change the color.
  • Alan_FosterAlan_Foster Customer Adept IT Monkey ✭✭
    @Justin_Workman
    Hey Justin would it be possible to just color the "notes" field in the extra props, there are three different fields in the extra props.
  • Justin_WorkmanJustin_Workman Cireson Support Super IT Monkey ✭✭✭✭✭
    Anything is possible :)
    That doesn't mean it's easy :neutral:
  • Justin_WorkmanJustin_Workman Cireson Support Super IT Monkey ✭✭✭✭✭
    The attached will kind of work.  Someone else may have a better approach.  Extraprop is a single text property with all the other properties that you define in the custom form jammed into it.  What I did was split it using the comma then clear it and add the values back with the first one colored.  You may want to change the index that it's using to pick which one to style where it says "if (index === 0)".  It won't style it as soon as you add the affected user, but once you Save or Apply, you should see the change.
Sign In or Register to comment.