Form Design FAQ

Form Components

How can I add images to forms for display only?

Drag and drop the HTML component from Layout Category and use img tag found in the display tab -> HTML Tag
Get the base64 image data for the image to embed. For this you can use a service similar to https://www.base64-image.de/. Make sure image is compressed so that form loads quick
Specify src attribute and assign base64 encoded image data to src attribute (Display Tab -> Attributes)
- Attribute: src and Value: the base64 image string

How can I add text or notes to forms for display only?

Drag and drop the Content Component from ‘Layout’ Category
Enter text or note
Select required font family and font size for styling at header
Image and Media can also be added

I want to reuse some parts of a form in other forms. How do I do that?

You need to create form of type ‘nested form’ and design the part of the form you want to reuse and publish that.

Design the form with reusable components and save the nested form and publish
Now create a new form with type “Form” or open an existing form design where you need it to be included
Drag and drop the “Smart Nested Form” component from the “Turbo Premium” category on to the form
In the Nested Form component properties, select the Form Tab and then choose the nested form from the dropdown to include

I need autogenerated unique ids in forms. How can I achieve that?

Option 1: Using Smart Id Component

Drag and drop the “Smart Id” Component from the Turbo Premium Category
Specify the Patterns under Patterns field in Data tab. See the Smart ID component for more details
The ID will be automatically generated by the system

Option 2: Using Javascript (if you want to custom create an ID on the client immediately)

Use Text Field or Number component and check Disabled checkbox below in Display tab
Under Data tab - Custom Default Value, use the code like the sample below to generate random value:

value = (Math.random() * 100000) + 1;

How can I add icons to text fields and buttons?

Use prefix to add icons:

1. text-field - Add icon tag in prefix or suffix field in display tab:

<i class='fa fa-barcode'></i>

2. button - Add fontawesome icon class in Left icon or Right icon field under display tab:

ex: fa fa-barcode

Conditional Logic & Calculations

How can I hide a control based on another control’s value?

Select the Conditional tab of the component.

Option 1: Simple Section

For “This component should display” - Set to True to show the component or False to hide
For “When the form component” - Select the required component from the list of form components that are displayed
For “Has the value” - Set the value of the component selected in step (b) above that should control the display

Option 2: Advanced Condition

You can also use Advanced Condition to configure a more “programmatic” rule if a more complex condition needs to be satisfied:

// key1 and key2 are API key name of two components
// If the two values are equal the component may be displayed (true) and if not hidden (false)
show = (data.key1 == data.key2);

How can I calculate values for fields?

You can calculate a specific value and set it for a field. Select the Data tab for that component and under Calculated Value, write the required code to set the value.

For e.g. lets assume that a form has three number fields. The API names of these fields are num1, num2 and num3. The requirement is to set the value of the third number field to the sum of the first two number fields:

// We want to set value of num3
value = data.num1 + data.num2;

Styling & Layout

Can I remove the padding for a column?

In the column component, under the Conditional tab navigate to Advanced condition and put in the following code:

var ele = document.querySelectorAll(`#${instance.id}`);
ele.forEach((e)=>{console.log('e ', e.children);
e.children[0].style.padding = '0px 2px'});  // Can set padding as required

Can I remove the margin for a column?

By default -15 margin is present for a column
It can be removed by using a Bootstrap css class
Navigate to the Display Tab Custom css class and set it to m-0

Reference: https://getbootstrap.com/docs/4.4/utilities/spacing/

Can I make datagrid as a card layout on a mobile screen?

To display the datagrid as a card layout, set the custom css class name to ‘datagridcard’ (you can find the setting under Display tab).

How can I use custom CSS classes to style form components?

Add bootstrap predefined css class in custom CSS class field found in the Display tab.

Reference: https://getbootstrap.com/docs/4.4/utilities/

How can I customize look and feel with CSS?

Add CSS class name by navigating to the Display tab and setting Custom CSS Class.

Text color classes:

text-primary, text-secondary, text-success, text-danger, text-warning, text-info, text-light, text-dark, text-muted, text-white

Background color classes:

bg-primary, bg-secondary, bg-success, bg-danger, bg-warning, bg-info, bg-light, bg-dark, bg-white

For other properties: https://getbootstrap.com/docs/4.0/utilities/borders/

Internationalization

I need my forms internationalised. Where do I maintain translations?

Choose the form and then select Translations
Add all label translations in json structure as mentioned below for each language using the standard 2 letter language key
Note that the attribute name in the JSON below is the label as designed in the form

{
  "en": {
    "First Name": "First Name",
    "Last Name": "Last Name",
    "Enter your first name": "Enter your first name",
    "Enter your last name": "Enter your last name"
  },
  "sp": {
    "First Name": "primer nombre",
    "Last Name": "apellido",
    "Enter your first name": "ponga su primer nombre",
    "Enter your last name": "ingresa tu apellido"
  }
}

When the user logs in they have the option to select the language. Forms will be displayed in the selected language automatically. However if the language is not available for that form it will be displayed in the default language.

I want my forms to be responsive. How do I do that?

The Column layout needs to be used to make the form automatically responsive. Drag and drop the Column layout found in the ‘Layout’ category. All other components can be dropped inside the column component.

Signatures & PDFs

Signatures appear stretched in PDFs. How can I fix that?

First add a column component in the form
Configure it to have 3 columns
Drag and drop the Signature component inside the first column
- Leave the width - 100% and height - 150px of the signature component at default values
Leave the other two columns empty

HTML Component

How to work with HTML component?

Just specify the tag name in HTML Tag field under Display tab, or use tags inside Content field as mentioned in the examples below:

Tag	Example
Headers	`<h1>Header text</h1>`
Bold	`<b>Bold text</b>`
Paragraph	`<p>A paragraph</p>`
Line Break	`</br>`
Horizontal Line	`<hr>`
Image	`<img>`
Ordered List	`<ol><li></li><li></li></ol>`
Unordered List	`<ul><li></li><li></li></ul>`

How do I use HTML Attributes?

Attributes in HTML component

Add Attributes as key-value pair by navigating to the Display tab and adding Attributes:

Attribute	Value
Height	50%
width	80%
src	base64 Image encoded string

Attributes in Layout section

Add Attributes as key-value pair under Layout > HTML Attributes:

Attribute	Value
style	color:red;width:50%;height:60%border:none;

For other tags: https://www.w3schools.com/TAGS/default.ASP