My invoicing program (on your phone)

This is the version for phones and tablets (Android), with the editor's touch interface. Making it on a computer? Go to the version for computers.

You're reading the tutorial in the phone's browser. In BreynGINE, ☰ > Help > Tutorials opens this same page and offers to copy the drawings and sounds it needs into your project; here you can also download them as a ZIP.

Chapter 1What you'll make

In this tutorial you'll create an invoicing program for the computer, from scratch and without writing code, and you'll make it on your phone. It will have clients, products and invoices with their lines; it will work out the taxable base, the VAT and the total by itself; it will number invoices by series and make each invoice as a PDF, with your logo, ready to send or print.

"My invoicing": an invoice with its lines and the calculated totals.

And its PDF, with your company's details and the client's.

You'll use:

BreynData, the Data panel: here you design the tables (clients, products, invoices...) of a database.
The Data Table and Data Form components, which show and edit records without programming anything.
BreynFlow, to join the screens: open an invoice, filter its lines, make the PDF...

This is the version of the tutorial for the editor's touch interface, with pictures of the phone. If you don't know the bottom tabs yet (Scene, View, Inspector, Project, More), look at the chapter The editor on a phone of My first game. And if you don't know App mode yet, the task list tutorial explains it calmly: here we go a bit faster through what's already there.

(The pictures show the editor in Spanish, and the example uses Spanish names for tables and fields; the buttons are in the same places in English, and you can name your fields in your language.)

Tip: the program is for Windows, so at the end you'll need a computer to make the .exe (we tell you how to take the project there). Everything else, designing it and trying it, is done on the phone. A tablet or a big phone makes it more comfortable.

Chapter 2Create the project

In the project manager, tap New Project, name the project My invoicing and choose the Desktop Program template.

In the Project tab, tap home.tscn twice and then tap View (and 2D in the workspace bar):

A desktop program: screens the size of a computer (1280 × 720), inside the phone's view.

It's like App mode, with three differences:

The screen has the Computer size and looks like a window. Pinch the view to get closer.
main.tscn is the program's window: a Sidebar (the sections, on the left) and Screens, where screens open. You'll fill it in at the end.
In the Components panel, instead of Generate APK you'll see Generate EXE..., to make the Windows program.

Tip: the Desktop Program: Invoicing template, in the Asset Store tab of the project manager, has a program like this already made, with VeriFactu included. Open it when you finish to compare.

Chapter 3The Data panel

The BreynData panel is in the More tab. Tap it and, at the top, tap the three dots ⋮: the list of panels shows up (Console, Debugger, Audio...). Choose Data.

The three dots ⋮ of the More tab take you to any bottom panel: here, to Data.

The Data panel has four tabs: Tables, Records, Company and VeriFactu. They don't all fit: the little arrows ‹ › on the right take you to the others.

Your company's details

Go to the Company tab and fill in your details: they appear at the top of every PDF.

Name and NIF / CIF (the tax ID).
Details: the address, email, phone... one thing per line.
Logo: tap Choose... and pick an image of the project. If you don't have one at hand, tap ☰ > Help > Tutorials > My invoicing program (desktop) and Copy and Open: the sample logo is copied into the project as logo.png. (You can also download it here.)
Footer: a sentence at the bottom of every page.

Chapter 4The tables: clients and products

A table is a kind of record: clients, products, invoices... Each table has fields: the details of each record (the name, the price, the date...). Go to the Tables tab.

On a phone, the tab reads from top to bottom, and slides with your finger: at the top, the list of tables and the details of the chosen one; in the middle, its fields (name and type); and below, the settings of the field you tap.

Clients

Tap + Table. Below, in Name write clientes (the name for rules: letters, numbers and _, no spaces or accents), in Label Clientes (the name people see) and in Order name.

The table already has a field: name (Name), required. Leave it as it is.

