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.​​

Requirements

  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.

Implementation

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:

sf1

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

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

sf3

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”.

sf4

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”.

sf5

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

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.
sf7
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. 
sf8

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.
sf9

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. 
sf10

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

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”.

sf11 

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

sf12

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

The contacts form will look similar to this:
sf13
Select a contact from the list (The contact shown above is a test contact). Click on the cog symbol in the top right of the page and select “Edit Page” from the drop-down box.
sf14

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.

sf16

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.
sf17

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

sf18 

A message will appear asking to activate the page.
sf19

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

sf20

For this tutorial, org default was selected by clicking the "Assign as Org Default" button under the "ORG DEFAULT" tab.
sf21
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.
sf22

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

sf23
 

Implementing Autoaddress Through Page Layouts

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

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

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

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

sf26

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.
sf27
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.
sf28

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

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

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

 

Next steps

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