Odoo - QWeb Report Design - how to create a brand new QWeb report ?

Zarshed Ali
Zarshed Ali
5000
| 2 1 2
Asked on 2/17/15, 5:39 AM
0
vote
8537 Views

Usually you are starting with a mockup you want to implement. Therefore you have to subdivide it into four views:

 

STEP#1 – creating four views

Goto Settings > Technical > User Interface > Views and create:

another_report

another_report who is generating content and calling another_layout

another_layout

another_layout who is calling the header and footer

another_layout_header

another_layout_header for the header

another_layout_footer

another_layout_footer for the footer

Generally the t-call directive loads sub-templates inside a view architecture. But these sub-templates of course can only be found when they are identifiable by the Odoo system. That’s why we need to create an external identifier for each of them.

STEP#2 – creating four identifiers

Goto Settings > Technical > Sequences & Identifiers > External Identifiers and create:

identifier_another_report identifier_another_layout identifier_another_layout_header identifier_another_layout_footerPlease note: the Record ID is the id you see in the browser’s address bar when you open a view (s.th. like “…/web#id=603&view_type=…”)

STEP#3 – implementing the report

Goto Settings > Technical > Reports > Reports and create a report with these mandatory fields filled out:
another_invoice_report
Please note: Odoo recognizes account.another_report as the QWeb view from STEP #1 because we created already an external identifier in STEP #2. So it is automatically associated to this report.

To gain more flexibility create your own paper format under Settings > Technical > Reports > Paper Format and create a format like this and associate it to our new Another Report:
another_paper

Go now to Settings > Technical > Actions > Action bindings and create a new action binding to generate another item in the print drop down menu for invoices:
another_report_action_binding
Please note: the Action Reference contains the id of the report you created in this step (you can find the id in the address bar of your browser while the report is shown – should be s.th. like “…/web#id=331&view_type=…”)

print_another_reportFrom now on you should be able to choose your new report design in the printing menu for any invoice in Odoo.
This makes it very easy to test our layout during the next steps!

Test it now and Another Report will currently print a blank page. So it’s time to start with the view architectures!

STEP#4 – header architecture

Goto Settings > Technical > User Interface > Views and edit the another_layout_header view you created in STEP#1:

    <?xml version="1.0"?>
    <t t-name="report.another_layout_header">
        <div class="header">
            <div class="row">
                <div class="col-xs-4 col-xs-offset-8">
                    <img src='/document/static/img/company_logo.png'/>
                </div>
            </div>
        </div>
    </t>

Please note: for storing the image file we used a path known to Odoo. You can choose any path of a module folder – even when the app is not installed.

The header consists of one row only. The image width is a third of the page’s width and positioned on the right edge.

Our report header – so far…report_design_workshop_header

STEP#5 – footer architecture

According to our invoice mockup we should try to create an overall layout structure. That’s why we are conforming the footer with the header by subdividing with same proportions:

report_footer_subdivide
The footer has a right column with a width of a third of the page’s width – same as the header with its logo on the right. We subdivide the wished information into three rows.

So goto Settings > Technical > User Interface > Views now and edit theanother_layout_footer view you created in STEP#1:

<?xml version="1.0"?>
      <t t-name="report.another_layout_footer">
         <div class="footer">
            
            <!-- FIRST ROW -->
            <div class="row"> 
                <div class="col-xs-8">
                   <strong>General Information:</strong><br/>
                   Line 1<br/>
                   Line 2<br/>
                   Line 3<br/>
                   Line 4
                </div>
                <div class="col-xs-4" style="text-align:right">
                   <strong>Bank Details:</strong><br/>
                   Line 1<br/>
                   Line 2<br/>
                   Line 3<br/>
                   Line 4
               </div>
            </div>

            <!-- SECOND ROW -->
            <div class="row mt16 mb16" style="text-align:center">                              
            <strong>THANK YOU FOR YOUR BUSINESS</strong>
            </div>
            <!-- THIRD ROW -->
            <div class="row" style="background-color:#568eff;color:#ffffff;">
               <div class="col-xs-8">
                  <strong>Company Tag Line</strong><br/>
                  Line 1<br/>
                  Line 2<br/>
                  Line 3
               </div>
               <div class="col-xs-4" style="text-align:right">
                  Page <span class="page"/> of <span class="topage"/>
               </div>
            </div>
         </div>
      </t>

Please note: the two span tags with the classes “page” and “topage” will be replaced by the given page numbers via javascript during the rendering.

The result should look like this:
report_design_workshop_footer

STEP#6 – report architecture

Let’s subdivide the main part of the report with same proportions (2/3 and 1/3 horizontally) as we did with the header and footer:
invoice_main_subdivided
As you can see – we need at least six rows.

Goto Settings > Technical > User Interface > Views and edit the another_report view you created in STEP#1:

<?xml version="1.0"?>
<t t-name="account.another_report">
   <t t-call="report.another_layout">
   <t t-foreach="docs" t-as="o"> <!-- this makes the context model data accessible throughout the variable "o" -->
      <div class="page"> 

         <!-- FIRST ROW -->
         <div class="row">
            <div class="col-xs-12" style="background-color:#568eff;border: 1px solid #568eff;color:#ffffff;">
               <h3>INVOICE</h3>
            </div>
         </div>

         <!-- SECOND ROW -->
         <div class="row">
            <div class="col-xs-8" style="border-left:1px solid #568eff;">
               <strong>BILL TO:</strong><br/> 
               Line 1<br/>
               Line 2<br/>
               Line 3 
            </div>
            <div class="col-xs-2" style="text-align:right;border-left:1px solid #568eff;">
               <strong>Invoice No.:</strong><br/>
               <strong>Invoice Date:</strong><br/>
               <strong>Due Date:</strong><br/>
               <strong>PO No.:</strong>
            </div>
            <div class="col-xs-2" style="border-right:1px solid #568eff;">
               <span t-field="o.number"/><br/><!-- example of how to access field values -->
               Line 2<br/>
               Line 3<br/>
               Line 4
           </div>
        </div>

        <!-- THIRD ROW -->
        <div class="row">
           <div class="col-xs-12" style="border:1px solid #568eff;">
              <strong>PROJECT:</strong><br/>
              Line 1 
           </div>
        </div>

        <!-- FOURTH ROW -->
        <div class="row mt32" style="background-color:#568eff;border: 1px solid #568eff;color:#ffffff;">
           <div class="col-xs-1">NO.</div>
           <div class="col-xs-7">DESCRIPTION</div>
           <div class="col-xs-1">UOM</div>
           <div class="col-xs-1">QTY</div>
           <div class="col-xs-1">UNIT RATE</div>
           <div class="col-xs-1">AMOUNT</div>
        </div>

        <!-- FIFTH ROW -->
        <div class="row">
           <div class="col-xs-1" style="border-left:1px solid #568eff;">1.</div>
           <div class="col-xs-7" style="border-left:1px solid #568eff;">Line 1 Item Description</div>
           <div class="col-xs-1" style="border-left:1px solid #568eff;">100.00</div>
           <div class="col-xs-1" style="border-left:1px solid #568eff;">1</div>
           <div class="col-xs-1" style="border-left:1px solid #568eff;">100.00</div>
           <div class="col-xs-1" style="border-left:1px solid #568eff;border-right:1px solid #568eff;">100.00</div>
        </div>

        <!-- SIXTH ROW -->
        <div class="row">
           <div class="col-xs-10" style="text-align:right;border: 1px solid #568eff;">
              <strong>Total:</strong>
           </div>
           <div class="col-xs-2" style="text-align:right;border: 1px solid #568eff;border-left:0px;">
              <strong>100.00</strong>
           </div>
        </div>
     </div>
  </t>
  </t>
</t>

The complete report should now look like this:
report_complete

Please note: depending of your wkhtmltopdf version you now may have to adjust a little bit the used CSS styles.

Zarshed Ali
Zarshed Ali
5000
| 2 1 2
Answered on 2/17/15, 5:42 AM
0
vote

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!

Ask a Question

Keep Informed

About This Forum

This forum is for HiTechnologia Employees & just Odoo general knowledge purpose only.

Read Guidelines

Question tools

2 follower(s)

Stats

Asked: 2/17/15, 5:39 AM
Seen: 8537 times
Last updated: 2/17/15, 5:46 AM