Template expressions

Templates require expressions similar to the reference field expressions. But they can be enhances with template specific expressions to dictate how references will be shown.

Numerics

You can change the formatting of a number field by using the NumeralJS library.

{!numberField{"format": "0.00"}!}

Text

You can include line breaks by adding the showLineBreaks option.

{!textField{"showLineBreaks": true}!}

You can evaluate expressions inside a text field by using the evaluateExpressions option.

{!textField{"evaluateExpressions": true}!}

Date and Time

You can change the formatting of a date or time field by using the momentJS library.

{!DateField{"format":"MMM DD YY"}!}

{!TimeField{"format":"HH"}!}

Signature

You can set the width and height of a signature field. In case the exact given aspect ratio doesn't fit, the width or height will be diminished to fit the specified values.

{!SignatureField{"height": 400, "width": 400}!}

Checkbox

Checkboxes aren't automatically rendered on templates, the value is either 'false' or 'true'. You can however render a checkbox image to make the template look better.

{!checkbox{"format":"checkboxImg"}!}

Reference field

Referring to values of a reference field in a template needs some additional work to show the correct label of the referred field.

Let's say we want to show the value of the field name of a menu item.

{!menuItem{"label": "{!name!}"}!}

Now we want to add the field size from the menu item document to the template

{!menuItem{"label": "{!name!} - {!size!}"}!}

Attachment fields

Image files in attachment fields can be included in templates, and it is possible to control how these images are displayed. By default, images in templates have a size of 250*150px.

Using width and height properties

BizzStream allows you to resize an image by passing width and height properties. By providing just the width property, BizzStream fixes the width and calculates the height using the so-called resize factor. In this case, the resize factor is calculated by dividing the provided width by 250px.

{!attachmentField{"width": 350}!}

The resize factor in the example above is thus 350/250=1.4. This implies that the width of the image is 1.4*150px=210px.

By contrast, BizzStream fixes the height and calculates the width using the resize factor if you provide the height property. In this case, the resize factor is calculated by dividing the provided height by 150px.

{!attachmentField{"height": 350}!}

The resize factor in the example above is thus 350/150=2.3. This implies that the width of the image is 2.3*250px=583px.

If you provide both the width and height properties like in the example below:

{!attachmentField{"height": 350, "height": 350}!}

BizzStream calculates two resize factors and let the biggest resize factor prevail. In this example, the resize factors are 1.4 (using the width) and 2.3 (using the height). Because 1.4<2.3, BizzStream resizes the image to 583*350px.

Providing a margin

You can also ensure that there is some space between the images by providing a the margin property:

{!attachmentField{"margin": 10}!}

This leaves a margin of 10px between the images.

Multiple images

If there are multiple images in the attachment field, it may be useful to present these in a table-like structure. You can calculate the number of columns in the table by providing the columns property:

{!attachmentField{"columns": 2, "margin":10}!}

A template with two columns and a margin of 10px.

User information

You can add information about a user to a template, for this you have three options:

These options can be enriched with user properties:

To show the name of the user who last modified the document:

{!_lastModifiedByUser{"fieldName":"name"}!}

To show the username of the user who created the document:

{!_createdByUser{"fieldName":"username"}!}

To show the email of the user who generated the template:

{!currentUser.email!}

Note: Be aware of the difference that in syntax for _createdByUser and _lastModifiedByUser on one hand and currentUser on the other hand.

Conditions

Open the section on conditions for more information about using expressions to render lines conditionally.