The Template Editor
The Wallet Template Editor is the web tool used to configure a pass’s appearance and fields.
If you just created a new template and clicked Start Building, your screen will be open to the template editor.
To edit an existing template:
- Go to Templates.
- Click anywhere in a template’s row to see its expanded view, then click
Edit Design. If you have only one template in the project, the
initial view is expanded.
Header
As you design a template, information and options are displayed in the header.
At left are the template name and ID, along with its pass type name and icon. At right are three buttons:
- Exit returns you to the project dashboard without saving anything. Make sure to first click Save before exiting.
- Test Pass lets you email the pass to yourself so you can preview it on a mobile device. Follow the steps in Send a Test Pass.
- Save saves any changes you have made to the template.
Layout
The pass preview is on the left side of the page. General Settings and field configuration are on the right. As you design the pass, the changes are reflected in the preview. See also: Mobile Wallet Reference: Layout: Schematics.
General Settings
General Settings are properties that apply to the entire template rather than to a single field. Available properties vary per pass type. Return to these settings at any time by clicking the paint brush icon in the upper right corner of the pass preview.
Background and Text Colors
Apple Wallet: Set Background and Text Colors.
When using Event Type templates with iOS, foreground color behavior varies depending on background and strip images:
When a background or strip image is not included in the pass, field label and value colors are applied.
When a background or strip image is included in the pass, the field value color is automatically set to white unless the image is white, in which case the value is set to black.
Google Wallet: Choose a Background Color manually or via auto select.
Color Selection
Selecting a color is the same for both Apple and Google templates. Click
in the color field to display the color options. You may click
to select a color, or enter hexadecimal or RGB color values.
Icon Image
Apple passes have an Icon image that is displayed on the lock screen along with any notifications. It is also displayed when a pass is provided by an app, e.g., a mail attachment.
Click the image icon pane and a modal window will open, specifying requirements and options. For requirements per image type, see: Mobile Wallet Reference: Layouts: Images.
Images
Click in the preview to select an image. A modal window will open, specifying requirements and options. For requirements per image type, see: Mobile Wallet Reference: Layouts: Images.
Fields
Fields are the placeholders for the key pieces of relevant information for each pass. Pass type determines the number of fields that appear on the front of a pass. The number of fields on a pass also depends on the text in each field. If there is too much text in a field, some fields will not be displayed. See: Mobile Wallet Reference: Layouts: Fields.
Click in the preview to select a field and its configuration pane will display on the right side of the screen. The field type is listed in the header.
Hover over the field to expose action icons in the header:
/ = Click to move the field to a new position in the layout. You can also change a field’s position via the preview. See: Fields: Position.
/ = In Google Generic Passes and Boarding Passes, click to move the field to a new position in the layout.
To move a field to another row, first remove it, then click Add another field in another row, and search for and select the field ID in the search bar.
= Remove field from layout.
If you edit a field ID, make sure to update any API calls referring to the field.
Google Wallet Class fields are edited inline in the preview. Clicking on a class field will not expose a configuration pane. See Google Class Fields below.
When displayed on an end user’s device, text fields on an Google Wallet pass will be truncated to the first four lines. The user must click on the field to display the full string. When editing templates, the preview will always display the full text.
Field Sets
Different pass types have different field sets depending on the purpose, e.g., a Loyalty pass might have a Point Balance field but not a Gate Number field like a Boarding Pass pass would. See: Mobile Wallet Reference: Layouts: Fields
Google Boarding Pass field sets can display the contents of two fields in a single location, separated by a slash, e.g., Content 1 / Content 2.
- Click Add another field to add a secondary field.
- Click next to a field to remove it.
Advanced Options
Click Advanced Options at the bottom of a field’s configuration pane to show/hide additional options. Check the box to enable.
Hide this field if the label and value are blank: This will retain the space dedicated for the field. In order to remove the space allocation, you must remove the field from the layout.
Notify the user when this value changes: Each field object on an Apple Wallet pass can include an optional change message value. A change message is the text that appears in an alert that is displayed when a pass field’s value is changed. Apple Wallet only.
Important The change message must include the escape value
%@, which is replaced when the field’s value is changed. See the Change Message Tutorial for details.Note If you don’t specify a change message, the pass holder isn’t notified when the field value changes.
Setting a change message will not trigger sending a notification — the notification is triggered when you change the field value.
When multiple fields with change messages are updated at the same time, we cannot control the processing order. That is handled by Apple.
Adding Fields
Field placement behaviors and options vary. Be sure to verify the design on a mobile device.
Some field placements allow up to four fields in a single row.
Some field placements allow multiple full-width fields in a pass.
Adding more fields than can be displayed across the device’s screen will introduce scrolling within each placement.
Position
When you hover over a field in the preview, its boundary will highlight. If the field can be
moved, arrows will appear at the edge of the field’s boundaries, depending on
its current placement. Click an arrow to move the field in that direction.
Apple Back of Pass
Apple Wallet passes include fields on the back of the pass. Click See back of the pass to access the fields.
Use HTML to create clickable links. Example formats:
- URL —
<a href="https://www.airship.com">www.airship.com</a> - Phone —
<a href="tel:8007202098">800-720-2098</a> - Email —
<a href="mailto:support@airship.com">support@airship.com</a> - SMS —
<a href="sms:21905;?&body=JOIN">Text us</a>
Google Class Fields
Google Wallet passes will automatically update with any changes made to class fields. How it works:
If a class value
class.*is changed, all passes will be changed.On Update Pass, only that pass is updated. Class values are not sent with the update object when updating passes, so there is no effect on other passes.
Any field preceded by class constitutes a class field. For a full list of
class fields, please visit the
Google Wallet documentation .
Categories