Different color in Condition Cards

Technical Support
1

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.

2

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
3

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

1 Like
4

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: []
  }
];
5

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

6

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:

image
image988×41 3.01 KB

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?

7

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
8

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:

image
image988×119 5 KB

but shouldn’t matter too much right?

9

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

Yeah, it shouldn’t.

10

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

11

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

Hi Everyone,

I apologise for bumping this old conversation, but this is the only thread on the site that seems to deal with injecting inline style tags into a label property.

We have such a requirement where we are using conditional cards to prompt our CHW’s when enumerating a household. We would like to change the fore colour of this text and when I tried this suggestion, style tags are rendered as text and the styling is not applied.

Can I please confirm if this is still a viable solution to stylise a condition card?

Thanks so much!
Shaun

13

I dug into this a bit and unfortunately, I believe that this hack for injecting HTML via the translated label seems to have been removed a long time ago when we switched from the Angular translate directive to the interpolated pipe. For context, ng-translate supports injecting HTML, but only when applying them directly to innerHTML (and not via the interpolation that is happening in the later versions of the CHT).

Ultimately, injecting HTML like this is probably a risky pattern since the layout/behavior could change in unpredictable ways when upgrading to a new CHT version. Additionally, you would always be subject to Angular’s content sanitation which could also change in future versions of Angular. (Angular’s sanitation already prevents injecting HTML with style attributes when applying the translation to innerHTML…)

I have seen the pattern used in some condition cards to leverage the fields[n].icon to draw particular attention to an aspect of the condition card (the icon-risk icon will display a bright red warning).

Otherwise, please consider logging a new feature request (Issues · medic/cht-core · GitHub) that specifically enumerates the workflow you are trying to support! Helping us understand your workflow goals is really important here because there are likely some more feasible approaches we could consider besides having to inject custom HTML… (For example, maybe it would make sense to support indicating some condition cards as priority similar to how you can have priority tasks. Those priority cards could have specific display properties that make them stand out…)

1 Like