01 Getting Started

In this tutorial, we cover how to deal with Repeat data for multiple records from Salesforce, how to pull data from Salesforce into your projects, and how to push data from your projects to Salesforce.

02 Initial Setup

In this example, we show you how to bring multiple records from Salesforce into your project, for example, multiple contacts under an account with a Lookup element and a Button.

03 Add a Lookup Field

1. Search and find a Lookup field in the Elements list.

Screenshot showing how to insert a lookup element

2. Drag the element to your project and configure the Lookup.

3. Start configuring the Lookup by selecting a source from the drop-down list and then clicking the Next button.

Screenshot of the look up configuration window showing the select source step

4. Configure your conditions for the Lookup and click on the Next button.

Screenshot of the look up configuration window showing the conditions step

5. Map your Lookup field and then click on the Apply button.

Screenshot of the look up configuration window showing the mapping step

6. Change the label under Content in your LookUp Settings. The Lookup Settings can be accessed through the Gear icon on the element.

Screenshot of the Lookup Settings menu showing the Content tab

04 Add a Text Input Field

1. Find a text field in your Elements list by clicking on the + button and then dragging your element into your project.

Screenshot showing how to insert a text field

2. Run a Get on your text field by clicking on the Gear icon and then selecting the Salesforce option in the sidebar menu.

3. Click on the Create New button.

Screenshot showing how to navigate to the Salesforce Integration window

4. Configure your object settings. We have chosen to use Contact and User Action for this tutorial from the drop-down lists.

Screenshot of Map Salesforce Fields window showing Object Settings tab

5. Set your conditions by clicking in the Conditions section. We have used Account ID > Equals > Field > Accounts/Value.

Screenshot of Map Salesforce Fields window showing Conditions tab

6. Map the Full Name of contacts to the Full Name field in the Mapping section and click Apply.

Screenshot of Map Salesforce Fields window showing Mapping tab

05 Add a Button

Add a button to trigger a Get action to bring a contact into your web project.

1. Find a button in your Elements list by clicking on the + button and then drag your element into your project.

Screenshot showing how to add a button to the canvas

2. Open your button settings by clicking on the Gear icon and change the Button text by updating the Text field under Content settings.

Screenshot showing the button settings with the content tab displayed

3. Click on the link button to add a Get to the button with an on-click action.

4. Select the Start button and choose an action.

Screenshot showing the configure on click action link

5. Choose Salesforce action from the list and click on the Next button.

Screenshot showing the Add Node window with the salesforce action node selected

6. Add your Get to the Process push or get drop-down list and it will be added to the Integration Action list below.

Screenshot of the Add Node Salesforce Action window showing how to select a configured push or get

06 How to Create a Repeat Strip for Data

1. Select your strip and open its settings by clicking on the Gear icon.

 2. Select the Repeat checkbox under Content.

Screenshot showing how to enable repeat strip

3. Click on the Save and Preview buttons to view your data from a Lookup.

4. When previewing your Lookup data, notice that the data is called to your project automatically in strips for easy viewing based on the number of contacts returned.

Screenshot of the repeat strip preview example

07 How to Create a Repeat Column for Data

To display the data in a slightly different way, we can use repeated columns.

1. Click on your repeat strip and change it to a repeat column by selecting the column icon. You can toggle between your strip and your column by clicking on these icons.

2. Check the Repeat Column checkbox in your Strip Column settings.

Screenshot showing how to enable the repeat column feature

3. Click on the Save and Preview buttons to view your data from the Lookup.

4. When previewing your Lookup data, notice that the data is called to your project automatically in repeated columns for easy viewing based on the number of contacts returned.

Screenshot of the repeat strip example

08 How to Create a Repeat Container for Data

Another way to repeat data is to use a repeat container.

1. Click on the + button to add a Repeat Auto Fit Container from the Elements list to your web project.

Screenshot of the element menu showing how to insert a repeat auto fit container

2. Add a Text Input field to the Repeat Auto Fit Container.

Screenshot of the element menu

3. Click on the Text field gear icon and edit the label under Content settings.

Screenshot of the text settings menu showing the content tab

4. Click on your Text field and choose the arrow icon to display your data vertically.

Screenshot of the alignment options for the text element

5. Access the Salesforce menu to map your Text Input field and click on the Contact action that was configured earlier in the tutorial.

