Beginning Passbook in iOS 6: Part 2/2

It’s a ticket, it’s a pass… it’s an iPhone!

The next pass type on the list is the event ticket – it can be a concert ticket, cinema ticket or any other kind of ticket you can come up with!

Switch back to the PassPreview app and select ConcertTicket.pkpass. A stylish ticket card pops up:

As you can see, Santa is not going to bed early – instead he plans to enjoy a hula show and a nice evening on the beach. It’s easy when you plan ahead and have all the tickets in your pocket – conveniently stored on your iPhone!

The event ticket pass has a couple of unique features. If you provide a background image file, it gets stretched, blurred, and is set as the background of the whole card. If you provide a thumbnail image (thumbnail.png and thumbnail@2x.png), the image shows up on the right-hand side.

Note that since the background image is rendered over the whole front side of the pass, you don’t need to specify “backgroundColor” in your pass.json file.
Besides those specifics, the rest you already know well:

{
  "formatVersion" : 1,
  "passTypeIdentifier" : "pass.com.iOS6-By-Tutorials",
  "serialNumber" : "000024567",
  "teamIdentifier" : "ABC1230000",
  "barcode" : {
    "message" : "12946390566",
    "format" : "PKBarcodeFormatQR",
    "messageEncoding" : "iso-8859-1"
  },
  "organizationName" : "Tahiti Beach Hula Show",
  "description" : "Entrance ticket to Tahiti Beach Hula Show",
  "logoText" : "Tahiti Beach Hula Show",
  "foregroundColor" : "rgb(255, 255, 255)",
  "backgroundColor" : "rgb(242, 121, 55)",
  "eventTicket" : {
    "primaryFields" : [
      {
        "key" : "name",
        "value" : "Tahiti Beach Hula"
      }
    ],
    "secondaryFields" : [
      {
        "key" : "location",
        "label" : "Location",
        "value" : "Next to Maxi's Martini Bar"
      }
    ],
    "auxiliaryFields" : [
      {
        "key" : "date",
        "label" : "Event date",
        "dateStyle" : "PKDateStyleMedium",
        "timeStyle" : "PKDateStyleMedium",      
        "value" : "2012-12-29T19:00Z"
      }    
    ],
    "backFields" : [
      {
        "key" : "terms",
        "label" : "Terms & conditions",
        "value" : "This ticket may cause happiness and good cheer!  Free lei with ticket."
      }
    ]
  }
}

After seeing a few different pass.json files, it becomes pretty easy to understand the pass source code! Again, you can include many kinds of information on the front and back of the pass in the manner already covered.

Event Ticket styling considerations

• If you provide a background image, but no thumbnail image, then Passbook will also show the background image in the thumbnail spot on the right-hand side.
• You cannot disable the blur effect on the background – that’s how Apple makes sure the text information stands out.
• For event tickets like conferences, the thumbnail image is a great way to include the attendee’s photo straight on the front of the pass.

Finally, here’s also a preview of all the possible fields you can use on the front of an event ticket:

It’s the pass you always wanted to have!

Finally, we get to the pass you always wanted to have! Or to create. Or to create and then have!

The last type of pass is the generic pass. It has basic styling, can feature many different text fields, can display a picture on the front side, and you can use it for all kinds of passes that don’t fit well in the other four categories – coupon, boarding pass, store card, or event ticket.

And now we discover Santa’s drink of choice: after all the hard work delivering billions of presents around the world in a night, he’s up for a cold martini on the beach. Enjoy responsibly, Santa!

Open up PassPreview and tap on GenericPass.pkpass:

As you can see, this card doesn’t fit neatly into any of the other four pass styles. It gives the bearer access to the VIP lounge of Maxi’s Martini Bar and a free martini each day. It’s more like a club membership, for which there exists no pre-defined style.

But this “generic” pass actually looks pretty good! Why yes – you still have all the possible ways to customize it that were already discussed! There’s nothing special inside pass.json, except of course for the pass type key being generic:

{
  "formatVersion" : 1,
  "passTypeIdentifier" : "pass.com.iOS6-By-Tutorials",
  "serialNumber" : "123456",
  "teamIdentifier" : "ABC1230000",
  "barcode" : {
    "message" : "7465-454-2234-1",
    "format" : "PKBarcodeFormatPDF417",
    "messageEncoding" : "iso-8859-1"
  },
  "organizationName" : "Maxi's Martini Bar",
  "description" : "Generic Pass Example",
  "logoText" : "Maxi's Martini Bar",
  "foregroundColor" : "rgb(33, 33, 33)",
  "backgroundColor" : "rgb(122, 230, 88)",
  "generic" : {
      "headerFields" : [
        {
          "key" : "header",
          "value" : "VIP"
        }
      ],
    "primaryFields" : [
      {
        "key" : "member",
        "value" : "Santa Claus"
      }
    ],
    "secondaryFields" : [
      {
        "key" : "faux1",
        "value" : ""
      },
      {
        "key" : "secondary1",
        "label" : "Rewards Earned",
        "value" : "Free Specialty Martini",
        "textAlignment" : "PKTextAlignmentRight"
      }
    ],
    "auxiliaryFields" : [
      {
        "key" : "faux2",
        "value" : ""
      },
      {
        "key" : "status",
        "value" : "Level 3",
        "label" : "Membership Status",
        "textAlignment" : "PKTextAlignmentRight"
      }
    ],
    "backFields" : [
      {
        "label" : "terms & conditions",
        "key" : "terms",
        "value" : "Must show proof of ID to claim rewards."
      }
    ]
  }
}

Wait… what? (If you didn’t notice anything strange, maybe you need to look over the code once more?)

What is this field supposed to do?

      {
         "key" : "faux1",
         "value" : ""
      },

Yes – it’s time for some trickstery! The position of the fields on the front of the pass are predefined, and so… it goes like this: the first secondary field shows up on the left-hand side, the second secondary field shows up on the right-hand side, the first auxiliary field shows up… etc., etc.

So what if you want to show a piece of text where normally the second secondary field would be, but you don’t need to show anything in the first secondary field?

Aha! Define a faux first secondary field with an empty value and no label (like in the code example above). Neat!

Another thing to note is the “textAlignment” key used in the code above. Using this key, you can tell Passbook which way to align the text in a given field. You can choose between the following list of predefined alignment constants: PKTextAlignmentLeft, PKTextAlignmentCenter, PKTextAlignmentRight, PKTextAlignmentJustified, and PKTextAlignmentNatural.

Here’s an overview of all the possible fields you can use on the front of the generic type of pass:

OK! You’ve made it this far and I hope the trip was rewarding! You know everything you need about designing, coding and previewing passes. You’ve learned a whole lot!