Salesforce Integration

Integrating into Salesforce to create an address form.


Implementing Autoaddress into a Visualforce Page

Integrating with Salesforce requires you to create a custom “Visualforce” page written in “Apex”. This will also interpret pure HTML and jQuery correctly so the Autoaddress control will be implemented by wrapping standard HTML inside Apex tags.​​


  1. Address form code which can be downloaded from the Autoaddress Git page here
  2. A license key, provided by Autoaddress. Contact Autoaddress sales team for more information.


Log in to your Salesforce application, using a profile with permission to make site changes. Once logged in, you will see a tool bar in the top right corner as seen below:


Click on the gear icon (third from the right) and select “Developer Console”.

This will open the developer console in a new browser window. It will look like the below image:


You now need to create a new visualforce page. To do this, click the “File” button, located top left of the console. This will drop down a menu. From this menu, select “New” to open a sub-menu. From the sub-menu, select “Visualforce page”.


This will cause a pop-up box to appear, requesting a name for the new page. In this example, the page is called “Contact_Address”.


A new file will open in the console with the name you gave previously.

Next is to add apex code to create a form and integrate the Autoaddress control. If, at this point, you haven't downloaded the code from GitHub, you can follow the optional reading guide "CRM Integration Files" on how to do that.

Once the repository has been downloaded and unzipped, open the "Salesforce" folder inside the parent folder.
This folder will contain one HTML file called "Address Form". Right click the file and open with a text editor of your choice. Copy the code and paste it into the Salesforce developer console, replacing the apex tags that are populated by default. 

Save the file by using the keyboard shortcut "Ctrl + s" or by clicking the "File" menu in the top right corner and click the "Save" button in the menu that drops down.

This can now be previewed by clicking the “Preview” button below the files name.

This will open a new web page in a new tab with the components that were copied from the demo code. 

Now, the new page needs access to be used in lightning apps. To do this, got to "Setup" and ​search for "Visualforce Pages" in quick find.When in Visualforce Pages, search for the form in the list and click edit.

Next, check the box labeled "Available for Lightning Experience, Lightning Communities, and the mobile app" and click save.

Now that there’s a visualforce page saved in the application, it can be used to add this functionality to an existing Salesforce app.

Implementing Autoaddress with the Salesforce Lightning App Builder

Close the preview page and close the developer console. Next, choose where you want to implement it. This document will use the Marketing app to show how to drop the new Visualforce page in easily. Open the app launcher and select “Marketing”.


The marketing app will now open and will look something like this:


Click on the "Contacts" tab to open the Contacts form.

The contacts form will look similar to this:
Click on the cog symbol in the top right of the page and select “Edit Object” from the drop-down box.

This will bring you to the object manager for the Contacts object. From the list on the left, select "Lightning Record Pages" which will look like below.

Select the most up to date record of the page. This will open a page like this:

Select the "Edit" button. This will bring you to the “Lightning App Builder page”.

sf15On the left side of the screen is a list of “Lightning Components”. Scroll down the list until you find the “Visualforce” component. Click on the item and it will automatically put the latest visualforce page into the editor in the middle of the page.


If the Contact_Address form is not the page automatically used, the menu on the right side of the App Builder screen allows you to select which visualforce page you want to use.

Click the “Save” button at the top of the screen to save the page.


A message will appear asking to activate the page.

Click the "Activate" button. This will open a page for you to select what level to default the page at.


For this tutorial, org default was selected by clicking the "Assign as Org Default" button under the "ORG DEFAULT" tab.
Click the "Save" button on the page that follows after your selection. After that, you will be brought back to the app builder page. Click the "Back" button at the top right of the page to take you back to the contacts page.

 The Contact_Address form will now be present in the Marketing Contacts tab when you have selected a contact to view.


Implementing Autoaddress Through Page Layouts

To add the Autoaddress control through page layouts, click the “Contacts” tab at the top of the screen.

Click on the cog symbol in the top right of the page a select “Edit Object” from the drop-down box.

This will bring you to the Object Manager for “Contact”. On the left of the page is a menu, click the “Page Layouts” item.

The screen will now show the layouts assigned to Contact. Select “Contact Layout”.


You will now be able to edit the contact layout. In the tool box at the top, scroll until you find “Visualforce Pages” and select it.
Drag the “Contact_Address” box to any part of the layout you want. For this document, the existing elements in “Address Information” were removed and replaced by the visualforce form.

Click the “Quick Save” button at the top of the tool box.

Go back to the Contacts tab and select a contact and open the “DETAILS” tab.

Scroll down to find the Autoaddress control form as part of the page.


Next steps

The next step is to set the OnLoad Event for the form: