Different html stylings for different options in list fields

Not Yet Reviewed

Hi there

I am trying to create a new communications plan. One of the fields I want to use in the plan is a list field, called "Status" with various different options like "Investigation" and "Service Restored".

I know how to use html to change the colour of the text of this field for all of the items in the list. So I can make "investigation" and "restored" appear amber in the email message, for example.

Is there some way of changing the field's properties so that "investigation" appears amber, while choosing "restored" means it appears green in the message?

Best wishes

0

Comments

4 comments
Date Votes

Please sign in to leave a comment.

  • Hi Adam,

     

    You can use HTML style classes to do this. Let's say that you have a Combo Box property in your form called Status. In the Messages tab, go to the Email template and drag/drop Status into your email body. Now if you click "View Source" at the bottom of the dialog, you're going to see a UUID which represents the Status property. We can use this to drive our HTML classes by adding something like the following in the Source mode:

     

    <style>
    p.investigation {
    color: #FFC200;
    }

    p.restored {
    color: green;
    }

    </style>
    <p class="${f10a6c8e-8415-4cbb-9f50-78a55f6a8332}">Status is ${f10a6c8e-8415-4cbb-9f50-78a55f6a8332} </p>

     

    Now this is using a UUID from my form so you'd have to update this to match your own UUID.

    Let me know if this makes sense or if you need more help.

     

    Thanks,

    Tom

    0
  • Thanks Tom, that works perfectly! I just had to change the UUID and put the html in with all the other formatting. Now it works like a dream!

    0
  • Ah Tom, I've hit a snag!

    We use Gmail, which appears to be stripping out the colours when using the method you provided. Colours come through when setting them without the style class. Is there any way around this?

    0
  • Hi Adam,

    We have a couple of articles about styling email content that might be helpful.

    This article discusses styling email content dynamically, so you can change colors based on the value of a property: https://support.xmatters.com/hc/en-us/articles/210059386-Style-email-content-dynamically

    This article discusses some issues with using the <style> section from within the email message editor. When you include a <style> section within the email body, it competes with the default xMatters <style> section included in each message. Email clients then have to arbitrarily decide which <style> section "wins" and they all do this a little differently.  https://support.xmatters.com/hc/en-us/articles/215155466-Overriding-default-table-styles-in-email-notifications

    I'm not sure if those articles will help with the Gmail issue or not.  This page (not written by xMatters)  contains a fairly good list of which HTML features are supported in various mail clients: https://www.campaignmonitor.com/css/

    0

Didn't find what you were looking for?

New post