Screenshot showing how to navigate to the Salesforce Integration window

6. Select the Mapping section and add Full Name to the Repeat Auto Fit Container before clicking on Apply.

Screenshot of Map Salesforce Fields window displaying Mapping tab

7. Click the Save and Preview buttons to view your data from a Lookup.

8. When previewing your Lookup data, notice that the data is called to your project automatically in a list format in your Repeat Auto Fit Container for easy viewing based on the number of contacts returned.

Screenshot of a form preview

09 Setting Custom Variables

1. Go to Strip Settings and click on the gear icon next to Custom Variables.

Screenshot of the strip settings menu showing the content tab

2. Add variables that will repeat alongside the repeat strip. To do this click on the + Add a Static Variable button and fill out your fields before clicking on Apply.

Screenshot of the Custom variables window displaying the static tab

3. Access the Salesforce menu to map your variables and click on the Contact Get configured earlier in the tutorial.

Screenshot showing how to navigate to the Salesforce Integration window

4. Click on the Mapping section and map your variables using the drop-down menus.

5. Click on the Apply button once configured.

Screenshot of the Map Salesforce Fields window displaying the Mapping tab

6. Click on the gear icon and then select the Tools option from the menu.

7. Continue to turn on Debug mode by flipping the toggle switch to on to see the variables in action.

Screenshot displaying Titan project settings showing how to enable debug mode

8. Click the Save and Preview buttons to view your data from a Lookup.

9. In preview mode, test your project and then click on the Debug button to view the strip variables.

Screenshot showing the debug button in preview mode

10. View the full Debug Project details.

Screenshot of a full debug breakdown

10 Pushing Data Back to Salesforce using a Repeat Strip

This will be split into different sections to cover the setup forms and buttons.

11 Initial Set Up - Form

1. Add a form element to your project using the + button.

Adding a form element to the canvas

2. Configure the number of columns and rows for your form and click on Apply in the popup notification.

configure form

3. Drag and drop a text input field into two cells of the form, and a button into the last cell.

It is essential to pay attention to the placement of your buttons.

If the button is placed inside the repeat strip, the action is repeated for that section only.

The action will run across multiple strips when the button is outside the repeat strip.


drag and drop elements into form

4. Rename the Text Input fields to First Name and Last Name under Content Settings.

content tab text element setting menu

5. Rename the button to Delete under Content Settings.

content tab button element settings

6. Set up the Delete button by clicking the on-click action button.

configure on click action link

7. Choose Strip Interactivity from the Element Activity list.

strip interactivity add node

8. Choose Repeat Strip from the Strip Element drop-down menu, the Delete radio button, and the Current Index option, before clicking the Next button.

Screenshot of the On Click Action window with the Add Node Strip Interactivity screen overlayed

12 Initial Set Up - Button

1. Add another button to your project and rename it as Add Strip under Content Settings.

Screenshot of the button settings menu showing the content tab

2. Set up the Add Strip button by clicking on the on-click action button.

Screenshot of the button menu with the On click action link highlighted

3. Choose Strip Interactivity from the Element Activity list.

Screenshot of the Add Node screen with the strip interactivity node highlighted

4. Choose Repeat Strip from the Strip Element drop-down menu and select the Insert radio button before clicking Next.

5. Add a third button to your project and rename it as Push to Salesforce under Content Settings.

Screenshot of the button settings menu displaying the content tab

6. Set up the Push to Salesforce button by clicking the on-click action button and selecting a Salesforce action this time.

Screenshot of On Click Action window with Add Node screen overlayed

7. Click on the Salesforce Integration button.

Screenshot of the Add Node Salesforce Action window

8. Select Push in the side menu and then click on the Create New button.

Screenshot of the Salesforce Integration window displaying the Push tab highlighting the Create New button

9. Configure your Object Settings.

Screenshot of the Map Salesforce fields window showing the Object settings tab

10. Configure your Mapping and then click on the Apply button.

Screenshot of Map Salesforce fields window showing the Mapping tab

11. Add your integration action and click on the Next button.

Screenshot of the Add Node Salesforce Action window displaying the selected Get

12. Click on the Save and Preview buttons to push your data to Salesforce.

13. Test your project: The Add Strip button should add text fields. The Delete button should delete text fields. The Push to SF button should push your data to Salesforce.

Screenshot of preview mode of the configured project

13 Got Feedback?

Additional Resources