Odoo Help

Welcome!

This community is for beginners and experts willing to share their Odoo knowledge. It's not a forum to discuss ideas, but a knowledge base of questions and their answers.

0

Problems adapting QWeb Report (Sale/Invoice) to Company Layout

By
Sven Anders
on 2/24/15, 5:53 AM 3,097 views

Hello!

I need some help adapting the the Invoice/Sale reports (using the "report.external_layout_header" view) to our company layout. I'm using some adapted QWeb reports which I downloaded from a GitHub archive and they are generally doing fine.

Our business paper shows a logo on the top right, a thin line going from the left to the right of the paper (behind the logo) and a colored bar of 1.3cm on the right of the paper (going from top to the bottom).

I experimented with the following code (in "report.external_layout_header"):

<?xml version="1.0"?>

<t t-name="report.external_layout_header">

<div class="header">

<div class="row zero_min_height">

<!-- line under the logo -->

<div style="position: absolute; top: 2.8cm; left: 0cm; right: 0cm; width: 100%; border-bottom: solid 1px black;"> </div> <!-- right margin -->

<div style="position: absolute; top:0cm; left:19.6cm; right:0cm; height:100%; background-color: #FFBA00;"> </div> <div>

<img t-if="company.logo" t-att-src="'data:image/png;base64,%s' % company.logo" style="max-height: 3cm; margin-right:0.25cm; margin-top: 0.5cm; float:right;" class="text-right"/>

</div>

</div>

</t>

 

But it does not work...

I have several problems:

  1. The line does not go from the very left to the the very right (about 1cm is truncated at each end).
  2. The line is over (and not behind) the logo.
  3. The colored bar does not go over the whole document, it is too wide in HTML and does appear on the PDF.

Previously I've done it in RML and there it worked fine...

Maybe I'm doing it wrong in QWeb, so any recommendations and tips are welcome!

Has anybody done something similar in QWeb already?

 

 

 

 

1
Rucha Dave (rda)
On 2/25/15, 4:49 AM

For problem 1 , Set left-margin and right-margin to zero in paperformat of perticular report. by doing this, this issue can be solved..

For problem 2 , You need to add " margin-top " in a style attribute of line div. 

For problem 3 , I can't understand your point.

Thanks for the answer. Regarding problem 2: I used the wrong term. I meant "behind" the logo not "over". I solved this using the "z-index" style attribute. Regarding problem 3: I need a colored, orange bar over the whole page, going from the very top to the very bottom of the page.

Sven Anders
on 2/25/15, 8:07 AM
0
Aboura Nacim
On 7/25/16, 6:32 AM

SVG work fine for me, witout xmlns

0
Sven Anders
On 2/26/15, 4:01 PM

I'm still struggling with this problem.

It was really easy to accomplish this with RLM (it only took me 2 hours learning, setting and optimizing the layout). But it seems almost impossible to do this in QWeb! The HTML output is problematic, because everything is so dynamic and anything I tried is not shown in PDF (using wkhtmltopdf).

I tried several things. I changed the "report.style" CSS and added to the "body" the following:

