Repeat Strip

Business Background

Repeat Strips give users a sense of consistency when using websites and completing forms. This function enables you to bring a collection of data to and from Salesforce to map dynamically from or to your page. Checking the repeat option simply configures the strip so that this collection of data can be repeated vertically in your strip.

A column on a strip can be repeated. The dynamic Salesforce information will be repeated horizontally until there is no more space and then vertically.

How to Video

  • 0:02 An introduction to the Repeat feature.
  • 0:18 Navigate to the Index Settings.
  • 0:25 Learn more about the Repeat Strip function and how it affects your data.
  • 1:30 We show you how disabling the Repeat Strip feature affects your project.

How to Guide

The Titan Web canvas has a strip by default when a new project is created. You can also add strips to a project.

Note:

In this example, the following elements were added:

  • A strip with a title text field: Customer list
  • A strip with an autofit container with the following input fields:
    • Text fields: First name and Last name
    • Email field
  1. Double-click the strip with the autofit container and click the Strip settings Gear icon. The Strip Setting screen opens.
  2. Click the Repeat checkbox.

Configure a Salesforce Get Integration

The mapped information will be repeated in the strip.

  1. Click the Salesforce option and click the Configure Interactions button. The Salesforce Integration screen opens.
Configure Salesforce Integration
Configure Salesforce Integration
  1. Click the Create New button.
Salesforce Integration screen
Salesforce Integration screen
  1. Use the drop-down lists to select the object in Salesforce as well as the action.
    • In this example, the Contact object is selected.
    • The trigger is “On load .”
  2. Select the Up to radio button and type the number of records in the field. This is the maximum number of records that will be returned.
Object Settings
Object Settings
  1. Click the Condition option and configure a condition; for instance, ContactID is not empty.
  2. If necessary, click the Sort Order option to configure a sort order.
Conditions
Conditions
  1. Click the Mapping option and map the necessary fields.
  2. Click the Apply button. The Salesforce Get integration is added to the Salesforce Integration screen.
Mapping
Mapping
  1. Click the Close button.
Salesforce Get added to Salesforce Integration screen
Salesforce Get added to Salesforce Integration screen
  1. Save and Preview the project.
Salesforce Get added to Settings screen
Salesforce Get added to Settings screen

When the page is loaded, the information is pulled from Salesforce and displayed in repeated strips:

Example
Example

And or remove strip indices with Strip Interactivity

Interactivity can be triggered using different methods. This example uses an On Click Action on a button element.

  1. Add a button element to the project and click the On Click Action icon.
On Click Action on button element
On Click Action on button element
  1. Click the + icon next to the Start node. The Add Node screen opens.
On Click Action screen
On Click Action screen
  1. Under Element Interactivity, click the Strip Interactivity option and click the Next button.
Add Node screen
Add Node screen
  1. Use the drop-down list to select the repeated strip.
  2. Use the radio buttons to select the strip interactivity:
    • None (default option)
    • Insert: An empty repeat strip is added to the page if the button is clicked.
    • Delete: If the button is clicked, the repeated strip is deleted, depending on the option you selected from the drop-down list:
      • Field: Select a field option from the drop-down list.
      • Current Index: The current index will be deleted.
        • The button must be in the repeated strip.
      • Static: Type an index number in the field.
        • This is the default option.
    • Reset: All the repeated strips are cleared, and an empty strip remains.
  3. Click the Next button.
Add Node/Strip Interactivity screen
Add Node/Strip Interactivity screen
  1. Change the tag, if necessary, and click the Insert button. The Strip Interactivity is added to the On Click Action screen.
  2. Click the Apply button.
  3. Save and Preview the project.

When the Insert button is clicked, a repeat strip is added.

Example
Example

When the Delete button is clicked, the repeat strip is deleted, depending on the option you configured.

The Reset button resets the webpage. All the repeated strips are cleared, and an empty strip is left.

Example
Example

Repeat the Column on a Strip

  1. Make sure that you have selected the strip column.
  2. Click the strip Gear icon and click the Repeat column checkbox.
  1. Save and Preview the project.

The pulled information will be repeated vertically until there is no more space and then horizontally.

Example
Example

Hidden Title

Need more help?

Titan logo
Privacy Overview

This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.