Tap + Field and, in the settings of the field (slide down), give it the Name nif, the Label NIF (the tax id) and check Unique (two clients can't have the same one).

More fields: direccion (Address), of Type Long Text and without Show In List; email (Email) and telefono (Phone).

The tables of the project, with their details below.

The kinds of field you can use:

Text and Long Text (several lines).
Whole Number, Decimal Number and Money (with two decimals and the currency symbol).
Date and Yes/No (a check box).
Record of Another Table: a drop-down to choose, for example, the client of an invoice.
Choice: a drop-down with fixed values.

Products

+ Table: name productos, label Productos, order descripcion.

Tap the name field and change it: name descripcion, label Descripción.

+ Field: precio (Price), of type Money.

In Shown As choose Descripción: it's what you see of a product in drop-downs.

Chapter 5The invoices table

Here's the most interesting part: fields that number and calculate themselves.

+ Table: name facturas, label Facturas, order -fecha, -numero (the "-" sorts from highest to lowest: newest at the top).

Change the first field to serie (Series), of type Choice, with the Choices A and R (A for normal invoices, R for corrective ones) and the Default Value A.

And add these fields:

numero (Number): Whole Number, required, with Auto Number and Number By serie. So series A goes 1, 2, 3... and R keeps its own count.
codigo (Invoice): Text, with the Formula serie + "-" + str(numero), without Show In List. It gives "A-1", "A-2"...
fecha (Date): Date, required, with the Default Value today.
cliente (Client): Record of Another Table, required, with the Reference Table clientes.

The fields of the invoices (name and type), and the settings of the "cliente" field.

iva_pct (VAT %): Decimal Number, with the default value 21.
base (Taxable Base): Money, with Sum Of lineas.importe: the sum of the amounts of its lines (you'll make the lines table next).
iva (VAT): Money, with the formula base * iva_pct / 100.
total (Total): Money, with the formula base + iva.
pagada (Paid): Yes/No.
notas (Notes): Long Text.

In Shown As choose Factura (the code A-1).

Tip: fields with a formula or "Sum Of" aren't typed: they're worked out by themselves every time something changes. In formulas you use field names, and + - * / for the maths. The ▲ ▼ arrows next to + Field change the order of the fields.

Chapter 6The lines of the invoices

Each invoice has several lines (the items). They go in their own table:

+ Table: name lineas, label Líneas de factura.

The first field will be factura (Invoice): Record of Another Table of facturas, required, with Delete With Parent (if you delete an invoice, its lines go too) and without Show In List.

Add:

producto (Product): Record of Another Table of productos, without Show In List.
descripcion (Description): Text, required.
cantidad (Quantity): Decimal Number, default value 1.
precio (Price): Money.
importe (Amount): Money, with the formula cantidad * precio.

Choose Descripción in Shown As.

Finally, tap Save Tables (under the list of fields). The design is saved in data/schema.tres and the database is brought up to date (if you add fields some day, the data you already have isn't lost).

Tip: notice that descripcion and precio have the same names in products and in lines. Thanks to that, when you choose a product in a line, its description and its price are copied by themselves.

Chapter 7The clients screen

Now, the screens. Go to the Scene tab, tap the three dots ⋮ at the top and choose Components. Tap New Screen... and make it: clientes.tscn. Write Clients in its Title (in the Inspector).

The Components panel: at the top, New Screen and Generate EXE; further down, the data components.

The screen will have the list of clients on the left and, on the right, a card with the form of the selected client. As in the task list tutorial: tap the object in the Hierarchy and then the component in Components (you switch between them with ⋮).

Tap Box and add a Row. In the Inspector, in Layout > Container Sizing, check Expand in Vertical: so the row takes the whole height.

With the row selected, add a Data Table. Call it Tabla (hold your finger > Rename). In the Inspector: Table clientes and, in Columns, the columns you want to see: name, nif, email and telefono.

Tap the row again and add a Card. Give it Custom Minimum Size x = 380 and choose Shrink Begin in Container Sizing > Vertical (so it doesn't stretch down). Change its "Card" text to Client.

Tap the card's Box and add a Data Form called Formulario, with Table clientes.

The Hierarchy of the clients screen, and how it looks: the table and the form, already with the fields you designed.

The form makes one field for each value by itself, with its kind: the drop-down, the check box, the long text... and the Save, New and Delete buttons.

Its rules

Tap Clientes (the screen) in the Hierarchy and add the Rules (BreynFlow) component. Then go to the BreynFlow view (slide the workspace bar) and make two rules:

Open the record: event Data > Data Table Row (Tabla, "is selected") → action Data > Open Record in Form (Formulario). The record is {record_id}, the one of the chosen row.
A new one: Data Table Row (Tabla, "asks for a new one (New button)") → Open Record in Form (Formulario) with the record 0, which means "a new, empty one".

And the products one

Make the productos.tscn screen the same way (title Products): a row with a Data Table of productos (columns descripcion and precio), a Product card with its Data Form and the same two rules.

Tip: you can duplicate clientes.tscn in the Project tab (hold your finger on the file > Duplicate...) and change only the table, the columns and the title.

Chapter 8The list of invoices

New screen: facturas.tscn, with the title Invoices.

Tap AppBar and add a Button called PdfLista, with the text PDF of the list and the Text style.

Tap Box and add a Data Table called Tabla: table facturas, columns serie, numero, fecha, cliente, total and pagada.

Here invoices aren't edited at the side, but in their own screen (you'll make it next). The rules:

Open an invoice: Data Table Row (Tabla, "is opened (double click or Enter)") → Go to Screen factura.tscn sending factura_id = {record_id}.
A new invoice: Data Table Row ("asks for a new one (New button)") → Go to Screen factura.tscn sending factura_id = 0.
PDF of the list: Button Pressed (PdfLista) → Data > Make PDF of "a list of a table", table facturas, title Invoices.

Chapter 9The screen of an invoice

The last screen, and the most complete: factura.tscn, with the title Invoice. The invoice goes on the left and its lines on the right.

In AppBar, a Button Pdf with the text PDF and the Text style.

In Box, a Row with Expand in Vertical, as in clients.

Inside the row, a Card (minimum width 360, Shrink Begin, text Invoice) with a Data Form called FormFactura of the facturas table.

Tap the row and add a Column (with Expand in Horizontal, so it takes the rest). Inside: a Title with the text Lines, a Data Table called Lineas and a Card with a Data Form called FormLinea.

The Lineas table: table lineas, columns descripcion, cantidad, precio and importe; uncheck Show Search and Show New Button.

The FormLinea form: table lineas, Columns 2 and, in Fields, producto, descripcion, cantidad, precio and importe (without factura: that one is set by itself).

In the line's card, change the text to a hint: Save the invoice first, then add its lines. Choosing a product fills in its description and price.

The screen of an invoice: the form on the left, the lines on the right.

Tip: in a form, an empty Fields means "all the fields, in their order". You only need to fill it in to leave some out or change the order.

Chapter 10The rules of the invoice

Add Rules (BreynFlow) to the Invoice screen. There are seven, but they're very much alike (the ⋮ menu of a rule > Duplicate Rule makes it quicker):

Open the invoice: Screen Is Shown → Open Record in Form (FormFactura, record {factura_id}). It's the number the list sent (0 if it's new).
Its lines: Data > Form Saved (FormFactura, "shows a record (or a new one)", its id into factura_id) → Data > Filter Data Table (Lineas, only the records with factura = {factura_id}) → Open Record in Form (FormLinea, record 0, with the starting values factura = {factura_id}).
Saved: its lines: the same, but with "saves a record". So, when you save a new invoice, lines can already be added to it.
Invoice deleted: Form Saved (FormFactura, "deletes a record") → Go Back.
Line saved: the next one: Form Saved (FormLinea, "saves a record", its id into linea_id) → Open Record in Form (FormLinea, record 0, with factura = {factura_id}). The form is ready for the next line.
Change a line: Data Table Row (Lineas, "is selected", its id into linea_id) → Open Record in Form (FormLinea, record {linea_id}).
PDF: Button Pressed (Pdf) → Make PDF of "a document of a record (invoice...)", table facturas, record {factura_id}, title Invoice.

Tip: "Make PDF" finds what an invoice needs by itself: the number and its series, the date, the client, the lines (the table that points to the invoices and is deleted with them) and the totals (the calculated money fields).

Save (💾).

Chapter 11The sidebar

All that's left is telling the program which sections it has. In the Project tab, tap main.tscn twice, tap Sidebar in the Hierarchy and, in the Inspector:

App Title: My invoicing.
Titles: Invoices, Clients and Products (tap the list to open it, set Size to 3 and type each one).
Screens: res://facturas.tscn, res://clientes.tscn and res://productos.tscn, in the same order (with the folder button of each row).

The three screens of the sidebar, in the Inspector. If a list doesn't fit, slide it sideways.

The first section is the one that opens at start. The template's home.tscn screen isn't used any more: you can delete it.

Chapter 12Let's invoice!

Save everything and tap ▶. The program opens on top of the editor, with its sidebar. It's a computer program, so on a phone it looks small: turn the phone sideways to see it better, or try it on a tablet.

Go to Clients, tap New, fill in the form and tap Save. Add another one.

In Products, add a few with their price.

Go to Invoices and tap New. The series is already A and the date today's; choose the client and tap Save: the invoice gets its number.

Now, on the right, choose a product: its description and its price appear by themselves. Change the quantity if you like and tap Save. Add more lines.

When you choose a product, the line fills itself in.

The base, the VAT and the total are worked out with every line.

Tap PDF: the PDF of the invoice is made.

Go back (the arrow at the top): the list already shows your invoices, newest first.

Tip: in the editor, the Data > Records panel shows the data saved on this device, and you can change it from there too.

Chapter 13The Windows program

The real program is a Windows .exe, and that file is made on a computer. Take the project there like this:

Tap ☰ > Project > Pack Project as ZIP... and save the ZIP (for example, in Downloads).

Move it to the computer (by email, the cloud, a cable...).

On the computer, open BreynGINE, press Import in the project manager and choose the ZIP.

With the project open, press Generate EXE... in the Components panel.

The "Generate EXE (Windows)" window, on a computer.

Write the program's name, the version, your company and an icon (a square PNG or an .ico; you can draw it in the Sprites editor). Press Generate and you'll have a single .exe file, with everything inside, in the project's build folder. Each computer where you use it has its own database.

VeriFactu

If you invoice in Spain, the VeriFactu tab of the Data panel prepares the program for the regulation: each invoice is sent to the AEAT with your digital certificate when it's issued, and the PDF carries the QR code.

The Desktop Program: Invoicing template of the Asset Store has it already set up, with the Issue button and the BreynFlow VeriFactu pieces: it's the best place to see it working.

Chapter 14What now?

You've made a complete invoicing program, on your phone! With a database, numbering by series, automatic calculations and PDFs with your logo. Ideas to keep going:

Add quotes: another table like invoices, with its lines, and its PDF with the title Quote.
Filter the list: Filter Data Table with pagada = false to see only the unpaid invoices.
Count what you're owed: the Number of Records condition and a text that says it.
Put a client finder in the invoice: the Record Picker component.
Make a phone version: the same data and components work in App mode, and that one you can install from the phone itself with Generate APK.

May your accounts always add up!

← All the tutorials