I am building an email template on Mailchimp using code blocks in some parts. I have created a seemingly simple table which does show on the visual composer but does not show when I click on Preview or Test.
This is a standalone block, so I don't think I need to insert table anywhere but within a div element. After previewing the entire template and returning to the visual composer, the table disappears but does re-appear after clicking on the element below.
Is there any reason why this happens?
<div class="mcnTextContent" style="margin-left:64px; margin-right:64px">
<table style="font-size: 18px; font-family: Arial, Helvetica, sans-serif; font-color: #1F1F1F; width: 100%; margin-left: auto; margin-right: auto;" border="0">
<tbody>
<tr>
<td style="line-height: 0px !important; padding-bottom: 48px !important;" colspan="3"> </td>
</tr>
<tr>
<td width="33%"><span style="font-size: 10px !important; vertical-align: middle;">🟢 </span> <span style="font-weight: bold;">Year Launch</span>
<div style="line-height: 8px;"> </div>
<span style="font-size: 16px;">2020<br/>UCITs version - 2015</span></td>
<td colspan="2"><span style="font-size: 10px !important; vertical-align: middle;">🟢 </span> <span style="font-weight: bold;">Assets Under Management</span>
<div style="line-height: 8px;"> </div>
<span style="font-size: 16px;">USD $1B strategy<br/>UCITs version - SD $0.4B</span></td>
</tr>
<tr>
<td style="line-height: 0px !important; padding-bottom: 20px !important;" colspan="3"> </td>
</tr>
<tr>
<td width="33%"><span style="font-size: 10px !important; vertical-align: middle;">🟢 </span> <span style="font-weight: bold;">Performance 2020</span>
<div style="line-height: 8px;"> </div>
<span style="font-size: 16px;">5.49%<sup>2</sup></span></td>
<td width="33%"><span style="font-size: 10px !important; vertical-align: middle;">🟢 </span> <span style="font-weight: bold;">YTD Performance</span>
<div style="line-height: 8px;"> </div>
<span style="font-size: 16px;">0.50%<sup>1</sup></span></td>
<td width="33%"><span style="font-size: 10px !important; vertical-align: middle;">🟢 </span> <span style="font-weight: bold;">Yield-to-Worst</span>
<div style="line-height: 8px;"> </div>
<span style="font-size: 16px;">8.95%<sup>2</sup></span></td>
</tr>
<tr>
<td style="line-height: 0px !important; padding-bottom: 20px !important;" colspan="3"> </td>
</tr>
<tr>
<td width="33%"><span style="font-size: 10px !important; vertical-align: middle;">🟢 </span> <span style="font-weight: bold;">Duration</span>
<div style="line-height: 8px;"> </div>
<span style="font-size: 16px;">4 years<sup>1</sup></span></td>
<td width="33%"><span style="font-size: 10px !important; vertical-align: middle;">🟢 </span> <span style="font-weight: bold;">3-year Volatility</span>
<div style="line-height: 8px;"> </div>
<span style="font-size: 16px;">7.23%<sup>2</sup></span></td>
<td width="33%"><span style="font-size: 10px !important; vertical-align: middle;">🟢 </span> <span style="font-weight: bold;"># of Positions</span>
<div style="line-height: 8px;"> </div>
<span style="font-size: 16px;">144<sup>3</sup></span></td>
</tr>
<tr>
<td style="line-height: 0px !important; padding-bottom: 20px !important;" colspan="3"> </td>
</tr>
<tr>
<td width="33%"><span style="font-size: 10px !important; vertical-align: middle;">🟢 </span> <span style="font-weight: bold;">Gross Yield (USD)</span>
<div style="line-height: 8px;"> </div>
<span style="font-size: 16px;">442%<sup>2</sup></span></td>
<td width="33%"><span style="font-size: 10px !important; vertical-align: middle;">🟢 </span> <span style="font-weight: bold;">MTM Yield (USD)</span>
<div style="line-height: 8px;"> </div>
<span style="font-size: 16px;">45%<sup>2</sup></span></td>
<td> </td>
</tr>
<tr>
<td style="line-height: 0px !important; padding-bottom: 20px !important;" colspan="3"> </td>
</tr>
<tr>
<td style="font-size: 12px !important; line-height: 16px;" colspan="3"><sup>1</sup> Source: Morningstar Direct March, 5th, 2021 (HI USD shareclass).<br/> <sup>2</sup> Source: TwentyFour, Bloomberg; February 28th, 2021.<br/> <sup>3</sup> This is now credit issuers only so it excludes ABS and Government (total credit positions = 271). Source: TwentyFour Bloomberg Feb 28th 2021.</td>
</tr>
<tr>
<td style="line-height: 0px !important; padding-bottom: 20px !important;" colspan="3"> </td>
</tr>
<tr>
<td colspan="2"><span style="font-weight: bold; font-size: 24px;">Ratings & Awards</span></td>
<td width="33%"> </td>
</tr>
<tr>
<td style="line-height: 0px !important; padding-bottom: 20px !important;" colspan="3"> </td>
</tr>
<tr>
<td style="padding-right: 40px;" colspan="2"><span style="font-size:20px;">★★★★★</span><div style="line-height: 4px;"> </div>
<span style="font-weight: bold;">Morningstar</span>
<div style="line-height: 8px;"> </div>
<span style="font-size: 16px;">This fund has been awarded.</span></td>
<td style="background-image: url('https://i.ibb.co/Jkd3npD/Untitled-1-copy.jpg'); background-repeat: no-repeat; background-size: 189px 117px; width: 189px; height: 117px;" colspan="1"> </td>
</tr>
<tr>
<td style="line-height: 0px !important; padding-bottom: 48px !important;" colspan="3"> </td>
</tr>
</tbody>
</table>
</div>
In this case, the issue was with the emoji 🟢 I used. For some reason Mailchimp didn't allow the table to render correctly.
Related
So I have this HTML template to transform to pdf using the RNHTMLToPDF package:
export default function getPdfTemplate(requestData, items, switchValues) {
return `
<div style="display: flex; flex-direction: column; width: 100%;">
<div id="pdf-header" style="display: flex; flex-direction: row; width: 100%;">
<div style="display: flex; flex-direction: column; width: 50%;">
<div style="font-size: 10px"> <b>Nome do cliente: </b> ${requestData.nomeCliente} </div>
<div style="font-size: 10px"> <b>Código do cliente: </b> ${
requestData.codigoCliente
} </div>
<div style="font-size: 10px"> <b>Número do pedido: </b> ${requestData.numPedido} </div>
<div style="font-size: 10px"> <b>Gerado em: </b> ${new Date().toLocaleDateString()} via Sistema de vendas </div>
</div>
<div style="display: flex; flex-direction: column; width: 50%;">
<div style="font-size: 10px"> <b>Data da negociação: </b> ${moment(
requestData.dataPedido,
"YYYYMMDD"
).format("DD/MM/YYYY")} - ${requestData.horaPedido} </div>
<div style="font-size: 10px"> <b>Quantidade de itens: ${
requestData.quantidadeItem
} </b> </div>
<div style="font-size: 10px"> <b>Valor total do pedido: </b> R$ ${
requestData.valorTotalPedido
} </div>
<div style="font-size: 10px"> <b>Valor do desconto negociado: </b> R$ ${
requestData.discount
} </div>
</div>
</div>
<hr style="margin: 14px 0 8px 0;">
<div id="pdf-table">
<h2 style="font-size: 10px; margin: 8px 0;">Lista de itens do pedido</h2>
<table style="background-color: #F3F3F4; width: 100%; border-collapse: collapse" >
<thead style="background-color: #656F7B;" >
<tr style="color: #FFF; font-size: 8px;" >
<th style="padding: 5px; font-size: 8px;">MERCADORIA</th>
<th style="padding: 5px; font-size: 8px;">QTDE</th>
<th style="padding: 5px; font-size: 8px;">COD BARRAS</th>
<th style="padding: 5px; font-size: 8px;">UNIT.LI+IMP</th>
<th style="padding: 5px; font-size: 8px;">TOL.LIQ+IMP</th>
<th style="padding: 5px; font-size: 8px;">COND PGTO</th>
<th style="padding: 5px; font-size: 8px;">VLR.FRETE</th>
<th style="padding: 5px; font-size: 8px;">FIL EXPED</th>
<th style="padding: 5px; font-size: 8px;">FIL FAT</th>
<th style="padding: 5px; font-size: 8px;">% DE ICMS</th>
</tr>
</thead>
<tbody>
${
items && items.length > 0 ? (
items.map(
(item, index) =>
`<tr style="line-height: 45px; background:${
index % 2 != 0 ? "#FFFFFF" : "initial"
}">
<td colspan="10" style="padding: 0px 10px; text-align:start; font-size: 8px;">${item.CODMER} - ${item.DESMER}</td>
<!--td colspan="9" style="font-size: 8px;"></td-->
</tr>
<tr style="margin: 4px 10px; line-height: 45px; background:${
index % 2 != 0 ? "#FFFFFF" : "initial"
}">
<td colspan="1" style="text-align:center; font-size: 6px;"> - </td>
<td colspan="1" style="text-align:center; font-size: 6px;">${
item.quantidadeMercadoria
}</td> <!-- qtd -->
<td colspan="1" style="text-align:center; font-size: 6px;">${
item.CODBRRMER
}</td> <!-- cód barras item -->
<td colspan="1" style="text-align:center; font-size: 6px;">
${(
item.VLRLIQMER +
item.VLRFRTMER +
item.stb.valorSTBTotal +
item.valorIPITotal
).toFixed(2)}
</td> <!-- Valor Unitário Líquido + Imposto + Frete -->
<td colspan="1" style="text-align:center; font-size: 6px;">
${(
(item.VLRLIQMER + item.VLRFRTMER) *
item.quantidadeMercadoria +
item.stb.valorSTBTotal +
item.valorIPITotal
).toFixed(2)}
</td> <!-- Total líquido + Imposto + Frete -->
<td colspan="1" style="text-align:center; font-size: 6px;">${
item.condicaoPagamento.codigoCondicaoPagamento
}</td> <!-- condição de pagamento -->
<td colspan="1" style="text-align:center; font-size: 6px;">${
switchValues.freightValue ? item.frete : ''
}</td> <!-- valor frete -->
<td colspan="1" style="text-align:center; font-size: 6px;">${
switchValues.exp ? item.CODFILEPD : ''
}</td> <!-- filial expedição -->
<td colspan="1" style="text-align:center; font-size: 6px;">${
switchValues.fat ? item.CODFILFAT : ''
}</td> <!-- filial faturamento -->
<td colspan="1" style="text-align:center; font-size: 6px;">
${
switchValues.icms
? item.mercadoria.percentualICMS
.percentualICMSMercadoria
: ''
}</td> <!-- percentual ICMS -->
</tr>`
)
) : null
}
</tbody>
</table>
</div>
<div id="pdf-footer">
<br>
<hr>
<h2 style="font-size: 10px;">Observações</h2>
<div style="border: 1px solid #9BA3A8; border-radius: 8px; margin: 8px 0; padding: 12px; font-size: 6px;">
** ATENÇÃO! As informações deste arquivo destinam-se a mera conferência da descrição, quantidade e valor (nesta data) dos itens pedidos, sendo certo que, até o faturamento da mercadoria, o pedido poderá sofrer alterações, seja pela falta de produto em estoque, por variações de alíquotas de ICMS, IPI, débitos do cliente perante o Fisco Estadual, entre outros motivos, razão pela qual este documento não vincula as partes.
</div>
<div style="border: 1px solid #9BA3A8; border-radius: 8px; margin: 8px 0; padding: 12px; font-size: 6px;">
** Informamos ainda, que o presente pedido encontra-se em aberto até a data do faturamento, pelo que V. Sa. poderá promover o cancelamento ou a inclusão de novos itens, o que poderá provocar a modificação dos percentuais de desconto, influenciando no preço final dos pedidos.
</div>
</div>
</div>
`
}
Printing this awkward comma character. I can't find it anywhere in the respective HTML
Any reason for this mystery?
Found the problem
Just had to add a join at the end of the map function item.map(el...).join('')
Below is the code used. Trying to get an image to display ony if the associated field is not empty. Thanks for any help you all can give! Message states the error is on Line 42, column 8.
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width:100%;" width="100%">
<!-- START header -->
<tbody>
<tr>
<td valign="top">
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width:720px;border-top:1px solid #cccccc;border-right:1px solid #cccccc;border-left:1px solid #cccccc;" width="720">
<tbody>
<tr>
<td style="background:#ffffff;width:720px;height:auto; border-bottom: 1px solid #eaeaea; padding-top: 20px; padding-bottom: 20px; padding-left: 27px;" valign="top" width="720">
<font color="#222222">
<img alt="IQAir" id="" name="" src="https://hosting.fyleio.com/40620/public/SanSerif_Desktop_01.jpg?c=1561752071758" style="border: 0px; display: block; width: 300px;" />
</font>
<p style="line-height: 19px; margin-top: 0px; padding-top: 10px;"><span style="font-size:14px;"><span style="font-family:arial,helvetica,sans-serif;"><span style="color:#666666;">Dear ${customer.firstName}, </span></span>
</span><br />
<br />
<br />
<span style="font-size:11.0pt"><span style="font-family:Calibri">It's our pleasure to inform you that your preliminary personalized perfect16 evaluation is almost ready. However, in order to be as accurate as possible we need the following missing information:<br />
<br />
<#if (transaction.custbody117)?has_content></#if><img src=${transaction.custbody135}#elseif<#if (transaction.custbody122)?has_content>img src=${transaction.custbody139}<#if (transaction.custbody118)?has_content>img src=${transaction.custbody140}<#if (transaction.custbody119)?has_content>img src=${transaction.custbody141}<#if (transaction.custbody120)?has_content>img src=${transaction.custbody142}>
<br />
<br />
<span style="font-size:11.0pt"><span style="font-family:Calibri">You may also contact our office for assistance with the missing information so we can continue the analysis of the project. </span></span><br />
<br />
<span style="font-size:11.0pt"><span style="font-family:Calibri"> </span></span><br />
<span style="font-size:11.0pt"><span style="font-family:Calibri">Please feel free to contact me if you have any questions.</span></span><br />
<br />
<br />
</span><br />
</p>
<p style="color: rgb(102, 102, 102); font-family: Arial, Helvetica-Neue, Helvetica, sans-serif; font-size: 8px; margin-bottom: 10px;">
<font color="#222222" face="Arial, Verdana, sans-serif"><span style="font-size: 12px;"> src="https://hosting.fyleio.com/40620/public/SanSerif_Desktop_01.jpg?c=1561752071758" style="background-color: rgb(255, 255, 255); border: 0px currentcolor; vertical-align: middle; width: 64px; height: 16px;" /> </span></font>
<span
style="color:#666666;">
<font face="Arial, Verdana, sans-serif"><span style="font-size: 12px;"><span style="font-size:10px;"><span style="font-family:arial,helvetica,sans-serif;"> <span style="background-color: rgb(255, 255, 255);">©</span> 2020 IQAir North America, Inc. All
rights reserved.</span>
</span>
</span>
</font>
</span>
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td valign="top"> </td>
</tr>
<!-- END content -->
</tbody>
</table>
Seems like you missed closing this tag: <span style="font-size:11.0pt"/>
Right now the system is printing the Product Labels and work fine but in wrong dimensions.
I need set width to 7cm and height to 4cm on QWEB report.
Where I can change the dimensions to print QWEB report?
I can't change the format to the print preferences because in a sheet can be many Products Labels.
This is my QWEB:
<?xml version="1.0"?>
<t t-name="product.report_productlabel">
<t t-call="report.html_container">
<div class="page">
<style>
</style>
<t t-foreach="docs" t-as="template">
<t t-foreach="template.product_variant_ids" t-as="product">
<div class="col-xs-6" style="padding:0;">
<table style="border-spacing:0;margin-bottom:0;height: 110px;border: 2px solid black;" class="table">
<thead>
<tr style="width: 3in;">
<td style="width: 2.63in;text-align: center;background-color: #fff;" colspan="2" class="col-xs-8 danger">
<strong style="text-transform: uppercase;">
<t t-esc="product.name"/>
</strong>
</td>
</tr>
</thead>
<tbody>
<tr style="width: 1in;">
<td style="text-align: center; border-top: 0px solid #fff; padding: 0px 5px 0px 5px;" class="col-xs-5">
<h4 style="border: 4px solid #ff4040;border-radius: 9px;background-color: #ffff00;padding: 10px 12px 10px 12px;font-size: 26px;margin-top: 0px;margin-bottom: 0px;">
<strong t-field="product.list_price" />
<strong>
<t t-esc="product.company_id.currency_id.symbol"/>
</strong>
</h4>
</td>
<td style="text-align: center;border-top: 0px solid #fff;padding: 0px 5px 0px 5px;" class="col-xs-7">
<img class="img-responsive"
t-att-src="'data:image/png;base64,%s' % res_company.logo"
style="background-color: #fff;margin-left: auto;margin-right: auto;width: auto;height: 16px;margin-bottom: 8px;"/>
<img class="img-responsive" t-if="product.barcode"
t-att-src="'/report/barcode/?type=%s&value=%s&width=%s&height=%s' % ('EAN13', product.barcode, 650, 200)"
style="height: 20px;width: 100%;"/>
<span style="">
<t t-esc="product.barcode"/>
</span>
</td>
</tr>
</tbody>
</table>
</div>
</t>
</t>
</div>
This the solution for the width of the table using the DPI of 90;
<table style="border-spacing:0;margin-bottom:0;height: 187px; width: 319px; border: 2px solid black;" class="table">
This is the QWEB template with the dimensions you need and I also scale the fonts and padding of the table elements to match the new width and height:
<?xml version="1.0"?>
<t t-name="product.report_productlabel">
<t t-call="report.html_container">
<div class="page">
<style>
</style>
<t t-foreach="docs" t-as="template">
<t t-foreach="template.product_variant_ids" t-as="product">
<div class="col-xs-6" style="padding:0;">
<table style="border-spacing:0;margin-bottom:0;height: 187px; width: 319px; border: 2px solid black;"
class="table">
<thead>
<tr style="width: 3in;">
<td style="width: 2.63in; font-size: 19px; text-align: left; background-color: #fff; margin-top: 10px;"
colspan="2"
class="col-xs-8 danger">
<strong style="text-transform: uppercase;">
<t t-esc="product.name"/>
</strong>
</td>
</tr>
</thead>
<tbody>
<tr style="width: 1in;">
<td width="50%"
style="text-align: center; border-top: 0px solid #fff; padding: 5px; position: relative;">
<div style="position:absolute; bottom: 20px; left: 0; padding-left: 5px; width: 100%">
<h4 style="border: 4px solid #ff4040; border-radius: 9px; background-color: #ffff00; padding: 10px 6px; font-size: 21px; margin: 0px ">
<strong t-field="product.list_price"/>
<strong>
<t t-esc="product.company_id.currency_id.symbol"/>
</strong>
</h4>
</div>
</td>
<td width="50%"
style="text-align: center;border-top: 0px solid #fff;padding: 5px; position: relative;">
<div style="position:absolute; bottom: 20px; padding-right: 5px;">
<img class="img-responsive"
t-att-src="'data:image/png;base64,%s' % res_company.logo"
style="background-color: #fff; margin-left: auto; margin-right: auto; width: auto; height: 35px; margin-bottom: 5px;"/>
<img class="img-responsive" t-if="product.barcode"
t-att-src="'/report/barcode/?type=%s&value=%s&width=%s&height=%s' % ('EAN13', product.barcode, 650, 200)"
style="height: 20px; width: 100%;"/>
<span style="font-size: 14px">
<t t-esc="product.barcode"/>
</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</t>
</t>
</div>
</t>
You might look at the report.paperformat model, which defines the format for the paper size. You find the default values in addons\report\views\report_paperformat_views.xml.
I have a requirement to create a report which shows occupancy of beds on a ward, for a date range specified by the user. The end result should look something like this:
.ritz .waffle a { color: inherit; }.ritz .waffle .s1{border-bottom:1px SOLID #000000;border-right:1px SOLID #000000;text-align:center;color:#000000;background-color:#d8d8d8;font-family:'Calibri',Arial;font-size:11pt;vertical-align:bottom;white-space:nowrap;direction:ltr;padding:0px 3px 0px 3px;}.ritz .waffle .s2{border-bottom:1px SOLID #000000;border-right:1px SOLID #000000;text-align:right;color:#000000;background-color:#d8d8d8;font-family:'Calibri',Arial;font-size:11pt;vertical-align:bottom;white-space:nowrap;direction:ltr;padding:0px 3px 0px 3px;}.ritz .waffle .s4{border-bottom:1px SOLID #000000;border-right:1px SOLID #000000;text-align:left;color:#000000;background-color:#d8d8d8;font-family:'Calibri',Arial;font-size:11pt;vertical-align:bottom;white-space:nowrap;direction:ltr;padding:0px 3px 0px 3px;}.ritz .waffle .s3{border-bottom:1px SOLID #000000;border-right:1px SOLID #000000;text-align:left;color:#000000;background-color:#ffffff;font-family:'Calibri',Arial;font-size:11pt;vertical-align:bottom;white-space:nowrap;direction:ltr;padding:0px 3px 0px 3px;}.ritz .waffle .s0{border-right:1px SOLID #000000;text-align:left;color:#000000;background-color:#ffffff;font-family:'Calibri',Arial;font-size:11pt;vertical-align:bottom;white-space:nowrap;direction:ltr;padding:0px 3px 0px 3px;}.ritz .waffle .s5{border-bottom:1px SOLID #000000;border-right:1px SOLID #000000;text-align:center;color:#006100;background-color:#c6efce;font-family:'Calibri',Arial;font-size:11pt;vertical-align:bottom;white-space:nowrap;direction:ltr;padding:0px 3px 0px 3px;}.ritz .waffle .s6{border-bottom:1px SOLID #000000;border-right:1px SOLID #000000;text-align:center;color:#9c6500;background-color:#ffeb9c;font-family:'Calibri',Arial;font-size:11pt;vertical-align:bottom;white-space:nowrap;direction:ltr;padding:0px 3px 0px 3px;}
<div class="ritz grid-container" dir="ltr"><table class="waffle no-grid" cellspacing="0" cellpadding="0"><thead><tr><th class="row-header freezebar-origin-ltr"></th><th id="850396799C0" style="width:60px" class="column-headers-background">A</th><th id="850396799C1" style="width:60px" class="column-headers-background">B</th><th id="850396799C2" style="width:60px" class="column-headers-background">C</th><th id="850396799C3" style="width:60px" class="column-headers-background">D</th><th id="850396799C4" style="width:60px" class="column-headers-background">E</th><th id="850396799C5" style="width:60px" class="column-headers-background">F</th><th id="850396799C6" style="width:60px" class="column-headers-background">G</th><th id="850396799C7" style="width:60px" class="column-headers-background">H</th><th id="850396799C8" style="width:60px" class="column-headers-background">I</th><th id="850396799C9" style="width:60px" class="column-headers-background">J</th><th id="850396799C10" style="width:60px" class="column-headers-background">K</th><th id="850396799C11" style="width:60px" class="column-headers-background">L</th><th id="850396799C12" style="width:60px" class="column-headers-background">M</th></tr></thead><tbody><tr style='height:19px;'><th id="850396799R0" style="height: 19px;" class="row-headers-background"><div class="row-header-wrapper" style="line-height: 19px;">1</div></th><td class="s0"></td><td class="s1" colspan="8">June</td><td class="s1" colspan="4">July</td></tr><tr style='height:19px;'><th id="850396799R1" style="height: 19px;" class="row-headers-background"><div class="row-header-wrapper" style="line-height: 19px;">2</div></th><td class="s0"></td><td class="s2">23</td><td class="s2">24</td><td class="s2">25</td><td class="s2">26</td><td class="s2">27</td><td class="s2">28</td><td class="s2">29</td><td class="s2">30</td><td class="s2">1</td><td class="s2">2</td><td class="s2">3</td><td class="s2">4</td></tr><tr style='height:19px;'><th id="850396799R2" style="height: 19px;" class="row-headers-background"><div class="row-header-wrapper" style="line-height: 19px;">3</div></th><td class="s3"></td><td class="s4">Mo</td><td class="s4">Tu</td><td class="s4">We</td><td class="s4">Th</td><td class="s4">Fr</td><td class="s4">Sa</td><td class="s4">SU</td><td class="s4">Mo</td><td class="s4">Tu</td><td class="s4">We</td><td class="s4">Th</td><td class="s4">Fr</td></tr><tr style='height:19px;'><th id="850396799R3" style="height: 19px;" class="row-headers-background"><div class="row-header-wrapper" style="line-height: 19px;">4</div></th><td class="s4">Bed 1</td><td class="s5" colspan="9">Sam Smith</td><td class="s3"></td><td class="s3"></td><td class="s3"></td></tr><tr style='height:19px;'><th id="850396799R4" style="height: 19px;" class="row-headers-background"><div class="row-header-wrapper" style="line-height: 19px;">5</div></th><td class="s4">Bed 2</td><td class="s6" colspan="11">Doris Grey (Planned</td><td class="s3"></td></tr><tr style='height:19px;'><th id="850396799R5" style="height: 19px;" class="row-headers-background"><div class="row-header-wrapper" style="line-height: 19px;">6</div></th><td class="s4">Bed 3</td><td class="s3"></td><td class="s3"></td><td class="s3"></td><td class="s3"></td><td class="s3"></td><td class="s3"></td><td class="s5" colspan="6">Suri Patel</td></tr></tbody></table></div>
The constraint is that I have to build the result page using a single XML document which is dynamically created from a single SQL query.
ritz .waffle a {
color: inherit;
}
.ritz .waffle .s0 {
border-bottom: 1px SOLID #000000;
border-right: 1px SOLID #000000;
text-align: center;
color: #000000;
background-color: #d8d8d8;
font-family: 'Calibri', Arial;
font-size: 11pt;
vertical-align: bottom;
white-space: nowrap;
direction: ltr;
padding: 0px 3px 0px 3px;
}
.ritz .waffle .s2 {
border-left: none;
text-align: center;
color: #000000;
background-color: #d8d8d8;
font-family: 'Calibri', Arial;
font-size: 11pt;
vertical-align: bottom;
white-space: nowrap;
direction: ltr;
padding: 0px 3px 0px 3px;
}
.ritz .waffle .s6 {
border-bottom: 1px SOLID #000000;
border-right: 1px SOLID #000000;
}
.ritz .waffle .s7 {
border-bottom: 1px SOLID #000000;
border-right: 1px SOLID #000000;
text-align: left;
color: #000000;
background-color: #ffffff;
font-family: 'Calibri', Arial;
font-size: 11pt;
vertical-align: bottom;
white-space: nowrap;
direction: ltr;
padding: 0px 3px 0px 3px;
}
.ritz .waffle .s4 {
border-right: none;
text-align: center;
color: #000000;
background-color: #ffffff;
font-family: 'Calibri', Arial;
font-size: 11pt;
vertical-align: bottom;
white-space: nowrap;
direction: ltr;
padding: 0px 3px 0px 3px;
}
.ritz .waffle .s5 {
border-left: none;
text-align: center;
color: #000000;
background-color: #ffffff;
font-family: 'Calibri', Arial;
font-size: 11pt;
vertical-align: bottom;
white-space: nowrap;
direction: ltr;
padding: 0px 3px 0px 3px;
}
.ritz .waffle .s1 {
border-right: none;
text-align: center;
color: #000000;
background-color: #d8d8d8;
font-family: 'Calibri', Arial;
font-size: 11pt;
vertical-align: bottom;
white-space: nowrap;
direction: ltr;
padding: 0px 3px 0px 3px;
}
.ritz .waffle .s3 {
border-bottom: 1px SOLID #000000;
border-right: 1px SOLID #000000;
text-align: center;
color: #000000;
background-color: #ffffff;
font-family: 'Calibri', Arial;
font-size: 11pt;
vertical-align: bottom;
white-space: nowrap;
direction: ltr;
padding: 0px 3px 0px 3px;
}
<div class="ritz grid-container" dir="ltr">
<table class="waffle" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th class="row-header freezebar-origin-ltr"></th>
<th id="2029419615C0" style="width:60px" class="column-headers-background">A</th>
<th id="2029419615C1" style="width:60px" class="column-headers-background">B</th>
<th id="2029419615C2" style="width:75px" class="column-headers-background">C</th>
<th id="2029419615C3" style="width:60px" class="column-headers-background">D</th>
<th id="2029419615C4" style="width:60px" class="column-headers-background">E</th>
<th id="2029419615C5" style="width:60px" class="column-headers-background">F</th>
<th id="2029419615C6" style="width:60px" class="column-headers-background">G</th>
<th id="2029419615C7" style="width:185px" class="column-headers-background">H</th>
<th id="2029419615C8" style="width:196px" class="column-headers-background">I</th>
<th id="2029419615C9" style="width:60px" class="column-headers-background">J</th>
<th id="2029419615C10" style="width:74px" class="column-headers-background">K</th>
<th id="2029419615C11" style="width:60px" class="column-headers-background">L</th>
</tr>
</thead>
<tbody>
<tr style='height:19px;'>
<th id="2029419615R0" style="height: 19px;" class="row-headers-background">
<div class="row-header-wrapper" style="line-height: 19px;">1</div>
</th>
<td class="s0">drank</td>
<td class="s0">wdate</td>
<td class="s0">mdate</td>
<td class="s0">ddate</td>
<td class="s0">mspan</td>
<td class="s1">dcol</td>
<td class="s2 softmerge">
<div class="softmerge-inner" style="width: 59px; left: -3px;">patientid</div>
</td>
<td class="s0">patientname</td>
<td class="s1">bedname</td>
<td class="s2 softmerge">
<div class="softmerge-inner" style="width: 59px; left: -3px;">bedstate</div>
</td>
<td class="s0">beddate</td>
<td class="s0">bedid</td>
</tr>
<tr style='height:19px;'>
<th id="2029419615R1" style="height: 19px;" class="row-headers-background">
<div class="row-header-wrapper" style="line-height: 19px;">2</div>
</th>
<td class="s3">0</td>
<td class="s3">Mo</td>
<td class="s3">June</td>
<td class="s3">23</td>
<td class="s3">30</td>
<td class="s3">1</td>
<td class="s3">623681</td>
<td class="s3">Sam Smith</td>
<td class="s4">Bed 1</td>
<td class="s5 softmerge">
<div class="softmerge-inner" style="width: 59px; left: -3px;">Occupied</div>
</td>
<td class="s3">6/23/2016</td>
<td class="s3">84</td>
</tr>
<tr style='height:19px;'>
<th id="2029419615R2" style="height: 19px;" class="row-headers-background">
<div class="row-header-wrapper" style="line-height: 19px;">3</div>
</th>
<td class="s3">0</td>
<td class="s3">Mo</td>
<td class="s3">June</td>
<td class="s3">23</td>
<td class="s3">30</td>
<td class="s3">2</td>
<td class="s3">570853</td>
<td class="s3">Doris Grey</td>
<td class="s3">Bed 2</td>
<td class="s3">Planned</td>
<td class="s3">6/23/2016</td>
<td class="s3">85</td>
</tr>
<tr style='height:19px;'>
<th id="2029419615R3" style="height: 19px;" class="row-headers-background">
<div class="row-header-wrapper" style="line-height: 19px;">4</div>
</th>
<td class="s3">0</td>
<td class="s3">Mo</td>
<td class="s3">June</td>
<td class="s3">23</td>
<td class="s3">30</td>
<td class="s3">0</td>
<td class="s6"></td>
<td class="s3"></td>
<td class="s3">Bed 3</td>
<td class="s3">NULL</td>
<td class="s3">6/23/2016</td>
<td class="s3">86</td>
</tr>
<tr style='height:19px;'>
<th id="2029419615R4" style="height: 19px;" class="row-headers-background">
<div class="row-header-wrapper" style="line-height: 19px;">5</div>
</th>
<td class="s3">1</td>
<td class="s3">Tu</td>
<td class="s3">June</td>
<td class="s3">24</td>
<td class="s3">30</td>
<td class="s3">1</td>
<td class="s3">623681</td>
<td class="s3">Sam Smith</td>
<td class="s4">Bed 1</td>
<td class="s5 softmerge">
<div class="softmerge-inner" style="width: 59px; left: -3px;">Occupied</div>
</td>
<td class="s3">6/24/2016</td>
<td class="s3">84</td>
</tr>
<tr style='height:19px;'>
<th id="2029419615R5" style="height: 19px;" class="row-headers-background">
<div class="row-header-wrapper" style="line-height: 19px;">6</div>
</th>
<td class="s3">1</td>
<td class="s3">Tu</td>
<td class="s3">June</td>
<td class="s3">24</td>
<td class="s3">30</td>
<td class="s3">2</td>
<td class="s3">570853</td>
<td class="s3">Doris Grey</td>
<td class="s4">Bed 2</td>
<td class="s5 softmerge">
<div class="softmerge-inner" style="width: 59px; left: -3px;">Occupied</div>
</td>
<td class="s3">6/24/2016</td>
<td class="s3">85</td>
</tr>
<tr style='height:19px;'>
<th id="2029419615R6" style="height: 19px;" class="row-headers-background">
<div class="row-header-wrapper" style="line-height: 19px;">7</div>
</th>
<td class="s3">1</td>
<td class="s3">Tu</td>
<td class="s3">June</td>
<td class="s3">24</td>
<td class="s3">30</td>
<td class="s3">0</td>
<td class="s6"></td>
<td class="s3"></td>
<td class="s3">Bed 3</td>
<td class="s3">NULL</td>
<td class="s3">6/24/2016</td>
<td class="s3">86</td>
</tr>
<tr style='height:19px;'>
<th id="2029419615R7" style="height: 19px;" class="row-headers-background">
<div class="row-header-wrapper" style="line-height: 19px;">8</div>
</th>
<td class="s3">2</td>
<td class="s3">We</td>
<td class="s3">June</td>
<td class="s3">25</td>
<td class="s3">30</td>
<td class="s3">1</td>
<td class="s3">623681</td>
<td class="s3">Sam Smith</td>
<td class="s4">Bed 1</td>
<td class="s5 softmerge">
<div class="softmerge-inner" style="width: 59px; left: -3px;">Occupied</div>
</td>
<td class="s3">6/25/2016</td>
<td class="s3">84</td>
</tr>
<tr style='height:19px;'>
<th id="2029419615R8" style="height: 19px;" class="row-headers-background">
<div class="row-header-wrapper" style="line-height: 19px;">9</div>
</th>
<td class="s3">2</td>
<td class="s3">We</td>
<td class="s3">June</td>
<td class="s3">25</td>
<td class="s3">30</td>
<td class="s3">2</td>
<td class="s3">570853</td>
<td class="s3">Doris Grey</td>
<td class="s4">Bed 2</td>
<td class="s5 softmerge">
<div class="softmerge-inner" style="width: 59px; left: -3px;">Occupied</div>
</td>
<td class="s3">6/25/2016</td>
<td class="s3">85</td>
</tr>
<tr style='height:19px;'>
<th id="2029419615R9" style="height: 19px;" class="row-headers-background">
<div class="row-header-wrapper" style="line-height: 19px;">10</div>
</th>
<td class="s3">2</td>
<td class="s3">We</td>
<td class="s3">June</td>
<td class="s3">25</td>
<td class="s3">30</td>
<td class="s3">0</td>
<td class="s6"></td>
<td class="s3"></td>
<td class="s3">Bed 3</td>
<td class="s3">NULL</td>
<td class="s3">6/25/2016</td>
<td class="s3">86</td>
</tr>
<tr style='height:19px;'>
<th id="2029419615R10" style="height: 19px;" class="row-headers-background">
<div class="row-header-wrapper" style="line-height: 19px;">11</div>
</th>
<td class="s3">3</td>
<td class="s3">Th</td>
<td class="s3">June</td>
<td class="s3">26</td>
<td class="s3">30</td>
<td class="s3">1</td>
<td class="s3">623681</td>
<td class="s3">Sam Smith</td>
<td class="s4">Bed 1</td>
<td class="s5 softmerge">
<div class="softmerge-inner" style="width: 59px; left: -3px;">Occupied</div>
</td>
<td class="s3">6/26/2016</td>
<td class="s3">84</td>
</tr>
<tr style='height:19px;'>
<th id="2029419615R11" style="height: 19px;" class="row-headers-background">
<div class="row-header-wrapper" style="line-height: 19px;">12</div>
</th>
<td class="s3">3</td>
<td class="s3">Th</td>
<td class="s3">June</td>
<td class="s3">26</td>
<td class="s3">30</td>
<td class="s3">2</td>
<td class="s3">570853</td>
<td class="s3">Doris Grey</td>
<td class="s4">Bed 2</td>
<td class="s5 softmerge">
<div class="softmerge-inner" style="width: 59px; left: -3px;">Occupied</div>
</td>
<td class="s3">6/26/2016</td>
<td class="s3">85</td>
</tr>
<tr style='height:19px;'>
<th id="2029419615R12" style="height: 19px;" class="row-headers-background">
<div class="row-header-wrapper" style="line-height: 19px;">13</div>
</th>
<td class="s3">3</td>
<td class="s3">Th</td>
<td class="s3">June</td>
<td class="s3">26</td>
<td class="s3">30</td>
<td class="s3">0</td>
<td class="s7"></td>
<td class="s3"></td>
<td class="s3">Bed 3</td>
<td class="s3">NULL</td>
<td class="s3">6/26/2016</td>
<td class="s3">86</td>
</tr>
</tbody>
</table>
</div>
The XML is then in the style
QueryResults ReportName="BedStateGraphical" ReportID="160">
<FieldNames>
<Field name="drank"/>
<Field name="wdate"/>
<Field name="mdate"/>
<Field name="ddate"/>
<Field name="mspan"/>
<Field name="dcol"/>
<Field name="PatientID"/>
<Field name="patientname"/>
<Field name="bedname"/>
<Field name="bedstate"/>
<Field name="beddate"/>
<Field name="bedid"/>
</FieldNames>
<Data RecordCount="112">
<DataRow index="1">
<drank>0</drank>
<wdate>Mo</wdate>
<mdate>June</mdate>
<ddate>23</ddate>
<mspan>9</mspan>
<dcol>1</dcol>
<PatientID>623681</PatientID>
<patientname>Sam Smith</patientname>
<bedname>Bed 1</bedname>
<bedstate>Occupied</bedstate>
<beddate>23/07/2016 00:00:00</beddate>
<bedid>84</bedid>
</DataRow>
<DataRow index="2">
<drank>0</drank>
<wdate>Mo</wdate>
<mdate>June</mdate>
<ddate>23</ddate>
<mspan>11</mspan>
<dcol>1</dcol>
<PatientID>570853</PatientID>
<patientname>Doris Grey</patientname>
<bedname>Bed 2</bedname>
<bedstate>Planned</bedstate>
<beddate>23/07/2016 00:00:00</beddate>
<bedid>85</bedid>
</DataRow>
drank was intended as a ranking column to give me each column, mspan as a calculation of a colspan for that patient. I have full control over the query and can redesign this as needed. Essentially for each client I get a start date and an end date, bed id, and a status.
I started with a fairly simple piece of XSLT:
<xsl:key name="drank" match="//DataRow/drank/text()" use="." />
<xsl:template match="QueryResults">
<div style="margin: 2px; ">
<div style="width: 900px; background-color: #29A2CE; color: #FFFFFF; padding: 5px; font-size: large; font-weight: bold">
Carenotes Bed State Report </div>
<table style="width: 900px;padding-left:20px;">
<tr>
<xsl:for-each select="//DataRow/drank/text()[generate-id() = generate-id(key('drank',.)[1])]">
<td>
<xsl:value-of select="//DataRow/ddate" />
</td>
</xsl:for-each>
</tr>
</table>
This gives me the right number of columns, but the ddate selected is always the same day of the week.
XSL isn't my strong point, and I am limited by the application to V1 standards.
Can anyone give me some help / pointers / advice / solution?
UPDATE:
Thanks to Martin, I have now been able to create the framework for the table. The next challenge is to populate the cells with the patient data. Currently I am trying this:
<table style="width: 900px;padding-left:20px;">
<tr>
<td>
</td>
<xsl:for-each select="//DataRow[generate-id() = generate-id(key('mdate',mdate)[1])]">
<td>
<xsl:attribute name="colspan">
<xsl:value-of select="mspan" />
</xsl:attribute>
<xsl:value-of select="mdate" />
</td>
</xsl:for-each>
</tr>
<tr>
<td>
</td>
<xsl:for-each select="//DataRow[generate-id() = generate-id(key('drank',drank)[1])]">
<td>
<xsl:value-of select="ddate" />
</td>
</xsl:for-each>
</tr>
<xsl:for-each select="//DataRow[generate-id() = generate-id(key('bedid',bedid)[1])]">
<tr>
<td>
<xsl:value-of select="bedname" />
</td>
<xsl:for-each select="//DataRow[generate-id() = generate-id(key('drank',drank)[1])]">
<td>
<xsl:value-of select="dcol" />
</td>
</xsl:for-each>
</tr>
</xsl:for-each>
</table>
This is based on 3 keys:
<xsl:key name="drank" match="DataRow" use="drank" />
<xsl:key name="mdate" match="DataRow" use="mdate" />
<xsl:key name="bedid" match="DataRow" use="bedid" />
However the loop that gets the value of dcol is only returning zeros, rather than a mix of 1s and zeros to represent which days are booked. Of course, what I really want to do, is to colspan across the dates of a booking so that I can put in the patient name and other data, as well as hyperlinking to the booking document.
My brain is running out of ideas for this part however!
Use a relative path, so replace <xsl:value-of select="//DataRow/ddate" /> with <xsl:value-of select="../../ddate"/>.
I would probably restructure the key to <xsl:key name="drank" match="DataRow" use="drank" /> and then the grouping to
<xsl:template match="QueryResults">
<div style="margin: 2px; ">
<div style="width: 900px; background-color: #29A2CE; color: #FFFFFF; padding: 5px; font-size: large; font-weight: bold">
Carenotes Bed State Report </div>
<table style="width: 900px;padding-left:20px;">
<tr>
<xsl:for-each select="//DataRow[generate-id() = generate-id(key('drank',drank)[1])]">
<td>
<xsl:value-of select="ddate" />
</td>
</xsl:for-each>
</tr>
</table>
I created a new report from scratch using this guide: http://odoo.guide/report-design-workshop/
My Problem:
If I have a lot of products on my report the last part including total amount etc. is not shown. I would like to have a kind of page break or at least a second pdf page.
Note: If I use the basic odoo report I have a second page in the pdf but it is shown as this:
http://fs5.directupload.net/images/150924/bf9lsx6u.jpg
Any other ideas are welcome!
Edit:
In the basic report using the page-break tag works realy fine but it didnt affect my own report design at all.
My Code trying to use the page-break tag:
account.Name_report
<?xml version="1.0"?>
<t t-name="account.Name_report">
<t t-call="report.Name_layout">
<t t-foreach="docs" t-as="o"> <!-- this makes the context model data accessible throughout the variable "o" -->
<div class="page">
<div style="color:white">.</div><!--as reference for fixed positions-->
<img src="/document/static/img/Briefpapier_rechnung.svg" style="position: fixed; left:-20px;top:0px;z-index:-100"/>
<div style="color: white;
font-size: 20px;
z-index: 1;
position: fixed;
left: 390px;
top: 36px;
font-size: 38px;">Rechnung
</div>
<!--Adresse-->
<div style="color: black;
font-size: -1px;
z-index: 1;
position: fixed;
top: 138px;
left: 60px;
font-size: 12px;">
<span style="text-decoration: underline;">Adress Adress Adress</span><br/>
<address t-field="o.partner_id" t-field-options="{"widget": "contact", "fields": ["address", "name"], "no_marker": true}"/><br/>
</div>
<!--Kunden Nr/Datum-->
<div style="color: black;
font-size: -1px;
z-index: 1;
position: fixed;
left: 450px;
top: 255px;
font-size: 12px;">
<span>Referenz Nr.:</span><br/>
<span>Datum:</span>
</div>
<div style="color: black;
font-size: -1px;
z-index: 1;
position: fixed;
top: 255px;
right: 0px;
font-size: 12px;
text-align: right;">
<span t-field="o.reference"/><br/>
<span t-field="o.date_invoice"></span>
</div>
<!--Rechnung Nr.-->
<div style="color: black;
font-size: 20px;
z-index: 1;
position: fixed;
left: 0px;
top: 335px;
font-size: 16px;
font-weight: bold;">
<span t-if="o.type == 'out_invoice' and (o.state == 'open' or o.state == 'paid')">Rechnung</span>
<span t-if="o.type == 'out_invoice' and o.state == 'proforma2'">PRO-FORMA</span>
<span t-if="o.type == 'out_invoice' and o.state == 'draft'">Rechnungsentwurf</span>
<span t-if="o.type == 'out_invoice' and o.state == 'cancel'">abgebrochene Rechnung</span>
<span t-if="o.type == 'out_refund'">Erstattung</span>
<span t-if="o.type == 'in_refund'">Lieferant Rückerstattung</span>
<span t-if="o.type == 'in_invoice'">Lieferant Rechnung</span>
<span t-field="o.number"/>
</div>
**<p style="page-break-before:always;"> </p>**
<!--page-break test-->
<div class="row" style="top:400px; position: fixed;">
<!--TABLE-->
<table class="table table-condensed">
<thead>
<tr>
<th>Beschreibung</th>
<th>Menge</th>
<th class="text-right">Einzelpreis EUR</th>
<th class="text-right" groups="sale.group_discount_per_so_line">Rabatt (%)</th>
<th class="text-right">Steuern</th>
<th class="text-center">Gesamtpreis EUR</th>
</tr>
</thead>
<tbody class="invoice_tbody">
<tr t-foreach="o.invoice_line" t-as="l">
<td><span t-field="l.name"/></td>
<td>
<span t-field="l.quantity"/>
<span t-field="l.uos_id" groups="product.group_uom"/>
</td>
<td class="text-right">
<span t-field="l.price_unit"/>
</td>
<td class="text-right" groups="sale.group_discount_per_so_line"><span t-field="l.discount"/></td>
<td class="text-right">
<span t-esc="', '.join(map(lambda x: x.name, l.invoice_line_tax_id))"/>
</td>
<td class="text-right">
<span t-field="l.price_subtotal" t-field-options="{"widget": "monetary", "display_currency": "o.currency_id"}"/>
</td>
</tr>
</tbody>
</table>
<div class="row">
<div class="col-xs-4 pull-right">
<table class="table table-condensed">
<tr class="border-black">
<td><strong>Gesamt Netto</strong></td>
<td class="text-right">
<span t-field="o.amount_untaxed" t-field-options="{"widget": "monetary", "display_currency": "o.currency_id"}"/>
</td>
</tr>
<tr>
<td>Steuern</td>
<td class="text-right">
<span t-field="o.amount_tax" t-field-options="{"widget": "monetary", "display_currency": "o.currency_id"}"/>
</td>
</tr>
<tr class="border-black">
<td><strong>Gesamtbetrag</strong></td>
<td class="text-right">
<span t-field="o.amount_total" t-field-options="{"widget": "monetary", "display_currency": "o.currency_id"}"/>
</td>
</tr>
</table>
</div>
</div>
<div class="row" t-if="o.tax_line">
<div class="col-xs-6">
<table class="table table-condensed">
<thead>
<tr>
<th>Steuern</th>
<th class="text-right">Steuergrundbetrag</th>
<th class="text-right">Betrag</th>
</tr>
</thead>
<tbody>
<tr t-foreach="o.tax_line" t-as="t">
<td><span t-field="t.name"/></td>
<td class="text-right">
<span t-field="t.base" t-field-options="{"widget": "monetary", "display_currency": "o.currency_id"}"/>
</td>
<td class="text-right">
<span t-field="t.amount" t-field-options="{"widget": "monetary", "display_currency": "o.currency_id"}"/>
</td>
</tr>
</tbody>
</table>
<span>Zahlbar innerhalb 14 Tagen ohne Abzug</span>
</div>
</div>
</div>
</div>
</t>
</t>
</t>
There are a few page break types that can be used for Qweb reports.
You can use one of these tags:
<p style="page-break-before:always;"> </p> (most reports use this type)
<p style="page-break-after:always"></p>
<div style="page-break-after: auto;"><span style="display: none;"> </span></div>
<p style="page-break-inside: avoid"></p>
<div style="page-break-inside: auto"></div>