Generate HTML with Dynamic Formatting for Send Notification

  • 27 September 2017
  • 5 replies
  • 137 views

Badge +1

Is it possible to dynamically format HTML in a Send Notification (email) action for Nintex Workflow 2016 on-prem? I have successfully created HTML output.  The requirement I'm stuck on is to be able to change the font-color/background-color on inserted reference (field values) based on a condition.

Example:

If valueA != valueB, then add a CSS class to the <td> tag.  The CSS class would apply the appropriate styling.

Embedding the CSS directly does not render correctly as it outputs the code into the email.  If I link to a CSS file within the HTML, nothing happens.  I also have a link to a jquery library, and then have a small script to run to insert the class on the td.  Everything works well when testing with Visual Studio.

I have tried to insert the HTML directly in the Send Notification (Edit Source) and I have also tried to use the Build String and then insert the variable in the Notification instead. 

Script:

<script>

$(document).ready(function () {

$('tbody tr td:not(":first")').each(

function () {

if (curr != prev) {

$(this).addClass('changed');

}

});

});

</script>

Table portion of the code:

<table>

<col id="curr"/>

<col id="prev" />

<thead>

<tr>

<th>Current</th>

<th>Previous</th>

</tr>

<tbody>

<tr>

<td class="changed">100000</td>

<td>200000</td>

</tr>

<tr>

<td>200000</td>

<td>200000</td>

</tr>

<tr>

<td>01/01/2018</td>

<td>01/01/2019</td>

</tr>

</tbody>

</thead>

</table>


5 replies

Badge +5

Hi ‌, which version of Nintex workflow are you using? O365 or On Prem (2016/2013/2010) ? happy.png

Badge +1

This is 2016 on-prem Nintex Workflow.

The CSS to apply is as follows.  The script looks to see if two values match or not and if they do not, then it would apply the class to the td.

.changed {background-color: blue;}

My script does have an issue as well that it is adding the class on TD that it should not as the curr & prev do match in that particular TR.  Any help to resolve would be great on that as well.  I'm only looking for the formatting to be on the 'curr' TD (first one within a TR) Here is the current output .  The second row should not be formatted.

Userlevel 6
Badge +16

Email Formatting issues use to be an issue on your email client.

Every email client ( Outlook, OWA, gmail, etc ) have their own rendering machine and not all clients render email formats as expected you need to try to create a format on your client, browse the code to see how it is created and then recreate the same way on the Nintex Workflow.

Badge +1

I have found a solution!

Instead of using any type of JavaScript, I am using a combination of variables and inserting those as references in a Build String action.  This gets output to a variable which is inserted into the Send Notification action body.

Steps:

1.  Added a Run If action to compare one field is not equal to another field.   I have multiple ones to check so I have multiple Run If conditions and unique variables. 

2.  If condition met, Set Variable action. 

     a.  Create a new variable for each unique comparison.  Example:  txt-StyleFieldOne, txt-StyleFieldTwo, ....

     b.  Set variable to a value of:   background-color: #5ba4d4;

3.  Repeat for each unique comparison.

4.  Build String action. 

     a.  Insert complete HTML code in the action.

     b.  In my case I have a table.  In the relevant TD tag, I inserted the variable created in #2.  Example:  <td style='txt-StyleFieldOne'>   I insert the reference between single quote.  Double quote does not work.

     c.  Repeat on each TD tag that is needed.

     d.  Output to a single text variable (txt-htmlOutput).

5.  Send Notification action, insert reference to the variable, txt-htmlOutput.

If anyone would like to see images of each action in the workflow, comment and I will revise this post.

Base output example

Badge

thanks for this. can you share images of your actions? I am trying to change the font color of the current item and variables I insert in an email to blue and the text color option does not work and I am not well versed in JS or HTML

Reply