Request for list of variables for design of own Theme

Can we get a list of Variables used in Manager so one can modify an existing Theme or make a new Theme from scratch? At this moment I am trying to find out the proper name of a Variable to use it to remind my customers of the ‘Invoice date’ of an Invoice.

In the “build-in” Themes it is called by:

[code]{% for field in fields %}

{{ field.label }}
{{ field.text }}
{% endfor %}[/code]

But how do I know the name of the Variable ‘Invoice date’ of the ‘field.label’?
Strange that there is a new nice way of presenting an Invoice, but a user of Manager can only change things like fonts, margins and colors, and not fully adjust a Theme to one’s need.

Added:
Apparently you cannot use Liquid in ‘Custom Fields’?

3 Likes

This was my exact question. In another forum post, someone asked for a list of variables and was just told to study the code of existing themes, but I bumped straight into the same problem you did Roeland. The variable ‘fields’ appears to be something like an array of elements, but the layout of my invoice doesn’t fit within this rigid structure—I need to know how to reference each element individually.

In any case, it would be far more convenient to have a list of variables we can refer to, rather than have to scour the code of existing themes (or be forced to model our own themes on that rigid, table-based layout).

I had invoice templates in the old version of Manager working perfectly with my own CSS layouts, so it’s frustrating that I can’t use that design at all now until I figure this out. (I was using the backwards compatibility feature, but that appears to have been removed now.)

So I add my voice to Roeland’s, robhuijben’s and others—please give us a concise list of variables so we can freely create our own themes.

Talking about the variable ‘fields’ looking like an array gave me an idea—to try accessing individual elements like you would an array, e.g. fields[0]. That yielded some results. So here’s my quick attempt at a list of variables. I only tested with an invoice (since that’s what I’m most urgently in need of creating) and I’m guessing it may not translate to other types of documents, but it’s the best I could come up with. I still welcome the developers to provide a bit more documentation here, but this should at least allow me to keep using my invoice templates with the new version:

Business logo path: {{ business.logo }}

Document title: {{ title }}

Recipient name: {{ recipient.name }}

Recipient code: {{ recipient.code }}

Recipient address: {{ recipient.address | newline_to_br }}

Recipient identifier: {{ recipient.identifier }}

Document date label: {{ fields[0].label }}

Document date: {{ fields[0].text }}

Due date label: {{ fields[1].label }}

Due date: {{ fields[1].text }}

Document reference label: {{ fields[2].label }}

Document reference number: {{ fields[2].text }}

Document description field: {{ description }}

Description: {{ table.columns[0].label }}

Qty: {{ table.columns[1].label }}

Unit price: {{ table.columns[2].label }}

Amount: {{ table.columns[3].label }}

Business name: {{ business.name }}

Business address: {{ business.address }}

Business identifier(ABN): {{ business.identifier }}

2 Likes

Hi Kal,
At least this is a start! It would indeed be fine if the developers (@lubos) could provide more documentation.
I once found the following, but that’s nearly the same as your list.

List of all variable in default themes

Document Specific:
title
description
fields (array of document fields like Invoice date, Invoice number, Order number etc.)
field.label
field.text

Recipient Details:
recipient.name
recipient.code
recipient.address
recipient.identifier

Business Details:
business.name
business.address
business.identifier
business.logo

Table Details
table
table.columns
column.align
column.label

	table.rows
		row.cells
			cell.text

	table.totals
		total.emphasis
		total.label
		total.text

Custom Fields
custom_fields
field.label
field.text

Emphasis (Used for labels like “PAID IN FULL”)
emphasis.positive
emphasis.negative
emphasis.text Preformatted text

4 Likes

Thanks Roeland. I was able to insert most of the values into my non-standard invoice design, but it’s a lot harder to do this sort of customisation than it used to be with the way theme variables have been structured.

In case it’s useful to anyone, here’s a barebones template, which you can try and style with CSS (if, like me, you can’t bring yourself to re-embrace ye olde table-based layouts of the default themes). If I were starting again, I’d probably start with something like this:

{% if business.logo != null %}
	<img src="{{ business.logo }}"/>
{% endif %}

<div>
	<p>{{ business.name }}<br>
	{{ business.address }}</p>
	<p>ABN: {{ business.identifier }}</p>
</div>

<div>
	<p>{{ recipient.name }} {{ recipient.code }}<br>
	{{ recipient.address | newline_to_br }}</p>
	<p>{{ recipient.identifier }}</p>
</div>

<div>
	{% for field in fields %}
	<p>{{ field.label }}: {{ field.text }}</p>
	{% endfor %}
</div>

<div>
	<h1>{{ description }}</h1>
</div>

<table>
	<tr>
		{% for column in table.columns %}            
		<td>{{ column.label }}</td>
		{% endfor %}
	</tr>

	{% for row in table.rows %}
	<tr>
		{% for cell in row.cells %}
		<td>{{ cell.text | newline_to_br }}</td>
		{% endfor %}
	</tr>
	{% endfor %}
        
	{% for total in table.totals %}
	<tr>
		<td colspan="{{ table.columns | size | minus:1 }}" >{{ total.label }}</td>
		<td>{{ total.text }}</td>
	</tr>
	{% endfor %}
</table>

<div>
	{% for field in custom_fields %}
	<p>{{ field.label }}: {{ field.text }}</p>
	{% endfor %}
</div>

Be warned though, I’m beginning to suspect that CSS might be broken in a way it wasn’t with the original Manager templates. Code that still works in a web browser is not being styled correctly in Manager themes.

As for me, I’m ready to give up on themes.