01 Getting Started

This tutorial will cover how to push data from your web form to Salesforce.

This includes creating a record, updating a record, and creating a file in Salesforce. This will also cover triggering a Salesforce action for a button.

02 How to Add Rows and Columns to a Form

1. Click on the + icons to add rows and columns. 

2. You can also, hover over the row or column and click the kebab menu.

3. Select from the listed menu options to make changes to your form.

  Form kebab menu listing screenshot

03 File Upload

1. Select the + icon, navigate to the Input tab, and drag and drop the file upload element into the form row.

Screenshot of the file upload element in the input tab

2. Click the File element gear icon. The element settings window opens.

The Content Tab

1. Use the Max Files field to set a file upload limit.

2. Enable the Image Compression switch to compress an image upload.

3. Enable the File Types function to choose what file types users must provide.

  Screenshot of the file upload settings content tab

The Value Rule Tab

1. Click on the Value Rule Tab and select the Set Value Rules button. The Set Condition screen opens.

2. Set a condition rule that users cannot upload a file larger than 30MB.

There is a limitation where files larger than 30MB files cannot be synced to Salesforce in one push.

3. Add a custom error message so users will be informed if their file is over the limit. Click Apply once your configuration is complete.

  Set conditions for a value rule

04 Set Up a Push

1. Click the + icon to open the Project Settings and click the Salesforce option. The Salesforce Integration screen opens.

Project settings menu with salesforce tab highlighted

2. Select the Push option and click the Create New button. The Map Salesforce fields screen opens on Object Settings.

Salesforce Integration screen showing the push tab

05 The Object Settings Tab

1. Use the Object in Salesforce drop-down list to find the object, for example, Contact.

 2. Add a description that defines the purpose of the push.

 3. Use the Action drop-down and select Create.

Screenshot of the Map salesforce fields showing the object settings tab

06 The Mapping Tab

1. Click the Mapping tab to start configuring your mapping.

2. Use the drop-downs to map the Salesforce Fields to the corresponding Elements.

3. Use the filtering options to display what fields you have mapped. Click Apply.

Screenshot of the Map salesforce fields showing the filtered mapping fields

07 Creating a Child Push

1. Navigate to the Salesforce Integration screen and select the Push tab.

2. Click on the Kebab icon next to the created get. Select Add Child. The Map Salesforce Screen will open.

Salesforce Integration window showing the kebab menu for a push

08 The Object Settings Tab for the Child Push

1. Use the Object in Salesforce to select the Files option. (Content version can also be selected)

2. Add a description that defines the purpose of the child push.

3. Use the action drop-down and select Create.

Screenshot of the object settings tab for Map Salesforce fields

09 The Mapping Tab for the Child Push

1. Click on the Mapping Tab. Use the Filters to view the mapped fields.
  • Titan has automatically mapped the Salesforce Field to the element. This means that the file uploaded will be associated with the contact.
Mapping tab of map salesforce fields displaying the auto mapped contact

2. Use the dropdowns to map the Version Data field to the file upload element.

Map salesforce fields mapping tab with version data highlighted

3. We will create a custom message for the Title element. Select custom using the element drop-down and click the Custom Gear icon. The Custom Message window pop-up opens.

Mapping tab of Map salesforce fields with custom title option displayed

4. Add a custom message and use the drop-downs to select the fields. This will be the title of your document. Click Apply.

Custom message pop up screen

Your created child push will be displayed under the parent push. This push will be linked to a button element.

Screenshot of nested push

10 Adding the Push to the Button

1. Click the button element and click the On Click Action icon. The On Click Action screen opens.

Button element with menu expanded

For this tutorial, we will insert the push to run when the user confirms their submission.
2. Click on the + icon next, and then add node screen opens.

To link actions, hover your cursor over the condition until the + icon displays. Drag the cursor between nodes to create links.

 Screenshot displaying how to connect nodes

  Screenshot of conditional flow

3. Select the Salesforce Action option and click the Next button.

Add node screen with salesforce action highlighted

4. Use the Process push or get drop-down list and select the Push you created. Click the Next button.

Add node/salesforce action with selected node displayed

5. Add a tag if necessary and click the Insert button.

Add a tag screen

6. The Salesforce action is added to the On Click Action screen. Click the Apply button.

Configured node added to conditional flow

11 Save and Preview the Project

1. Save and Preview your project.

When a user provides new details, your Salesforce will be updated with their content information including the captured file.


Screenshot showing how data captured created a new contact in salesforce.

12 Updating a Create Push to an Update Push

1. Go back to your Titan Web project and navigate to the Salesforce Integration window.

2. Select the Edit Icon next to your configured push. The Map Salesforce Screen opens on the Object Settings tab.

Edit icon highlighted next to a created push

3. Use the Action drop-down to change the action to Update.

4. Click on the Radio button Create under If no match is found. For this use case, we want the Push to create a new contact if no match is found.

Map salesforce fields screen with object settings options

5. Click on the Conditions Tab. Map a condition that if the email address entered by the user matches the data in Salesforce, the contact must be updated. If the email addresses do not match the push will create a new contact. Click Apply once the configuration is complete.

Map salesforce fields screen with condition options

By updating the existing push, you do not need to remap the push to your button element.

13 Save and Preview the Project

1. Save and Preview your project.

When the user provides new information associated with an email address, the details will be updated in Salesforce.

Example of how data is captured if the email address already exists in salesforce


If the user provides a different email, a new contact will be created.


Example of how data is captured if the email address does not exist in salesforce

14 Got Feedback?

Additional Resources