Control elements
Smartform control elements are located on the right-hand side of the design screen. You can either click on them to insert them in to the current position of your design, or you can use the drag-and-drop functionality.
Overview of Control Elements
This is a list of smartform elements you can use when designing a smartform.
| # | Smartform Control Element | Explained |
|---|---|---|
| 1 | Headline | Headline elements are possible to show as table of content. Can be defined as H1, H2 or H3 |
| 2 | Text | Fixed text to show in a smartform |
| 3 | Hyperlink | Define a hyperlink by text and actual link |
| 4 | Input line | The input line can be put to the left or on top of the input field |
| 5 | Input area | Input area can define number of input lines |
| 6 | Timepicker | A time picker control that allows you to pick a time |
| 7 | Datepicker | A date picker control that allows you to pick year, month, and day of month |
| 8 | Checkbox | A standard checkbox including a label |
| 9 | Switch | A switch button to toggle on or off. This is an alternative to a checkbox |
| 10 | List | List of data |
| 11 | Dropdown | Dropdown with selectable items |
| 12 | Radiobutton | Radio button that are grouped together within a row |
| 13 | Table | A standard table |
| 14 | Signature | Signature field where a person can sign by using a mouse or any other pointing device |
| 15 | Smart Table | Uses a Smart object. A Smart table that can be filled with data by the user |
| 16 | Order Table | Special constructed element for creating an order table |
| 17 | Bitmap | Bitmap that can be resized and aligned |
| 18 | Video | Vimeo, YouTube or file location of video that will run as part of your smartform |
| 19 | Divider | Horisontal divider that can be defined by color and thickness |
| 20 | File upload | Option to upload a file as part of the Smartform |
| 21 | Attachment | Attach a file to the Smartform |
| 22 | Submit button | Button that submits the content of the Smartform. This button is necessary when a Recipient submits data to your systems |
| 23 | Clear button | Button that clears the Smartform if it is pushed |
| 24 | Rich text | A simplified rich text editor allows for more text design element in the Smartform |
| 25 | Spacer | Allocate empty space in the form |
| 26 | Matrix | Displays data in a customizable table format, enabling organized data entry, reporting, and interaction |
| 27 | Map | Display and interact with geographic locations |
Attachment
This option allows you to attach a file to the smartform. This could typically be a pdf document about general terms and condition
| Item | Explaining |
|---|---|
| Property | Property identifier for element |
| Filename | The name you would like to display in the smartform |
| Description | A description of the file that will show below the file name |
| Helper text | A helptext will show when you do a mouseover |
| Value | The actual file / attachment |
Bitmap
This feature will add a bitmap that will embedded into the smartform. It is therefor important not to include large bitmaps, they will slow the loading process down.
| Item | Explaining |
|---|---|
| Property | Property identifier for the bitmap element |
| Value | Upload or delete the bitmap you would like to. A small tip is to use transparent bitmaps. They will work best with your background colors |
| Size | Size of the bitmap. Default value is 120. Try to figure out the value that match the size you would like |
| Rounded corners | Bitmap will get rounded corners |
| Border color | Define a border color if you would like to have a border around the bitmap |
| Border Decide | which parts of the bitmap should have a border or not and their thickness size |
| Alignment | Define if you would like to align the bitmap to the left, in center or to the right in the cell where you placed it |
Checkbox
A checkbox is an element where the user can make decission in a form. A checkbox is either true or false (not checked)
| Item | Explaining |
|---|---|
| Property | This is the fieldname that identifies the field |
| Label | Label to show above or in front of the input line |
| Description | Specifying the subtext under the checkbox label text |
| Helper text | This is the help text associated with the field when doing a mouseover |
| Read Only | Not possible to enter values into the field |
| Prevent data insert | Prevent data to be inserted through an external API |
| Background | Background color for the input field. Default is white |
| Hide description | Hide the description field and only show the label |
| Default state | Decide if default state of the check box should be checked or not |
| Connected elements | Elements that will be available if checkbox is checked |
| Color | Text color. Default is black |
| Label Color | Text color for label |
| Label size | Text size for label |
| Bold, Italic, Underline | Define the style for label and descriptions |
Clear
This button will clear all fields in a smartform
| Item | Explaining |
|---|---|
| Property | Property identifier for button |
| Name | Text to show on button |
| Message | A message to show after button ha been pressed. Like “Data is now cleaer and you can close this window” |
| Helper text | A helptext will show when you do a mouseover |
| Background color | Button background color. Default is black |
| With | Button with |
| Rounded corners | Give button rounded corners |
| Border color | Color of border around the button |
| Border Size | of the border |
| Text color | Color of button text |
| Text size | Size of text showing on button |
| Alignment | Aligning the button in the cell where it has been placed. Can be aligned to the left, center or to the right |
Date Picker
A datepicker will pick the date based on user keyboard input or selection from a calender.
| Item | Explaining |
|---|---|
| Property | This is the fieldname that identifies the field |
| Label | Label to show above or in front of the input line |
| Placeholder | This is a display value only that will show until a user has started to fill in text |
| Helper text | This is the help text associated with the field when doing a mouseover |
| Required field | An error message will show if the field is not filled in |
| Read Only | Not possible to enter values into the field |
| Prevent data insert | Prevent data to be inserted through an external API |
| Background | Background color for the input field. Default is white |
| Label top | If not clicked the label will show infront. Otherwise above the input field |
| Lines | Default number of lines that the text area shall contain |
| Rounded corners | Input box get rounded corners if checked |
| Border | color Color of borders for the input field. Default is black |
| Border | Select which sides of the text that should include borders and their thickness |
| Color | Text color. Default is black |
| Label Color | Text color for label |
| Label size | Text size for label |
Divider
A divider is a line that can split the page for you. It can often make it easier to read for the user if different areas are splitted with a divider
| Item | Explaining |
|---|---|
| Height | Height of the divider |
| With | You can limit the length of the divider. Default is 0 which means it will cover the full page |
| Color | Color of the divider |
Dropdown
A dropdown element is very efficient regarding space on the screen. You can define display values, variable names for items you would like to have in the dropdown.
| Item | Explaining |
|---|---|
| Property | This is the fieldname that identifies the field |
| Label | Label to show above or in front of the input line |
| Placeholder | This is a display value only that will show until a user has started to fill in text |
| Helper text | This is the help text associated with the field when doing a mouseover |
| Items | Here you can define the items in the dropdown include their values. You can choose to have the dropdown sorted alphabetically or you can sort it your self |
| Required Field | An error message will show if the field is not filled in |
| Read Only | Not possible to enter values into the field |
| Prevent data insert | Prevent data to be inserted through an external API |
| Background | Background color for the input field. Default is white |
| Label top | If not clicked the label will show infront. Otherwise above the input field |
| Hide label | Label is hidden when checked |
| Rounded corners | Input box get rounded corners if checked |
| Border color | Color of borders for the input field. Default is black |
| Border | Select which sides of the text that should include borders and their thickness |
| Color | Text color. Default is black |
| Dependencies | By adding a checkbox to the smartform, you can set that this checkbox has to be checked in order to see the input field |
| API retrieve | API defined in the API template on general level that will get the input field value upon change and then be able toretrun or update other fields in the smartform by useing their properties and setting their values |
| Label Color | Text color for label |
| Label size | Text size for label |
| Label with | With for label. most relevant if label on top is not checked |
| Label Bold, Italic, Underline | Defining text style for the label |
| Input color | Small text to be placed at the end of the inputfield. Could for instance be “persons” |
| Input Size | Small text to show first in an input field. For instance ‘Number 1-10’ |
| Input With | The with of the dropdown box |
| Input Alignment | Aligning the text in the dropdown box |
| Input Bold, Italic, Underline | Defining text style for the label |
File upload
This is a very useful feature when you would like user to be able to attach files to a smartform.
| Item | Explaining |
|---|---|
| Property | Property identifier for the file upload element |
| Text | Text to show in the file upload window |
| Helper text | Help that will show when the user makes a mouse over |
| Max size in mb | Maximum total size for files to be uploaded |
| Color | Text color |
| Size | Text size |
| Description | Description text that will show in the upload window |
| Required field | This field is required in order to submit the smartform |
| Read only | The user will not be able to change data |
| Prevent data insert | Will not allow API to insert data |
| Rounded corners | Make the corners rounded |
| Border color | Border color around the file upload element |
Headline
A headline is not much different from a normal text. Sizes, Bold, italic, colors etc. are the same. But you can tell that a text is H1, H2 or H3 which has an effect if you choose that the smartform shall include a table of content. To turn the table of content on you need to go to the the Theme menu for the Smartform and select Type is Standard w/table
| Item | Explaining |
|---|---|
| Property | This is the fieldname that identifies the field |
| Value | This is the value of the field |
| Helper text | This is the help text associated with the field when doing a mouseover |
| Color | Text color. Default is black |
| Size | Text size |
| Alignment | Aligning the text to the right, middle or left |
| Bold | Make the text bold |
| Italic | Make the text Italic |
| Underline | Make the text underline |
| Header type | Tell if the Header is H1, H2 or H3. This will affect their default properties and how they will be displayed in a table of content |
Hyperlink
This control gives the designer the possibility to navigate to other references etc. that can be defined through an URL. It is possible to have a hyperlink as pure text or as a button.
| Item | Explaining |
|---|---|
| Property | This is the fieldname that identifies the field |
| Text | Text that will show in the form for the link. Example: “Click here to open link” |
| Helper text | This is the help text associated with the field when doing a mouseover |
| URL | The URL to open by clicking the link. Example: www.google.com |
| Show hyperlink as button | This will show the hyperlink as a button and also open up button properties |
| Border | Select which sides of the text that should include borders and their thickness |
| Color | Text color. Default is black |
| Size | Text size |
| Alignment | Aligning the text to the right, middle or left |
| Bold | Make the text bold |
| Italic | Make the text Italic |
| Underline | Make the text underline |
| Button Background color | Possible to select Button color if the option to show the link as button is ticked off |
| With | The with of the button. 140 would be a good size |
| Rounded corner | Button will get rounded corners |
| Border color | Define colors for a border around the button |
| Border | Define border size around the button |
Input line
A input line is a control for allowing user for input as text. The input line has however several options for controls and lookups.
| Item | Explaining |
|---|---|
| Property | This is the fieldname that identifies the field |
| Label | Label to show above or in front of the input line |
| Placeholder | This is a display value only that will show until a user has started to fill in text. A typical value could be |
| Initial value | This is a initial value when the smartform is created. Could be used when for instance the value is most likely to be a certain value |
| Helper text | This is the help text associated with the field when doing a mouseover |
| Validate data | There are certain built in qualifiers of a field that will evaluate that the value is filled in according to the validation rule |
| Custom validation error message | A custom defined message if the value entered is not according to the validation rule |
| Required field | An error message will show if the field is not filled in |
| Read Only | Not possible to enter values into the field |
| Prevent data insert | Prevent data to be inserted through an external API |
| Background | Background color for the input field. Default is white |
| Label top | If not clicked the label will show in front. Otherwise above the input field |
| Hide label | Label is hidden when checked |
| Rounded corners | Input box get rounded corners if checked |
| Border color | Color of borders for the input field. Default is black |
| Border | Select which sides of the text that should include borders and their thickness |
| Color | Text color. Default is black |
| Dependencies | By adding a checkbox to the smartform, you can set that this checkbox has to be checked in order to see the input field |
| API retrieve | API defined in the API template on general level that will get the input field value upon change and then be able to return or update other fields in the smartform by using their properties and setting their values |
| Workflow Retrieve | A change in this value will cause the selected workflow to be triggered that again would be able to make API lookups and put new values back into the smartform |
| Label Color | Text color for label |
| Label size | Text size for label |
| Label with | With for label. most relevant if label on top is not checked |
| Label alignment | Left, Center or right alignment of the label |
| Label Bold, Italic, Underline | Defining text style for the label |
| Suffix | Small text to be placed at the end of the input field. Could for instance be “persons” |
| Prefix | Small text to show first in an input field. For instance ‘Number 1-10’ |
Input area
An input area opens an input space where the same formatting for all input is used. You can define number of rows as default. Otherwise a text area will expand as the user starts filling in more and more information.
| Item | Explaining |
|---|---|
| Property | This is the fieldname that identifies the field |
| Label | Label to show above or in front of the input line |
| Placeholder | This is a display value only that will show until a user has started to fill in text. A typical value could be |
| Initial value | This is a initial value when the smartform is created. Could be used when for instance the value is most likely to be a certain value. |
| Helper text | This is the help text associated with the field when doing a mouseover |
| Required field | An error message will show if the field is not filled in. |
| Read Only | Not possible to enter values into the field. |
| Prevent data insert | Prevent data to be inserted through an external API. |
| Background | Background color for the input field. Default is white. |
| Label top | If not clicked the label will show in front. Otherwise above the input field |
| Lines | Default number of lines that the text area shall contain. |
| Hide label | Label is hidden when checked |
| Rounded corners | Input box get rounded corners if checked |
| Border color | Color of borders for the input field. Default is black |
| Border | Select which sides of the text that should include borders and their thickness. |
| Color | Text color. Default is black |
| Dependencies | By adding a checkbox to the smartform, you can set that this checkbox has to be checked in order to see the input field |
| API retrieve | API defined in the API template on general level that will get the input field value upon change and then be able toretrun or update other fields in the smartform by useing their properties and setting their values. |
| Label color | Text color for label |
| Label size | Text size for label |
| Label alignment | Left, Center or right alignment of the label |
| Label Bold, Italic, Underline | Defining text style for the label |
List
A List is a set of alternatives that is offered in a list. Each alternative has an description to it.
| Item | Explaining |
|---|---|
| Property | This is the fieldname that identifies the field |
| Label | Label to show above or in front of the input line |
| Helper text | This is the help text associated with the field when doing a mouseover |
| Items | Here you can specify the items in the list with display values, Id values and description text. Press the edit items button to access the list |
| Required field | An error message will show if the field is not filled in |
| Read Only | Not possible to enter values into the field |
| Prevent data insert | Prevent data to be inserted through an external API |
| Rounded corners | Input box get rounded corners if checked |
| Border color | Color of borders for the input field. Default is black |
| Border | Select which sides of the text that should include borders and their thickness |
| Label Color | Text color for label |
| Label size | Text size for label |
| Label Bold, Italic, Underline | Defining text style for the label |
| Description Color | Text color for the description to the list item |
| Description size | Text size for the description text |
Order Table
An order table is a special constructed element for creating an order table with all the properties connected.
| Item | Explaining |
|---|---|
| Property | This is the fieldname that identifies the field |
| Columns | Definition of columns in the order table. ( like Item, product number, quantity, price per unit etc. ) |
| Items | Default values into the table |
| Add sum row | Decide if a sum row should show or not |
| Sum | default value for Sum. |
| Add discount | Discount row will be added |
| Discount | Default value for discount |
| Add VAT row | VAT row will be added to the table as a summarized VAT |
| VAT | Default VAT value |
| Border | Select which sides of the text that should include borders and their thickness. |
| Header Color | Text color for table header |
| Header size | Text size for table header |
| Label Bold, Italic, Underline | Defining text style for the table header |
| Item Color | Text color for items in order table |
| Item size | Text size for items in the order table |
Radio button
A radio button is very user friendly and can control a lot of the dynamics in a smartform.
| Item | Explaining |
|---|---|
| Property | This is the fieldname that identifies the field. Use the same name for the other radio buttons you would like to work together. If you got three radio buttons with choices, they should have the same property name but different values |
| Label | Label in front of the radio button |
| Helper text | This is the help text associated with the field when doing a mouseover |
| Connected elements | Items depending that will show if the radio button is checked |
| Color | Text color. Default is black |
| Alignment | Alignment of the radio button within the space it is positioned |
| Size | Text size for label |
| Bold, Italic, Underline | Define the style for label |
Resource
A resource is a link to an element that is stored in the resource menu under template. It is recomeneded to use this element instead of a bitmap. A bitmap will be included into the smartform while a resource is an external link to a bitmap in the resource repository. Using resources will improve performance for a smartform.
| Item | Explaining |
|---|---|
| Property | Property identifier for rich text element |
| Resource | Resource in the resource library |
| Size | Pixel size in the smartform |
| Rounded corners | If the element shall have rounded corners or not |
| Border color | Color for border |
| Border | Border thickness and positions |
| Alignment | Left, center or right alignment in the area where resource element is placed |
Rich text
A smartform can include a rich text editor to get more design into the text you would like to add.
| Item | Explaining |
|---|---|
| Property | Property identifier for rich text element |
| Height | Height of rich text field. Default is 300 |
| With | With of rich text field. Default is 500 |
| Enable for user input | User can write text into the smartform when this option is enabled |
Signature
This is famous mouse signature for people to sign a document by using their finger or mouse.
| Item | Explaining |
|---|---|
| Property | Property identifier for the signature field |
| Label | Label in above the signature field |
| Helper text | This is the help text associated with the field when doing a mouseover |
| Name | Name of person that will sign. Here it is smart thing to use variables the will fill out this automatically. Like this {{ name }}. See the section in this document about variables. |
| Required field | Decide if the field is required to fill out or not. |
| Read Only | Decide if this is a read only field or not. |
| Color | Text color. Default is black |
| Size | Text size for label |
| Element height | Hight of signature field. Default is 152 |
| Border color | Color of border around the signature field |
| Border | Size of the border |
Smart Table
A smart table is an element that needs a smarttable object. This is a pre requisite. You can create the smart object from the Template menu.
| Item | Explaining |
|---|---|
| Property | This is the fieldname that identifies the field |
| Connect Smart Object | Available smart object definitions that can be connected to the smart table |
| Heading | Header of smart table |
| Description | Description following after the header |
| Max rows | Maximum number of rows a user can add to the smart table |
| Show row numbers | Show row number in the first column |
| Border color | Border color for smartform |
| Border | Border size and locations |
| Columns | You can restrict which columns should show in a smart table or not. If the smart object got 10 columns it might be smart to only show the 5 most important ones in the table |
| Header Color | Text color for table header |
| Header size | Text size for table header |
| Body color | Text color for the cell values |
| Body size | Text size for the cell values |
| Stripes rows | Make every second row have a different background color |
| Stripes odd | Color for every odd row |
| Strips Even | Color for every even row |
| Button label | Text to show on the “Add Item” button |
| Text color | Text color for button |
| Button background | Background color for the button |
Submit
This button will close the smartform for more editing and pass it back to the system for further actions.
| Item | Explaining |
|---|---|
| Property | Property identifier for button |
| Name | Text to show on button |
| Message | A message to show after button ha been pressed. Like “Thank you for filling out the form. We will soon contact you” |
| Helper text | A help text will show when you do a mouseover |
| Background color | Button background color. Default is black |
| With | Button with |
| Rounded corners | Give button rounded corners |
| Border color | Color of border around the button |
| Border | Size of the border |
| Text color | Color of button text |
| Text size | Size of text showing on button |
| Alignment | Aligning the button in the cell where it has been placed. Can be aligned to the left, center or to the right |
Spacer
A spacer is used to create space in between elements. The spacer is transparent and the only thing it does is to take up space.
| Item | Explaining |
|---|---|
| Height | Height of the spacer |
| With | With of the spacer |
Switch
A switch is an alternative to a checkbox in order to select or deselect an alternative
| Item | Explaining |
|---|---|
| Property | This is the fieldname that identifies the field |
| Label | Label to show above or in front of the input line |
| Helper text | This is the help text associated with the field when doing a mouseover |
| Read Only | Not possible to enter values into the field |
| Prevent data insert | Prevent data to be inserted through an external API |
| Default state | Decide if default state of the check box should be checked or not |
| Color | Text color. Default is black |
| Label Color | Text color for label |
| Alignment | Align the switch to left, center or right in the cell |
| Label size | Text size for label |
| Bold, Italic, Underline | Define the style for label and descriptions |
Text
A text is text to show in a smartform without any user interaction other than reading the text. You cannot define individual part of a text to be bold, italic etc. The whole text value will use the properties as selected. If it is important to include different text layouts within the same element you should use the rich text element instead.
| Item | Explaining |
|---|---|
| Property | This is the fieldname that identifies the field |
| Value | This is the value of the field |
| Helper text | This is the help text associated with the field when doing a mouseover |
| Rounded corner | If borders are used you can also tell that the borders should have rounded corners |
| Border color | Color of the border |
| Border | Select which sides of the text that should include borders and their thickness |
| Color | Text color. Default is black |
| Size | Text size |
| Alignment | Aligning the text to the right, middle or left |
| Bold | Make the text bold |
| Italic | Make the text Italic |
| Underline | Make the text underline |
| Icon | Show a selected icon in front of the text |
Time Picker
A time picker will pick the time in hours, minutes and seconds. You can choose between 12 or 24 hour display of values.
| Item | Explaining |
|---|---|
| Property | This is the fieldname that identifies the field |
| Label | Label to show above or in front of the input line |
| Placeholder | This is a display value only that will show until a user has started to fill in text |
| Helper text | This is the help text associated with the field when doing a mouseover |
| Required field | An error message will show if the field is not filled in |
| Read Only | Not possible to enter values into the field |
| Prevent data insert | Prevent data to be inserted through an external API |
| Background | Background color for the input field. Default is white |
| Label top | If not clicked the label will show infront. Otherwise above the input field |
| Lines | Default number of lines that the text area shall contain |
| Rounded corners | Input box get rounded corners if checked |
| Border color | Color of borders for the input field. Default is black |
| Border | Select which sides of the text that should include borders and their thickness |
| Color | Text color. Default is black |
| Label Color | Text color for label |
| Label size | Text size for label |
Video
This feature will add a video to be embedded into the smartform. We got special support for YouTube and Vimeo videos.
| Item | Explaining |
|---|---|
| Property | Property identifier for the bitmap element |
| URL/Video ID | A video will be specified by a URL for YouTube or any stream server. Vimeo videos has a build in player in smartforms and you will only have to enter the Vimeo ID (Not the full URL) |
| Autoplay | Start playing as soon as the smartform runs |
| Continuous play | When reaching the end of the video it will start from the beginning again |
| With | With of video window |
| Height | Height of video window |
| Rounded corners | Show video window with rounded corners |
| Border color | Border color around the video |
| Border | Border size and which sides of the video window that should have borders |
| Alignment | Define if you would like to align the bitmap to the left, in center or to the right in the cell where you placed it |
Matrix
The Matrix displays data in a customizable table format, enabling organized data entry, reporting, and interaction
| Item | Explaining |
|---|---|
| Property | Property identifier for the element |
| Items | Edit the items |
| Required field | Participants need to fill this element out |
| Read only | Participants can only read this element, not enter data or enter. |
| Show row number | Show the row number on rows |
| Workflow Retrieve | Retrieve values from Workflow |
| Color | Text color |
| Size | Text size |
| Bold | Make the text bold |
| Italic | Make the text Italic |
| Underline | Make the text underline |
Map
This feature adds a map with a dropdown for choosing locations. The locations can be filled from Api.
| Item | Explaining |
|---|---|
| Property | Property identifier for the element |
| Label | Choose a label for the form |
| Api Retrieve | Retrieve map locations (coordinates) from API |
| Hide dropdown | Hide the dropdown |
| Color | Text color |
| Width | Text size |
| Bold | Make the text bold |
| Italic | Make the text Italic |
| Underline | Make the text underline |