If you find any errors, typos or have general feedback, select the text and click CTRL+ALT+ENTER.

What we are going to build?

In this tutorial, you’ll learn how to integrate Salesforce into your Appery.io app to create contacts.

Before you begin

Tutorial level: intermediate.

Registering & creating an app

If you already have a Salesforce developer account, and have created connected applications there, skip this section and go to creating services in Appery.io to integrate your applications. You need a Consumer Key in your Appery.io app.

To register on salesforce.com as a developer, open https://events.developerforce.com/signup. The developer can call the REST API provided by Salesforce. After confirming the registration, open this page where you can create a connected app. This app sends requests for access, and gets access to the objects for which you are going to generate services in Appery.io:StartPage

Click Create > Apps on the left panel, then click “New” in the Connected Apps area, and set the new app parameters:NewConnectedApp

The Callback URL is the standard Appery.io page that receives data from Salesforce, and saves it in the client session:

OAuth Scopes should have at least the Access and manage your data (api) value. Later, you may give greater scope to your app if necessary.

After your app is created, you’ll get a Customer Key, which is needed for your Appery.io application:ConsumerKeyNow we can create Salesforce services in Appery.io.

Creating services in Appery.io

You can create a new project or use an existing one.

To integrate your Appery.io project with Salesforce:

1. Select CREATE NEW > Salesforce Services.

The first time, you’ll need to log in and allow access to your data.

Note: You will need to allow pop-up windows in your browser.

2. The login window closes automatically, and you’re redirected to the “Salesforce services” popup, where you can check the services you need.

3. Click “New channel” to create Proxy channel.

4. For this project, find “Contact,” expand it, and check the “Create” and “Query” services. Then click “Import selected services”:
ImportServices

5. In the Services block, you can find three new Salesforce services, and in the JavaScript block, there’s a Salesforce_utils file.

6. Open the Salesforce_settings service, and for the client_id parameter, enter your Consumer Key value (copy it from the Salesforce application page).

7. Copy the salesforce_instance_url and salesforce_access_token parameters from the “Salesforce services” popup (click CREATE NEW > Saleforce Services, and then “Show Salesforce token info”):Import

8. Copy the Authorization header value for salesforce_access_token and the Salesforce instance URL value for salesforce_instance_url. Paste them to the according parameters in Salesforce_settings.

9. Now you can test your services. Open the Salesforce_Contact_query_service, switch to the Test tab, and click “Test”:Test

Note: while defining Salesforce service integration in appery.io to query or update an entity on Salesforce, additional request or response parameters cannot be passed to the service by default. Instead, a JS statement to specify the parameters should be written.

Important: After the service has been tested, remove the values of the salesforce_instance_url and salesforce_access_token parameters in Salesforce_settings, otherwise your app won’t work correctly.

Building the mobile UI

For this app, you need two pages: startScreen and addContact.

1. The startScreen has two buttons:

  • loginButton with a run JavaScript event:

This function is defined in the custom Salesforce_utils file.

  • contactButton with a navigate to page event; navigating to the addContact page.

Login

The addContact page can have fields for any contact information you want to save. The fields are limited only by the parameters in the Salesforce_Contact_create_service in Request view.

Here is one possibility for the page UI:
AddContact

2. After you’ve dropped all the elements you need, switch to DATA view of the addContact Page, and add the Salesforce_Contact_create_service:CreateService

3. Click “Mapping” for Before Send event and map all your input components to the service request parameters:Mapping

4. In mapping to Birthday parameter click “JS” to add the following JS:

5. Click “Save and return”.

6. Once all the components are mapped, invoke the create_service by clicking on the Save button. To do that, select the “Save” button and add the following event:SaveButton

Testing the app

After you’ve completed the steps, save the project and click “Test.”

On the startScreen, click “Log in to SalesForce.” You’re redirected to the Salesforce login page:
sf001

After entering your Salesforce credentials, you should allow access to your data by clicking “Allow”:
sf023

These windows are closed; you’ll appear on your startScreen. Click “Create Contact.” Enter the new contact’s data, and click “Save
Fin

To check that your application worked correctly, open your Salesforce account and check “Recent Items.” You’ll see your most recently added contacts:
Site

You can add any other Salesforce services to your Appery.io application in the same way.