In previous blog posts, we discussed the concept of Apple's Passbook and how we are developing tooling and integration with IBM's Worklight mobile application platform so that developers of iOS applications can participate in the ecosystem that exists for passes hosted in Apple's Passbook. In this blog post, we will take a deeper introspection into the Passbuilder tooling that is a key feature of our IBM Passes.
Apple officially provides a Passbook specification for the various pass types. However, Apple doesn't provide tools to visualize these definitions while creating these passes. Customers can only try and test on real iOS devices. To fill in the gap, as part of the IBM Passes, we provide a visual pass editor to facilitate our customers to efficiently create their own passes.
You can easily enter the pass editor by either creating a new pass or by editing the existing pass. To create a new pass, you can click the new button and select the type of the pass you want to create.
To edit an existing pass, you can click the title of the row of the target pass in the grid.
After you entering the pass editor, you can see that it's composed of two parts: the left side is an editing form and a pass previewer in the right side.
Editing form provides different tabs that allows user to edit different parts of a pass. User can use editing form to specify the details of a pass including strip image, fields value, fields label, text alignment, label color, etc.
In editing form, the left-top corner holds a text box for inputting the required pass title. The right-top corner holds four action buttons of which functions can be indicated by their label.
There are seven tabs on the left side (some types of pass may also have “Auxiliary” tab that “Coupon”, in above picture, do not have), among which the “General” tab will be shown firstly each time you start the journal of pass editing.
Different type of pass may have different fields in “General” tab. But the following are the common fields that can be customized in “General” tab.
The above three components are common patterns for each type of pass, but there are still some components are exclusive to certain types of pass:
For boarding pass, user can specify the “Footer image”.
Because there are two different layouts for event ticket, this
Header is common for each type of pass. It is composed of a logo image, a logo text and two (three in Apple’s specification) header fields.
You can add a header field by clicking “Add Field” button. The number of field you added can not exceed the maximum number of that kind of field. One thing should be noted, the color of “Logo text” depends on the color of “Large text” you specified.
In “Primary” tab, you can upload a strip image and specify whether the shine effect of the strip image should be suppressed. Changing the text alignment of the primary field label and value is not allowed according to Apple’s specification.
The contents in “Primary” tab are common for each type of pass with the following exceptions:
For “Generic” pass type, a thumbnail can be uploaded instead of a strip image and there is no “Use shine effect” option for thumbnail.
The last exception is for event ticket pass. As we know, there are two layouts for event ticket pass, a strip image can be specified with “Strip image” layout option selected in the “General” tab otherwise a thumbnail can be uploaded:
Secondary & Auxiliary
You can add at most four secondary fields for a pass regardless of its type. For auxiliary, the tab will be hidden in the following situations (although the auxiliary fields should be supported in situation 1 and 2 according to Apple’s standard):
- The pass type is “Coupon”.
- The pass type is “Store Card”.
- The “Generic” pass with square type of bar code (“QR Code” or “Aztec”).
The barcode editing is not allowed in current beta release due to the legal requirement. In our future release, User can select “PDF417”, “QR Code” or “Aztec” as the type of barcode through the “Barcode type” drop down list. The supported encoding depends on your barcode scanner. The description will be displayed near the barcode and the value is the message or payload to be displayed as a barcode.
Pass builder supports at most ten back fields for a pass. The single-line description and the multi-line value of the back field will be displayed together on the back of the pass. There will always be a back field contains the license statement appended.
In pass builder, user can add at most ten locations for a pass. The latitude and longitude will be populated automatically if a correct address is inputted. When user approached to a specific location, a notification contains the “Message” you specified will be shown on user device.
A relevant date can be selected for “Generic”,
The pass previewer is on the right side. It provides visualization of the current pass definition. We try to provide the best simulation effect as we can, so that our customers can save time to try on real devices. The previewer can simulate most common properties in the JSON definition of pass, including images, colors, fields (header, primary, secondary, auxiliary), barcode, geolocation, and back fields. As soon as you finish the change in editing form, the relevant part in the previewer will be updated accordingly. Thus, customers can quickly iterate and modify their pass templates without having to continually deploy the pass template to a device.
Working with editing form, the previewer can provide visual prompt of the field currently being edited, as the figure below indicates.
One of the advantages over other similar services in the industry is that our previewer supports visualization of the back fields as well.
To ensure perfection on real devices, customers can choose to test the pass to on real devices. To achieve that, click "Send test pass" button.
There will be a pop up dialog telling you that the creation of pass succeeded. Click "OK" will trigger the download of the .pkpass file which you can open on your iPhone.