1. Using gradients:
   background: -webkit-gradient(left top, right top, color-stop(0%, #ffffff), color-stop(76%, #ffffff), color-stop(77%, #ffffff), color-stop(77%, #ffba00), color-stop(100%, #ffba00));
   background: linear-gradient(to right, #ffffff 0%, #ffffff 76%, #ffffff 77%, #ffba00 77%, #ffba00 100%);

I see something in HTML but nothing in PDF. The specification of the width is problematic.

2. Using a background image (full width):

   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACbAAAAAQAgMAAACwiCOmAAAACVBMVEUAAAD/ugD///89bnSrAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAALiMAAC4jAXilP3YAAAAHdElNRQffAhoOFwaMpuxoAAAAHWlUWHRDb21tZW50AAAAAABDcmVhdGVkIHdpdGggR0lNUGQuZQcAAABASURBVGje7dKhEQAACAOxLsn+q6BrcLhkhL9PoM0XaTEbZsNsZsNsmM1smA2zYTazYTbMZjbMhtkwm9kwG2Y7LEyZ2OBCemJeAAAAAElFTkSuQmCC');
   background-repeat: repeat-y;
   background-size: 100% auto;

The colored bar is too wide in HTML and I see nothing at all in PDF.

3. Using a background image (only the colored bar):

    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACbAAAAAQAgMAAACwiCOmAAAACVBMVEUAAAD/ugD///89bnSrAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAALiMAAC4jAXilP3YAAAAHdElNRQffAhoOFwaMpuxoAAAAHWlUWHRDb21tZW50AAAAAABDcmVhdGVkIHdpdGggR0lNUGQuZQcAAABASURBVGje7dKhEQAACAOxLsn+q6BrcLhkhL9PoM0XaTEbZsNsZsNsmM1smA2zYTazYTbMZjbMhtkwm9kwG2Y7LEyZ2OBCemJeAAAAAElFTkSuQmCC');
    background-repeat: repeat-y;
    background-size: 1.3cm auto;
    background-position: right top;

 In HTML this is the best from the layout, but I do not see anything at all in PDF.

4. Using a complete background image in SVG:

   background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMTBtbSIgaGVpZ2h0PSIyOTdtbSI+CiA8cGF0aCBzdHlsZT0iZmlsbDpub25lO2ZpbGwtcnVsZTpldmVub2RkO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDoxcHg7c3Ryb2tlLWxpbmVjYXA6YnV0dDtzdHJva2UtbGluZWpvaW46bWl0ZXI7c3Ryb2tlLW9wYWNpdHk6MSIgZD0ibSAwLDEwMi4yNTU5MSA3NDQuMDk0NDksMCIgLz4KIDxyZWN0IHN0eWxlPSJmaWxsOiNmZmJhMDA7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmUiIHdpZHRoPSI0OS42NTIwNDIiIGhlaWdodD0iMTA1Mi4xMzIxIiB4PSI2OTQuMzM5NiIgeT0iMC4xMzgyNDc5MSIgcnk9IjAiIC8+Cjwvc3ZnPgo=);
      background-origin:border-box;
      background-size: cover;

    This SVG has the following content:
     <svg xmlns="http://www.w3.org/2000/svg" width="210mm" height="297mm">
      <path style="fill:none;fill-rule:evenodd;stroke:black;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="m 0,102.25591 744.09449,0" />
      <rect style="fill:#ffba00;fill-opacity:1;stroke:none" width="49.652042" height="1052.1321" x="694.3396" y="0.13824791" ry="0" />
     </svg>

You can see the line and colored bar in HTMl and it's almost correct, if you set the correct width of the window. In PDF I see nothing at all.

Does anybody have any other ideas? It would be so easy, if the paper format dialog would allow to give a background image for the whole paper (maybe as PNG/SVG/PDF).

0
OdooFan
On 3/4/15, 11:18 AM

Hi Sven, I think you should add "z-index:-1; " to your div style of that line behind the logo. I also used "overflow: visible;" to solve the same kind of problem in my Qweb external_layout_footer. See below for a part of my code (I added an extra image to our company settings):

<!-- footer image-->
     <div style="z-index:-1;position: absolute; overflow: visible; padding-top: 5px;" >
         <image align="left"  t-if="company.x_report_iso_logo" t-att-src="'data:image/png;base64,%s' % company.x_report_iso_logo" width="65px"  />
     </div>

<!--footer text-->

    <div class="text-center" style="border-top: 1px solid #007F64; font-size: 11px; padding-top: 5px; padding-left: 60px; padding-right: 60px;">

               <t t-if="company.custom_footer">
                <span t-raw="company.rml_footer"/>
               </t>

 

Your Answer

Please try to give a substantial answer. If you wanted to comment on the question or answer, just use the commenting tool. Please remember that you can always revise your answers - no need to answer the same question twice. Also, please don't forget to vote - it really helps to select the best questions and answers!

About This Community

This community is for professionals and enthusiasts of our products and services. Read Guidelines

Question tools

1 follower(s)

Stats

Asked: 2/24/15, 5:53 AM
Seen: 3097 times
Last updated: 7/25/16, 6:32 AM