This article explains how to create advanced badge design alterations when the printed data is a different value. For example, consider you have 3 exhibitor levels at your event, Gold, Silver, and Bronze and you want to print this label on the badge with the text the appropriate colour e.g. Gold for Gold, Grey for Silver etc. to represent the level. This is where conditional design configuration is applied.
The following parameters only apply to the Regfields and customField[1-10] data elements. Company Name, Job Title, and Person’s Name fields are not supported.
Default Construct
You can print any registration field you capture on the event badge. When conditions aren’t required, the format is a simple JSON array.
"RegFields": [
{
"data": "a1c402",
"offsetTop": 6.5,
"offsetLeft": 0.5,
"height": 0.7,
"width": 3.5,
"FontFamily: null,
"FontAlignment": "center",
"FontColor": "#111827",
"IsItalic": false,
"IsBold": true,
"forceFontSize": 14,
"InvertText": false,
"InvertedFontColor": null,
"ShowMirrorImage": false,
"IsUppercase": false,
"RotationAngle": 0
},
{...}
]data value is the GUID of the registration field you want to print. This can be found in the event admin -> Configuration -> Registration Fields.
For customFields use:
"customField1":
{
"offsetTop": 6.5,
"offsetLeft": 0.5,
"height": 0.7,
"width": 3.5,
"FontFamily: null,
"FontAlignment": "center",
"FontColor": "#111827",
"IsItalic": false,
"IsBold": true,
"forceFontSize": 14,
"InvertText": false,
"InvertedFontColor": null,
"ShowMirrorImage": false,
"IsUppercase": false,
"RotationAngle": 0
},
"customField2":
{
"offsetTop": 6.5,
"offsetLeft": 0.5,
"height": 0.7,
"width": 3.5,
"FontFamily: null,
"FontAlignment": "center",
"FontColor": "#111827",
"IsItalic": false,
"IsBold": true,
"forceFontSize": 14,
"InvertText": false,
"InvertedFontColor": null,
"ShowMirrorImage": false,
"IsUppercase": false,
"RotationAngle": 0
},...Simple Conditional Coloring of Text
If you want to change the color of the text or the background colour of the textbox (or both) printed for a field, then you need to enable conditions.
This is done using the "conditional": true, key value pair.
Setting this to true tells the system there are conditions that dictate what is printed and how.
Next, you need to set the condition that will trigger the changes. This will be the value you expect from your registration or custom field, "conditionValue": "Gold",
This will trigger the coloring override if the value of the registration or custom field equals “Gold” (case insensitive). If no match, the data will be printed using the default settings for the data object.
Next, you need to apply the coloring that is going to be printed when the condition match is true.
For changing the background textbox color, use: "conditionOverrideBackgroundColor": "#D4AF37",
For changing the text color use: "conditionOverrideFontColor": "#FFFFFF"
Use Hex codes for your colors or Win32 color names e.g. “Red”
Full Example:
"RegFields": [
{
"data": "a1c402",
"offsetTop": 6.5,
"offsetLeft": 0.5,
"height": 0.7,
"width": 3.5,
"FontFamily: null,
"FontAlignment": "center",
"FontColor": "#111827",
"IsItalic": false,
"IsBold": true,
"forceFontSize": 14,
"InvertText": false,
"InvertedFontColor": null,
"ShowMirrorImage": false,
"IsUppercase": false,
"RotationAngle": 0,
"Conditional": true,
"ConditionValue": "Gold",
"ConditionOverrideFontColor": "#FFFFFF",
"ConditionOverrideBackgroundColor": "#D4AF37"
},
{...}
]Print Reg Field or Custom Field Only If Value Equals X
In this example you might want to print the reg field or custom field if the value of that field equals something specific e.g. print if value = “VIP” else don’t.
To do this use the conditional and conditionValue properties only.
Example:
"RegFields": [
{
"data": "a1c402",
"offsetTop": 6.5,
"offsetLeft": 0.5,
"height": 0.7,
"width": 3.5,
"FontFamily: null,
"FontAlignment": "center",
"FontColor": "#111827",
"IsItalic": false,
"IsBold": true,
"forceFontSize": 14,
"InvertText": false,
"InvertedFontColor": null,
"ShowMirrorImage": false,
"IsUppercase": false,
"RotationAngle": 0,
"Conditional": true,
"ConditionValue": "VIP",
},
{...}
]Print Images When Text Equals A Value
You can also print images in replacement of text when a condition is met. For example, perhaps you want to print an accreditation badge if the attendee has answered Yes to a registration field.
For this you use the following key value pair "isImage": true, and then specify the location of the image that will be printed in the "dataOverride": "C:\\ja_badges\\logo.png", key.
The image must be stored locally on the kiosk laptop or tablet. URLs are not supported.
When images are printed, they will be resized to fit the dimensions set in the data object width and height keys. For printing quality, resize your images to meet the dimensions set here which are in centimeters. JPG, JPEG, or PNGs supported only.
Example
"RegFields": [
{
"data": "a1c402",
"offsetTop": 6.5,
"offsetLeft": 0.5,
"height": 0.7,
"width": 3.5,
"FontFamily": null,
"FontAlignment": "center",
"FontColor": "#111827",
"IsItalic": false,
"IsBold": true,
"forceFontSize": 14,
"InvertText": false,
"InvertedFontColor": null,
"ShowMirrorImage": false,
"IsUppercase": false,
"RotationAngle": 0,
"Conditional": true,
"ConditionValue": "Gold",
"IsImage": true,
"dataOverride": "C:\\ja_badges\\logo.jpg"
},
{...}
]Multi-Value Conditions (Advanced)
Consider the scenario where you want to group your attendees e.g. Group A, B, C etc. and you want the group names to be printed on the badge with different background colors.
In this scenario you can create an array of condition values that will apply styling changes based on the value in the registration or custom badge field.
To do this add the "conditions": [], array to the data object.
When this is present in the data object, you don’t need to also include the "conditional": true, key value pair as having the conditions array present implies there are conditions to apply.
Inside the conditions[] array include the styling you want to apply and the condition trigger value. e.g.
"conditions":[
{
"conditionValue": "Group A",
"foregroundColour": "#D4AF37",
"textColour": "#FFFFFF"
},
{
"conditionValue": "Group B",
"foregroundColour": "#C0C0C0",
"textColour": "#000000"
},
{
"conditionValue": "Group C",
"foregroundColour": "#CD7F32",
"textColour": "#FFFFFF"
},...
]Full Example:
"RegFields": [
{
"data": "a1c402",
"offsetTop": 6.5,
"offsetLeft": 0.5,
"height": 0.7,
"width": 3.5,
"FontFamily: null,
"FontAlignment": "center",
"FontColor": "#111827",
"IsItalic": false,
"IsBold": true,
"forceFontSize": 14,
"InvertText": false,
"InvertedFontColor": null,
"ShowMirrorImage": false,
"IsUppercase": false,
"RotationAngle": 0,
"conditions":[
{
"conditionValue": "Group A",
"foregroundColour": "#D4AF37",
"textColour": "#FFFFFF"
},
{
"conditionValue": "Group B",
"foregroundColour": "#C0C0C0",
"textColour": "#000000"
},
{
"conditionValue": "Group C",
"foregroundColour": "#CD7F32",
"textColour": "#FFFFFF"
},
]
},
{...}
]
Going further you can also change the font, font size, font style, rotation angle and even the position where the data prints based on each condition. Example, perhaps you want bigger or bolder text for VIPs vs normal attendees and you want to print the word VIP at the top of the badge instead of the default position.
In this case you would add the following:
"RegFields": [
{
"data": "a1c402",
"offsetTop": 6.5,
"offsetLeft": 0.5,
"height": 0.7,
"width": 3.5,
"FontFamily: null,
"FontAlignment": "center",
"FontColor": "#111827",
"IsItalic": false,
"IsBold": true,
"forceFontSize": 14,
"InvertText": false,
"InvertedFontColor": null,
"ShowMirrorImage": false,
"IsUppercase": false,
"RotationAngle": 0,
"conditions":[
{
"conditionValue": "Attendee",
"foregroundColour": "#D4AF37",
"textColour": "#FFFFFF"
},
{
"conditionValue": "Speaker",
"foregroundColour": "#C0C0C0",
"textColour": "#000000"
},
{
"conditionValue": "VIP",
"foregroundColour": "#CD7F32",
"textColour": "#FFFFFF",
"offsetTop": 2.5,
"offsetLeft": 0.5,
"height": 2.5,
"width": 2.0,
"fontFamily": "Arial",
"forceFontSize": 30,
"IsBold": true
},
]
},
{...}
]Here is the full table of supported keys for conditions
| Category | Properties |
|---|---|
| Typography | FontFamily, isUpperCase, IsBold, IsItalic, FontAlignment, forceFontSize |
| Color | FontColor, InvertText, InvertedTextColor |
| Position and Size | offsetTop, offsetLeft, width, height |
| Transform | RotationAngle: 0-359 |
Deciding Which To Use
| If you want to | Use |
|---|---|
| Just print the value | Normal data object without conditions |
| Show or hide text depending on one value | Conditional (conditional: true) |
| Substitute different text or an image when a condition fires | Conditional + dataOverride (+ isImage for images) |
| Recolour text when a condition fires | Conditional + conditionOverride(font/background) |
| Always show the value, but style it per value | Per-value (conditions: []) |
