Architecture Overview
A number of pieces, all knitted together, all responsible for producing a vCard file using the Auto vCard application.



































Buttons
The vCard buttons that come with the application contain JavaScript and perform the action of running the Visualforce page in the background so that the file can be offered to the user without requiring a new window to be popped up.  Below is an example of the button on Leads.  The only parts that are unique from button to button are highlighted in blue.


Visualforce Page
Each button calls a corresponding Visualforce Page.  The Visualforce Page is responsible for mapping your fields to the fields that are available in the vCard file.  Below is an example of the Visualforce Page for Leads that comes with the application. 























The <c:vcf tag is embedding the vcf Visualforce Component into the Page with mappings of Lead fields to the fields available in the Component.

In the <apex:page tag, a number of important parameters are set:

• standardcontroller = the object the Visualforce Page is created a vCard against.
• showheader= "false" - we are outputting to a text file. Including the header will add a bunch of HTML to the text file.
• cache = "true" - if this is not set, some browsers delete the file before it can even be opened by the end user.
• content-type=text/x-vcard charset=iso-8859-1 # - Tells the browser it is outputting a vcard file.  This will tell your operating system to apply the actions for .vcf files.  The charset parameter is what allows all characters in the Latin Alphabet to exist in the file and be interpreted properly.  Lastly, anything after the # sign will be the file name when generated.
  

Visualforce Component
The Visualforce Component defines the fields available for inclusion in a vCard file and aligns with the official vCard specification.  There are more fields available to be put into the vCard than are implemented in the Visualforce Pages that come with the application so be sure to review the Component for additional fields to include.  For example, it supports multiple addresses and email addresses.

You do not have access to the detailed configuration of the component.  However, the fields available in the component are documented in the Component Reference in your system.  You can get to the Component Reference by visiting .../apexpages/apexcomponents.apexp in your system.  For example, if you are on NA1, your reference will be at https://na1.salesforce.com/apexpages/apexcomponents.apexp.  View the autovcard:vcf entry of your Component Reference for the details of this component.

Apex Class
The Apex Class is the controller to the Visualforce Component and is where the logic happens to craft the data passed into the Component from the Visualforce Page into a vCard file.  You do not have access to the code and you don't really need it.  The code is doing the smarts around formatting the file and you can assume it will work.

Making Customized Mappings
You have the ability to customize your own vCard mappings.  This is useful for mapping custom fields, adding additional mappings and implementing vCard on a custom object.  To do so, you will create your own custom button that calls your custom Visualforce Page.



















For our example, let's assume we are going to change the Contact vCard to use the Account's Billing Address instead of the Contact's Mailing Address.

1. Start with creating a new Visualforce Page.  It is suggested that you start with one of the existing pages and edit it.  Go to Setup | Develop | Pages and create a new one.  Call it anything you want (e.g. vcf_contact_2).
   
   
2. Copy the contents of the default contact visualforce page (vcf_contact) and change the address mappings.  The below ones in blue would be what you'd want to change.
   
   <apex:page standardController="contact"
   showheader="false"
   cache="true"
   contenttype="text/x-vcard; charset=iso-8859-1 #{!SUBSTITUTE(contact.firstname, ' ', '_')}_{!SUBSTITUTE(contact.lastname, ' ', '_')}.vcf">
   
   <autovcard:vcf firstName="{!contact.firstname}"
   lastName="{!contact.lastname}"
   prefix="{!contact.salutation}"
   nickName="{!contact.firstname}"
   company="{!contact.account.name}"
   title="{!contact.title}"
   workPhone="{!contact.phone}"
   homePhone="{!contact.homephone}"
   mobilePhone="{!contact.mobilephone}"
   faxPhone="{!contact.fax}"
   email="{!contact.email}"
   birthday="{!year(contact.birthdate)}-{!lpad(text(month(contact.birthdate)),2,'0')}-{!lpad(text(day(contact.birthdate)),2,'0')}"
   note="{!contact.description}"
   website="{!contact.account.website}"
   workStreet="{!contact.account.billingstreet}"
   workCity="{!contact.account.billingcity}"
   workStateProvince="{!contact.account.billingstate}"
   workPostalCode="{!contact.account.billingpostalcode}"
   workCountry="{!contact.account.billingcountry}"
   />
   
   </apex:page>
   
   
3. Create a new button on Contacts.
• Type: Detail Page Button
• Behavior:  Execute JavaScript
• Code:  You will want to copy the code from the vCard button on Contacts.  Below is a copy of that code with the changes made in blue.
  
  function autovcardEmbedFormHelper() {
  this.formSubmit = function (ivalue) {
  if (!document.forms.autovcard_getvCard) {
  
  var saveList = document.getElementsByTagName("div");
  
  saveList[saveList.length - 1].innerHTML += "<form name=\"autovcard_getvCard\" method=\"post\" action=\"\/apex\/vcf_contact_2?id="+ivalue+"&core.apexpages.devmode.url=1\"></form>";
  
  }
  document.forms.autovcard_getvCard.submit();
  }
  }
  
  var autovcard_wrapper = new autovcardEmbedFormHelper();
  autovcard_wrapper.formSubmit("{!Contact.Id}");
  
  
4. Put the button we created above onto the Page Layout for Contacts instead of the vCard button that came with the application.