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

Alan_Foster

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 }

                                    ],

Justin_Workman

Yep.  Custom.js is right.  Maybe need to flush your browser cache?

Matt_Medley

Hey Alan, can you attach your full incident.js file so I can see the headings etc..?

Alan_Foster

@Matt_Medley
 Incident.js

Alan_Foster

@Matt_Medley
did you get a chance to look at my file?

Justin_Workman

@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_Foster

@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.

Justin_Workman

Yep.  Custom.js is right.  Maybe need to flush your browser cache?

Alan_Foster

@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_Workman

Anything is possible
That doesn't mean it's easy

Justin_Workman

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.