Tutorial 2 Stage 2 - Creating a PDF Invoice

In this tutorial you will learn how to :-

  • Understand how styling defaults are set up in Reportico
  • Place and style page headers and footers within a PDF document
  • Place and style group headers and footers within a PDF document

Preparing to Run the Report

Before we add anything, its a good idea to run the report as a PDF document. You will see the default look of a PDF document. As you can see the PDF shows the report title in white on black, adds a time page header, a page number at the bottom. It also has a styling for report columns and rows. In this tuturial we will override these defaults in the report designer.

Styling Defaults

Before designing our invoice lets look at how the default styles above are set. If you are not a PHP coder you can skip to further below, as setting default stylings require understanding of PHP and CSS

In the reportico folder there is a file called reportico_defaults.php which is responsible for setting global styling defaults both in PDF and HTML formats. Look in the projects/tutorials folder below the reportico folder. You will see another reportico_defaults.php. This file in the project folder overrides the global defaults, lets look in this file.

In this file are the rules that set the default page headers in PDF and the row, group and body stylings in PDF and HTML. In this file are commands to set styles and also to create page headers.

Lets take the styling of rows :-

            // DETAIL ROW BOX STYLES WITH ALTERNATING COLOURS
            // Default all row lines to light grey
            $styles = array(
                "background-color" => "#fdfdfd",
                "margin" => "0 5 0 5",
                );
            $reportico->apply_styleset("ROW", $styles, false, "PDF");

            // Darker grey on every other line
            $styles = array(
                "background-color" => "#eeeeee",
                );
            $reportico->apply_styleset("ALLCELLS", $styles, false, "PDF", "lineno() % 2 == 0");

