Unlock a world of possibilities! Login now and discover the exclusive benefits awaiting you.
Hi,
I have a HTML report in NPrinting v21.14.4.0 (May 2021 SR1) that send few charts and few KPIs by email.
It used to work great until few weeks ago but then randomly it started to send the KPIs without the measurements, just an empty box with the labels.
I have 3 KPIs and each time I run the report it "hide" random KPI... after few executions, sometimes it is able to display everything correctly but after few minutes if I try to execute it again the problem return.
I've seen few posts talking about using extension objects or sizing issues but I've rebuilt the objects in my QlikSense app using a standard KPI chart and also changed the sizing and nothing helped.
Here are some screenshots showing different runs on the report with random empty KPI (just different runs, without changing anything in between):
Sometimes it can take 4-5 runs, with different random outputs until I get a full report.
When everything works fine, this is how it looks like:
Anyone noticed something like that before?
Any ideas what can cause it?
Thanks
Dror
@Lech_Miszkiewicz yeah, this is exactly what I did... spent the entire day optimizing HTML for Office365.
I found out the same thing, that I need to move the entire <style> section to inside the <body>.
Also add to reconfigure the location of each container to a table (and get rid of the container).
I didn't want to change the html report to be as Attachment so I had to make some compromise.
The best results I was able to get are:
This is how it looks when I receive the email in my phone (iPhone), which looks perfect:
This is how it looks when I look at the same email in my Outlook client (PC), which is missing some of the formatting but at least readable:
This is how it looks when I look at the same email in my office365 (outlook web), which almost have all the formatting, minus the shopping cart icon:
I think I can live with that, at least until I'll find the time to mess round with it a bit more.
In case someone wants to look at the final code:
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
</head>
<body>
<span>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css'>
<style>
.icon
{
float: right;
font-size:500%;
position: absolute;
top:0rem;
right:-0.3rem;
opacity: .16;
}
#container
{
width: 1200px;
display: flex;
}
.grey-dark
{
background: #495057;
color: #efefef;
}
.red-gradient
{
background: linear-gradient(180deg, rgba(207,82,82,1) 0%, rgba(121,9,9,1) 80%);
color: #fff;
}
.red
{
background: #a83b3b;
color: #fff;
}
.purple
{
background: #886ab5;
color: #fff;
}
.blue
{
background: #3757B4;
color: #fff;
}
.kpi-card
{
overflow: hidden;
position: relative;
box-shadow: 1px 1px 3px rgba(0,0,0,0.75);;
display: inline-block;
float: left;
padding: 1em;
border-radius: 0.3em;
font-family: sans-serif;
width: 240px;
min-width: 180px;
margin-left: 0.5em;
margin-top: 0.5em;
}
.card-value
{
display: block;
font-size: 190%;
font-weight: bolder;
}
.card-text
{
display:block;
font-size: 100%;
padding-left: 0.2em;
}
</style>
</span>
<table>
<tr>
<th>
<div class="kpi-card blue">
<span class="card-value">%%KPI1-1%%<SUP><font size="4">%%KPI1-2%%</font></SUP></span>
<span class="card-text"><br>%%KPI1title%% </span>
<i class="fas fa-shopping-cart icon"></i>
</div>
</th>
<th>
<div class="kpi-card purple">
<span class="card-value">%%KPI2%% <SUP> </SUP></span>
<span class="card-text"><br>%%KPI2Title%% </span>
<i class="fas fa-shopping-cart icon"></i>
</div>
</th>
<th>
<div class="kpi-card grey-dark">
<span class="card-value">%%KPI3-1%%<SUP><font size="4">%%KPI3-2%%</font></SUP></span>
<span class="card-text"><br>%%KPI3Title%%</span>
<i class="fas fa-shopping-cart icon"></i>
</div>
</th>
</tr>
</table>
<br>
</body>
</html>