Text Input

This article describes how to configure the text input component and each of its properties.

The text input component enables the user to add text information to a Squirrel project, this could be personal details, statistical data etc.

Select text input from the text category of the component library. Move the mouse cursor over the canvas and click to add a text input to your project:

Text Input Properties

The text input properties consist of DATA INSERTION, STYLING and DYNAMIC VISIBILITY drawers. This guide will not describe the dynamic visibility properties as these are generic to each visible component, a separate guide and tutorial on dynamic visibility can be found here.

DATA INSERTION:

• Destination – Bind this property to a cell in the spreadsheet. Any text input by the user will then be stored in that cell.

INPUT OPTIONS

• Treat input as text – Checking this option ensures that all input, including numeric data, is inserted in the spreadsheet as a text string.

• Protect password – Checking this option will ensure that data entered into this input field will be masked/obscured.

• Characters allowed – Restrict the characters that the user is able to input. Either bind to a cell in the spreadsheet that contains a set of characters to be used or type the characters into the property field. Adding 1234567890 to this property will restrict the user to only being able to type numbers into the input field; typing an uppercase alphabet will restrict the user to only entering uppercase letters and so on.

• Set max number of characters – Check this property to restrict the number of characters that a user is able to input.

• Max length – The property is only available when the Set max number of characters property has been checked. Bind to a cell in the spreadsheet containing an integer value, or type an integer value into this property to restrict input to that amount of characters.

STYLING

INPUT TEXT

• Placeholder text – This is the text that will be displayed in the text input component prior to the user inputting a different value. The default is Enter text.

• Font – Choose a font style from the dropdown list

• Size – Change the font size of the input text in 3 ways:

  • Using the spinner buttons

  • Typing in a value

  • Binding to a value in a spreadsheet cell

• B I U – Use these toggle buttons (bold, italic, underline) to change the format of the input text. When toggled to on, the button is blue:

• Text color – The input text will be shown in the colour that matches the value entered in the property field. This can be set in 3 ways:

  • Clicking the coloured rectangle and using the colour picker

  • Typing in a colour value

  • Binding to a colour value in a spreadsheet cell

• Opacity – This determines the transparency of the input text. This property can be set in 3 different ways:

  • Using the spinner buttons

  • Typing in a value

  • Binding to value in a spreadsheet cell

• Text alignment – Choose to align the input text to the left, right, or centre. The current selection is indicated by the blue button:

• Padding – This property defines the space between the input text border and the input text. It can be set in 3 ways:

  • Using the spinner buttons

  • Typing in a value

  • Binding to value in a spreadsheet cell

BACKGROUND

• Fill – When checked, the background of the input text will be filled with a colour that matches the value entered in the property field. This can be set in 3 ways:

  • Clicking the coloured rectangle next to the Fill checkbox and using the colour picker

  • Typing in a colour value

  • Binding to a colour value in a spreadsheet cell

• Opacity – This determines the transparency of the background of the input text. This is only available when the Fill checkbox is checked. Opacity can be set in 3 different ways:

  • Using the spinner buttons

  • Typing in a value

  • Binding to value in a spreadsheet cell

• Border – This property is unchecked by default. Check to add a border to the input text. Set the colour and opacity properties as above.

LABEL TEXT

This entire LABEL TEXT property section of the STYLING drawer can be checked on or off. The default setting is off.

Selecting LABEL TEXT to checked will show a label adjacent the input text:

• Label text – This field contains the text that will be displayed as a label adjacent to the input text. This can be set in two ways:

  • Typing text, or pasting text directly into the property field

  • Binding to a cell, or range of cells, in the spreadsheet

• Font – Choose a font style for the label text from the dropdown list

• Size – Change the font size of the label text in 3 ways:

  • Using the spinner buttons

  • Typing in a value

  • Binding to a value in a spreadsheet cell

• B I U – Use these toggle buttons (bold, italic, underline) to change the format of the label text content. When toggled to on, the button is blue:

• Text color – The label text will be shown in the colour that matches the value entered in the property field. This can be set in 3 ways:

  • Clicking the coloured rectangle and using the colour picker

  • Typing in a colour value

  • Binding to a colour value in a spreadsheet cell

• Opacity – This determines the transparency of the label text. This property can be set in 3 different ways:

  • Using the spinner buttons

  • Typing in a value

  • Binding to value in a spreadsheet cell

• Text alignment – Choose to align the label text to the left, right, or centre. The current selection is indicated by the blue button:

• Capitalisation – Change the letter case of the label text content to either uppercase first letter, all uppercase letters or all lowercase. Deselecting all of the buttons will return the content to its original case format. The current selection is indicated by the blue button:

• Position – Select an option from the dropdown box to change the label position. The options are top, where the label will sit above the input text, or left where the label will sit to the left of the input text.

• Padding – This property defines the space between the label text and the label text content. It can be set in 3 ways:

  • Using the spinner buttons

  • Typing in a value

  • Binding to value in a spreadsheet cell