Table of Contents

Textbox

Overview

Textbox is the name used to describe an input element that accepts a string of text with no line breaks.

To add a Textbox element, go to Base Types > Textbox and add it to the canvas.

To add a prebuilt Label / Textbox prebuilt custom type, go to Custom Types > Common: Label | Textbox and add it to the canvas.

Type of Data Stored

A Textbox stores a string of text with no line breaks or styling.

A Textbox is capable of storing up to 4000 characters, including spaces and punctuation.

A Textbox has no limit on the type of characters that can be inputted.

A Textbox has no line wrapping. If the text entered in a Textbox exceeds the width of the textbox, it will be hidden on the right side of the textbox. Navigating the caret to the right will make the Textbox content scroll, however clicking off of the Textbox will make it scroll back to the beginning.

Attributes

Attribute Description
description This is the description of the element used by other modules in the clevr platform. For more information on how description is used, please read this article.

A description should be placed on all input elements, to allow them to be identifiable in those modules.

maxlength This is a definable input character limit below the default limit of 4000 characters. This limit includes spaces and punctuation.

If a maxlength greater than 4000 is defined, it will be ignored and the default maxlength of 4000 will apply.

placeholder This is an temporary hint that can be displayed in a datepicker before content in inputted. When using placeholder, do not place important information about what the inputted data represents, as once the element is populated the placeholder will disappear.

For more information on the proper use of placeholders, please read this article.

date-format

This attribute defines how date formats are read and written to this textbox when using functions such as updateDate and toDate.

It does not place a restriction on the users ability to input a value. If the value of the element does not match the date-format, the functions will not be able to read the values as a date.

The attribute can define any combination of the following groups:

  • d – day of month (no leading zero)

  • dd – day of month (two digit)

  • o – day of the year (no leading zeros)

  • oo – day of the year (three digit)

  • D – day name short

  • DD – day name long

  • m – month of year (no leading zero)

  • mm – month of year (two digit)

  • M – month name short

  • MM – month name long

  • y – year (two digit)

  • yy – year (four digit)

  • @ – Unix timestamp (ms since 01/01/1970)

  • ! – Windows ticks (100ns since 01/01/0001)

  • ‘…’ – literal text

  • ” – single quote

  • anything else – literal text

is-date-picker

When this attribute is set to true, it will indicate to other modules within clevr that this Textbox should be treated as a datepicker and that it is storing date information.

If this attribute is applied, then the values will have to be inputted in a yy-mm-dd format or the other modules will not understand how to parse them as dates.

disabled

This will disable the element and prevent modification for all roles, regardless of applied permissions.

The disabled attribute should only ever have the value “true” applied. A value of “false” will still make an element disabled.

The disabled attribute differs from readonly as it visually greys-out the element to indicate that it is disabled. Utilizing disabled is preferrable to readonly, as it provides visual feedback to the user for why they can’t modify the element.

readonly

This will disable the element and prevent modification for all roles, regardless of applied permissions.

The readonly attribute should only ever have the value “true” applied. A value of “false” will still make an element readonly.

The readonly attribute differs from disabled as it provides no visual feedback to the user that the element can not be modified. Utilizing disabled is preferrable to readonly, as it provides visual feedback to the user for why they can’t modify the element.

shadowId

This attribute will cause this element to be populated with the value of another element, if the element has never had a value applied in the current record.

A value applied to an element, even if blank, will override the value coming from the shadowId. For this reason, we recommend applying the class = “unhook” which will prevent the value from saving its own value.

For more details on shadowId, please read this article.

Other attributes may be applicable to Textboxes, such as searchable, bulkdataentry, SIS Data Import, and attributes related to Data Tables. Information on the use of those attributes can be found in the applicable lessons.

Import Data

Textboxes are an ideal element to use Import Data into. Because they store a string of text, they can store any data that is being sent by your SIS or stored in the demographics file your organization provided to clevr.

For more information about setting up elements for Import Data, please read the lesson called “SIS and GDI Import” in Level 2.

Compatible Common Functions

The following common function are compatible with with Textboxes:

  • Input Mask
  • updateAge
  • formCalc
  • elementsToArrayOfStrings
  • updateVal
  • updateDate