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.
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
- Double-click the strip with the autofit container and click the Strip settings Gear icon. The Strip Setting screen opens.
- Click the Repeat checkbox.
Configure a Salesforce Get Integration
The mapped information will be repeated in the strip.
- Click the Salesforce option and click the Configure Interactions button. The Salesforce Integration screen opens.
- Click the Create New button.
- 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 .”
- 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.
- Click the Condition option and configure a condition; for instance, ContactID is not empty.
- If necessary, click the Sort Order option to configure a sort order.
- Click the Mapping option and map the necessary fields.
- Click the Apply button. The Salesforce Get integration is added to the Salesforce Integration screen.
- Click the Close button.
- Save and Preview the project.
When the page is loaded, the information is pulled from Salesforce and displayed in repeated strips:
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.
- Add a button element to the project and click the On Click Action icon.
- Click the + icon next to the Start node. The Add Node screen opens.
- Under Element Interactivity, click the Strip Interactivity option and click the Next button.
- Use the drop-down list to select the repeated strip.
- 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.
- Click the Next button.
- Change the tag, if necessary, and click the Insert button. The Strip Interactivity is added to the On Click Action screen.
- Click the Apply button.
- Save and Preview the project.
When the Insert button is clicked, a repeat strip is added.
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.
Repeat the Column on a Strip
- Make sure that you have selected the strip column.
- Click the strip Gear icon and click the Repeat column checkbox.
- Save and Preview the project.
The pulled information will be repeated vertically until there is no more space and then horizontally.