Guides

Move a custom field on transaction forms

By default, custom fields appear near the bottom of completed transaction forms. You can move a custom field so it appears somewhere else using a custom theme.

Note
This Guide applies to custom fields for transaction forms. It does not cover line-item custom fields, which appear on individual lines of the form and cannot be moved using techniques described here.

Create a custom field

First, create a custom field for the desired form, following instructions in another Guide. Make sure the custom field is marked to Show on printed documents. For purposes of illustration, a custom field labelled Some Custom Field will be used below. The field will show on the relevant transaction entry screen, and content can be entered by default or manually:

VUwZqn7

Create a new theme

Then go to Themes under Settings and create a new custom theme. You can create one from scratch after clicking the New Theme button or View an existing theme and Copy to New Theme.

Let’s adapt the built-in, default theme and call our new theme Plain (custom). When opened for editing, notice how lines 18-21 contain the following code:

{% for field in fields %}
<div style="font-weight: bold">{{ field.label }}</div>
<div style="margin-bottom: 10px">{{ field.text }}</div>
{% endfor %}

These 4 lines are responsible for showing transaction dates, reference numbers, etc., all of which are elements of an array named fields that is separately defined for each transaction type. If you want to show content of your custom field below these basic fields, insert the following two lines after {% endfor %}:

<div style="font-weight: bold">Some Custom Field</div>
<div style="margin-bottom: 10px">{{ custom_fields["Some Custom Field"] }}</div>

You will end up with:

{% for field in fields %}
<div style="font-weight: bold">{{ field.label }}</div>
<div style="margin-bottom: 10px">{{ field.text }}</div>
{% endfor %}
<div style="font-weight: bold">Some Custom Field</div>
<div style="margin-bottom: 10px">{{ custom_fields["Some Custom Field"] }}</div>

Note
When adding lines, substitute the actual label of your custom field for Some Custom Field.

Create or Update your custom theme. Edit the transaction form to which you want to apply your custom theme by checking the Custom theme box and selecting your theme:

02%20AM

When you view your transaction, your custom field will show below the basic fields in the header:

L8BgSh1

Suppress the duplicate custom field

You will notice your custom field now shows twice. The first place is in the heading, where you just added it. The second is at the bottom of the form where custom fields normally appear. To hide the second appearance, go back to edit your custom theme and find the following lines:

{% for field in custom_fields %}
    <tr>
        <td colspan="99">
            <div style="font-weight: bold; padding-top: 20px">{{ field.label }}</div>
            <div>{{ field.text | newline_to_br }}</div>
        </td>
    </tr>
{% endfor %}

After {% for field in custom_fields %} insert this line:

{% if field.label == 'Some Custom Field' %}{% continue %}{% endif %}

So you will have:

{% for field in custom_fields %}
{% if field.label == 'Some Custom Field' %}{% continue %}{% endif %}
    <tr>
        <td colspan="99">
            <div style="font-weight: bold; padding-top: 20px">{{ field.label }}</div>
            <div>{{ field.text | newline_to_br }}</div>
        </td>
    </tr>
{% endfor %}

This will cause the program to bypass your custom field when looping through and displaying any others you may have in the custom_fields array.

Note
When adding the line, substitute the actual label of your custom field for Some Custom Field.

Add conditional logic

If customization is to be applied only in certain situations, you need to add conditional logic to your theme. For example, suppose you have defined two custom fields, one for a Customer Reference number on sales invoices, the other for a Supplier Reference number on purchase invoices. But you want to insert whichever is appropriate for a transaction at hand using the same custom theme. You can insert the following code in the appropriate section of the theme:

{% if custom_fields["Customer Reference"] %}
<div style="font-weight: bold; padding-top: 10px">Customer Reference # : {{ custom_fields["Customer Reference"] }}</div>
{% endif %}

{% if custom_fields["Supplier Reference"] %}
<div style="font-weight: bold; padding-top: 10px">Supplier Reference # : {{ custom_fields["Supplier Reference"] }}</div>
{% endif %}

The program will test all custom fields incorporated in the form as it loops through them to see if they are Customer Reference or Supplier Reference. If one is present, its label and field content will be displayed. Otherwise, execution of theme code will continue without action.

Support
Subscribe to Updates

Subscribe to our newsletter and get exclusive product updates you won't find anywhere else straight to your inbox.

© 2018 - Based in Sydney, Australia but providing goodness globally