Community Health Toolkit

Different color in Condition Cards

Hi everyone,

I was wondering if it is possible to change the color of some label in the condition card. For example in the pregnancy condition card e.g. the current danger signs in red (Very pale would be displayed in red for example). My end goal would be to show the label in red in case of some values and I feel like I can work the logic, I just don’t know how to change the color using JS. I tried with html tags but did not work.
I see that Tasks are using it to show that some task is past due but have not figured out yet how.

Would be happy if someone could guide my in the right way.

Thanks for the question @magp18. I’m moving this topic to the tech support category so that it gets the right eyes on it. :slight_smile:

1 Like

Try injecting bootstrap/html into the label
eg label: ‘Bad’ for sth like this:
screenshot_from_2021-07-06_15-23-23

1 Like

Here is a code snippet that turns a pregnancy condition card label to red. Notice its using bootstrap to manipulate the label. You could do the same for other labels

const cards = [
  {
    label: '<i class="text-danger">Pregnancy</i>',
    appliesToType: 'person',
    appliesIf: () => isPregnant(),
    fields: []
  }
];

Hi @magp18

Try defining your field as follows:

{ label: 'your-label', value: `<span style="color:'red'">${value_to_show}</span>`, width: 4, filter: 'safeHtml' },

You could use inline style tags or bootstrap classes to style the text

Hi both!
Thank you very much for the purposed solutions and explanation on what is happening behind. However when I try either one of the suggestions, I get this:
image
When using filter: ‘safeHtml’
Or this when not:
image

And this is how I am defining my field:

In the screenshot I am using the span inline style tag, but I also tried the same with

 `<i class="text-danger">${s_danger_look.valueOf()}</i>`

Did I miss something?

Hey @magp18 I followed how you define your field above to do something similar, and applied bootstrap styling that worked perfectly. See below.

{ appliesToType: '!person', label: 'External ID', value: thisContact.external_id ? `<i class="text-danger">${thisContact.external_id}</i>` : '', width: 4, filter: 'safeHtml' },

image

1 Like

Hi @kitsao!
I have it identical to you now but I still get:

SafeValue must use [property]=binding: <i class="text-danger">s_none</i> (see http://g.co/ng/security#xss) 

image

I guess if it works for you it must be a different issue, perhaps some conf file that I have not modified or browser? Which browser are you using?

I am not sure if this is relevant but I am in a condition card defining fields as a function:

but shouldn’t matter too much right?

Chrome: Version 92.0.4515.131 (Official Build) (64-bit)
CHT: Version 3.11.2

Yeah, it shouldn’t.

Very strange, does not work with any browser. XSS problem is what safeHtml would actually surpress right?

@derick @jonathan
Hi everyone, I found out the reason, it was because of valueOf() in the expression when pushing with the tag to the fields Array! I am now using valueOf() before and just passing the variable with the value and it works now! Thanks everyone, hopefully this is helpful for other people too

5 Likes