As you see we set up an array of CSS-type styles and apply them to a page element eg.ROW and to a format type in this case “PDF”. This means these styles are ony applied in PDF mode. The first line sets all rows to have a background colour of a very light grey. The second section applies a darker grey on all alternating lines using the condition expression “lineno() % 2 == 0” (i.e. applied if the line number is exactly divisible by two.

The conditions here follow the same rules as Reportico assignment conditions so you can use this mechinism to apply a certain styling to all occurrences of a certain column in your project or even turn your overall background colour red during the Xmas period if you can work out the PHP to do it.

Now take the default page header for the title.

In the file you will see :-

            if ( $reportico->pdf_engine == "tcpdf" )
            {   
                // Create Report Title Page Header on every page of PDF
                $reportico->create_page_header("H1", 1, "{REPORT_TITLE}{STYLE border-width: 1 0 1 0; margin: 15px 0px 0px 0px; border-color: #000000; font-size: 18; border-style: solid;padding:5px 0px 5px 0px; height:1cm; background-color: #000000; color: #ffffff; text-align: center}" );
                $reportico->set_page_header_attribute("H1", "ShowInHTML", "no" );
                $reportico->set_page_header_attribute("H1", "ShowInPDF", "yes" );
                $reportico->set_page_header_attribute("H1", "justify", "center" );

The if statement is included here to indicate that this page header only applies to reports generated by tcpdf. This is a library Reportico uses to generate the PDF output and is the default used. Reportico also comes with FPDF engine, but the default TCPDF is more catered for in terms of styling. Anyway you dont need to worry about this for now.

So you wil notice here the create_page_header function which takes as first paraeter a unique name for the header, a number which can always be left as one and then a set of text which defines the content of the header and styling options. The content is {REPORT_TITLE} which is a special code that means print the report title and the syling options are introduced by {STYLE and end with a curly bracket }. The styling options follow CSS syntax and here set the white on black background. Not all CSS options are supported in PDF reports, but the basics of colouring, fonts, positioning and sizing are.

Notice also the extra commands of setting attributes to indicate that this page header will only appear in PDF mode.

Select Order Report - Tutorial 2 Stage 1 - Creating a PDF Invoice from the tutorials menu (Alternatively you can point your browser at the URL http://SERVER_ADDRESS/REPORTICO_INSTALL_DIRECTORY/run.php?project=tutorials&execute_mode=PREPARE&xmlin=tut2_2_orders.xml). You are now ready to start this tutorial.

This report follows on from the previous tutorial which produces report of customer orders, grouped by order number with order date as a group header.

Adding the Invoice Page Headers

We are now going to use the report designer to add our own page headers andoverride the default ones.

So go into design mode and follow the Output ⇒ Page Header tabs ( alternatively you can use the Page Headers quick link under the More Shortcuts drop down :-

We are going to add 5 page headers :-

- The customer address - Our hard coded address - A logo - A new title - A Special header which tells Reportico not to also include the default page headers

Customer Address Page Header

Now you need to know that this report has already created a special assignmnent of a full customer address block by pulling together the name and address lines. If you look in the Assignments tab you will see an assignment called full_address which is set with :-

{contact}."<BR>".{title}."<BR>".{company}."<BR>".{Address}."<BR>".{City}."<BR>".{Region}." ".{postal_code}."<BR>".{country}

This gives us a column which can get included on the top of each page.

So go back to page header entry and add a page header like so :-

{full_address}{STYLE font-family:times;margin: 32mm 0 0 0}

This tells Reportico to place the address block 32mm from the top of the screen and apply no margin on other sides ( which means it will end up on the left hand side ). Although mm is specified hear you can use CCS measurements like px (pixels) and cm.

So it looks like this :-

Note when you add a page header the bottom section defaults to only apply the header in PDF mode.

Also all the stylings set in this tutorial can be made using the Styles Wizard at the bottom of the design options which generates these style strings. Look in the Styles Wizard for further details of what styling options are available and what values may be set.

Run the report in PDF and you will see the address positioned down 32m from the top with the default headers. Now in a moment we are going to added a few more headers and prevent the defaults appearing.

Adding Logo, Custom Title Headers and Overriding the Defaults

Now go back into Page Headers and add more in the same way in the order below. Add 4 more headers with the Header Text set to the following :-

Supplier Address:-

Northwind Suppliers<br>1 Northwind Road<BR>Somewhere<BR><BR>AA1 BB2{STYLE font-family:times;margin:32mm 0 0 15cm;}

This places a hardcoded address on the right hand side of the page ( 15cm across ). Note we are by default set up with A4 page size - you can change this in the Format tab of the Designer for this report or change it globally in the project configuration file.

Company Logo:-

{STYLE height:2cm;background-image:images/reportico100.png;margin:0 0 0 13cm;background-color:#ff0000}

This places the images/reportico100.png ( must exist in the images folder under the reportico directory ) logo 13cm across the page 0cm from the top margin, and set the height to 2cm. Note its best to have the images sized exactly as they appear as you shouldnt need to set a height ).

Custom Title

Sales Order{STYLE color: #0000dd;font-size:18pt;height:1cm;border-style:solid;border-width:1 0 1 0;border-color:#000000;padding:5px 20px 5px 20px;margin:50px 0px 0px 0px}

Places the title “Sales Order” at font size 18pt, height 1 cm with two 1px wide blue lines above and below. There is 20px padding between the lines and the text and the margin od 50px places it 50 pixels down form the top.

Prevent default headers

{NOMORE}

{NOMORE} is a special code that stops any more headers from the defaults mentioned above being printed. This stops the default title header being printed on top of your nice new one.

Run the report and it should look like this at the top :-

Adding Page Footers

Now by default Reportico prints a page number at the bottom. We are going to stop that and instead print the current date and time. So go into Page Footers and in the same way you add Page Headers add the following :-

Date Time

Time: date('Y-m-d H:i:s'){STYLE font-size: 10; text-align: right; font-style: italic;}

This shows the text “Time” followed by the date in YYYY-MM-DD HH:MM:SS format and places it on the right and puts it in italic.

Prevent default footers

{NOMORE}

Stops the default page number being printed from the defaults

Run the report and it should look like this with date time at the bottom :-

Adding Styled Group Headers

Currently the report is grouped by order number and the report group is defined to start a new page on very order and to show group headers of the Order Number and the Order Date. We care going to now style the group headers for PDF output.

So click on the Groups quick link or go to the Groups tab in Design mode. Then select the only group set and click the group headers tab. Select Header 0 and you will notice the Group Header Custom Text is empty. Set it to ..

Order Date.  {order_date}<br>Order No.   {id}{STYLE width:7cm;border-style:solid;border-width:1 1 1 1;margin:5mm 0 0 10mm;padding:5}

This alters the default group header to be a text block “Order No. ” followed by the order id with the Order date underneath. It also sets a border around it and positions the block 5mm from the top of the surrounding container ( in this case from below the bottom of the page headers).

In the designer it looks as so ..

Now if you run the report you will see the group header box you just designed but there is also the order date printed on top of it which comes from the second group header. You want to show this in HTML but turn it off from PDF. So got into the second Group Header and change the value of Show in PDF to No.

Run the report and it should look like this with order no and date in a box :-

Adding Styled Group Trailers

On the report their is currently a group trailer defined which is the order total. Click the Groups quick link, select the group and click on Group Trailers. You will see the definition as so :-

This is a standard column trailer which shows the total order_value under the line_value column.

We are now going to add a text block to appear after each order giving some marketing information.

So click the Groups link, choose the group, click Group Trailers and add another trailer.

Into the Group Trailer Custom Text Field enter

Thank you for your business . <br><br>Your company "{company}" is eligible for a special offer of 20% all purchases you make before the end of the year.
{STYLE background-color:#eeffef;border-style:solid;border-width:1 1 3 1;border-color:#238721;margin:0 5 0 5;padding:10 30 10 30}

This adds a text block after the order details with a light green background, a solid green border and some padding space around the text. It uses the {company} notation to include the value of the company name within the text.

In the designer it looks as so ..

Now if you run the report you will see the green group trailer box you just designed. It looks like this:

Now you have an invoice document.

Now it should be possible to produce many document structures using the techniques here.

If you have any tricky layouts required, please post a request on the Reportico forum.

  • tutorial_2_stage_2_-_creating_a_pdf_invoice.txt
  • Last modified: 2018/05/04 21:40
  • (external edit)