Text Input

This article describes how to configure the Text Input component and each of its properties.

Squirrel 1.12 introduced a “Quick Set-up” tab on many property panels. The properties described on this page are available on the “All Properties” tab of the property panel. For more details on “Quick Set-Up” properties see this article

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 can 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 can input.

STYLING

INPUT TEXT

  • Placeholder text – This is the text that will be displayed in the Text Input component before the user inputs a different value. The default is Enter text.

  • Font – Choose a font style from the dropdown list

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

    • Clicking the colored rectangle and using the color picker

    • Typing in a color value

    • Binding to a color 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

  • 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 color that matches the value entered in the property field. This can be set in 3 ways:

    • Clicking the colored rectangle next to the Fill checkbox and using the color picker

    • Typing in a color value

    • Binding to a color 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

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 check will show a label adjacent to 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

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

    • Clicking the colored rectangle and using the color picker

    • Typing in a color value

    • Binding to a color 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

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

  • 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

Last updated

Logo

Copyright © 2019 - 2024 InfoSol Ltd. All rights reserved.