Simple Repeat Element Template

Business Background

Templates are pre-designed structures that help streamline form creation, data collection, or workflow automation. They ensure consistency, save time, and reduce manual effort across various applications.

You can add a form inside a repeat auto fit container to your project with just a few clicks. Add as many elements as you need to create a responsive form that works on different device screens.

Titan Solution

Titan provides a basic template for creating a simple web page with repeated Salesforce records in just a few clicks. This article demonstrates creating a form inside a repeat auto fit container, which repeats its contents according to the configured number of records.

How to Video

• 0:00 – Introduction
• 0:41 – How to Configure a List of All the Contacts
• 1:08 – Configure the Input Elements
• 1:41 – Add Salesforce Mapping
• 2:11 – Configure Page Action
• 2:28 – Add Additional fields if Necessary
• 2:43 – Quick Reference to Styling. Save and Preview the Project
• 2:48 – Save and Preview the Project and Change Device Layouts
• 3:32 – Quick Overview of the Template

How to Guide

Download the template

1. Download the Titan Web project zip file.
2. On the Titan Dashboard, click the Kebab icon to import the project. The standard Open file dialog is shown.

3. Select the downloaded zip file and click the Open button.

4. Click the template project to open it.

Configure the form inside the auto fit container

The Titan Web project will open with the following:

• Form element inside a
• Repeat auto fit container

1. Click the + icon to open the list of elements.
2. Select the Input option and drag-and-drop the required elements to the form.

3. Rename the input fields by clicking the Gear icon of the element and changing the label.
4. If necessary, use the Alignment icon to center the input fields.

5. Click the Gear icon to open the Project settings and select the Salesforce option. The Salesforce Integration screen opens.

6. Click the Edit icon.

7. Map the text field in the auto fit container to the corresponding Salesforce fields.

8. Click the Apply button.

9. Click the Close button on the Salesforce Integration screen.
10. Click the Pages drop-down list and then click the Kebab icon next to the Page option.
11. Click the Configure Actions button. The Configure Actions screen opens.

12. Select the Every Time option. The Salesforce integration will run every time the page loads.
13. Double-click the Salesforce Action node.

14. Make sure that the Salesforce Get integration has been selected.
15. Click the Next button and change the tag if necessary.

16. Click the Save button and then click the Apply button on the Configure Actions screen.
17. Edit the form if necessary.
    • Learn more about adding and editing columns
    • Learn more about adding and editing rows
18. Click the + icon(s) to add columns or rows.
19. Click the Kebab icon(s) to edit columns or rows.

20. Merge or split rows.

21. Click the + icon to open the list of elements to add more elements to the form, if necessary.
22. Select the Input option and drag-and-drop the required elements.
23. Click the Device drop-down icon.
    • None of the device layouts were configured.
    • The Responsive AI option is enabled by default. Titan doesn’t change the structure of your project; it just makes it smaller to match the device.

24. Save and Preview the page.

The page is, by default, shown for desktop size (device=lg).

Change the query string to specify the device layout. You can edit the URL to match the device type by using the device code:

• lg – desktop
• md – laptop
• sml – tablet large
• sm – tablet small
• xs – mobile large
• ss – mobile small

This template allows users to create versatile web pages with image and text elements that display seamlessly on any device size.

Style the contents

The web page can be styled using the following option:

You can style the page in different ways. Here are some examples:

1. Change the form’s fill to any color that suits your branding.

2. Add an image to the auto fit container.

3. Change the font qualities of the text elements.

The styling is shown in the preview.

For more information about My Strips, watch the following video:

• 0:00 Intro
• 0:10 Save to my strips
• 0:40 Reusing strips