Controls

General Info

Controls are elements designed to give you more control over your forms. They allow you to customize the look of the form and add interactivity to it. Controls aren't fields as they do not store information, though some controls rely on user input.

Plain Text

Plain Text control is used to add text to your form, for information that you want to convey to the user. Even though it's a plain text control, you can still format the text and apply styles to it.

Plain Text

Plain Text properties

Every Plain Text control has the following settings:

SETTINGS

InternalName Setting utilized by many elements. InternalName is similar to ID, it's a unique identifier for the element.

LAYOUT

Type Here you can select the type of the text you are entering - either Text or Header 1, Header 2, or Header 3.
Text Allows you to type in or copy in the exact text you want to display on the form.
Color Allows you to set text's color.
CSS Class Give CSS Class to the element, in order to apply JavaScript or CSS Style to it. Can give multiple classes separated by spaces to one element.
Style Allows you to give specific element certain style. No need to use selectors, simply add CSS rules to this setting.

Rich Text

Rich Text control is also used to add text to your form, just like Plain Text control. Unlike Plain Text control, Rich Text control comes with an editor which allows you to style your text without relying on CSS.

Plain Text

Rich Text properties

Every Plain Text control has the following settings:

SETTINGS

InternalName Setting utilized by many elements. InternalName is similar to ID, it's a unique identifier for the element.

LAYOUT

Text Allows you to type in or copy in the exact text you want to display on the form. When editing, opens up an editor screen in Designer.
CSS Class Allows you to give CSS Class to the element, in order to apply JavaScript or CSS Style to it. Can give multiple classes separated by spaces to one element.
Style Allows you to give specific element certain style. No need to use selectors, simply add CSS rules to this setting.

Image

Image control allows you to add images to your forms. Image can either be used as decoration or as a link.

Image

Image properties

Every Image control has the following settings:

SETTINGS

InternalName Setting utilized by many elements. InternalName is similar to ID, it's a unique identifier for the element.

IMAGE

Source Allows you to specify the URL of an image here.
Height Allows you to set the Height of the image.
Width Allows you to set the Width of the image.
Alt Allows you to specify an alternate text for an image here.
CSS Class Allows you to give CSS Class to the element, in order to apply JavaScript or CSS Style to it. Can give multiple classes separated by spaces to one element.
Style Allows you to give specific element certain style. No need to use selectors, simply add CSS rules to this setting.

HYPERLINK

Href Specify the URL of the page clicking the image sends user to. Leave blank if not needed.
Target Specify where to open the linked document. _blank will open in a new tab.
OnClick Add JavaScript to execute when image is clicked. If no link is used, add event.preventDefault(); prior to your JS.

HTML

HTML control allows you to add absolutely any HTML code to your forms. Can be used for variety of reasons, including loading of JavaScript files, creating hidden fields, etc.

HTML

HTML properties

Every HTML control has the following settings:

LAYOUT

Content Allows you to specify HTML contents here.

Ink Sketch

Ink Sketch control behaves more similarly to a field. It allows users to draw or leave their input by holding down mouse key and dragging the mouse across the control. Can be used for signatures, drawings, marking details over a background image, etc.

The data is stored in the session state, once the browser is closed, it is purged. The data is also sent on Form submission using Microsoft Flow, like other fields' data.

Ink Sketch

Ink Sketch properties

Every Ink Sketch control has the following settings:

SETTINGS

InternalName Setting utilized by many elements. InternalName is similar to ID, it's a unique identifier for the element.

LAYOUT

Readonly If True, prevents users from being able to change content manually.
Height Allows you to set the Height of the control.
Width Allows you to set the Width of the control.
Ink Color Allows you to set the color of drawing done by the user.
CSS Class Allows you to give CSS Class to the element, in order to apply JavaScript or CSS Style to it. Can give multiple classes separated by spaces to one element.
Style Allows you to give specific element certain style. No need to use selectors, simply add CSS rules to this setting.

Button

Button control allows you to add buttons to your forms. Can be used to execute JavaScript on click.

Bootstrap classes can be used to give different buttons unique look. You can read more here.

Buttons

Button properties

Every Button control has the following settings:

SETTINGS

InternalName Setting utilized by many elements. InternalName is similar to ID, it's a unique identifier for the element.
OnClick Add JavaScript to execute when button is clicked.

LAYOUT

Text Allows you to type in or copy in the exact text the button will display on the form.
Width Allows you to set the Width of the button.
CSS Class Allows you to give CSS Class to the element, in order to apply JavaScript or CSS Style to it. Can give multiple classes separated by spaces to one element.
Style Allows you to give specific element certain style. No need to use selectors, simply add CSS rules to this setting.

Submit

Submit control allows you to add submit button to your forms. It's actually just a button control which already includes JavaScript necessary to save and submit the Form on click, but you can also add your custom code or customize the Submit control just like any other button.

Submit

Captcha

Captcha allows you to protect your forms from being submitted by bots and thus putting extra pressure on your Flows and polluting your data. A must have if you want to publish your form on a public website.

Our captcha is based on Google's ReCAPTCHA, so you will need to get a SiteKey from here before you can use it.

Note: Captcha is available in Forms starting with version 1.0.2

Captcha

Captcha properties

Every Captcha control has the following settings:

SETTINGS

InternalName Setting utilized by many elements. InternalName is similar to ID, it's a unique identifier for the element.
SiteKey Your public key for the ReCAPTCHA. Get it here.

LAYOUT

Size Allows you to select between Normal and Compact size for the Captcha.
Theme Allows you to select between Light and Dark theme to better suit your form.

DataTable

DataTable is a control which allows you to add dynamic table to your forms. This control is based on kendoGrid.

You can set up how many columns the table has and their type, and the users will be able to add entries to this table.

Most configuration for DataTable can be done by editing individual column settings. To add a new column, simply click on the plus symbol:

Add column to DataTable

DataTable can be easily submitted to MS Flow and you can use its data as you see fit including creation of HTML tables or SharePoint items.

Note: DataTable is available in Forms starting with version 1.0.3

DataTable

DataTable properties

Every DataTable control has the following settings:

SETTINGS

InternalName Setting utilized by many elements. InternalName is similar to ID, it's a unique identifier for the element.

DataTable Column properties

Every DataTable Column has the following settings:

SETTINGS

Title Allows to set the title of the column.
Type Allows to select the type of the data for the column - can be either String, Number, Boolean, Date or Dropdown.
Required Allows to set the column as mandatory for the record to be added.
InternalName Setting utilized by many elements. InternalName is similar to ID, it's a unique identifier for the element.

LAYOUT

Width Allows you to set the Width of the column.

List or Library

List or Library is a control which allows you to view, edit, add or delete items or documents to related SharePoint List or Document Library from within the form.

This control is extremely powerful and versatile - it supports filtering, selecting root folder, uploading multiple documents at once and much more.

Note: List or Library is available in Forms starting with version 1.0.5

List or Library control

List or Library properties

Every List or Library control has the following settings:

SETTINGS

DataSource

This setting allows you to select which List or Library will be used as Source, which View will be shown on the form.

It also includes Lookup Field - if Source List has Lookup list to form's list, items will be automatically filtered by it.

Newly created items will get automatically assigned with the current item ID in this Lookup. New Form needs to be saved first.

InternalName Setting utilized by many elements. InternalName is similar to ID, it's a unique identifier for the element.
Readonly Prevents user from being able to add new items, edit or delete existing ones.
RootFolder Type in the name of the folder inside List or Library and user will only be able to see its contents inside the control.