Brijesh Patel
Hi
I am trying to create a different response Email option based on list priority fields. called "High" with various different header like "Medium" something else and so on.
However i succeded to update different header based on priority drop down with the user of CSS styling and it's displaying well when trying to view the preview on WEB UI but when i actually trigger the message then the header disappear from Email message for receiver.
Is there some way of changing anything can help to include different header based on list field.
Let me know if you need any additional information.
0
Comments
Please sign in to leave a comment.
Hi Brijesh,
Thank you for your question. To better support you in this customization, do you mind reaching out to our support team by using the Submit A Request link at the top right? That way we can have our engineers review your requirements and give you a better solution.
Thank you,
Kam
Hi Brijesh,
To start you off I was curious if you happened upon this bit of knowledge yet:
https://support.xmatters.com/hc/en-us/articles/210059386-Style-email-content-dynamically
You mentioned something about changing response options based on priority... are you suggesting offering different response links (text?) depending on the severity of the issue? If so this sounds like more of a response override situation than an actual e-mail HTML formatting one. In general you want to not ever mess with response option text.
If you can add just a bit more detail around your requirements we can offer further help via a support ticket or share ideas so the whole community can benefit from the knowledge.
Cheers!
Hi Francois,
I am looking near by that artical but in that you're using CSS to change the color of text based on list field but i would like to use different images based on priority list field in response. For example I would like to use X image if priority is High, Y image if priority is Low, etc. somehow i could able to load different images with the help of CSS backgroung images but it's images are not display while recipient receive response via Email or MobileApp.
Appriciate if you guys can help to achieve this.
Thanks Brijesh!
We have documented this method, which describes using a property (which you populate before sending the event - maybe via the integration?) which simply renders an image by url defined in that property:
https://help.xmatters.com/ondemand/xmodwelcome/communicationplanbuilder/designexample4_email_images.htm
If you don't want to use a property, you could put in some sort of javascript code which would return one of three possible image URLs, I was going to play with that idea to see if it would be possible to use Javascript and if so that idea may work. You can upload images in that case and use the priority parameter to select what image to display. I'll see if I can post an example in just a bit.
Brijesh,
Script solutions for conditional formatting won't be doable - we are confined to using the following HTML items in the source
Supported HTML tags in form properties
This is information found in our documentation
https://help.xmatters.com/ondemand/xmodwelcome/communicationplanbuilder/html_in_properties.htm
I did however manage to get a solution using CSS:
******************************************************
<style>
#High
{
content:url("http://s3-xmatters-static.s3.amazonaws.com/image_library/customers/xyzabc/imageHigh.jpeg");
}
#Medium
{
content:url("http://s3-xmatters-static.s3.amazonaws.com/image_library/customers/xyzabc/imageMed.jpeg");
}
#Low
{
content:url("http://s3-xmatters-static.s3.amazonaws.com/image_library/customers/xyzabc/imageLow.jpeg");
}
</style>
This message tests an image based on a condition like Priority. In this case the priority is: ${a759bd8c-1b70-4b4f-83a0-93b7cc4af1e8}<br><div><br></div><div>The image we want to show is as below:</div><div id="${a759bd8c-1b70-4b4f-83a0-93b7cc4af1e8}"><img class="${a759bd8c-1b70-4b4f-83a0-93b7cc4af1e8}" src="">
</div>
******************************************************
What you need to do is basically identify your Priority property, get its UUID using the Show Source pane, then create the CSS at the top - specifying your 3 image URLS (that you uploaded or have publicly available) and then your image is in its own special DIV defined as:
<div id="${a759bd8c-1b70-4b4f-83a0-93b7cc4af1e8}"><img class="${a759bd8c-1b70-4b4f-83a0-93b7cc4af1e8}" src="">
</div>
This way depending on the text that Priority contains it will switch your style and along with it the image source URL.
Give that a try and comment if you have questions! Hopefully this will help others trying to do something similar as well.
Hi Francois,
I have tried with your mentioned scenerio but i could not succeed to produce image in response based on priority selection. not sure where i am wrong.
I have tried something different as per following :
p.Medium_footer {
background:url(Image Url)left bottom no-repeat;
width: 570px;
height: 100px;
}
<p class="UUID_header"> </p>
with this it's changing the image as per priority drop down selection and visibal in preview when we review, however when i triggered/send alert then recipient user does not able to view any image in communication response.
Please can you guide me how can i get this fixed.
Thanks Brijesh,
I'm going to take the opportunity to work with you directly with this and once we find a solution I'll update this thread so the community can benefit from the answer as well.
As a follow-up here's a solution that seems to have satisfied everyone:
1) Create a property on the form, ideally a finite list of options you can select when creating a message (High/Medium/Low, P1/P2/P3/P4, etc....)
2) Insert an image into the layout of the e-mail message, then check on View Source
3) Find the HTML for the image and update it so it looks like this:
img src="http://www.myimagewebsite.com/images/${dd44edb2-a381-4a88-8e09-a2bcde459991}.png" alt="${dd44edb2-a381-4a88-8e09-a2bcde459991}.png" where the ${dd44edb2-a381-4a88-8e09-a2bcde459991} part is the ID of the property created in step 1. In order to get that ID, you can insert the property on its own into the form and you can locate it in the source to get this ID.
4) When you compose a message, the selection value will be replaced into that images source URL so effectively you will end up with a completed image URL of something like http://www.myimagewebsite.com/images/High.png which should then embed the image into the e-mail.
The only limitation with this solution is that the images must be hosted externally to xMatters. I hope this is well enough explained, so if you or anyone else viewing this solution has questions please comment and let us know!